SummArg | Cursos y recursos para webmasters

Crear banners animados livianos en Photoshop

Existen una buena cantidad de aplicaciones destinadas a generar GIFs animados en pocos pasos, con efectos llamativos y pocos conocimientos previos, pero no siempre nos devuelven un resultado óptimo: pierden innecesariamente la calidad de nuestras imágenes a la par que nos generan un archivo muy pesado. Los banners en un website deben ser livianos, muy (muy!) por debajo de los 100KBs ya que la idea es que consuman la menor cantidad de ancho de banda posible y no ralentice bajo ningún concepto la carga de una página.

Teniendo esto en cuenta vamos a utilizar Photoshop para hacer una animación muy simple y liviana también.

Paso 1

Creamos un nuevo documento de las dimensiones finales del banner. Insertamos dentro, en capas diferentes, las dos imágenes que vamos a utilizar.

Paso 2

Abrimos la ventana de animaciones (window > animation) y cambiamos el entorno a modo cuadros presionando el botón que se encuentra en la esquina inferior derecha de la ventana.

En la parte inferior tenemos el botón de tipo de reproducción (forever – para siempre, once – una vez), los controles para avanzar o retroceder en nuestra línea de tiempo, y los botones para crear o eliminar cuadros.

Paso 3

Creamos un cuadro y, mientras estemos posados sobre él, modificamos el fill (relleno) de la imagen 2 al 50%.

Paso 4

Creamos un cuadro mas y dejamos a cero el fill de la imagen 2, de ese modo sólo se verá la imagen 1 en esa instancia de la animación.

Paso 5

Finalmente ajustamos la cantidad de segundos que queremos que se vea cada cuadro y modificamos el tipo de ejecución a forever para que se reproduzca sin fin. Guardamos el trabajo tanto en PSD (para modificarlo luego si es necesario) y como optimizado para la web en GIF.

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Existen una buena cantidad de aplicaciones destinadas a generar GIFs animados en pocos pasos, con efectos llamativos y pocos conocimientos previos, pero no siempre nos devuelven un resultado óptimo: pierden innecesariamente l…..

Dejar un comentario