Cómo crear tus propios GIF en 3D

Cómo crear tus propios GIF en 3D

Vivimos en la era de los GIF 3D en Tumblr . Estas imágenes, que utilizan ilusiones ópticas para hacer que los elementos visuales parezcan salir de la pantalla, se han vuelto tan populares en el sitio web que el año pasado la publicación oficial de Tumblr año en revisión resumen dedicado una categoría completa a ellos.

qué tan malo puedo ser / Tumblr

GIF de rorytheprettyone a través de thxxghtx / Tumblr

Pero a pesar de que han estado circulando en Tumblr durante años, los GIF en 3D recién ahora se están abriendo camino en otras partes de Internet. Afortunadamente para ti, es fácil impresionar a otros usuarios que no son de Tumblr con su magia especial: todo lo que necesitas para hacer uno son unos minutos y una copia de Photoshop.

1) Elegir una imagen

Usa un GIF con movimiento visual hacia adelante

El objetivo de una buena imagen en 3D debe ser producir un efecto que salga del encuadre 'hacia' el espectador, por lo que debes elegir imágenes que ya tengan naturalmente algún tipo de movimiento hacia adelante, como este:

impassionategods / Tumblr

Usa un GIF con una composición uniforme e inteligente

Las mejores imágenes también tienen una composición visual que se puede dividir fácilmente en divisiones uniformes a lo largo del marco. Hay dos tipos comunes de GIF 3D. Un tipo, como el GIF anterior, se basa en un “marco” falso de Tumblr del que se desprende la imagen, generalmente en la parte inferior del GIF. El otro tipo, que es más común, divide la composición de la imagen en tres paneles horizontales, así:

yearinreview / Tumblr

Observe que la imagen de arriba usa la composición de la escena de Chicos malos ii para ajustar el movimiento en la pantalla de manera uniforme entre estos tres paneles espaciados uniformemente. Si está buscando una composición visual inteligente como esta, hará que la selección de escenas y GIF para modificar y convertir en versiones 3D sea mucho más fácil.

En algunos casos, un GIF puede usar tanto la parte inferior de la pantalla como los paneles horizontales en la composición para lograr el máximo efecto:

bleecake / Tumblr

Para los propósitos de este tutorial, nos centraremos en hacer un GIF 3D simple con tres paneles horizontales en la imagen.

Capture su propio GIF o pida prestado uno preexistente para modificarlo

Si aún no sabe cómo hacer un GIF básico, primero deberá aprender a capturar imágenes de video usando cualquiera de los muchos programas disponibles para computadoras Mac, Linux o Windows. Luego, querrá aprender a editar su metraje en Photoshop usando cualquiera de los muchos, muchos tutoriales GIF que existen en Tumblr y otros sitios web. También puede ver nuestros tutoriales sobre cómo hacer GIF desde su dispositivo móvil o web o de Imgur .

O utilice una de las muchas herramientas de captura de imágenes que convierten automáticamente el metraje en formato GIF, como Licecap para Windows o GIF Grabber para Mac. O simplemente puede guardar y modificar un GIF preexistente. Para este tutorial, le mostraremos cómo modificar este GIF de la película. Rise of the Guardians .

Aja Romano

Como puede ver, tiene los requisitos básicos que necesitamos: movimiento hacia adelante y movimiento que se puede dividir fácilmente en tres fotogramas espaciados uniformemente.

(Nota:El artista del personal de Daily Dot, Jason Reed, ayudó con los aspectos prácticos de este tutorial de aquí en adelante).

2) División de la imagen:

Configurar guías.

La mayoría de los GIF 3D se dividen en tres paneles. En Photoshop, abra el GIF. Ahora vaya al menú de navegación y elija Ver y luego Nueva guía en el menú desplegable.

Para un GIF que usa tres paneles, querrá establecer la guía en 33 por ciento y 66 por ciento. Así es como debe verse la pantalla después de haber configurado su primera guía y está ingresando la segunda al 66 por ciento:

Aja Romano

Y así es como se verán ambas guías:

Aja Romano

Para un GIF que desee dividir en dos paneles en lugar de tres, querrá establecer una guía al 50 por ciento; para cuatro paneles, configure las guías en incrementos del 25, 50 y 75 por ciento.

Coloque una línea blanca sobre las guías.

A continuación, coloque una línea blanca verticalmente en cada guía utilizando la herramienta Línea en el menú Forma. Para llegar allí, vaya a la barra lateral vertical de Herramientas a la izquierda y ubique la opción Herramienta Rectángulo hacia la parte inferior. Cuando haga clic con el botón derecho en esta herramienta, se le dará una lista de opciones de herramientas de forma para elegir, como esta:

Aja Romano

Elija la herramienta Línea. Así es como aparecerá en la barra de menú:

Jason Reed

Asegúrese de que el color de relleno esté establecido en blanco y la opción Trazo esté establecida en 0. Ahora haga que el grosor de la línea sea de 5 píxeles. Esta opción estará en el extremo derecho del menú:

Aja Romano

Agregue las líneas sobre las guías haciendo clic y arrastrando. Se completarán automáticamente a 5 píxeles, y ahora tiene su imagen de tres paneles para trabajar.

3) Adición de máscaras.

Configuración.

Seleccione y combine esas capas de línea (CTL-E) y agregue una máscara de capa (Capa> Máscara de capa> Revelar todo).

Revise cada fotograma del GIF (haciendo clic en los fotogramas en la línea de tiempo) para ver cómo sus sujetos, en este caso Jack Frost y su delfín mágico, están interactuando con las dos líneas blancas.

Aja Romano

Deberá crear una copia de la capa de línea para cada fotograma, por lo que si no desea que su GIF tenga un tamaño de archivo enorme, es útil elegir o crear un GIF con la menor cantidad de fotogramas posible.

Solo necesitarás modificar cada uno de los fotogramas del GIF que muestra el paso del delfín. Al frente de las barras. Por ejemplo, en los dos primeros fotogramas y el último fotograma, el delfín está detrás de la barra de la derecha, por lo que no es necesario modificar esos fotogramas.

En este caso, necesitamos modificar 7 de los fotogramas, por lo que necesitaremos hacer 7 copias de la capa enmascarada:

Jason Reed

Para su propia cordura, etiquete cada nueva copia de la capa enmascarada con algo que coincida con el fotograma en el que se utilizará. Por ejemplo, nombre la primera capa enmascarada que modifique como 'Fotograma 3', porque lo hará coincidir con el tercer fotograma.

Ahora, amplíe y comience a enmascarar. Pintar de negro en la máscara hará que las barras 'desaparezcan', y pintar de blanco hará que 'reaparezca'.

Jason Reed

Haga esto para cada cuadro donde el delfín esté frente a las barras. No olvide hacer visible solo una capa enmascarada a la vez para cada fotograma que modifique.

Aja Romano

Una vez que haya pintado todos los cuadros que lo necesitan, aleje el zoom y presione reproducir en su GIF para asegurarse de que todo se vea bien.

¡Y voilá! Un delfín 3D volador:

Jason Reed

Y aquí está la versión que hice después de seguir el tutorial de Jason:

Aja Romano

Súper fácil, ¿verdad? Todo lo que necesitas es un poco de tiempo y paciencia para colorear o borrar un par de barras blancas.

Y como puede ver, los resultados valen la pena. Incluso se podría decir ... mágico.

Ilustración de Aja Romano