Automatización de Acciones en Adobe Photoshop para la Presentación de Mockups Web

el

Objetivo de Aprendizaje:

El objetivo de esta guía es enseñar a los estudiantes a utilizar las herramientas de acciones en Adobe Photoshop para automatizar procesos repetitivos, tales como la edición de mockups de sitios web. Los estudiantes aprenderán a configurar, grabar y ejecutar acciones para mejorar la eficiencia en la creación y exportación de diferentes presentaciones de diseño web.

https://youtu.be/I2Ndnn7A1Eo

Guía Paso a Paso:

1. Preparación del archivo PSD

  • Paso 1: Abre el archivo PSD con el que trabajarás.
  • Paso 2: Elimina las capas innecesarias para tener un lienzo limpio.
    • Comando corto: Ctrl + S (Guardar los cambios).

2. Configuración de Acciones

  • Paso 3: Ve al menú de Ventana y selecciona Acciones para abrir el panel de acciones.
    • Ruta: Ventana > Acciones.
  • Paso 4: Crea una nueva carpeta de acciones.
    • Haz clic en el ícono de carpeta en la parte inferior del panel de acciones.
    • Nombra la carpeta, por ejemplo: Website Showcase.
    • Comando corto: No disponible (acción manual).
  • Paso 5: Dentro de la carpeta creada, crea una nueva acción haciendo clic en el ícono de página nueva.
    • Nombra la acción: Run Website.
    • Comando corto: No disponible (acción manual).
  • Paso 6: Haz clic en Grabar para comenzar a registrar los pasos.
    • Comando corto: Alt + F9 (Iniciar grabación de acción).

3. Grabación de la Acción

  • Paso 7: Selecciona la capa de tu mockup y cópiala.
    • Comando corto: Ctrl + A (Seleccionar todo), Ctrl + C (Copiar).
  • Paso 8: Cambia a la capa del monitor donde quieres pegar el mockup.
    • Comando corto: Ctrl + D (Deseleccionar), Ctrl + V (Pegar), Ctrl + S (Guardar).
  • Paso 9: Repite el paso anterior para otras perspectivas (perspectiva 1, perspectiva 2, etc.).
    • Comando corto: Ctrl + V (Pegar), Ctrl + S (Guardar).

4. Merging de Capas y Guardado

  • Paso 10: Selecciona las capas del monitor y fusiónalas.
    • Comando corto: Shift + clic en las capas, luego Ctrl + E (Fusionar capas).
  • Paso 11: Copia el contenido de la capa fusionada.
    • Comando corto: Ctrl + A (Seleccionar todo), Ctrl + C (Copiar).
  • Paso 12: Crea un nuevo documento y pega el contenido copiado.
    • Comando corto: Ctrl + N (Nuevo documento), Ctrl + V (Pegar).
  • Paso 13: Ajusta el tamaño de la imagen.
    • Ve a Imagen > Tamaño de imagen y cambia el tamaño al 50% (o el porcentaje necesario).
    • Comando corto: No disponible (acción manual).
  • Paso 14: Guarda la imagen para web.
    • Ruta: Archivo > Exportar > Guardar para Web (Legacy).
    • Comando corto: Ctrl + Alt + Shift + S.

5. Finalización de la Acción

  • Paso 15: Detén la grabación de la acción.
    • Haz clic en el ícono de detener (cuadrado) en el panel de acciones.
    • Comando corto: Alt + F9 (Detener grabación de acción).
  • Paso 16: Ejecuta la acción creada para verificar que funcione correctamente.
    • Comando corto: Selecciona la acción y haz clic en el ícono de Reproducir.

Resumen de Comandos Cortos:

  • Ctrl + S: Guardar archivo.
  • Ctrl + A: Seleccionar todo.
  • Ctrl + C: Copiar.
  • Ctrl + D: Deseleccionar.
  • Ctrl + V: Pegar.
  • Ctrl + E: Fusionar capas.
  • Ctrl + N: Nuevo documento.
  • Ctrl + Alt + Shift + S: Guardar para Web.

Resultado Final:

Al finalizar esta guía, los estudiantes habrán aprendido a grabar y ejecutar acciones automatizadas en Photoshop, mejorando la productividad al trabajar con mockups de sitios web y optimizando el proceso de exportación de imágenes para la web.

Comentarios

Publicar un comentario