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

http://www.delicious.com/


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


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


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


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


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


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


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%


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.


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


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


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


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


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:


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


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

http://www.famfamfam.com/lab/icons/


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.


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

http://visionwidget.com/jquery-content-sliders.html

http://visionwidget.com/jquery-content-sliders.html


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


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.


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


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


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)


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%


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


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


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

http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/


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


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


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


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.


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


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.


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


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


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á


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


Lic. Mario Quiroz Nuestra página finalmente quedará

práctica proyecto libertador con photoshop

Design