Cómo crear íconos vectoriales animados en Adobe Illustrator y Photoshop

Animar íconos vectoriales y diseños es algo que se hace fácilmente con Adobe Illustrator y Photoshop. Simplemente crea íconos de diseño plano e impórtalos desde Photoshop para una sencilla creación de GIF. Elaboraremos tres íconos animados y exploraremos un par de técnicas para crear animaciones fluidas y fáciles.

¿Necesitas inspiración? Explora más increíbles íconos vectoriales en Envato Market y Envato Elements.

1. Cómo dibujar el sobre para el ícono animado

Paso 1

Crea un Nuevo documento en Adobe Illustrator. Utilizaré Adobe Illustrator CC, pero puedes adaptar fácilmente estas técnicas y diseños a versiones anteriores. 

Con la herramienta Rectángulo (M), dibuja una forma de color azul claro. Selecciona los dos puntos de ancla inferiores con la herramienta Selección directa (A), y jala los Vértices interactivos hacia adentro para redondear esos dos vértices. Usa la herramienta Pluma (P) para dibujar una línea de color azul que define la abertura del sobre.

Paso 2

Dibuja dos líneas con la herramienta Pluma o la herramienta Segmento de línea (/) que casi llegue al centro del sobre. Expande tus trazos en Objeto y usa la herramienta Constructor de formas (Mayúsculas-M) para seleccionar las porciones que no se intersectan de las líneas del rectángulo con la finalidad de eliminarlas. Este es nuestro objeto básico del sobre. 

Paso 3

Copia (Control-C) y Pega (Control-V) el diseño del sobre. Dibuja un triángulo desde la esquina superior hasta la otra esquina superior para la abertura del sobre. Selecciona el triángulo mientras mantienes presionada la tecla Alt, y arrastra un duplicado del triángulo. Rótalo (R) para crear la abertura del sobre, y establece el color de relleno en un azul oscuro. Para fines demostrativos, mis líneas no se aprecian en el diseño de abajo, pero serán usadas en la versión final. 

Paso 4

Ahora debes tener dos sobres: uno abierto y el otro cerrado. Nuestro objetivo es crear varias iteraciones de sobres que gradualmente vayan cambiando desde el cerrado hasta el sobre abierto para nuestra animación final. Agrupa (Control-G) cada uno de los componentes del sobre.

2. Cómo crear diferentes formas del sobre 

Paso 1

Duplica el sobre abierto. Utiliza la herramienta Selección directa para tomar el punto de ancla superior del triángulo de arriba y arrástralo hacia abajo hasta que casi cubra por completo el triángulo oscuro. Duplica este grupo de sobre y jala el punto inferior del triángulo más claro un poco hacia arriba para que el sobre parezca más abierto. Continuaremos duplicando cada sobre y moviendo el triángulo hacia arriba hasta que regrese al punto inicial. 

Paso 2

Al final, incluyendo los sobres cerrados y abiertos, tengo nueve sobres para mi ícono animado. Puedes verificar la colocación de los triángulos y sus puntos de ancla a continuación. Asegúrate de que cada sobre esté agrupado por separado para que sea fácil exportarlos hacia Adobe Photoshop posteriormente.

3. Cómo crear la carta para el ícono animado

Paso 1

Dibuja un rectángulo de color amarillo claro y Cópialo y Pégalo en cada sobre. El objetivo es mover el rectángulo hacia arriba en incrementos uniformes mientras el sobre se abre. Decidí tener siete rectángulos en total para mi diseño.

Paso 2

Selecciona el primer sobre y su rectángulo superpuesto. Usando la herramienta Constructor de formas, selecciona la porción del rectángulo amarillo que forma intersección con el interior del sobre. Elimina la porción que no se intersecta del rectángulo amarillo para que solo te quedes con un triángulo pequeño del rectángulo amarillo. Repite esta técnica en los otros sobres.

Paso 3

Continúa definiendo la forma de la carta amarilla para cada sobre. Puedes ver cómo lucen mis cartas con su sobre correspondiente a continuación.

Paso 4

Dibuja varios rectángulos de muy poca altura para simular líneas escritas en la carta. Alinea y Distribuye los rectángulos en el panel Alinear. Luego, Unifícalos en el panel Buscatrazos.

Paso 5

Coloca múltiples series de rectángulos sobre cada sobre. Nota cómo algunas letras muestran más líneas que otras. He colocado series de rectángulos en seis de mis nueve sobres.

Paso 6

Selecciona la forma de la carta y de los rectángulos. Usando la herramienta Constructor de formas, selecciona la porción de cada rectángulo que no se intersecta y elimínala. Repite este paso para todos tus sobres.

Paso 7

Agrupa cada sobre y sus componentes para que tengas nueve grupos separados en total. ¡Ahora estamos listos para animar nuestro diseño!

4. Cómo animar en Photoshop el sobre

Paso 1

Abre Adobe Photoshop y crea un Nuevo documento. Ya que estamos creando un gráfico web sencillo, he establecido mi Tamaño de documento en 72 ppp (no hay razón para una resolución mayor debido a que no vamos a imprimir nuestra ilustración), anchura en 250 px y altura en 300 px. Puedes crear un archivo más grande o más pequeño si lo deseas y también recortar tu documento cuando necesites hacerlo.

En Adobe Illustrator, Copia cada grupo de sobre y Pégalo en tu documento de Adobe Photoshop. Si quieres redimensionar tu imagen sin perder calidad, pega cada grupo como un Objeto inteligente. Si estás satisfecho con el tamaño, Pégalos en una nueva capa como Pixeles. 

Paso 2

Asegúrate de que cada objeto esté ubicado en capas de manera secuencial. Adicionalmente, querrás seleccionar las nueve capas y Alinearlas respecto a sus centros y bordes inferiores.

Paso 3

Abre el panel Línea de tiempo y pulsa en Crear animación de cuadros. Comenzando con la capa del sobre cerrado (oculta las otras), crea un Nuevo cuadro y establece el retardo en 0.1 segundo. Para cada cuadro, muestra la siguiente capa y oculta la capa previa hasta que el sobre esté abierto. Luego, establece el retardo en 0.2-0.5 segundos. 

Repite mostrar y ocultar capas, pero esta vez en orden inverso para que el sobre se cierre de nuevo. Asegúrate de que la opción de repetición esté establecida en "Infinito" para que la animación se siga abriendo y cerrando.

Paso 4

Siéntate cómodo y pulsa Reproducir en el panel Línea de tiempo para observar la repetición de tu gif. Puedes ajustar los retardos de tu cuadro para un gif más lento o más rápido así como cambiar el tiempo que se ve el sobre abierto o cerrado en el panel Línea de tiempo. Pasemos a los otros íconos y a las técnicas adicionales para animar.

5. Cómo dibujar un ícono vectorial de chat

Paso 1

De regreso en Adobe Illustrator, ya sea en un nuevo documento o en una nueva capa, dibuja un círculo usando la herramienta Elipse (L). Posteriormente, vas a encimar el círculo con un pequeño triángulo y a Unificar las dos formas: esta es tu burbuja básica de chat. Dibuja tres círculos para las elipses que se usarán en la animación más adelante.

Paso 2

Copia y Pega la burbuja de chat y Refléjala sobre un Eje vertical. Cambia el color de la segunda burbuja a un tono más oscuro. Escala hacia un tamaño menor las elipses para que quepan en la burbuja de chat. A continuación añadiremos texto.

Paso 3

Dibuja o escribe palabras sencillas como "hey" y "hi", ya sea usando una fuente manuscrita o dibujando cada letra con la herramienta Pincel (B) con un pincel predeterminado de caligrafía. Asegúrate que cualquier texto o trazo se convierta a objeto y que esa letra sea un objeto independiente.

Paso 4

Escribe o dibuja emoticonos de texto sencillos dentro de las burbujas de chat. Otra opción sería que dibujes emojis. Se trata de tu ícono de chat y el estilo general lo decides tú. En total, hay 14 componentes separados abajo: tres elipses, cinco letras, dos burbujas de chat y cuatro objetos creando emoticonos. Cada uno será Copiado y Pegado en un nuevo documento en Adobe Photoshop como una capa separada.

6. Cómo animar en Photoshop el ícono de chat

Paso 1

En Adobe Photoshop, Pega cada uno de los 14 componentes de íconos en tu documento como una nueva capa. Agrúpalos como objetos como se observa abajo en el panel Capas: los componentes para cada palabra, emoticono, elipses y burbujas de chat. Esto mantiene tu documento organizado y facilita la animación de tu GIF.

Paso 2

Para comenzar, quiero que mi primera burbuja de chat venga desde el lado izquierdo. He ocultado todos los componentes excepto la primera burbuja de chat y la he colocado afuera de mi primer cuadro del documento para el primer cuadro de la Línea de tiempo. Dentro de siete cuadros, he movido mi burbuja de chat hacia el centro del documento desde el lado izquierdo. Puedes mover y alterar una capa para cada nuevo cuadro sin afectar el cuadro previo.

Una vez que la burbuja de chat se aprecie, comienzo el efecto de "escritura". Solo se ve una elipse a la vez dentro de la primera burbuja de chat, seguida por el primer mensaje de "hi". Luego comienzo a deslizar la segunda burbuja de chat hacia el cuadro, mientras el primer mensaje del chat (agrupado en el panel Capas como "hi") se reduce en opacidad (20% cada cuadro) en el panel Capas.

Paso 3

Este es un aspecto de mi panel Línea de tiempo para el GIF entero. Tengo más de 30 cuadros en total y la mayoría tiene un retardo de 0.1 segundos. Algunos componentes, como las elipses, van "punto, punto, punto" en un retardo de 0.3 segundos, mientras que el desvanecimiento de las palabras o la escritura de las letras y los emoticonos es más rápido cuando es posible. Puedes ajustar tus retardos preferidos como veas que encajen. Quieres que la escritura sea fluida y legible sin ser demasiado lenta y agitada.

Paso 4

Puedes checar mi animación final a continuación: la primera burbuja de chat entra y comienza a escribir, la segunda burbuja de chat responde y ambas envían emoticonos y luego vuelven a salir del cuadro. Tenemos que hacer un último ícono animado que combina las ideas y las técnicas utilizadas previamente.

7. Cómo dibujar el ícono vectorial de la cámara

Paso 1

En Adobe Illustrator, dibuja un rectángulo. Selecciona los dos puntos de ancla superiores con la herramienta Selección directa y jala hacia adentro los Vértices interactivos. Dibuja un segundo rectángulo más oscuro abajo del primero y redondea sus esquinas inferiores. Nota que el segundo rectángulo es más pequeño que el primero, pero ambos comparten la misma anchura. 

Paso 2

Dibuja un rectángulo delgado de color gris oscuro para la abertura de la película instantánea en la mitad inferior de la cámara. Dibuja rectángulos redondeados y un círculo para el lente, el visor y diseños adicionales en la parte frontal de la cámara.

Paso 3

Agrega un círculo rojo y un círculo de color gris cálido oscuro para el botón de la cámara. Para el lente, apila los círculos gris y azul, alternando entre oscuro y claro. Usa la herramienta Selección directa para empujar hacia abajo el punto de ancla superior del círculo interior para que el lente luzca brillante (mira el diseño a continuación).

8. Cómo crear los componentes de la cámara que serán íconos animados

Paso 1

Para la animación del obturador quise una sencilla animación de abrir y cerrar. Por supuesto, puedes crear formas más complejas si quieres. Para mi obturador dibujé un círculo gris oscuro. Copia y Pega el círculo y córtalo a la mitad (vas a superponer un segmento de línea sobre el centro horizontal del círculo y luego Dividir las dos formas en el panel Buscatrazos).

Copia y Pega las dos mitades del círculo. Mueve cada mitad lejos del centro y usa la herramienta Selección directa para mover los dos puntos de ancla inferiores para achatar ligeramente cada círculo. Repite la acción para seis iteraciones que dan la impresión de abrir y cerrar el obturador. Estos seis grupos serán Copiados y Pegados en el documento de Photoshop durante la etapa de animación.

Paso 2

Ahora podemos trabajar en la película instantánea. Esencialmente dibujarás una serie de rectángulos que se hacen cada vez más grandes. Comienza con un rectángulo delgado de color gris claro en el centro de la mitad inferior del ícono de la cámara. Después de un par de rectángulos, añadirás un rectángulo gris oscuro al gris claro. Nota cómo se hacen más largos mientras avanzas.

Paso 3

Este es un aspecto final de todos los componentes de la cámara: la cámara, las seis formas del obturador y las ocho formas de la película (incluyendo el de la cámara). En total copiaré y pegaré 15 componentes en el documento de Photoshop en la siguiente sección. ¡Animemos esta cámara!

9. Cómo animar en Photoshop la cámara

Paso 1

Al igual que con los íconos previos, Copia y Pega cada componente en tu documento de Photoshop. Me pareció lo más fácil que cada ícono que tuviera su propio documento dentro de Photoshop para que me concentrara en una animación a la vez. 

Agrupa las capas del obturador y de la película en el panel Capas arriba de la capa de la cámara. Comencé con la animación del obturador: cierra y abre el obturador para que el lente parezca que está en operación.

Paso 2

Posteriormente, querrás animar la película entrando y saliendo de la ranura de la película (de manera alternativa, puede caer de la cámara, como lo haría realmente). Una vez más iterarás por cada componente de la película uno tras otro y luego crearás un cuadro para cada uno en retroceso.

Paso 3

Finalmente, una nota rápida sobre guardar tus archivos GIF. Aplica Archivo > Exportar > Guardar para web (heredado) (Alt-Mayúsculas-Control-S) y selecciona GIF del menú desplegable. Limita el GIF a 32 colores o menos si es posible. Puedes previsualizar la animación, redimensionar tu archivo y decidir sobre la calidad del archivo antes de pulsar Guardar. 

Paso 4

¡Este es un aspecto de mi ícono de cámara final en acción! 

¡Magnífico trabajo, terminaste los íconos animados!

Si estás creando un gif con cada cuadro dibujado en Adobe Illustrator, manipulando componentes durante la etapa de creación de un GIF, o una mezcla de ambas técnicas, animar gráficos vectoriales es sencillo y divertido. Comparte tus creaciones en la sección de comentarios al final de este artículo, o lleva estas ideas hasta sus límites y crea un conjunto completo de íconos animados o incluso escenas listas para publicar en la web ¡y más!

Íconos vectoriales de Envato Elements

Si quieres más fantásticos diseños de íconos, dirígete a Envato Elements, donde puedes suscribirte para desbloquear miles de recursos de diseño de alta calidad ¡por una tarifa mensual! ¡Consulta uno de nuestros favoritos a continuación!

Íconos vectoriales vibrantes

¡Vas a disfrutar una fabulosa experiencia con este vibrante paquete de íconos vectoriales! Contiene 30 íconos minimalistas adecuados para varios proyectos. Edita fácilmente estos íconos usando Adobe Illustrator ¡y haz que resalten con colores fascinantes!