Share
Los archivos GIF animados han sido el blanco de muchos chistes dentro de la comunidad de diseño. Esto se debe a que los gifs animados son famosos por ser un poco cursi y famosos por saturar una página. Sin embargo, si se utiliza correctamente, la animación puede atraer el interés a un área de una página que de otra manera se pasa por alto. Hoy, demostraremos cómo usar Photoshop para crear un gif animado en Photoshop CS5. Empecemos!
Cree un nuevo documento de 250 x 250 px y configure la resolución a 70 px con el color de fondo establecido en # f2f2f2.
Coloca un logo en el centro superior del lienzo..
Escribe una línea de etiqueta debajo del logo.
Dibuja un cuadro de rectángulo y establece el color en # 90909.
Abra el cuadro de diálogo de estilos de capa y marque Sombra. Reducir la distancia y el tamaño a 2px.
Ahora agregue una superposición de degradado y establezca el modo de fusión en Multiplicar con una opacidad del 28%.
Añadir un trazo y reducir el tamaño a 1 px. Establece el color en # a31b1b.
Añadir algunos puntos de bala. En nuestro caso, agregamos 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.
Ahora coloca una imagen llamativa. En nuestro caso, usamos el ícono del programa premium para Psdtuts, pero siéntase libre de usar lo que sea que más le convenga.
Redacte un poco más de texto de apoyo como se muestra debajo de la imagen que colocó en el Paso 6.
Crea una caja ovalada y establece el color en #fdfcfc.
Abra el cuadro de diálogo de estilos de capa y aplique una sombra paralela. Reducir la distancia y el tamaño a 1 px.
Comprueba el resplandor interior y déjalo como está..
Agregue una superposición de degradado con el conjunto de opacidad al 6%.
Ahora que hemos terminado de crear todas nuestras capas, ahora estamos listos para comenzar a trabajar en la animación. Primero, abra el panel Animación (Ventana> Animación). Usaré el panel Animación de la línea de tiempo (y no la animación del cuadro). Nota: esta función solo está disponible en Photoshop Extended. Ahora configura todas tus capas a visibles, pero reduce su opacidad a 0%.
Consulte la imagen a continuación para obtener instrucciones sobre cómo insertar fotogramas clave y dónde aumentar la opacidad..
Su línea de tiempo debe ser similar al ejemplo a continuación..
Ahora hemos completado nuestra animación. Pulsa play para ver el resultado. Siéntase libre de modificarlo cuando sea necesario. Para guardar su banner, vaya a Archivo> Guardar para Web y dispositivos. A continuación, utilice la configuración de la siguiente imagen y haga clic en Guardar.
¡Eso es! Estás terminado!
Accentsconagua