Práctica proyecto libertador con Photoshop
-
Upload
mario-rafael -
Category
Design
-
view
192 -
download
0
Transcript of Práctica proyecto libertador con Photoshop
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz
Práctica Dirigida 1: Página web en Photoshop
Tema: Diseño de una página web en Photoshop
Objetivo: Identificar las partes de una pantalla web y generar insumos (imágenes en mapa de bits) para el proyecto. http://www.delicious.com/
Remodelaremos la página del hotel 5 estrellas El Libertador, tomaremos como referencia el logotipo y los colores corporativos
1. Abriremos el Logo libertador.psd en Photoshop y revisemos los colores, selecciones la herramienta Cuentagotas(I) y damos clic
sobre el fondo gris y revisamos el color frontal de la paleta de herramientas
2. El color encontrado es Pantone Cool Grat 11 c, solo con dale Ok a la Biblioteca de colores vamos al panel de Muestras y le
damos clic sobre el espacio gris (ver flecha naranja) y aparecerá el cuadro de dialogo de Nombre de muestra de color: Gris
libertador.
1
2
3
4
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 3. De la misma forma haremos con el color rojo
4. Y también los añadiremos en el panel de Muestras
LA CABECERA 5. Abrimos la Pantalla 1.PSD
1
2
3
4
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 6. Vamos al panel de capas y creamos una nueva carpeta con el nombre CABECERA y una nueva capa que se llamara Base
7. Aquí se creará el color de fondo para los logotipos, trazamos con las Herramienta Marco Rectangular una selección como se
muestra en la imagen.
8. Seleccionamos un color gris claro, Pantone Cool Gray 3c
9. Y rellenamos presionando las teclas Alt+Supr.
1
2
Nuevo
o
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz
10. Pasamos al Logo libertador.psd y arrastramos el logotipo a la pantalla.
11. Y lo reducimos al alto de la cabecera al 30%
12. Ahora creamos una nueva capa (1) y hacemos una selección rectangular (2) el cual pintaremos con el segundo color corporativo
(3) con las teclas Alt+Supr. Después deseleccionamos presionado la tecla Ctrl+D
1 2
1
2
3
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 13. Agregaremos un grupos de trazos decorativos llamado Cintillo.ai
14. Ubicarlo entre las barras roja y gris
15. Y reducirlo al 70% y ubicarlo a lado derecho de la página
16. Para contrastar el logotipo sobre el fondo hacemos una selección sobre la mitad de logo, presionamos el botón de Bloquear
pixeles transparentes
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 17. Y rellenamos el color especial Gris libertador con la tecla Alt+Supr
18. Invertimos la selección (Mayus+Ctrl+I) y buscamos un color más claro de contraste seleccionaremos el PANTONE COOL GRAY 8C
19. Para mantener el blanco en el isotipo y el subtítulo, presionamos la tecla Alt y la herramienta marco rectangular sobre el área
de dichos elementos.
20. Y rellenamos la parte inferior del logotipo presionado Alt+Supr y Ctrl+D nos quedamos con el siguiente resultado
21. Le agregaremos un reflejo al logotipo, para eso duplicaremos (botón derecho sobre la capa) la capa y la voltearemos en forma
vertical
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 22. Y lo volteamos verticalmente
23. Para un manejo adecuado de las capas donde están los logos cambiemos los nombres a: Logo y Logo copia
24. A la capa Logo copia le crearemos una máscara de capa y con la herramienta degradado rellenamos la máscara como se ven en
la imagen
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 25. Ahora le daremos un destello al arco de logotipo, seleccionamos la Capa Base y vamos a Filtro>Interpretar>Destello
26. Ahora pasamos el texto del eslogan Vive la magia del Perú del archivo Logo libertador.psd
27. Y lo reducimos al 40%
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 28. Y le agregamos el rojo corporativo. Ctrl+clic sobre la capa Vive la magia del Perú, para hacer una selección, vamos a
Editar>Rellenar o Mayús+F5
29. Y Cmd/Control+D para deseleccionar
MENÚ PRINCIPAL
30. Seleccionamos la herramienta Texto en la paleta de propiedades buscamos el modelo Trajan Pro 12 puntos y cambiar el color negro, escribimos el menú: Inicio, Destinos, Promociones, Testimonios, Noticias, Nosotros, Prensa
31. Vamos ahora a crear pestañas, para eso usamos la herramienta Rectángulo redondeado y seleccionamos el color gris libertador corporativo y los dibujamos de la siguiente forma.
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 32. Cambiamos el nombre de Rectángulo redondeado 1 a Pestaña
33. Ahora duplicaremos la capa Pestaña. Cambiamos de herramienta Mover (V) y presionando la tecla Alt y seguidamente
Mayús para desplazar una copia hacia a la derecha de forma lineal, verificar que los espacio sean uniformes. Cambiamos el color
del texto a Blanco
34. De la misma forma copiaremos las Pestañas para todos los botones y quedara así.
35. Juntemos todas las capas Pestañas presionando Mayus (Shift) y después la tecla Ctrl+E
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 36. Y lo rasterizamos (Botón derecho sobre la capa Pestaña copia 13)
37. Sobre la capa rasterizada (Pestaña copia 13), hacer una selección rectangular sobre todos los botones como se observa en
la imagen.
38. Vamos al panel de capas y activamos el botón Bloquear pixeles transparentes
39. Ya tenemos la parte inferior de las pestañas, seleccionamos las capa texto del menú y la capa Pestañas (Ctrl+G)
1. Seleccionamos un
color Pantone Cool
Gray 9 C, y rellenamos
presionando las teclas
Alt +Supr
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 40. Le ponemos como nombre Botones press
41. Copiamos la capa texto y lo sacamos de la carpeta Boton press y creamos otro grupo que se llamará Botón Reposo
42. Ahora nos quedaremos con el botón de Inicio activado para eso haremos una selección con la herramienta por debajo de la
barra de menú (como se aprecia en la imagen)
43. Y después sumaremos otra selección sobre los otros botones. Presionamos la tecla Mayús
44. En el panel de capas presionamos el botón de mascara de capa y tenemos el siguiente resultado
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz
45. Seleccionamos la máscara de capa, lo invertimos (Cmd/Ctrl+I) y obtenemos el siguiente resultado
46. Ahora duplicamos el grupo de Botón Reposo, le cambiamos de nombre a Botón Rollover, seleccionamos y le ponemos el color
rojo libertador
47. Pintamos los textos de la capa Botón Reposo con el gris corporativo y lo subimos ligeramente con 3 espacios hacia arriba
48. También la carpeta de Botón Reposo la arrastraremos debajo de Botón press
49. Y ya tenemos los tres estados de los botones del menú principal
Buscador 50. Primero dividiremos en columnas la pantalla web, para eso usaremos la guías del Photoshop
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz
51. Utilizando la proporción de una de las columnas de la derecha, ubicaremos el buscador en el extremo superior derecho sobre la barra horizontal de color Rojo libertador. Para eso crearemos un nuevo grupo de capas que se llamará Buscador y que estará ubicado encima de los Botones. También crearemos una nueva capa llamada Buscar
Diseñaremos el Buscador semejante al modelo de Google.
52. Seleccionaremos la herramienta Rectángulo redondeado(U), en donde el color Frontal será Blanco (#ffffff)
53. Al lado le ponemos el texto “Buscar” utilicemos la misma tipografía y tamaño del menú principal
54. Al rectángulo redondeado le agregaremos una sombra interior, con los siguientes valores:
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 55. Ahora nos acercamos a extremos derecho de la barra, creamos una nueva capa, seleccionamos el color Gris libertador y con la
herramienta elipse pintamos en el interior un circulo (presionar la tecla Mayus)
56. Ahora crearemos una Forma personalizada (una flecha) sobre el circulo creado, de color blanco(en el panel de propiedades),
y lo trazamos (ver figura)
57. Le agregamos un texto de referencia, entro de la barra: “Introduzca el texto a buscar…”, para eso con la herramienta texto
seleccionamos la tipografía Tahoma, bajamos el puntaje a 10 pts, buscamos un color gris general (ejemplo Pantone 421 C).
1
2 3
4
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 58. Ya tenemos la barra del menú
Crear un menú secundario: Ayuda, nota legal y las banderas del idioma 59. Buscamos en internet banderitas para eso vamos a la página web http://www.famfamfam.com/lab/icons/ y descargamos
gratuitamente las banderitas
60. En nuestro diseño creamos un nuevo grupo que se llamara “Menú secundario” dentro de la carpeta CABECERA
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 61. Colocar dentro de la carpeta Menú Secundario las banderas.
62. Seleccionamos las banderas:
63. Y las ubicamos en la parte superior derecha de la página:
64. Agregamos los textos del menú secundario, utilizando el color Gris libertador: Idioma, Ayuda y Nota legal y lo ubicamos en la
línea de las banderas, y ordenamos las distancias de las banderas en el espacio correspondiente.
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz
Diseño de un visor de JQuery 65. Los 25 mejores ejemplos de Sliders libres de contenido jQuery: http://visionwidget.com/jquery-content-sliders.html para darnos
una visión selectiva de pantalla deslizantes con aplicaciones JQuery
66. Graficaremos un modelos de pantalla deslizante. Creamos un nuevo grupo de capas con el nombre GALERÍA y una nueva capa
con el nombre BASE VISOR.
67. Con la herramienta Marco rectangular hacemos una selección sobre la parte inferior del menú y lo rellenamos con el color
Gris libertador (presione Alt+Supr).
68. Ahora insertaremos las imágenes menú Archivo>Colocar
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 69. Seleccionamos la imagen 1.jpg
70. Lo reducimos ligeramente, hacemos una selección (ver imagen)
71. Para cortarlo hacemos una máscara de capa
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 72. Después le pondremos un marco, para eso le agregaremos un Estilo de capa>Trazo, con los siguientes valores
73. Agregamos una nueva capa lo ubicamos debajo de la imagen 1.jpg, después seleccionamos la herramienta Rectángulo
redondeado de color negro creamos un espacio para el contenedor de texto.
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 74. Sobre el Rectángulo redondeado, agregamos el texto con los modelos de letra y tamaños indicados en la pantalla
75. Finalmente alineamos verticalmente, seleccionando el grupo de capas GALERÍA, con la Capa 1 (Capa de fondo blanco)
76. Insertamos las fotos laterales, seleccionamos la imagen 2.jpg
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz
77. La reducimos y ubicamos al lado derecho. Hacemos una selección horizontal con la herramienta sobre la foto 2.jpg y
creamos una máscara de capa.
78. Copiamos el estilo de capa: Trazo que se aplicó a la foto principal
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 79. Y lo pegamos en la imagen 2.jpg
80. Le agregamos el texto: El Tambo del Inka, a Luxury Collection Resort & Spa logró la certificación LEED. Además de ingresar a su
selecta lista, fue elegido como el “Hotel con más Estilo” entre los premiados de 2010, según Andrew Harper.
81. Le agregamos un espacio entre párrafos de 3 pts y desactivo la opción Separar (para que no haya corte silabico)
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz
82. Posteriormente insertaremos un icono de avance, para eso vamos a la herramienta forma personalizada vamos al panel de
propiedades de la herramienta y seleccionamos un modelo de flecha , si no la encontramos en la lista por defecto, añadimos
a la lista
83. Y lo ubicamos al lado derecho del texto. Y le bajamos lo opacidad al 60%
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 84. Todas estas capas imagen 2.jpg, el texto(El tambo del Inca…) y la Forma 2 lo agrupamos nuevamente con el nombre de
SIGUIENTE
85. Ahora duplicaremos el Grupo SIGUIENTE y cambiaremos de nombre a ANTERIOR y lo desplazamos hacia el otro extremo de la
barra con las herramientas Flecha y presionando además la tecla May para que avance de 10 en 10 pixeles.
86. Ahora cambiaremos la posición de la flecha (Edición>Transformar trazado>Voltear horizontal) y lo movemos al otro lado de la
columna
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 87. El texto lo alineamos a la derecha en el panel de Párrafo (Ventana>Párrafo) y cambiaremos la imagen
88. Seleccionamos la imagen 4.jpg , la reducimos al ancho de la foto anterior
89. Arrastramos la máscara de capa y copiamos el estilo de capa (Trazo) de la imagen capa 2 a la imagen capa 4 y eliminamos la
imagen de la capa 2
1
2
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 90. Revisemos el resultado
91. Remplazamos el texto: “Hotel Libertador Arequipa El hotel celebró su aniversario número 15 con celebridades como The Ten
Tenors, Richard Clayderman, Nito Mestre y Collective Soul” y veamos como quedo nuestra pantalla.
Las miajas de pan o Breadcrumb Revisar modelos de Breadcrumb: http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
92. Para el diseño de un índice de navegación podemos hacer una barra horizontal del mismo color del fondo donde está el logo de un alto de 40 pixeles y todo el ancho de la pantalla(1050px)
93. Con el cuentagotas capturamos el color del fondo de la barra del logo, y rellenamos el área seleccionada (Edición>Rellenar)
color Frontal.
94. Y deseleccionamos (Ctrl+D)
95. Con la herramienta Texto buscamos la tipografía Tahoma, 10 pt, justificado a la izquierda de color Gris libertador
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 96. Y escribir: “Estoy en: Inicio”
97. Agregamos un gráfico vectorial la herramienta Forma personalizada y seleccionamos la forma con una opacidad de
40%,de color Gris libertador
98. Agrupamos finalmente las capas componentes de la Miajas de Pan
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz
99. Le damos una visión general a la página
Buscador izquierdo 100. Agregaremos un mapa para localizar los lugares donde hay hoteles Libertador. Buscamos la imagen Peru.png
101. Lo ubicamos en el lado izquierdo de la página, presionamos Ctrl+H para que aparezcan las guías y lo encajamos en el primer
cuarto
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 102. Agregamos un título al mapa: Búsqueda, utilizamos el color Gris libertador para el texto:
103. Utilizaremos las guías para hacer un fondo de relleno con un color gris (#979799), para eso crearemos una nueva capa con el
nombre BARRA, terminamos presionado Alt+Supr, cambiamos el color de la letra a Blanco. Hacemos una selección ceñida
sobre el mapa y le aplicamos una máscara de capa-
104. Vamos a poner un marco en el mapa para eso le agregaremos un estilo de capa utilizando Trazo con las siguientes
especificaciones:
105. Seleccionamos las tres capas y lo agrupamos con el nombre de MAPA
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 106. Ahora duplicamos el título: Ubicación de Lujo, y creamos un nuevo grupo de capas llamado FORMULARIO y cambiamos el texto
por: Buscador rápido, presionamos Mayús+flecha abajo (para desplazar la capa cada 10 pixeles)
107. Con la herramienta Texto ponemos: Hotel, Fecha, Código promocional y el botón: Buscar Hoteles, con las siguientes
características:
108. Duplicamos el grupo Buscador y le cambiamos de nombre a Hotel y lo bajamos a la barra del buscador avanzado
109. Escalamos la forma vectorial Edición>Transformar trazado>Escala y lo ajustamos a tamaño de la columna y movemos también
el círculos gris.
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz
110. Y cambiamos el modelo de flecha y el texto lo cambiamos por Libertador Arequipa
111. Duplicamos de nuevo el grupo Hotel y de cambiamos de nombre a Fecha de igual lo reducimos de ancho con la herramienta
escala y le agregamos un icono de calendario
112. Duplicamos de nuevo el grupo flecha y le cambiamos de nombre Código promocional y finalmente le agregaremos con la
herramienta Rectángulo redondeado el botón Buscar Hoteles. Como color de fondo usaremos el Gris libertador, la
tipografía será la misma Tahoma 12 pts. en color blanco.
113. Y lo agruparemos con el nombre Buscar Hoteles
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz
Contenido Central 114. Vamos al grupo de capas Mapa, duplicamos la capa de texto Ubicación de Lujo y lo desplazamos hacia la derecha cambiamos
de color a Rojo libertador
115. Cambiamos el texto a Colección de Hoteles
116. Creamos un nuevo grupo de capas de Nombre CONTENIDO CENTRAL y allí pondremos la capa texto.
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz 117. Ahora colocaremos una imagen 12.jpg, la reduciremos de tamaño (Edición>Transformar> Escala) hasta el ancho de columna que
nos da las líneas guía
118. Duplicaremos el texto que se encuentra en el grupo de capas SIGUIENTE, y lo ubicaremos sobre la imagen reducida y le
cambiamos el texto: Guía Libertador Arequipa Tierra Lima – Arequipa (1003 km.) con una duración de 14 horas en auto aproximadamente. Aire Vuelos diarios desde las ciudades de Lima (50 min. aprox.) y Cusco (30 min. aprox.) Tren Existe servicio de tren que une Arequipa a las ciudades de Mollendo, Juliaca, Puno y Cusco.
119. Mantendremos el mismo modelo y tamaño de letra alteraremos el interlineado y el espaciado entre párrafo y párrafo
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz Si la imagen queda sobre el texto deberá, hacer una selección sobre la imagen y aplicar una máscara de capa
120. Cuando tengamos organizado la estructura de la información agrupamos las capas con el nombre de DESTACADO 1
121. Ahora para hacerlo más rápido del llenado de esta sección, duplicaremos 5 veces la carpeta DESTACADO 1
122. Las copias cambiaremos sus nombres en DESTACADO 2, DESTACADO 3 DESTACADO 4, DESTACADO 5, DESTACADO 6
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz
123. Y cambiaremos las fotos y los titulares
124. Y además copiaremos el estilo de capa Trazo y se lo agregaremos a cada foto
El resultado será
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz
125. Finamente terminaremos colocando en pie de página. Utilizando el color Gris libertador hacemos una selección en la parte
inferior de la página agreguemos el siguiente texto:
Mail: [email protected]
Libertador Hotels, Resorts & Spas - Copyright 2013. All rights reserved
Conoce nuestras políticas de privacidad
126. De igual modo hay que crear una Grupo de capas llamado PIE DE PAGINA en donde estará la barra horizontal y el texto
Universidad Tecnológica del Perú Facultad de Ciencias de la Comunicación, Curso: Informática Aplicada
Lic. Mario Quiroz Nuestra página finalmente quedará