El documento proporciona instrucciones para crear el diseño de un sitio web utilizando Photoshop. Estas instrucciones incluyen crear capas, carpetas y grupos para el header, main content y footer. Dentro de estas secciones se agregan logotipos, menús, sliders de imágenes, artículos, widgets y redes sociales. El diseño final se guarda con la estructura y estilos apropiados para facilitar el desarrollo del sitio.

1. Ejercicio Ps

2. Abres el archivo que descargaste de 960grid system el
de 12 columnas

3. Después eliminas la capa 12 col y
deben quedar las lineas guía

4. Con ctrl+ , puedes manejar las guías

5. Después vas a tamaño de lienzo

6. Ir a tamaño de lienzo y
modificar el ancho y el alto

7. Renombramos la capa “fondo”

8. Cambiamos el color del lienzo

9. el lienzo debe quedar del color elegido

10. Creas tres carpetas y las nombras en el siguiente orden:
header
main
footer

11. Creas dentro de la carpeta header
una nueva capa y la llamas fondo

12. con el color blanco y la herramienta rectángulo

14. si presionamos dos veces en la lupa veremos el tamaño
real

15. ahora le agregas un degradado con click derecho
+opciones de fusión +superposición de degradado

16. cambias el degradado

18. creamos un carpeta dentro de header que se llame
logotipo

19. activas la herramienta texto

20. escribes o traes la imagen de tu logo
tocando las reglas o lineas guía
nombre o imagen del logo

21. centrarlo verticalmente para eso seleccionas las dos capas con ctrl
nombre o
imagen

22. con este botón centran el contenido
nombre o imagen del logo

23. y después shift+las flechas para centrar
horizontalmente
nombre o imagen del logo

24. haces una nueva carpeta la dejas debajo de logotipo y
la llamas menú

25. generas texto para crear los botones

26. seleccionas las dos capas y centras verticalmente

27. duplicas las capas para hacer los botones que
necesites

28. con shift + las flechas mueves las capas duplicadas y
las colocas en la misma posición

31. Tomas la herramienta de rectángulo redondeado

32. Creas una capa debajo de inicio y le cambias el color
nombre o imagen del logo

33. Realizar un rectángulo como lo muestra la imagen

35. Creas una carpeta dentro de main que se llame
slideshow

36. Dentro creas una capa y trazas un rectángulo como lo
muestra la imagen.
nombre o imagen del logo

37. seleccionas la capa t con ctrl se
crea una zona de selección

38. Vas a selección + modificar + contraer 20px
nombre o
imagen del logo

39. este es el resultado

40. Pintas esa capa de un nuevo color
nombre o imagen del logo

41. Traes una imagen la haces mas pequeña

42. Colocas la capa de la foto encima de la capa
donde esta el rectángulo que coloreaste y
oprimes alt justo en la mitad de esas capas
(aparece la flechita apuntando hacia abajo
con un cuadro blanco)
nombre o imagen del logo

43. después presionas ese símbolo y la
foto se debe adaptar al recuadro

44. Seleccionas la herramienta elipse para generar los botones
del slide

45. en la carpeta slideshow juntas las tres capas creadas

47. nombras ese grupo como imagen

48. ueva carpeta debajo de imagen y llamas controles

49. En esa nueva carpetas haces el pequeño circulo
nombre o imagen del logo

50. Seleccionas la capa que acabas
de crear con el fondo y alineas
nombre o imagen
del logo

51. luego duplicas la capa en dos oportunidades

52. Generas una carpeta llamada banner
después de slideshow

53. creas una nueva capa y trazas un
rectángulo

54. Que quede 20 px debajo de
los botones del slideshow

55. Cambias el color de la siguiente manera

56. Pueden agregar una sombra paralela

59. ahora colocan un texto

60. Modificas la fuente

63. pegas el texto

65. separas donde están los puntos
y eliminas el texto último

67. modificas el auto 30px

69. Creas una carpeta llamada articulo

70. imagenes de 220 x 150 ejemplo

75. Seleccionas capas y las
metes en la carpeta articulo

76. Nueva carpeta llamada sidebar

78. Una nueva caja de texto dejando
10 px a cada lado

79. Ajusta el texto

80. Cambias el color del texto

81. El texto lo metes en la carpeta de articulo

82. Duplicas articulo y la
nombras como articulo 2

84. Para el sidebar cambiaremos el fondo

86. Cambias el color

88. Seleccionas con click

91. Selección invertir

92. Agregar una sombra

93. Agregas otra capa y haces un rectángulo

94. agregas un texto

95. Haces un grupo y le cambias a widget

96. Duplicas

99. haces una nueva capa dentro de la carpeta footer

100. Realizas un rectángulo

101. Seleccionas con control

104. luego selección + invertir

105. y presionas suprimir

106. el resultado esta en la imagen

107. Cambiar el fondo

109. para la parte de abajo del rectángulo

110. para la parte superior del rectángulo

111. Activas la opción invertir degradado

112. Agregan una sombra paralela

115. agregas un texto

116. Agregas lorem ipsum

117. recuerden auto para la separación
entre lineas

119. Seleccionas estas dos capas

120. las agrupas y nombras este grupo

122. Extraes los iconos de redes sociales
estos iconos pueden descargar de iconspedia por ejemplo
aunque los vas a encontrar en muchas pagina recuerda los tienes
que guardar en recursos

124. observar que la licencia sea gratuita

125. los arrastras a Ps

126. Agrupas

127. y después para cada icono creas una carpeta

129. A cada icono le haces un texto

130. Haces el texto de la parte inferior
debajo de todas las capas de
iconos

131. guardas