Creación de GIF Animados en Photoshop

 Objetivo del Aprendizaje

El objetivo de esta guía es enseñar a los usuarios a utilizar las herramientas de animación de Adobe Photoshop  para crear un GIF animado de 125 x 125 píxeles. Al finalizar, los participantes serán capaces de realizar animaciones simples, aplicar efectos y exportar sus animaciones en formato GIF.

Paso a Paso para Crear un GIF Animado en Photoshop

 Paso 1: Crear un Documento Nuevo

1.      Abrir Photoshop.

2.      Crear un nuevo documento:

·         Comando: `Ctrl + N` (Windows) o `Cmd + N` (Mac).

·         Configuración: Ancho: 125 px, Alto: 125 px, Resolución: 72 ppi, Modo de Color: RGB, Fondo: Blanco.

 Paso 2: Configurar el Fondo

1.      Desbloquear la capa de fondo:

·         Comando: Hacer doble clic en la capa de fondo en el panel de capas.

2.      Rellenar el fondo con un color:

·         Seleccionar herramienta de relleno: `G` para el Paint Bucket Tool.

·         Color: 111111.

·         Aplicar: Hacer clic en el lienzo para rellenar.

 Paso 3: Aplicar un Gradiente Radial

1.      Seleccionar herramienta de gradiente:

·         Comando: `G` para el Gradient Tool.

·         Configuración: Gradiente radial, de blanco a transparente.

3.      Aplicar el gradiente:

·         Hacer clic en el centro del lienzo, mantener presionado y arrastrar hacia la derecha. Mantener `Shift` para una línea recta.

 Paso 4: Crear un Borde de 1 píxel

1.      Seleccionar herramienta de rectángulo:

·         Comando: `U` para el Rectangle Tool.

·         Configuración: Tamaño fijo de 123 x 123 px.

2.      Dibujar el rectángulo:

·         Asegurarse de que cubra la capa de fondo, pero deje los bordes visibles.

·         Nombrar la capa como "Extra".

 Paso 5: Aplicar un Estilo de Capa

1.      Abrir la ventana de Estilo de Capa:

·         Comando: Hacer doble clic en la capa "Extra".

2.      Configurar:

-          Opacidad de relleno: 0.

-          Trazo interno: 1 px, color gris oscuro (4d4d4d).

 Paso 6: Importar el Logo

1.      Descargar el logo desde graphicriver.net.

2.      Importar el logo:

·         Comando: `Ctrl + C` y `Ctrl + V` (Windows) o `Cmd + C` y `Cmd + V` (Mac) para copiar y pegar.

·         Transformar si es necesario (`Ctrl + T` o `Cmd + T`).

 Paso 7: Crear Formas Adicionales

1.      Dibujar formas en Illustrator (opcional) o en Photoshop usando la Pen Tool (`P`).

2.      Pegar las formas en Photoshop como un Smart Object para mantener calidad.

 Paso 8: Aplicar un Efecto de Resplandor

1.      Seleccionar la herramienta de selección elíptica:

·         Comando: `M` para el Elliptical Marquee Tool.

·         Configurar un Feather de 10 píxeles.

2.      Rellenar la selección:

·         Comando: `G` para el Paint Bucket Tool.

 Paso 9: Crear y Configurar la Animación

3.      Abrir el panel de Animación:

·         Comando: `Window > Animation`.

4.      Convertir a Animación de Fotogramas:

·         Comando: Menú del panel de Animación > Convertir a Fotogramas.

·         Agregar y Configurar Fotogramas:

·         Crear y ajustar cada fotograma según la animación deseada.

·         Añadir fotogramas intermedios con el comando Tween:

·         Comando: Hacer clic en el icono de "Tween" en el panel de Animación.

·         Configurar número de fotogramas adicionales y hacer clic en OK.

 Paso 10: Exportar el GIF Animado

1.      Guardar para Web:

·         Comando: `File > Save for Web & Devices`.

·         Configuración: Seleccionar GIF como tipo de archivo, ajustar opciones según necesidad.

·         Guardar: Asignar un nombre al archivo y seleccionar la ubicación para guardarlo.

Conclusión

Con esta guía, aprenderás a utilizar las herramientas de animación en Adobe Photoshop CS4 para crear un GIF animado simple pero efectivo. Esta habilidad te permitirá diseñar elementos animados para publicidad y otros usos web