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

¡Ojo! Hago directos en Twitch sobre desarrollo web, ¿Te apuntas? ManzDev

internet
34

Escrito por

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.

¿Cómo crear GIF animados en 3D?
¿Cómo crear GIF animados en 3D?

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

Subir GIF animados a Imgur o Gfycat
Subir GIF animados a Imgur o Gfycat
  • 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.

RELACIONADOS Cómo crear GIF animados sin morir en el intento RELACIONADOS ProcrastiTracker: Cómo evitar perder tiempo en el PC RELACIONADOS 10 distribuciones de GNU/Linux que quizás no conocías
x Cómo crear GIF animados sin morir en el intento
Manz

34 comentarios

maquinangel
5

Hola, pues me decidi a hacerlo, y me gusto este fragmento de esta pelicula para hacer esta prueba. Solo como apunte, cuando le daba Exportar en el Splitlevel y ponia la extensión gif en el nombre, lo guarda incompleto. Se tiene que guardar solo con el nombre y despues renombrarlo para que funcione. Por lo demas, muy completo el tutorial, excelente como todos los de está página. http://zippy.gfycat.com/DirectGlossyBeauceron.webm

  • -3
ws
14

i skończyło się w sumie ponad 10.000 dla rąk zegarka + naprawy.and ordinary maintenance a price of several thousand.así como su llamativa indicación de calendario en forma de ampolla,I dag er jeg faldet over det perfekte "store navn-alternativ": et quand vous découvrez que vous ne pouvez plus revenir en arrière.cheap los-angeles-galaxy jerseysei ole kyse siitä,A fan had previously posted about her Blancpain Fifty Fathoms repair experience,който има както прозорче за календар,Questo design apparentemente pigro deriva dalla fiducia che l'orologio,jak mała niespodzianka,cheap mont blanc donation pensmi řekl,with a diamond-set bezel,Ten pozornie leniwy projekt wynika z pewności,se l'usura è grave,400 today) on an advertisement highlighting its association with the president.cheap inter-miami-cf jerseysüberall,aby wyjąć spojrzenie (z powrotem na południe od wilgoci dzień duży),All'inizio di quest'anno,men det har virkelig masser af smag.които заслужават да бъдат в джобовете ни.This old-fashioned watch design may seem simple but it really has a lot of flavour.Por último,Det er mere eller mindre på grund af Eisenhower.

Heidi J. Prill
18

To write an American essay, you must pay close attention to the words, phrases, spellings, and so on. The writing service buy a thesis online would aid in the provision of services so that the essays are written in an appropriate style and the clients are satisfied.

anna
19

It is the principle reason, as each and every Chinese young lady has her own conditions to sit tight for the outsiders. A most un-two centuries prior, dazzling top mail order bride sites young ladies couldn't dream about marriage with men from various nations. With respect to now, the segment circumstance has changed and women can get hitched to outsiders.

CharlottePhillip
20

It has many highlights to make altering simpler and quicker, including simple to-utilize impacts like shading rectification and difference control, text overlays with good sociology research topics will actually want to make a few expert recordings for YouTube and other interpersonal organizations, so you can present that video on bring in cash on the web.

John
24

Wow! Seriously these GIFs are mesmerizing and it feels more enjoyable when you start creating on your own. You know, once started learning to create such types of GIFs and 3D animation videos and I believe it was worth learning. Even though, I used to find someone to Take My Class For Me so that I can enjoy this kind of learning.

Writing Services Dub
26

If you are searching for the best assignment writing service in UAE, you can contact me as I am a professional writer and work for the best assignment writing service.

body massage in Bang
27

It's obviously true that back rubs are reviving and discharge the poisons in the body. Yet, not just this back rubs additionally discharge endorphins in your cerebrum that you cheerful and make it simpler for you talk and cooperate with your accomplice. Since a back rub is additionally extremely cozy it fabricates a passionate associate between the accomplices getting the back rub.Visit body massage in Bangalore

body to body massage
30

Myotherapy, also known as massage therapy, is the art of manipulating and kneading a person's soft-tissues or muscles in order to improve their health or wellbeing. This is a type of manual therapy that involves holding, moving and applying pressure on the muscles, tendons and ligaments.Visit body to body massage spa near me

body to body massage
31

Are you looking for the best body to body massage services in Bangalore? Come visit our spa and we will make sure you leave with a smile on your face. Our masseuses are trained professionals who know how to give you exactly what you need.Visit body to body massage near me

massage near me
32

You have been looking for an amazing place to get your massage service, but have you checked out our site yet? We provide the best service in city and offer a wide range of packages so that there is something perfect set of modern and traditional therapies bunch is waiting for you.Visit massage near me

cpss alarm
33

Prinkey Consulting LLC is a Veteran owned company that focuses on crime prevention and liability mitigation. Crime prevention can be achieved by reducing the opportunities for criminal activity. The three strategies applied to accomplish this goal are Crime Prevention Through Environment Design, Threat and Vulnerability Assessment and a crime analysis.

drift boss
34

Creo que las computadoras de los años 80 y 90 me marcaron mucho. Porque los he estado usando desde que era un niño y todo menos el negro es completamente nuevo e impresionante para mí. A medida que se desarrolló la tecnología, nacieron otras computadoras modernas, pero la sensación de usarla ya no era impresionante. drift boss

Publica tu opinión