¿Cómo hacer un corazón animado? | Pixel Art |

¡Buen día, steemians! Esta vez les traigo un tutorial enfocado en realizar su propio corazón animado, igual al que pueden observar encima de este párrafo. Este puede ser usado para decorar un post, para regalarlo, para usarle en alguna página, ¡lo que tú quieras! Y si el tamaño del corazón no te convence también te enseñaré cómo hacer que se vea más grande.

Antes de empezar hay que descargar dos programas: Adobe Photoshop y Easy Paint Tool Sai. No te preocupes, te dejaré dos vídeos que te guiarán en su descarga y en este post te daré el paso a paso de lo que tienes que hacer una vez los tengas.

• Vídeo de Easy Paint Tool Sai. ¡No me pertenece! Todos los derechos y créditos son de su autor o autora.

• Vídeo de Photoshop. ¡No me pertenece! Todos los derechos y créditos son de su autor o autora.

Lo primero que debes hacer es abrir el programa Easy Paint Tool Sai (SAI) y crear un Nuevo Lienzo. Para ello dirígete a la parte superior del programa y selecciona Archivo >> Nuevo. Una vez hagas este paso se abrirá una ventana en donde debes seleccionar la altura y anchura del Lienzo, te recomiendo que sea 20 de Altura x 20 de Anchura, trabajando con medidas de pixel. Acá te dejo un ejemplo.

Todos los ejemplos son imágenes en movimiento que te enseñan el paso a paso. Esto significa que tras unos segundos la imagen que estás viendo cambiará, y luego de terminar su ciclo volverá a mostrarte la primera imagen que visualizaste.

¡Sé que se ve pequeño el lienzo! Puedes hacer un acercamiento utilizando la rueda del ratón. Ahora, selecciona la herramienta Pincel Binario ubicada al lado izquierdo del programa, coloca tamaño uno (1) y selecciona el color que desees en la Rueda o Paleta de Colores.

¡Es hora de hacer el corazón! Nos tomará un total de dieciséis (16) píxeles, debajo de este párrafo te enseño el paso a paso. Recuerda que puedes seleccionar el color que quieras: Rojo, azul, amarillo, verde, ¡es tu creación! Yo empleo dos colores distintos; uno para el borde y otro para el centro, pero puedes utilizar el mismo color para todo. Una vez hecho el borde como te enseño a continuación, puedes rellenarlo.

Te recomiendo que hagas el corazón en el centro del lienzo, sin embargo es de tu elección en dónde quieras ubicarlo.

Ya con nuestro primer corazón listo es hora de realizar el segundo. Ve nuevamente a la parte superior del programa y selecciona la opción Capa >> Nueva Capa. Esto generará una nueva hoja en la que podemos dibujar, pero antes de ello Oculta la anterior: Ubícate en la parte izquierda del programa y haz clic en el ojo que aparece al lado de tu Capa 1. Con ello tu dibujo estará oculto, puedes volverlo a Mostrar haciendo clic en el mismo lugar. Ahora sí, trabajemos en nuestra Capa 2.

La primera capa se oculta para que no interfiera a la hora de crear el segundo corazón. ¡Tranquilidad! Ocultar la capa no borra el dibujo que ya hiciste anteriormente.

Es momento de hacer el segundo corazón. Debes seguir los mismos pasos que en el primero, sólo que esta vez usaremos veinte (20) píxeles y empezaremos nuestro borde por debajo del anterior. Lo recomendable es usar los mismos colores, pero depende de ti cómo quieras que se vea tu animación. Lo que sí es muy importante es que te ubiques en la misma zona, para que a la hora de generar tu animación los corazones no estén en dos partes diferentes y se pueda crear el efecto deseado.

En primera instancia te enseño con un color diferente el primer pixel que trabajo comparándolo con el corazón principal, esto para que notes a qué me refiero con “empezaremos nuestro borde por debajo del anterior”.

Como notarás en mi segundo corazón hice cuatro (4) píxeles extras para simular las ondas de sonidos generadas por el latido. ¡Es meramente estético! De ti depende si colocarlas o no.

Ahora que está todo listo Oculta la Capa 2 y Haz Visible la Capa 1. Guarda tu trabajo yendo a la parte superior del programa y haciendo clic en Archivo >> Guardar como… Selecciona Tipo: Photoshop PSD (*psd) >> Guardar. Con esto nuestro programa Photoshop podrá leer el archivo. También puedes guardarlo en otro formato si lo deseas, pero es obligatorio que sea en .psd para realizar la animación.

¡Hora de entrar en nuestro Photoshop! Sé que este programa asusta a muchos, pero esta es la parte más fácil. Abre tu archivo yendo a la opción Archivo >> Abrir que está ubicada en la parte superior y selecciona el archivo que guardaste anteriormente. Para acercar tu lienzo utiliza la combinación de teclas CTRL++.

Nuevamente en la parte superior selecciona Ventana >> Línea de Tiempo. Verás cómo se abre una nueva ventana en la parte inferior del programa, ve a ella y selecciona Crear Animación de Fotogramas. Una vez hecho, haz clic sobre el botón que posee el mismo nombre ya elegido.

En la parte inferior izquierda encontrarás una opción que se llama Una vez, haz clic y cámbiala a Infinito. Con esto nuestra animación nunca se detendrá, también haz clic debajo del Cuadro de Imagen que nos presenta esta ventana, selecciona 0,2 segundos.

Si quieres que la animación vaya más rápida o lenta, o que no se repita por siempre, elige otro tiempo.

Ahora sólo debes hacer clic en el botón Duplicar que se encuentra en la parte inferior, se creará un Nuevo Cuadro. Dirígete a la ventana de Capas que se encuentra en el lado derecho del programa, Oculta la Capa 1 y Haz Visible la Capa 2. Una vez hecho ello, puedes probar tu animación pulsando el botón Reproducir ubicado cerca del botón Duplicar.

Si quieres que tu imagen sea más grande ve a la parte superior y selecciona Imagen >> Tamaño de la Imagen, elige la opción: Por aproximación (conservar bordes definidos) ubicada en la parte inferior y cambia su Anchura y Altura. En este ejemplo cambiamos sus dimensiones a 40x40.

Si te gusta cómo ha quedado sólo hace falta guardar la animación. En la parte superior selecciona Archivo >> Guardar para Web… >> Guardar… Guardar. ¡Y listo! Ya tienes tu corazón animado.

Eso es todo. Espero que este tutorial haya sido de su agrado, y que las instrucciones les hayan servido. Si poseen alguna duda pueden dejarlas en un comentario.

¡Todas las imágenes que has visto acá son de mi autoría! Ya sea porque son dibujos míos o capturas de pantalla. Los programas usados son Photoshop CS6 Portable y Easy Paint Tool Sai.

• Te dejo acá mi tutorial para hacer Pixel Art.

• También mi tutorial para hacer animaciones.

¡Saludos!