CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

DISEÑO GRÁFICO
Y MULTIMEDIA
CREANDO PROTOTIPO
Y MAQUETA WEB EN
PHOTOSHOP
DISEÑADOR GRÁFICO

OBJETIVO
Planifica y prepara prototipos y maquetas
web destinadas a la creación de contenido
web mediante ejemplos de sitios web ya
existentes.
Planeando el Proyecto.
Guías y Reglas.
Usando un sistema de rejilla.
Desarrollando una estructura con formas
de capa.
Ajustando al píxel.
Empezando por el prototipo de nuestr maqueta
web.
Organizando la estructura de página.
Añadiendo elementos maestros.
Trabajando con fotografías.
Trabajando con texto.
Creando contenido de relleno.
Creando botones.
Resolución ejercicios:
Prototipos y maquetas.

1
PLANEANDO EL PROYECTO
En primera instancia debemos bocetar nuestro proyecto a lápiz y papel, el cual
nos servirá como base de lo que va hacer el posterior sitio final, debemos tomar
en consideración que es lo que vamos a construir, como lo vamos a hacer, cual
es el público al que está destinado este sitio.
El boceto planteado en la imagen contiene una zona de cabecera, a continuación
una zona llamada slider para pase de diapositivas, debajo de este encontramos
una zona de videos,luego un párrafo de texto, a la derecha una imagen decorativa
y el proyecto de diseño se cierra con un pie de página.
Una vez pensada la idea de cómo va hacer el diseño tenemos que empezar
desde un documento nuevo, modificando una anchura, altura, resolución y color
y tendremos la base de nuestro diseño web, es a partir de ahí donde determinaremos
las posiciones y tamaños exactos de los elementos que va a componer
nuestro documento usando guías, sistemas de retículas o rejillas y sistemas vectoriales

2
GUÍAS REGLAS
Acerca de las reglas.
Las reglas le ayudan a colocar imágenes
o elementos de forma precisa.Cuando
están visibles, las reglas aparecen a lo
largo de la parte superior y a la izquierda
de la ventana activa.
Cambiar el origen de la regla (en las
reglas superior e izquierda) le permite
medir desde un punto específico de la
imagen.
El origen de la regla también determina el
punto de origen de la cuadrícula.
error.
Puede utilizar guías inteligentes para
facilitar la alineación de formas, sectores
y selecciones. Aparecen automáticamente
al dibujar una forma o crear una selección
o sector. Si prefiere, puede ocultar
las guías inteligentes.
Para mostrar u ocultar reglas, seleccione
Vista > Reglas o Control+R
Acerca de Guías.
Las guías y la cuadrícula le ayudan a
colocar imágenes o elementos de forma
precisa. Las guías aparecen como líneas
en la imagen, pero no se imprimen. Puede
mover y eliminar las guías. También
puede bloquearlas para no moverlas por

USANDO UN SISTEMA
DE REJILLA
3
Podemos abrir una plantilla de 12 columnas
que es un sistema que viene con
guias predefinidas y unas columnas de
un ancho de 60px con un espacio de 20
px.
De está manera podemos empezar a
maquetar nuestro prototipo basandonos
en dichas columnas.
Es importante destacar que
debemos crear documentos
con medidas que se
adapten a los diferentes
dispositivos como para
monitores tablets y para
móviles.
De esta manera podríamos empezar a
crear con la herramienta rectángulo la
zona de cabecera y definir una zona de
diapositivas e ir realizando poco a poco
nuestra maqueta de sitio web.
Luego en face de desarrollo nuestro
desarrollador emplea como base este
sistema de reticula para transladar el
diseño a formato HTML CCS.

4
DESARROLLANDO UNA ES-
TRUCTURA CON FORMAS DE
CAPA
Para el desarrollo de nuestra estructura nos vamos fijando en el boceto que hicimos
al inicio y así nos ubicamos en un documento nuevo empezando a crear la
zona de cabecera, continuando con el slider dirigiéndonos a la herramienta de
rectángulo ubicando las medidas correspondientes, nos dirigimos de las guías
para centrar los elementos en su lugar, seguimos con los recuadros de los videos;
empleamos la misma herramienta y hacemos un cuadrado y realizamos 6 copias
de este recuadro, creamos un párrafo de texto y un nuevo rectángulo para la
imagen que le acompaña al texto en el boceto realizado y así mismo para el pie de
página ajustando las determinados medidas.
En pocos pasos conseguimos un prototipo concreto que nos servirá para seguir
evolucionando nuestro sitio web.
A continuación observaremos como quedo el resultado final de nuestro maquetado
en Photoshop.

5

6
AJUSTANDO AL
PIXEL
Este nos ayuda a corregir los errores como la alineación o disposición entre los
elementos para tener un mejor prototipado.
Para iniciar alinear los elementos se debe
trabajar con reglas, ya que estas nos ayudarán
a tener una medición exacta en cada
disposición del elemento.
El uso de las líneas guías son fundamentales
a la hora de realizar nuestro
prototipo, sirven para tener una buena
alineación entre los elmentos con más
precisión.
La alineación y el tamaño de cada elemento
deben restringirse a las líneas trazadas,
ya que de esto dependerá para lograr
una buena armonía entre los elementos
que se compone nuestra interfaz.

EMPEZANDO POR EL
PROTOTIPO
DE NUESTRA MAQUETA WEB
Iniciamos nuestro proyecto web partiendo
de un prototipo muy sencillo que nos
servira para definir los aspectos más
importantes.
De esta manera vamos a tener una guía
para determinar los márgenes o la posición
de elementos importantes como el
logotipo, gráficos, como va hacer el
fondo entre otros.
Utilizando el prototipo como la maqueta
básica para completar el diseño de la
7
página web a realizar, se determina los
márgenes, los espacios entre los
elementos de manera general que nos
servirá como guía para crear el diseño
final.

8
ORGANIZANDO LA
ESTRUCTURA DELCONTENIDO
Una vez que se tenga el prototipo que nos servirá como base, el primer paso que se
debe hacer es organizar de forma eficiente las capas que se va ir creando, el contenido
que se va ir incorporando a nuestro diseño web.
Asignaremos nombres a cada grupo por
ejemplo: cabecera en donde abarca el
logotipo, otro grupo llamado contenido_inicio
siendo la página inicial, otro de
contenido_acerca _de en donde contenga
datos del cliente, el siguiente contenido_tienda,
etc ., estos grupos nos ayudará
a tener un orden
de la información o el contenido que
tenga la página dependiendo de lo que
pida el cliente.
Este proceso no es obligatorio, pero nos
servirá en fases posteriores a localizar
de una manera más facil el contenido.

AÑADIENDO ELEMENTOS
-
MAESTROS
9
Al crear y construir nuestra visualización, llega
un punto en el que nos damos cuenta de que
hay elementos que merece la pena guardar,
para volver a utilizarlos más adelante.
Podemos guardar las visualizaciones, dimenciones
y medidas como elementos maestros
en el panel de activos. Cuando la app se pública
estos elementos maestros estarán disponibles
para otras personas en forma de visualización,
dimención y medida, lista para su uso.
Uno de los objetivos de crear y mantener
elementos es que otros usuarios exploren sus
propios métodos y direcciones en los datos,
además de lo que ya se ha proporcionado en
la app como hojas y vizualicaiones predefinidas.
Los usuarios podrán crear sus propias
visualizaciones.
Los elementos maestros son muy útiles ya
que es posible utilizar una dimensión principal
en tantas visualizaciones como se desee y
mantenerla en un solo lugar.
Todas las actualizaciones que se realicen en
el elemento maestro se aplicarán en todos los
casos de dicho elemento.

10
TRABAJANDO - CON
FOTOGRAFÍAS
Al incorporar fotografías es interesante
el poder incorporar este tipo de imágenes
como son las del prodcuto ya que los
clientes buscan fotos que se adapten a
sus necesidades.
Portafolio o galería
Es una muestra de nuestro trabajo, por
lo que debe reflejar nuestros puntos
fuertes.
Es normal e incluso interesante mostrar
trabajos sobre diferentes especialidades.
Impacto
Al cargar la página principal de toda la
web el visitante decidirá si tiene interés
por “explorarla” o pasa a otra página.
Disponemos de muy poco tiempo para
generar la atracción necesaria, así que
la página pricipal debe ser atractiva, y
no recargada.

TRABAJANDO CON TEXTO
11
En la solapa de la derecha de Carácter
Character se encuentra Párrafo| Paragraph,
y si clickeamos sobre la
misma se abrirá esta paleta. En la
misma podemos encontrar distintas
opciones de alineación del texto y
párrafos.
La herramienta texto funciona en
capas, es decir que cuando nos disponemos
a escribir un texto nuevo, se
creará automáticamente una nueva
capa.
Los caracteres que escribimos usando
la misma están compuestos por
píxeles en la resolución de la imagen
que trabajamos.
La barra de herramientas que
se encuentra en la parte superior
debajo del menú principal nos
ofrece otras opciones, las cuales
son las que más comúnmente usaremos
al momento de trabajar con texto.
Comenzando a escribir
Hay tres formas de crear texto una vez
seleccionada la herramienta: una es
haciendo click en el mouse directamente
en el lugar de la imagen y otro
dibujando una caja de texto manteniendo
presionando el botón del mouse.
Editando el texto
Si escribimos algún texto y después
queremos editarlo, podemos hacerlo
seleccionando las palabras con
el mouse, manteniendo apretado
el botón, y luego yendo a alguna de
las opciones, por ejemplo cambiar
el tamaño de los caracteres o el color.

12
Otra manera de modificar en forma
interactiva el texto es al presionar
Ctrl+T en Windows o Cmd+T en Mac.
Allí veremos que aparecen unos controladores
en cada esquina y en los puntos
medios, con los cuales podremos cambiar,
por ejemplo, el tamaño de lo escrito.
Manteniendo Shift presionado mientras
arrastramos con el mouse, vere mos
que las proporciones se mantienen, y
si hacemos lo mismo pero con la tecla Alt
en Windows u Option en Mac, la transformación
conservará su centro, hacia
afuera y no desde el controlador que
presionemos. También podemos combinar
las dos teclas para hacer una
transformación proporcional y manteniendo
el centro. Si presionamos el
botón derecho del mouse en Windows
veremos que aparecen más opciones
para transformar. En Windows y Mac
tendremos estas mismas opciones si
vamos a Edit->Transform|Editar->Transformar
Hay que definir una serie de palabras
clave para conseguir el mejor posicionamiento
ante los buscadores, respecto a
los temas que puedan ser usados para
-
buscar una página web y debemos ir
repitiendo estas palabras a lo largo del
contenido de la web (en la página principal,
en la pág. de servicios, etc.).
-
Estas opciones nos permitirán escalar el texto, rotarlo en forma arbitraria (o
exacta, si introducimos los datos en la barra superior de herramientas), deformarlo
con la función Warp, rotarlo a 180º o 90º y espejarlo horizontal o verticalmente

CREANDO CONTENIDO DE
RELLENO EN PHOTOSHOP
Sabemos que Photshop nos permite
incrustar un video pero no sería
una práctica eficaz, ya que nosotros
en nuestra maquetación no
necesitamos un contenido de este
tipo además nuestro archivo PSD
se haría muy pesado.
13
En este caso le vamos a dar una
estética mucho mejor que represente
a un video como en el ejemplo
que se muestra.
Para ello necesitamos una imagen
que incrustamos como objeto inteligente
en nuestra maquetación
dándole doble click en el conteni-
Le crearemos una capa nueva para
rellenarla de color negro y para
crear una especie de contenidos
bajándole la opacidad a nuestra
capa y añadimos un pequeño botón
de play en el centro con los tipos
de formas que nos dan.

14
Una vez seleccionadas las formas
a utilizar se las puede modificar a
gusto de cada uno, la centramos y
guardamos los cambios de contenido
despúes tenemos que colocar
nuestra imagen editada en
nuestra maquetación y así realizamos
un contenido de relleno para
cualquier maquetación
CREANDO BOTONES
Los botones son los elementos
más importantes en nuestra
página web al momento de interactuar
con los usuarios, los
cuales se los suele usar para comprar
y enviar, al momento de realizarlo
podemos ser muy creativos
utilizando todo tipo de colores
siempre y cuando estén acorde a
nuestra maquetación tomando en
cuenta las dimenciones al colocarlos.

15
También se le dará un estilo de
capa aplicando un efecto de
sombra según nuestro criterio.
texto se le puede dar un estilo de
capa, una sombra y obtendremos
nuestro botón creado.
Cuando ya tenemos colocado un
Aquel botón será nuestra base para
continuar maquetando, si deseamos
hacer una copia para ir creando
los siguientes botones ubicamos
los comandos control C control V y
cambiamos de nombre a los respectivos
botones.

16
RESOLUCIÓN EJERCICIOS
PROTOTIPOS Y MAQUETAS
En la presente imagen observamos
un prototipo de una página comercial
la cual hemos empezado con un
respectivo boceto, continuamente
utilizamos guías inteligentes, texto
falso o Lorem Ipsum y rectángulo.
y de ahora en adelante podemos
estructurar de una manera eficiente
varios prototipos para así poder maquetar
a futuro en el programa
Dreamweaver.
Lo importante de maquetar en Photoshop
es que podemos diseñar modelos
de prototipos a nuestro gusto,

17
BIBLIOGRAFÍA
Mediaactive. (2014). Aprender Dreamweaver CC con 100 ejercicios prácticos.
Barcelona, España: Editorial MARCOMBO, S.A.
JAVAJAN & COHEGI OFICIAL DISSENY GRAFIC. Guía para diseñadores
gráficos.
cataluña, España. Recuperado [04 de abril de 2017: 9:30 am] de:
http://xn--
guiadiseo-s6a.com/02_vocabulario.php
Olalde, Daniel. (2013). Dreamweaver CS6; Libro de formación oficial de
Adobe
System. Editorial ANALAYA MULTIMEDIA. Recuperado de:
https://es.scribd.com/document/211261196/cursodreamwea-
vercs6-130110223812-
phpapp01
Justin Seeley & Armando Sotoca. (2013). Diseño web con Photoshop:
Teoría y
práctica del trabajo con Photoshop para crear tus diseños web [DVD]. Recuperado
de: https://www.video2brain.com/mx/cursos/dreamweaver-cc-1-creacion-sencillade-sitios-web/contenido-del-curso

DISEÑADOR GRÁFICO