Este documento proporciona instrucciones para crear el diseño de un sitio web utilizando capas y carpetas en Photoshop. Las instrucciones incluyen crear carpetas para el encabezado, contenido principal y pie de página, y agregar elementos como logotipos, menús, diapositivas y widgets laterales. También describe cómo agregar texto, imágenes, degradados, sombras y ajustar el tamaño y posición de los elementos utilizando las reglas y herramientas de selección de Photoshop.

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