Creación de Interfaces Gráficas para Aplicaciones Móviles en Adobe Photoshop

Objetivo del Aprendizaje:

El objetivo de esta guía es enseñar a los estudiantes a utilizar las herramientas de Adobe Photoshop para diseñar interfaces gráficas de usuario (GUI) para aplicaciones móviles. A lo largo de esta guía, los estudiantes aprenderán a crear y manipular capas, aplicar transformaciones, y optimizar sus diseños para visualización en dispositivos móviles, utilizando comandos cortos y funciones específicas del programa.

https://www.youtube.com/watch?v=4Siyd5-Av7M

---

Guía de Trabajo: Uso de Adobe Photoshop para Diseñar Interfaces Gráficas Móviles

1. Creación de un Nuevo Documento

• Comando: Ctrl + N
• Pasos:
  1. Abre Adobe Photoshop.
  2. Selecciona Archivo > Nuevo.
  3. Configura el ancho a 800 px y la altura a 3000 px.
  4. Haz clic en Crear.
  5. Rellena el fondo con color blanco.

2. Renombrar la Capa de Fondo

• Comando: Clic derecho en la capa > Renombrar
• Pasos:
  1. Haz clic derecho en la capa de fondo en el panel de capas.
  2. Selecciona Renombrar y escribe Fondo.

3. Crear un Contenedor para la Aplicación

• Comando: Herramienta Rectángulo (U)
• Pasos:
  1. Selecciona la herramienta Rectángulo (o presiona U).
  2. Dibuja un rectángulo en la parte superior del documento con un ancho de 800 px y una altura de 50 px.
  3. Cambia el color a gris.
  4. Renombra la capa a Contenedor Móvil.

4. Importar Imágenes de la Aplicación

• Comando: Ctrl + O
• Pasos:
  1. Ve a Archivo > Abrir y selecciona las imágenes que deseas utilizar (ej. phone_example y phone_1).
  2. Abre ambas imágenes.

5. Copiar y Pegar el Contenido de las Imágenes

• Comando: Ctrl + C (Copiar) y Ctrl + V (Pegar)
• Pasos:
  1. Selecciona todo en la imagen (Ctrl + A) y cópiala (Ctrl + C).
  2. Crea una nueva capa (Ctrl + Shift + N) y nómbrala Móvil.
  3. Pega el contenido (Ctrl + V).

6. Crear una Máscara de Recorte

• Comando: Ctrl + Alt + G
• Pasos:
  1. Selecciona la capa Móvil.
  2. Haz clic derecho y selecciona Crear máscara de recorte.

7. Transformar y Escalar Imágenes

• Comando: Ctrl + T
• Pasos:
  1. Con la capa seleccionada, presiona Ctrl + T para activar la transformación.
  2. Mantén presionadas las teclas Shift y Alt mientras escalas para mantener la proporción.
  3. Ajusta la posición utilizando la herramienta de movimiento (V).

8. Añadir Sombra a las Capas

• Pasos:
  1. Haz clic derecho en la capa y selecciona Opciones de fusión.
  2. Marca Sombra paralela y ajusta los parámetros de Distancia, Ángulo, y Opacidad para lograr el efecto deseado.

9. Crear una Vista en Perspectiva

• Comando: Ctrl + T, Ctrl + Alt + T (Transformar de nuevo)
• Pasos:
  1. Duplica la capa Móvil (Ctrl + J) y renombra la nueva capa a Móvil 2.
  2. Con la nueva capa seleccionada, aplica Transformar y ajusta la perspectiva.
  3. Ajusta la opacidad para facilitar el alineado.

10. Guardar el Documento

• Comando: Ctrl + S
• Pasos:
  1. Ve a Archivo > Guardar como.
  2. Selecciona el formato .PSD para mantener las capas.

---

Recomendaciones Finales:

• Practica cada paso con atención y asegúrate de experimentar con diferentes herramientas y configuraciones para familiarizarte con el entorno de trabajo.
• Guarda tu trabajo frecuentemente para evitar perder cualquier avance.

Esta guía te proporcionará una base sólida en la creación de interfaces gráficas para aplicaciones móviles utilizando Adobe Photoshop, y te preparará para futuros proyectos de diseño.