Creación de Mockups de Sitios Web en Adobe Photoshop

el

 Objetivo de Aprendizaje:

El objetivo de esta guía es enseñar a los estudiantes a crear presentaciones visuales profesionales de sitios web mediante la creación de mockups en Adobe Photoshop. Los estudiantes aprenderán a trabajar con capas, herramientas de transformación, máscaras de recorte y objetos inteligentes para desarrollar diferentes vistas de un sitio web.

https://www.youtube.com/watch?v=lQIzBMbw7FA

Paso a Paso:

1. Crear un Nuevo Archivo

  1. Abre Adobe Photoshop.
  2. Ve a Archivo > Nuevo o usa el comando rápido Ctrl + N.
  3. Configura el archivo con las siguientes dimensiones:
    • Ancho: 1500 px
    • Alto: 5000 px
    • Resolución: 72 ppi
  4. Haz clic en Aceptar.

2. Crear la Capa de Fondo

  1. Selecciona la Herramienta Bote de Pintura (G) y rellena la capa con color blanco.
  2. Si el fondo ya es blanco, omite este paso.
  3. Renombra esta capa como "Fondo".

3. Crear un Contenedor Rectangular

  1. Selecciona la Herramienta de Forma Rectangular (U).
  2. Haz clic una vez en el lienzo para abrir el cuadro de diálogo de dimensiones.
  3. Configura el ancho en 1500 px y la altura en 100 px.
  4. Da color al rectángulo para visualizarlo mejor.
  5. Usa las teclas de flecha para ajustar la posición si es necesario.
  6. Renombra la capa a "Contenedor Website".

4. Importar el Sitio Web al Mockup

  1. Ve a Archivo > Abrir o usa el comando Ctrl + O y selecciona la imagen del sitio web.
  2. Con la imagen abierta, selecciona todo usando Ctrl + A y cópialo con Ctrl + C.
  3. Regresa al archivo principal y crea una nueva capa con Ctrl + Shift + N, nómbrala "Sitio Web".
  4. Crea una Máscara de Recorte haciendo clic derecho sobre la capa y seleccionando Crear máscara de recorte.
  5. Pega el sitio web usando Ctrl + V.

5. Importar una Imagen de Monitor

  1. Abre una imagen de monitor utilizando Archivo > Abrir (Ctrl + O).
  2. Copia la imagen del monitor (Ctrl + A y luego Ctrl + C) y pégala en el archivo principal (Ctrl + V).
  3. Redimensiona la imagen usando Ctrl + T. Mantén presionadas las teclas Shift + Alt para escalar proporcionalmente.
  4. Renombra la capa como "Monitor".

6. Crear y Redimensionar un Objeto Inteligente

  1. Crea una capa rectangular del tamaño de la pantalla del monitor.
  2. Selecciona la forma y haz clic derecho para Convertir en Objeto Inteligente.
  3. Renombra la capa como "Monitor Website".
  4. Redimensiona el objeto usando Ctrl + T y ajusta su tamaño proporcionalmente.

7. Añadir un Fondo Abstracto

  1. Crea una nueva capa y renómbrala "Abstract".
  2. Usa la Herramienta de Pincel (B) con dureza 0% y tamaño 500 px.
  3. Selecciona un color oscuro como el fondo y un tono más claro para los puntos.
  4. Aplica el pincel en diferentes áreas para crear un efecto de puntos suaves.

8. Aplicar un Efecto de Degradado

  1. Selecciona la capa que contiene el sitio web.
  2. Haz doble clic para abrir el Panel de Estilos de Capa.
  3. Selecciona Superposición de Degradado.
  4. Ajusta los colores del degradado, eligiendo uno claro y otro oscuro.
  5. Reduce la opacidad del degradado para crear una ligera profundidad.

9. Crear una Vista en Perspectiva

  1. Crea un nuevo rectángulo de 1500 px de ancho y 900 px de alto.
  2. Convierte la capa en un Objeto Inteligente.
  3. Usa la transformación Distorsionar (Ctrl + T > Clic derecho > Distorsionar) para ajustar la perspectiva.
  4. Ajusta las esquinas para simular una vista inclinada.
  5. Añade una Sombra ligera usando el Panel de Estilos de Capa.

10. Añadir una Sombra Gradiente

  1. Crea una nueva capa para la sombra y colócala debajo del objeto inteligente.
  2. Selecciona la Herramienta de Degradado (G) y aplica un degradado de negro a transparente.
  3. Ajusta la opacidad al 23% para un efecto sutil.

Comandos Cortos Útiles:

  • Nuevo Archivo: Ctrl + N
  • Seleccionar Todo: Ctrl + A
  • Copiar: Ctrl + C
  • Pegar: Ctrl + V
  • Transformar: Ctrl + T
  • Nueva Capa: Ctrl + Shift + N
  • Máscara de Recorte: Ctrl + Alt + G
  • Convertir en Objeto Inteligente: Clic derecho > Convertir en Objeto Inteligente
  • Deshacer: Ctrl + Z

Conclusión:

Esta guía te permitirá crear presentaciones profesionales de sitios web en formato mockup, utilizando herramientas fundamentales de Adobe Photoshop como objetos inteligentes, degradados, pinceles y transformaciones. Al dominar estos pasos, podrás crear diseños visualmente atractivos para presentaciones y portafolios de diseño web.

Comentarios

Publicar un comentario