Los GIF animados son una serie de gráficos unidos en un solo fichero GIF en el que se van visualizando todos los elementos que componen la secuencia dando la sensación de movimiento. Un GIF animado está compuesto por una serie continua de fotogramas que, al reproducirse, crean un efecto de animación. Su objetivo fundamental es atraer la atención del visitante hacia determinados contenidos, como puede ser un enlace nuevo o un anuncio. Los GIF animados, a diferencia de otros archivos de animación como Flash o QuickTime, carecen de sonido pero tienen como principal ventaja el ser compatibles con los navegadores más utilizados y ser muy fáciles de crear y descargar de la Web. El uso más habitual a la hora de crear un GIF animado es la publicidad. Los llamados banners no son más que GIF animados relacionados con un hipervínculo que conduce a otra página Web. Para más información sobre los GIF animados clic aquí.
El siguiente paso será crear el archivo que contendrá el GIF animado. Por medio de Archivo>Nuevo creamos nuestro nuevo documento. Como lo más habitual es la creación de GIF animados para la Web, he utilizado una medida de banner predefinida por Photoshop.
Como los GIF admiten transparencias, nuestro siguiente paso será seleccionar las partes de la imagen que queremos utilizar en el GIF animado. En este caso solo quiero la imagen del chico, por lo que, con cualquiera de las herramientas de Selección de Photoshop, trazo el contorno del chico.
Una vez seleccionado el chico, con la herramienta Mover lo arrastro al documento que contendrá el GIF animado. Procedo de la misma forma con el resto de las imágenes que abrí en Photoshop (primero selecciono la parte de la imágen que me interesa y después arrastro esa parte al documento que creé).
Una vez que arrastré todas las selecciones que me interesan, la Paleta de Capas del archivo nuevo tendrá que quedar como aparece en la imagen inferior, esto es, cada selección en una capa diferente. Esto es primordial para que nuestra animación funcione.
Muchas veces, al arrastrar la selección al nuevo documento, ésta quedará muy grande o muy pequeña. Para solventarlo echaremos mano de la Transformación Libre (Edición>Transformación Libre) y tiraremos de cualquiera de sus esquinas pulsando la tecla SHIFT para que la transformación de tamaño se haga de manera proporcionada.
Una vez que tenemos todas las imágenes redimensionadas en nuestro documento el resultado debería ser parecido al siguiente:
Tocará ahora abrir el Panel de Animación (Ventana>Animación) para empezar a trabajar en el GIF animado.
El Panel de Animación viene con el primer fotograma por defecto. En él, si nos fijamos, aparecen todas las imagenes. Si lo que queremos es que se vea solo una, tendremos que ir al Panel de Capas y quitarle la visibilidad (hacer clic en el ojo) a las capas que no queremos que se vean. En esto consistirá fundamentalmente el GIF animado, en poner y quitar la visibilidad para los diferentes fotogramas.
En el ejemplo que nos ocupa crearé una nueva capa para hacer un rectángulo negro que oculte la imagen de fondo. A medida que avance en los fotogramas, la iré moviendo hacia la izquierda para que se vea la imagen de fondo. También tenemos la posibilidad de modificar el tiempo que aparece el fotograma en pantalla.
Crearemos ahora un nuevo fotograma y moveremos con la herramienta Mover el recuadro negro hacia la izquierda.
Seguimos creando fotogramas y moviendo el rectángulo negro hacia la izquierda. El Panel Animación nos proporciona la posibilidad de hacer una previsualización de como está quedadndo el GIF animado. Para ello solo tenemos que darle al botón de Play que aparece en la parte inferior del panel.
Tras la previsualización nos daremos cuenta de que nuestra animación irá muy lenta o rápida. Tendremos entonces que modificar el tiempo de cada fotograma. Llegará también un momento en que queramos que aparezca otro elemento de la animación, solo tendremos que ponerle la visibilidad en la Paleta de Capas y el personaje (o texto, o cualquier otro elemento) aparecerá en el fotograma en el que nos encontremos.
Otra manera de animar una imagen, será ir variándole poco a poco la opacidad en la Paleta de Capas, consiguiendo así un efecto de que la imagen aparece poco a poco.
Una vez rematado nuestro GIF animado será el momento de guardarlo. Como el ejemplo que nos ocupa está destinado a la Web, iré a Archivo>Guardar para Web y dispositivos.
En la ventana emergente que se nos abre, seleccionaremos el formato de archivo GIF y el número de repeticiones que queremos que nuestro GIF animado tenga.
Tras darle a Guardar nos Photoshop también nos dará la posibilidad de guardar solo las imágenes, solo el HTML. o las imágenes y el HTML.
