Spanish (Español) translation by Alejandra (you can also view the original English article)
Los archivos Gif animados han sido el blanco de muchas bromas dentro de la comunidad de diseño. Eso se debe a que los gif animados son famosos por ser un poco cursis y conocidos por desordenar una página. Sin embargo, si se usa correctamente, la animación puede atraer el interés hacia un área de la página que de otro modo no se vería. Hoy aprenderás a usar Photoshop para crear un gif animado en Photoshop CS5. ¡Comencemos!
Paso 1
Crea un nuevo documento de 250 x 250 px y establece la resolución a 70 px con el color de fondo establecido en #f2f2f2.
Paso 2
Coloca un logo en la parte superior central del lienzo.
Paso 3
Escribe un lema bajo el logo.
Paso 4
Dibuja un cuadro rectangular y establece el color en el #90909.
Abre el cuadro de diálogo de estilos de capa y marca Sombra paralela. Reduce la distancia y el tamaño a 2px.
Ahora agrega una superposición de degradado y establece el modo de fusión en Multiplicar con una opacidad del 28%.
Añade un trazo y reduce el tamaño a 1 px. Establece el color a #a31b1b.
Paso 5
Añade algunas viñetas. En nuestro caso, añadimos el texto: Tutoriales, artículos, consejos, regalos, Basix, videos, Premuim, como se muestra.
.Rasteriza las capas de texto y crea una máscara de recorte.
Paso 6
Ahora coloca una imagen llamativa. En nuestro caso usamos el icono del programa premium para los Psdtuts, pero siéntete libre de usar lo que te convenga.
Paso 7
Redacta un poco más de texto de apoyo como se muestra debajo de la imagen que colocaste en el paso 6.
Paso 8
Crea un cuadro ovalado y pon el color a #fdfcfc.
Abre el cuadro de diálogo de estilos de capa bix y aplica una sombra paralela. Reduce la distancia y el tamaño a 1 px.
Marca el resplandor interior y déjalo como está.
Añade una superposición de degradado con la Opacidad fijada en 6%.
Paso 9
Ahora que hemos terminado de crear todas nuestras capas, estamos listos para empezar a trabajar en la animación. Primero, abre el panel de animación (Ventana > Animación). Usaré el panel Animación de la Línea de Tiempo (y no el cuadro de animación). Nota: Esta función solo está disponible en Photoshop Extended. Ahora establece todas tus capas como visibles pero reduce su opacidad a 0%.
Paso 10
Consulta la siguiente imagen para saber cómo insertar los fotogramas clave y dónde aumentar la opacidad.
Paso 11
Tu línea de tiempo debería ser similar al ejemplo que se muestra a continuación.
Paso 12
Ya hemos completado nuestra animación. Presiona el botón de "Play" para ver el resultado. Siéntete libre de hacer los ajustes que creas necesarios. Para guardar tu banner, ve a Archivo > Guardar para Web & Dispositivos. A continuación, utiliza los ajustes de la siguiente imagen y haz clic en Guardar.
Imagen final
¡Listo! ¡Ya terminaste!
By
