¿Cómo animar tus propias letras para Steemit? ¡Da más vida a tus post!

@shirani · 2018-05-02 23:14 · spanish

Tutorial_Letras_Animadas.png [Imagen de mi autoría. Hecho con Photoshop.]


Heart_Tutorial.gifHeart_Tutorial3.gifShirani.gifHeart_Tutorial4.gifHeart_Tutorial5.gif


https://steemitimages.com/DQmQ4VR8SWexicykFw5yKQMqnSAYZWfZby4tZTaFk8wr1Wv/Buenas2.png Hoy les enseñaré cómo animar sus propias letras para Steemit, con la finalidad de volver más coloridos y únicos sus post. Para ello es recomendable tener en cuenta lo que he enseñado en mi anterior guía donde muestro la forma en que pueden crear sus propias letras.

También es necesario descargar dos programas: Photoshop y Easy Paint Tool Sai. Te dejo dos vídeos que te servirán de guía para la instalación de dichos programas. ¡No me pertenecen! Todos los créditos y derechos son de su autor o autora. * Easy Paint Tool Sai (SAI). * Photoshop (PS). > Esta guía posee tres animaciones diferentes cuyos resultados verás al inicio de cada sección. > El estilo de letra que utilizo es presentado en mi anterior tutorial, pero de ti depende qué tipo de letra desees utilizar. > Los ejemplos son presentados en imágenes que cambian después de unos segundos como te presento debajo de este párrafo. ![Tutoletra2.gif](https://steemitimages.com/DQmNeCp4XPUPsU1MRyrERfWi9hYxeP8Pc79YC851Abst8RB/Tutoletra2.gif) Todo en este tutorial será trabajado con la herramienta Binario tamaño un (1) píxel. [Imagen de mi autoría. Capturas de pantalla.] Después de tener los conceptos de mi anterior tutorial claros y los programas descargados, ¡podemos comenzar!


Heart_Tutorial.gifHeart_Tutorial3.gifShirani.gif Heart_Tutorial4.gifHeart_Tutorial5.gif


La primera animación es la más sencilla y consiste en cambiar el color de tus letras, podemos llamar a este el Efecto Discoteca. Para empezar emplearemos una palabra con la que todos estamos familiarizados, como lo es: ‘Steemit’.

Dirígete a la parte superior de tu programa Easy Paint Tool Sai (SAI) para crear tu Lienzo, haz clic en la opción: Archivo >> Nuevo. Selecciona las dimensiones 43 de Anchura y 11 de Altura en medida de píxel. Una vez creado puedes acercar tu Lienzo con la rueda del ratón. > La anchura especificada es dada por la cantidad de letras que se realizarán. 7 letras (Steemit) multiplicadas por 7 pixeles (anchura de la guía que usaremos). Menos la cantidad de letras que son seguidas en este caso; 6 (eteemit). 7x7 = 49 – 6 = 43.

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

Haz siete (7) rectángulos, uno por cada letra, su función es guiarte en la construcción de la palabra. El tamaño de estos rectángulos debe ser de once (11) píxeles de alto y siete (7) píxeles en la parte superior e inferior. Si trabajas con un rectángulo diferente al primero, debes hacer que sus píxeles horizontales sean seis (6) en vez de siete (7).

> Si tu objetivo es una oración larga es recomendable que existan tres (3) píxeles de separación entre cada palabra, y repetir la fórmula antes dada.

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

Crea una Nueva Capa (Hoja de trabajo) yendo a la opción Capa >> Nueva Capa. ¡Ahora tienes la Capa 2! Ubicada en la parte izquierda del programa. Elige un color en la Rueda o Cuadro de Colores. Una vez hecho ello, en la Capa 2, escribe tu palabra sin salirte de tus rectángulos guía, ¡recuerda que te enseño a hacer esto en mi anterior tutorial! Después de construir lo que querías pulsa el Ojo que está al lado de la Capa 1 para que esta se Oculte y no proyecte lo que había en ella.

> Si el Ojo está Visible la Capa puede ser vista en el Lienzo. Si el Ojo está Invisible la Capa no se muestra en el Lienzo. Esto NO borra lo que hiciste, sólo lo esconde, dicho proceso puede ser revertido.

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

Crea otra Capa haciendo clic en la opción Capa >> Nueva Capa, selecciona un color diferente y en tu Capa 3 escribe la misma palabra sobre la ya existente. No te preocupes, esto no alterará lo que hiciste previamente. Repite este proceso cuantas veces quieras. En este ejemplo utilicé un total de tres (3) capas con diferentes colores.

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

Oculta todas tus capas a excepción de la Capa 2 y guarda tu trabajo en la opción Archivo >> Guardar como… >> Tipo: Photoshop PSD (*.psd) para que pueda ser abierto por nuestro programa Photoshop.

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


Heart_Tutorial.gifHeart_Tutorial3.gifShirani.gifHeart_Tutorial4.gifHeart_Tutorial5.gif


Una vez guardado, abre tu trabajo en Photoshop: En la parte superior selecciona Archivo >> Abrir, si quieres acercar tu Lienzo usa la combinación de teclas CTRL++. Ve a Ventana y activa la opción Línea de Tiempo, pues usaremos ésta a lo largo del tutorial. Luego dirígete a la parte inferior y selecciona la característica Crear animación de fotogramas, haz clic sobre ella.

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

Como notarás ha aparecido un Cuadro, cada cuadro es una animación diferente con un tiempo de visibilidad dependiente o independiente entre ellos, y cuya repetición es decidida por ti. Para esta animación los cuadros tendrán medio (0,5) segundo, y siempre es recomendable que su repetición sea Infinita. En el siguiente ejemplo te muestro cómo configurar dichos tiempos.

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

Una vez configurado los tiempos, haz clic en la opción Duplicar ubicada en la parte inferior. Así, harás un Cuadro parecido al anterior donde podrás crear unas características diferentes si así lo deseas. ¡Al igual que con una Nueva Capa! Lo que hagas en este Nuevo Cuadro no afectará a los anteriores, pero sí a los que estén después de él. Ve a la parte derecha del programa y de la misma forma que hiciste en SAI, Oculta la Capa 2 y Muestra la Capa 3 haciendo clic en su respectiva opción (El Ojo). Una vez más haz clic en la opción Duplicar, y esta vez Oculta la Capa 3 y Muestra la Capa 4.

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

Si deseas hacer tu palabra más grande dirígete a la parte superior y selecciona Imagen >> Tamaño de la Imagen >> Por aproximación (Conservar bordes definidos), luego cambia las dimensiones multiplicándolas por la cantidad que desees; por ejemplo si quieres que sea el doble de grande debes multiplicar por dos (x2), y así en vez de medir 43 de Anchura y 11 de Altura, medirá 86 de Anchura y 22 de Altura. Pulsa OK.

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

Prueba tu animación haciendo clic en Reproducir, opción ubicada en la parte inferior del programa, si te gusta cómo ha quedado guarda tu trabajo seleccionando Archivo >> Guardar para Web… >> Guardar… Guardar.

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

-Resultado-

Steemit.gif


Heart_Tutorial.gifHeart_Tutorial3.gifShirani2.gifHeart_Tutorial4.gifHeart_Tutorial5.gif


Nuestra segunda animación consiste en hacer que las palabras o letras aparezcan de a poco. Para ello usaremos como ejemplo ‘Up Vote’.

En SAI crea un Nuevo Lienzo con la opción Archivo >> Nuevo, y usa las dimensiones 41 de Anchura y 11 de Altura. Tras ello en tu Capa 1 haz tus seis (6) rectángulos guías con una separación de tres (3) píxeles entre cada palabra.

> Recuerda que el ancho del primer rectángulo de cada palabra es de siete (7) píxeles, y los que le sigan de seis (6) píxeles.

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

Crea una Nueva Capa en la opción Capa >> Nueva Capa. En tu Capa 2 con el color que desees construye tu primera letra, que en este caso es la ‘U’. Repite este proceso hasta que esté escrito ‘Up Vote’, si lo has hecho bien tienes un total de siete (7) capas incluyendo la de los rectángulos, cada una con una letra diferente.

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

Oculta todas las capas a excepción de la Capa 2 haciendo clic en el Ojo que está al lado de estas. Una vez realizado ello, guarda tu trabajo en Archivo >> Guardar como… Tipo: Photoshop PSD (*.psd).

> También puedes ocultar la Capa 2 si deseas generar el efecto desde cero, en el resultado te muestro cómo se vería de utilizar dicha opción.

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


Heart_Tutorial.gifHeart_Tutorial3.gifShirani2.gif Heart_Tutorial4.gifHeart_Tutorial5.gif


Abre tu proyecto en Photoshop: Archivo >> Abrir, recuerda que puedes acercar tu Lienzo con la combinación de teclas CTRL++. Ahora, activa la Animación por fotogramas ubicada en la parte inferior, aparecerá un Cuadro, selecciona una repetición Infinita y coloca tiempo de un (1) segundo al Cuadro.

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

Haz clic en Duplicar para crear un Nuevo Cuadro, seguidamente ve a la parte derecha del programa: Mostrar Capa 3. Repite este proceso con los demás cuadros: Duplicar >> Mostrar Capa 4 >> Duplicar >> Mostrar Capa 5. Hasta que llegues a la Capa 7.

> La única Capa que NO debes mostrar en ningún momento es la Capa 1, y si decidiste ocultar la Capa 2, debes empezar mostrando esa..

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

Puedes hacer tu imagen más grande yendo a Imagen >> Tamaño de la Imagen >> Por aproximación (Conservar bordes definidos) >> Multiplica las dimensiones por dos (x2) o el número que desees. Luego presiona OK.

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

Si deseas probar tu animación utiliza la opción Reproducir. Una vez haya quedado como gustes, guarda todo yendo a Archivo >> Guardar para Web… >> Guardar… Guardar.

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

-Resultado-

Up_Vote.gif Sin ocultar la Capa 2 al inicio.

Up_Vote2.gif Ocultando la Capa 2 al inicio.


Heart_Tutorial.gifHeart_Tutorial3.gifShirani3.gif Heart_Tutorial4.gif (https://steemitimages.com/DQmSt4UuFeSRyCdTuk4BGzBgwBMpRsFTTVTwo2SLLoho59S/Heart_Tutorial4.gif)Heart_Tutorial5.gif (https://steemitimages.com/DQmVKTpg3mxvdCMgc88Yt9BrAAvAEZEpzokh6o9xQwm8NEt/Heart_Tutorial5.gif)


Nuestra última animación es algo más complicada, no porque sea difícil en sí, sino porque requiere controlar un mayor número de capas. ¡Pero no te preocupes! Utilizaremos una palabra sencilla para aprender a manejar esto sin problemas. La palabra empleada será ‘Hola’, y el efecto que buscamos es de meneo u ola.

Ve a Archivo >> Nuevo. Crea un Lienzo de 14 de Altura y 25 de Anchura. En tu Capa 1 haz cuatro (4) rectángulos guía (11 de alto y 7 de ancho).

Animacion_Letras18.gif (https://steemitimages.com/DQmTm1Ze6Aot8kxy2VMN2cCEGoLuCt881fgUJH57naxFfdh/Animacion_Letras18.gif) [Imagen de mi autoría. Capturas de pantalla.]

Realiza una Nueva Capa yendo a Capa >> Nueva Capa. En tu Capa 2 escribe la letra ‘H’, repite este proceso hasta tener completa la palabra
#spanish #cervantes #tutorial #technology #blog
Payout: 0.000 HBD
Votes: 22
More interactions (upvote, reblog, reply) coming soon.
Eco Bank Development

A sustainable digital wallet and profile platform.

© 2025 Eco Bank Development. All rights reserved.

Sustainable Secure