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

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.