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

shirani (46)in #spanish • 6 years ago

Tutorial_Corazón_Animado.png

[Imagen de mi autoría. Hecha en Photoshop]

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

[Imagen de mi autoría. Capturas de pantalla.]

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

[Imagen de mi autoría. Capturas de pantalla.]

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

[Imagen de mi autoría. Capturas de pantalla.]

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.

[Imagen de mi autoría. Capturas de pantalla.]

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.

[Imagen de mi autoría. Capturas de pantalla.]

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.

[Imagen de mi autoría. Capturas de pantalla.]

¡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++.

[Imagen de mi autoría. Capturas de pantalla.]

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.

[Imagen de mi autoría. Capturas de pantalla.]

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.

[Imagen de mi autoría. Capturas de pantalla.]

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.

[Imagen de mi autoría. Capturas de pantalla.]

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.

[Imagen de mi autoría. Capturas de pantalla.]

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.

[Imagen de mi autoría. Capturas de pantalla.]

Te dejo un ejemplo de un corazón más grande. Si deseas redimensionar es preferible que sea en números pares. O sea: 100x100, 200x200, 400x400. Para que no pierda la forma original.

200x200.

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!

Firma500x250(1).png

#cervantes #tutorial #technology #art

6 years ago in #spanish by shirani (46)

Sort:

cervantes (77) 6 years ago

Buenas @shirani, este post se ha votado a través del Proyecto Cervantes 'Posts de Calidad'. Un saludo.

$0.00

shirani (46) 6 years ago

¡Excelente! Me anima saber que mi post obtenga tal categoría. Muchas gracias. Saludos.

$0.00

romulogallegos (46) 6 years ago (edited)

(clic aquí) Para Información del proyecto

!FELICITACIONES¡ @shirani tu post a sido seleccionado por el proyecto @romulogallegos para obtener recompensas. Hemos seleccionado el Bot Minnowhelper quién te votará con recompensas mayores a 0.03 SBD. Agradecemos tu partipación !!!

Como participamos del proyecto

Muy fácil amigos, sólo deben seguir estos sencillos pasos:

Unirte a nuestro canal en Discord Romulo Gallegos haciendo clic en el siguiente link: https://discord.gg/CA6dEq
Publica el link de tu post en la sala #postulacion-post
Utilizando la etiqueta #RomuloGallegos en tu post (puedes ubicarla en cualquier posición).

$0.00

shirani (46) 6 years ago

¡Gracias! Me alegra que hayan elegido mi post y que consideren que vale ello. Me complace formar parte de su proyecto e ir avanzando junto a ustedes en Steemit.

$0.00

mariana4ve (73) 6 years ago

Excelente publicación y contenido, me encantó el uso de los gif para hacer más sencilla la visualización del tutorial, es evidente el gran trabajo que hiciste para esta publicación y no pueda mas que felicitarte.

Saludos y éxitos en tu blog.

$0.00

shirani (46) 6 years ago

¡Gracias! Me alegra que haya sido de tu agrado, y tu comentario me anima muchísimo. Justamente buscaba crear un enfoque más sencillo y cómodo a la hora de presentar las imágenes en forma de gif, me alegra haber dado en el clavo. Igualmente.

$0.00

minnowhelper (53) 6 years ago

This post has received a 1.03% upvote from thanks to: @romulogallegos.
For more information, click here!!!!

Try the new Minnowhelper Bots for more information here

Do you know, you can also earn passive income after every bidding round simply by delegating your Steem Power to @minnowhelper?
you can delegate by clicking following links: 10 SP, 100 SP, 500 SP, 1000 SP or Another amount

Help support @minnowhelper and the bot tracker by voting for @yabapmatt for Steem witness! To vote, click the button below or go to https://steemit.com/~witnesses and find @yabapmatt in the list and click the upvote icon. Thank you.

Voting for @yabapmatt

$0.00

soledadjc (48) 6 years ago

¡Que chulo! Me lo guardo. Gracias por compartirlo. Te dejo mi voto.

$0.00

shirani (46) 6 years ago

Muchas gracias por tu voto, me hace muy feliz saber que te será de utilidad y que te ha gustado.

$0.00

STEEM 0.26

TRX 0.11

JST 0.033

BTC 62796.11

ETH 3045.55

USDT 1.00

SBD 3.85