Cómo crear GIF animados en 3D (Split-Depth GIF)

Con el renacimiento de los GIF animados en los últimos años, ha nacido también un curioso fenómeno en el que podemos ver GIF animados con lo que parece un efecto 3D muy llamativo y sorprendente, todo ello a simple vista, sin necesidad de utilizar gafas especiales.

Este fenómeno (que no deja de ser un truco visual) se ha bautizado en Internet con el nombre de SplitDepthGIF (GIF animados con profundidad dividida). En este artículo veremos en que se basa y como crear uno de forma fácil y sencilla.

1. ¿Qué es un «Split Depth GIF»?

Como ya hemos comentado, se trata de un GIF animado modificado especialmente para exagerar el efecto tridimensional de una secuencia de imágenes y conseguir una profundidad y efecto 3D muy realista.

Rocket Raccoon (Guardianes de la Galaxia) en un Split Depth GIF

2. ¿Es un GIF animado en 3D?

Realmente, no. Se podría catalogar como pseudo-3D, ya que la imagen está realmente en dos dimensiones, pero nos aprovechamos de una serie de características que facilitan el que se perciba como algo que podría parecer 3D: poca profundidad de campo (objeto en primer plano sobre fondo borroso), tamaño de objetos respecto al espectador, y sobre todo, unas líneas divisorias generalmente blancas.

3. ¿Dónde está el truco?

Pues precisamente ahí. Las franjas o líneas blancas divisorias hacen prácticamente todo el trabajo, creando la sensación de profundidad en la que el objeto o ítem en primer plano parece que se acerca y sobresale de su propia imagen. En el siguiente ejemplo, incluso se exagera aún más este aspecto, ya que también se aprecia una línea horizontal divisoria en la parte inferior, donde también sobresale la bandera.

Dean Winchester (Jensen Ackles, Supernatural) en un Split Depth GIF

Las líneas no tienen porque ser necesariamente blancas, pero se ha establecido como color frecuente, ya que en la mayoría de páginas donde se colocan las imágenes tienen fondo blanco, por lo que se mezcla mejor con la misma.

4. ¿Cómo puedo crear un SplitDepth GIF?

Realmente es muy sencillo, no hace falta grandes conocimientos, pero dependiendo del caso puede ser (o no) algo laborioso.

Antes de empezar, necesitaremos un pequeño fragmento de la secuencia a utilizar en formato GIF. Podemos utilizar una herramienta online, como Imgur VidGIF, que permite extraer secuencias de videos de Youtube en GIF animado simplemente indicando la dirección del video de Youtube, o por otro lado, utilizar un programa como GifCam, Instagiffer o QGifer de los cuales ya hablamos en el artículo Cómo crear GIF animados sin morir en el intento. Intenta utilizar secuencias no demasiado grandes, ya que en caso contrario el GIF resultante será gigantesco.

Naturalmente, la calidad del SplitDepthGIF resultante dependerá de la astucia y destreza del creador con el ratón y las líneas divisorias. Sin embargo, para simplificar lo máximo la creación del GIF animado, vamos a utilizar una herramienta diseñada específicamente para este fin: Split Level (requiere Java instalado). Está creada por L77, y en ella cargaremos el GIF animado de la secuencia en cuestión:

Añadir líneas blancas en GIF animado con Split Level

Como vemos, la propia herramienta se encargará de añadir las líneas divisorias automáticamente, pudiendo modificar la posición de cada una mediante los controles inferiores Line Position. También podemos modificar el grosor de las mismas mediante el slider Line Thickness, o el color colocando el código hexadecimal deseado en Line Color.

Lo primero que debemos hacer es fijar la posición de las líneas, ya que una vez empecemos a borrarlas en los fotogramas no habrá marcha atrás. Para ello, podemos movernos a través de los fotogramas de la animación mediante los botones Prev Frame y Next Frame y decidir en que posición quedarían mejor. Debes colocar las líneas en un lugar donde, en algún momento, queden por detrás del objeto que queremos en primer plano (manos con pistolas en este ejemplo). También podemos reproducir la animación actual pulsando el botón Play, donde además se nos muestra el fotograma en el que estamos actualmente:

Moverse entre fotogramas de un GIF animado en Split Level

Nota: Es posible que al ir avanzando entre fotogramas, veamos las imágenes como se pueden ver en el círculo de la imagen anterior. No ocurre ningún error, esto es así por la forma en que funcionan los GIF animados, que establecen en transparente (blanco) los píxels que no varían respecto al fotograma anterior. Si esto te molesta a la hora de retocar la imagen, puedes utilizar ImageMagick para eliminar este comportamiento:

convert imagen-original.gif -coalesce imagen-limpia.gif

Eso sí, si realizas esta operación, aconsejo optimizar el GIF animado final con alguna herramienta como GifSicle o GifCam (mencionados en el artículo como crear GIF animados).

5. Añadir líneas blancas al GIF animado

Hemos llegado a la parte crítica de la creación del SplitDepthGIF. Tenemos la secuencia animada con las líneas colocadas, pero de momento siempre están superpuestas en la imagen. Sólo nos queda «borrar» las líneas en los fotogramas clave para que parezca que el objeto está en primer plano.

Para ello crearemos una máscara, que no es más que una zona donde se borrarán las líneas blancas. Utilizaremos los controles marcados en la siguiente imagen:

Draw Mask: Sirve para dibujar la máscara (línea eliminada) de los objetos a los que queremos dotar de profundidad (en este caso, las manos y pistolas).
Erase Mask: Si nos hemos confundido en el paso anterior y hemos eliminado más de la cuenta, podemos utilizar esta opción para hacer el paso inverso y volver a dibujar la línea.
Clear Mask: Simplemente, borra la máscara del fotograma y vuelve a dejar las líneas intactas. Útil si te has equivocado.

Añadir máscara con líneas blancas en GIF animado (Split Depth GIF)

La casilla Show Mask muestra en rojo la máscara. Podemos desmarcar esta casilla para ver el resultado final sin el color rojo (como en el círculo de la imagen anterior). Además, también podemos aumentar o disminuir el tamaño del cursor con el slider Brush Size.

Aquí puedes ver el resultado final: Pulp Fiction SplitDepth GIF, en Gfycat

Ojo: Antes de comenzar a hacer tu propio GIF animado en 3D, lee antes los siguientes consejos de fallos que suelen ocurrir las primeras veces que haces un SplitDepthGIF:

6. Consejo: Copia la máscara del fotograma anterior

Cuando empezamos a crear este tipo de GIF animados, no solemos prestar demasiada atención a las máscaras, creándolas por separado en cada fotograma. La mejor opción es crear la máscara del primer fotograma, y una vez la hemos terminado, pulsamos el botón Copy Mask, que copiará el recorte de máscara actual que hemos creado al siguiente fotograma.

Esto hará la creación mucho más cómoda, teniendo solamente que retocar ciertos detalles en cada fotograma, y evitando el parpadeo (flicker) que ocurre cuando hacemos cada fotograma de forma independiente:

Ejemplo con flicker: Terminator 2 SplitDepthGIF con defecto flicker, en Gfycat

7. Consejo: Haz los cambios por fotograma

Otro consejo a la hora de crear SplitDepthGIF es el de modificar todos los ítems del fotograma de una sola vez. Por ejemplo, en la animación de Pulp Fiction, hay que crear una máscara de dos ítems (la mano de Vincent y la mano de Jules). Con esta herramienta debemos hacer las dos modificaciones antes de copiar la máscara, ya que en caso contrario no tendremos ninguna forma de modificar las máscaras ya creadas (sobrescribiendo el trabajo realizado).

8. Consejo: Utiliza el modo «pincel»

Por defecto, la herramienta incorpora un pincel que al borrar las líneas divisorias hace que quede con aliasing (efecto dientes de sierra). Podemos activar la opción Brush Mode para cambiar a un modo en el que se suaviza este comportamiento, resultando unos cortes más elegantes.

9. ¿Cómo puedo disimular el salto del GIF?

En muchas ocasiones quizás queremos conseguir que nuestro «bucle animado» no presente un salto cuando finaliza la animación y vuelve al primer fotograma, y en su lugar conseguir una animación suave, que vuelva a su estado inicial como si de un bucle infinito se tratase.

Esto, muchas veces es muy difícil (si no imposible), sin embargo, lo que podemos hacer y es mucho más sencillo, es repetir la animación en orden inverso (como en nuestro ejemplo anterior de Pulp Fiction). Una herramienta que permite hacer esta tarea de forma muy sencilla es GifCam. Basta con cargar el GIF animado en cuestión, pulsar el botón Edit y luego, con botón derecho, seleccionar la opción Add Reverse Frames.

Consejo: Realiza este truco cuando tengas terminadas las máscaras de las líneas divisorias del SplitDepthGIF, para así no tener que hacer el doble de trabajo.

«Add Reverse Frames» añade al final del GIF la animación a la inversa

10. ¿Donde puedo subir GIF animados grandes?

Bien. Después de un rato luchando con barras divisorias, por fin hemos terminado nuestro SplitDepthGIF. Ahora... ¿Dónde puedo subirlo? Tienes varias opciones, entre las que destacan las dos siguientes

Imgur: La primera y más famosa es Imgur, un popular sitio web para compartir imágenes, que también permite subir GIF animados de hasta 2MB (3MB si estás registrado).
GfyCat: Si tu GIF animado es gigantesco y ocupa más de 3MB (algo muy habitual en los GIF animados), no te preocupes. Puedes subirlo a GfyCat, un sitio web que transforma los GIF animados en vídeo WebM permitiendo reproducirlos mediante HTML5 y reducir considerablemente su tamaño y tiempo de carga. Y no te preocupes por el tamaño, aquí tienes un impresionante GIF animado de 330MB.

Ahora que ya sabes crear tus propios SplitDepthGIF, ¿te animas a crear uno, subirlo y añadirlo en los comentarios? Puedes encontrar muchos más buscando SplitDepthGIF en Google o en Reddit.

enero

2015