Este documento presenta una guía para el diseño de sitios web utilizando Adobe Photoshop. Explica cómo crear un nuevo lienzo, utilizar las herramientas básicas como rectángulos, texto y capas, y define colores y tipografías. Luego cubre cómo agregar secciones como diapositivas, nosotros, servicios y contacto utilizando diferentes herramientas y configuraciones. Finalmente, cubre cómo exportar el diseño a una imagen y probarlo en un navegador.

2. Workshop
Web Design with
Adobe Photoshop

3. Reconociendo la interfaz de
Adobe Photoshop

5. Crear
Nuevo lienzo

7. Basics Tools
➔ Espacio de trabajo
➔ Zoom
➔ Reglas
➔ Capa
➔ Líneas guía
➔ Herramienta rectángulo
➔ Herramienta color
➔ Herramienta texto
➔ Herramienta mover
➔ Alineación de objetos
➔ Grupos

8. 1280px x 100px

9. Definiendo
Colores
➔ Color
➔ Muestra

10. http://colorhunt.co/c/18378

11. Paleta de colores

12. Es el componente esencial
para asegurar que nuestra
web se adaptará
convenientemente a
diferentes resoluciones y
pantallas.
Grid de
Bootstrap

15. Definiendo
Tipografías
➔ Estilos de Tipografía
➔ Estilo de carácter

16. Typography Bootstrap

17. Estilo de carácter

19. Slides con
objetos inteligentes
➔ Objetos inteligentes
➔ Agregar fotos
➔ Relleno
➔ Aplicar estilos de carácter
➔ Áreas de texto
➔ Lorem Ipsum

20. 1280px x 550px

21. Botón leer más
en Slide
➔ Botón
➔ Enlazar capas
➔ Herramienta regla

23. Sección Nosotros
➔ Herramienta rectángulo
➔ Objeto inteligente
➔ Color
➔ Estilos de carácter
➔ Inserción de imagen

24. 1280px x 500px

25. Sección Servicios
➔ Formas
➔ Combinar formas
➔ Lorem ipsum
➔ Alineación
➔ Texto
➔ Colores de muestra
➔ Grupos

26. 1280px x 500px

27. Sección
Contáctanos
➔ Herramienta rectángulo
➔ Trazo
➔ Estilo de carácter
➔ Color
➔ Alineación
➔ Duplicar grupo

29. Sección
Footer
➔ FontAwesome
➔ Instalar fuentes
➔ Asignar estilo de carácter
➔ Redefinir tamaño de
lienzo

31. Exportar a
imagen

33. Pruebas en el
navegador