Cómo crear un banner web animado en Photoshop

La creación de banners web no es el trabajo más glamoroso del mundo, pero es algo que todos los diseñadores deberán hacer en algún momento de su carrera, probablemente muchas veces. Aunque no existen reglas estrictas cuando se trata de crear banners web, no hace falta decir que el tipo debe ser grande y el mensaje contundente.

Como también estamos animando esto, sugeriría no más de tres diapositivas o elementos animados, ya que la gente simplemente no lo verá. Los elementos intermitentes también pueden ayudar a captar la atención del espectador.

Haga este banner animado para un sitio web a continuación ...



Haga este banner animado para un sitio web a continuación ...

En los siguientes pasos, demostraré cómo configurar y crear un banner web animado simple que, una vez dominado, será muy fácil de aplicar a cualquier nuevo trabajo en el futuro.

cómo dibujar plumas en un pájaro

01. Configure su documento

Inicie Photoshop, navegue hasta archivo> nuevo y seleccione Web en el menú desplegable Preestablecido. En el menú desplegable de tamaño, seleccione la tabla de clasificación o, si sus dimensiones varían, elija personalizado e ingrese manualmente las dimensiones en píxeles.

cómo ganar dinero como diseñador gráfico independiente

Con el ajuste a los límites del documento seleccionado en el menú Ver, arrastre las guías para ajustar a todos los límites del documento.

02. Adición de elementos gráficos

Ahora para colocar nuestros elementos de diseño esenciales. En el ejemplo anterior, pegué el logotipo del cuadrado T3 y, como había creado, las guías podrían cambiar su tamaño y hacer que se ajustara a los límites del documento fácilmente. Pegue un gráfico de flecha que usaremos más adelante y use la herramienta de texto para configurar su mensaje para la primera diapositiva. Pegue las imágenes que necesite y luego asegúrese de nombrar todas sus capas de manera adecuada.

03. Creando las diapositivas secundarias

cómo dibujar un cachorro realista paso a paso fácil

Ahora simplemente duplique su capa de texto, apague la capa de texto debajo y escriba en la siguiente etapa del mensaje, en este caso 'EN VENTA AHORA'. Una vez que esté satisfecho de tener todos los elementos en su lugar, combine tantas capas como sea posible. Como el fondo, el logo y la imagen de portada permanecerán estáticos, podemos fusionar esto dejándonos con cuatro capas, el fondo, las capas de texto y la capa de flechas.

04. Crea la animación del cuadro

Ahora simplemente haga clic en la pestaña de la línea de tiempo en la parte inferior de la ventana o navegue a la ventana> Línea de tiempo. Haga clic en la flecha pequeña en el medio de la ventana y seleccione 'Crear animación de cuadro' y luego haga clic en el botón. Ahora apague todas las capas, excepto la capa de fondo y la primera capa de mensaje. Aplique un retraso de un segundo al fotograma del menú desplegable en el pequeño fotograma de animación. Ahora simplemente haga clic en el botón 'duplicar fotogramas seleccionados' en la línea de tiempo, pero apague el primer mensaje y encienda el segundo mensaje. Repite este proceso para todas las capas, terminando con la capa de flecha.

05.Haga que la flecha parpadee y ajuste los tiempos

Para hacer que la flecha parpadee, simplemente presione 'Duplicar fotogramas seleccionados' en la línea de tiempo y apague la flecha. Ajusta el tiempo a 0.5 segundos y repite el proceso encendiendo y apagando la flecha en el panel de capas para que parezca que parpadea. Por último, es posible que desee ajustar algunos de los tiempos hasta que esté completamente satisfecho. Las personas tienen períodos de atención muy cortos, por lo que no tiene sentido ser lento con la velocidad de fotogramas, pero aún necesitan poder leerlo.

cómo configurar la privacidad en las fotos de Facebook

06. Guardar para web y dispositivos

Por último, navegue hasta 'Guardar para web' y seleccione GIF en el menú desplegable. También puede reducir ligeramente la calidad aquí para reducir el tamaño del archivo. Una vez que esté satisfecho, guarde el gif y luego simplemente arrástrelo a un navegador web para probarlo.