epelpad

Cómo crear espectaculares gif animados en 3D

¿Te encontraste con alguno de estos GIF animados en 3D? En este artículo te explico como crearlos de forma sencilla.


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.

gif animados

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

Como ya te comenté, 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.


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. 

Cómo crear espectaculares gif animados en 3D

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.

gif animados

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

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.

gif en 3d

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:

Como crear GIF animados en 3D

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.

Cómo crear espectaculares gif animados en 3D

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:

gif animados

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).

gif en 3d

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

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.
Como crear GIF animados en 3D

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:

Cómo crear espectaculares gif animados en 3D

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.

gif animados

7. Consejo: Hcé 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).

gif en 3d

8. Consejo: Utilizá 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.

Como crear GIF animados en 3D

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.

Cómo crear espectaculares gif animados en 3D

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

10. ¿Donde puedo subir GIF animados grandes?

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.


gif animados

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.

gif en 3d

Si llegasen a tener dudas sobre algún paso a seguir, en está dirección encontrarán una mejor explicación.


17 comentarios - Cómo crear espectaculares gif animados en 3D

horacioeme +3
Está muy bueno Adolfo !!. Se lo voy a pasar a mi sobrino que a él le gustan estas cosas.
Van mis puntos.
AdolfoFinochiett
Como siempre gracias Horacio. Saludos.
Pizzaymoscato +1
Qué realismo viejo. El del gato está fabuloso. Inteligente post amigo.
AdolfoFinochiett
Si, el del gato está muy bien logrado, y otro que me gusta es el del helicóptero por el efectos de las aspas. Gracias por tu comentario.
hjdm5 +1
muy bueno, gracias por compartir
AdolfoFinochiett
Me alegro te haya gustado. Gracias.
pataepalo2 +2
Muy interesante ! Tengo que plantearme seriamente empezar a aprender un poco para no ser un analfabeto digital . . . . . . . Van puntos!
AdolfoFinochiett +1
Gracias amigo. Yo lo ví muy interesante aunque pienso lo mismo, hay cosas en donde uno es un verdadero "analfabeto digital". Jaaaaa.
pataepalo2
@AdolfoFinochiett Me conformo con eso ! xD
hjdm5 +1
me gusto tu comentario, el primer paso ya lo tomastes, animo que la vida es una continuidad y lo unico que nos llevamos a nuestra siguiente vida es lo aprendido en esta.

Saludos
Crismera1 +2
Muy bueno. la verdad no creo que los haga pero está muy zarpado. te dejo +4
AdolfoFinochiett
SI, yo lo leí y por el momento no me animó tampoco, pero me pareció bueno postearlo. Gracias.
forevercobain +1
Lindo post +10
AdolfoFinochiett +1
Te agradezco amigo. Un saludazo para vos .
Akosca +2
Muy bueno, +10
AdolfoFinochiett +1
Me alegro te haya gustado. Gracias por tus puntos.
ratisalil +1
muy bueno gracias, como novato no tengo puntos,
pero se agradecer!
AdolfoFinochiett
No tiene mayor importancia. Lo más importante es que el post te deje algo. Saludos y suerte.
telepunchy
no se puede hacer sin esas franjas blancas ?
AdolfoFinochiett
Mirá, yo no probé de hacerlo, pero al final del post tenés un link para tener mayor mayor información. Suerte !.
_skuu
Muy bueno. Gracias por la info.
AdolfoFinochiett
Gracias a vos por entrar. Saludos.
joa_238 +1
Genial van puntos
AdolfoFinochiett
Te agradezco amigo. Saludos para vos.
NutriaNDLN +2
Como crear GIF animados en 3D
AdolfoFinochiett
SI este lo dice, seguro debe ser. Jaaaaaaaaa.
daniex15 +1
BRAVO!!! BUEN POSTO
AdolfoFinochiett +1
Me alegro que te haya gustado. Saludos.
bbiArez
van 10 que buenos estan