creando prototipo y maqueta web en photoshop

CREANDO PROTOTIPO
Y MAQUETA WEB
EN PHOTOSHOP
Ps
INGENIERA: María Cristina Carrillo
CARRERA: IV CICLO DISEÑO GRÁFICO

INTEGRANTES
Diego Quezada
Jhon Hualpa
Moises Guamán
OBJETIVO: Planifica y prepara prototipos y maquetas web
destinadas a la creación de contenido web mediante ejemplos
de sitios web ya existentes
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

PLANEANDO EL PROYECTO
1
PLANEANDO EL PROYECTO
Para empezar a crear un prototipo o maqueta
web en photoshop primeramente realizamos
un pequeño boceto del sitio a crear, el
cual va ha contener el encabezado
un contenido y un pie de pagina,
así mismo en ésta fase se
creará un documento en
photoshop, las dimensiones
para escritotio va ha ser de
1200 ancho x 2000 de alto;
aquí se designarán las
dimensiones concretas del
header, content, footer; las
sliders, imágenes , botones
así como también los colores
y la tipografia etc.
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

GUÍAS Y REGLAS
GUÍAS
Y REGLAS
2
Las guías y reglas son de mucha ayuda a la hora de maquetar una página web en
photoshop, éste en primera instancia nos sirve para colocar exactamente todos
los elementos que conforman una página web, primero el header o encabezado, el
content (contenido) y el footer
(pie de página), una vez que
ya hayamos creado el nuevo
ducumento con las dimensiones
para web pulsamos
ctrl+ r para visualizar las
reglas,
para insertar las guías simplemente hacemos clic
izquierdo en la parte donde aparece las reglas y
arrastramos presionando el botón izquierdo
del mouse hasta el lugar donde deseamos poner.
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

USANDO UN SISTEMA DE REJILLA
3
USANDO UN SISTEMA DE REJILLA
El sistema de rejilla está pensado para ayudarnos en la disposición
de los contenidos de nuestra web y su adaptación a los diferentes
tamaños de pantalla de forma automática. Para ello tenemos
que poner el contenido dentro de celdas o columnas que irán
dentro de filas. Cada fila se puede dividir hasta en 12 columnas,
pero seremos nosotros los que definiremos el número de columnas
deseado para cada tamaño de pantalla.
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

4
ESTRUCTURA CON FORMA DE CAPA
DESARROLLANDO
UNA ESTRUCTURA
CON FORMAS DE CAPA
Una vez que tengamos insertadas las
guías en nuestro documento de photoshop
en la que diseñaremos la
pagina web, empezamos a crear
estructuras con formas de capa,
es decir donde insertamos en
este caso figuras tales como un
rectángulo el cual debe tener
las dimensiones exactas para
empezar ha maquetar primeramente
el encabezado, el
mismo procedimiento utilizaremos
para hacer el sliders contenido
de imagen ,texto ,vide, el
footer etc. cada uno de ellos con
sus respectivas medidas en pixeles.
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

5
AJUSTANDO AL PIXEL
AJUSTANDO
AL PIXEL
Para realizar un ajuste adecuado de todas las formas de capa que
realizamos en photoshop es necesario realizar un ajuste al pixel
de todas las formas en este caso los rectangulos ,los alinearemos
basándonos en las guías que hemos agragado previamente
y los ajustaremos para que todos estén ubicadas adecuadamente,
para ello simplemente pulsamos la forma luego pulsamos las
teclas ctrl + a y vemos todas las posibilidades de alineacion, tanto
alineación en horizontal, vertical así como también la distribución
de centros de forma horizontal y verical.
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

EMPEZANDO POR EL PROTOTIPO
6
EMPEZANDO
POR EL PROTOTIPO
DE NUESTRA MAQUETA WEB
Iniciamos nuestro proyecto web partiendo de un prototipo muy
básico que nos sirva de guía para definir aspectos muy importantes
en los cuales se ubicarán de manera exacta los siguientes
elementos como el logo las imagenes , el fondo etc, esto es fundamental
para empezar ya ha maquetar nuestra página con contenido
real.
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

7ORGANIZANDO LA E. DE PÁGINA
ORGANIZANDO
LA ESTRUCTURA DE PÁGINA
Para empezar ha organizar la estructura en
grupos de capas , es decir el contenido y
las secciones ; en éste caso primeramente
se crea en en panel capas una carpeta con
el nombre de cabecera, en el estarán los
siguientes elementos tales como el logo el
menú navegación etc; seguidamente creamos
una carpeta con el nombre de contenido
inicio ( la página de inicio), paso seguido
creamos otra carpeta con el nombre de
contenido acerca de, otra carpeta de contenido
tienda, contenido contacto y una de
pie de página todos los elementos han de
ser ubicados en sus respectivas carpetas
para una buena gestion y organización, si
en el caso de que querramos editar en un
futuro por ejemplo el contenido tienda lo
harémos de manera más ágil mediante
ésta estructura de página.
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

AÑADIENDO ELEMENTOS MAESTROS
8
AÑADIENDO
ELEMENTOS MAESTROS
En éste apartado veremos como incluir los
elementos comunes a todas las secciones
de la página web tales como el logotipo, el
menú navegación el color de fondo de la
página etc. primeramente vamos ha añadir
el logotipo én este caso puede ser el logo
que hemos realizado en ilustrador lo
importamos a photoshop y lo ubicamos en
la capa de forma llamada “logo” y
tratamos de ajustar correctamente;
luego añadimos capas de
texto para escribir los
elementos del menú navegación
tales como inicio,
acerca de, tienda y contacto
los agrupamos en una
carpeta con nombre de
“navegación ”lo ubicamos
debajo de la cabecera ,
para cambiar el color de
fondo de la página , procedemos
ha elegir el color en el
panel de muestras,hacemos clic
y pulzando las teclas alt+back
space la cual nos permitirá aplicar el
color elegido o su vez nos podemos ir al
menú edición pulsamos “rellenar ” luego
elegimos color frontal y pulsamos ok para
aplicar los cambios.
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

TRABAJANDO CON FOTOGRAFÍAS
9
TRABAJANDO
CON FOTOGRAFÍAS
El uso de imágenes con poca resolución,
es decir, pixelada es un
grave error. Hoy en día las
imágenes son el primer
reclamo de atención,
primero miramos y luego
leemos; maquetar no es
poner imágenes y
textos al azar. Requiere
una fase de reflexión,
organización y esquematización
donde se
armonizan todos los
elementos intrínsecos al
diseño para hacer llegar a
nuestro público objetivo.
Para ubicar fotografías en la
maquetación se lo puede representar
con formas como es el cuadrado
esto dependerá mucho de el diseño de la
fotografía que se vaya a representar, pero siempre
tiene que estar dentro de un orden.
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

TRABAJANDO CON TEXTO
TRABAJANDO
CON TEXTO
10
Cuando se introduce texto de párrafo,
las líneas de texto se ajustan para
adaptarse a las dimensiones del
cuadro delimitador. El texto del
marcador de posición lorem
ipsum permite rellenar rápidamente
un bloque de texto para
realizar pruebas de maquetación.
Al momento de maquetar
un sitio web la herramienta de
texto lorem ipsum es muy recomendada
por que permite insertar
texto de manera rápida que
nos facilita para crear un prototipo
de cómo sería el uso de texto dentro
del sitio que estamos creando.
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

CREANDO CONTENIDO DE RELLENO
11
CREANDO
CONTENIDO DE RELLENO
El contenido de las páginas web es cada vez más
variado, dependiendo la aplicación y el objetivo
de la página de internet, se recomienda diferente
tipo de contenido, este puede ser texto estático,
fotos, videos, animaciones flash,
efectos javascript, etc. No se debe
abusar de la información textual,
ya que son muy pocos
visitantes que se leen completamente
una página
Web. A si mismo todos
estos elementos se los
representa en la maquetación
con formas dependiendo
de lo que vamos a
representar, se usara diferentes
formas con distintos
tamaños.
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

CREANDO BOTONES
CREANDO
BOTONES
12
las posibilidades que nos ofrecen las herramientas dentro de
Adobe Photoshop, se incluye la idea de que podamos crear algo
nosotros mismos desde cero. Photoshop ya viene con elementos
cargados, pero podemos personalizarlos o inventarlos.Una de
estas opciones es la creación de botones para diferentes usos
entre ellos es la creación de botones para una página web, es muy
fácil de crear utilizando las múltiples formas que nos brinda Photoshop,
podremos personalizarlo dependiendo de la creativa.
CREANDO PROTOTIPO Y MAQUETA WEB EN PHOTOSHOP

CONCLUSIÓN:
Se pudo determinar que gracias a los conocimentos
adquiridos en lo que respecta a
“Creando prototipo y maqueta web en photoshop”se
realizó y preparó prototipos y
maquetas web las cuales son destinadas a
la creación de contenido web basándonos
en los sitios web ya existentes.
BIBLIOGRAFÍA:
-https://cristhyca.wordpress.com/2017/05/22/clase-10-como-crear-prototipo-y-maqueta-en-photoshop/
-https://hipertextual.com/2017/03/crear-los-mejores-prototipos-paginas-apps-moviles
-https://www.video2brain.com/mx/tutorial/empezando-por-el-prototipo-de-nuestra-maqueta-web