![Tutorial_Firma_Animada.gif](https://steemitimages.com/DQmW3df3jFp8QXJNAoefJduqNnJ3cLu1pN6b7ZJHHpcjfmf/Tutorial_Firma_Animada.gif) [Imagen de mi autoría. Hecha con Photoshop.] _____________________ ![Heart_Tutorial.gif](https://steemitimages.com/DQmeck558oZN6tYsa9Q4nnCMzKPjzvQRsPx3AHkCmmuxZzg/Heart_Tutorial.gif)![Heart_Tutorial3.gif](https://steemitimages.com/DQmWYiGdoReE3uCUHk7sWf8ankEGJY6xiS1AMxeu49p5pTE/Heart_Tutorial3.gif)![Shirani_DA_v2_x2.gif](https://steemitimages.com/DQmeQL3qWCLzbVwRzj8RzUQZeD1QjSQaCdjdWy8mqPqMgYF/Shirani_DA_v2_x2.gif)![Heart_Tutorial4.gif](https://steemitimages.com/DQmSt4UuFeSRyCdTuk4BGzBgwBMpRsFTTVTwo2SLLoho59S/Heart_Tutorial4.gif)![Heart_Tutorial5.gif](https://steemitimages.com/DQmVKTpg3mxvdCMgc88Yt9BrAAvAEZEpzokh6o9xQwm8NEt/Heart_Tutorial5.gif) _____________________

https://steemitimages.com/DQmQ4VR8SWexicykFw5yKQMqnSAYZWfZby4tZTaFk8wr1Wv/Buenas2.png El tutorial que abarcaremos el día de hoy es sobre cómo hacer una firma animada (GIF). Las firmas son las imágenes que algunos usuarios colocan al final de su post, de esta forma entregan un mensaje, decoran su tema o sencillamente dejan en constancia que lo leído fue hecho por ellos.

Antes de empezar quiero aclarar que utilizaré imágenes y letras sin fondo, hechas por mí, por lo cual no enseñaré cómo recortar los fondos de las imágenes ni cómo trabajar los efectos de las letras del programa. Lo que haremos acá es una firma simple con elementos que ya he mostrado en mis anteriores tutoriales. También te daré acceso a las letras que empleo por si deseas practicar con ellas.

-Palabras empleadas- ![Up_Vote_Firma_x2.gif](https://steemitimages.com/DQmQmowsMLyXebULD7TXUdJEdNKLgrZhSdY7dM4BpDYnn9T/Up_Vote_Firma_x2.gif) ![Follow_Firma_x2.gif](https://steemitimages.com/DQmZs2A5UqzUmtZAU2oMZi7RPdycMkkpFXbBZ6ed7mX6rw6/Follow_Firma_x2.gif) ![Reesteem_Firma_x2.gif](https://steemitimages.com/DQmbTRD9U7g4N142Z21mmnaoGTDe1pEvXYG4LgJ446SRgEi/Reesteem_Firma_x2.gif) _____________________ ![Heart_Tutorial.gif](https://steemitimages.com/DQmeck558oZN6tYsa9Q4nnCMzKPjzvQRsPx3AHkCmmuxZzg/Heart_Tutorial.gif)![Heart_Tutorial3.gif](https://steemitimages.com/DQmWYiGdoReE3uCUHk7sWf8ankEGJY6xiS1AMxeu49p5pTE/Heart_Tutorial3.gif)![Shirani_DA_v2_x2.gif](https://steemitimages.com/DQmeQL3qWCLzbVwRzj8RzUQZeD1QjSQaCdjdWy8mqPqMgYF/Shirani_DA_v2_x2.gif)![Heart_Tutorial4.gif](https://steemitimages.com/DQmSt4UuFeSRyCdTuk4BGzBgwBMpRsFTTVTwo2SLLoho59S/Heart_Tutorial4.gif)![Heart_Tutorial5.gif](https://steemitimages.com/DQmVKTpg3mxvdCMgc88Yt9BrAAvAEZEpzokh6o9xQwm8NEt/Heart_Tutorial5.gif) _____________________

Lo primero que debes de hacer es descargar el programa Photoshop. Para ello te dejo un vídeo. ¡No me pertenece! Todos los créditos y derechos son de su autor o autora.

> Sé que puede causar algo de miedo trabajar con ese programa, pero te aseguro que una vez aprendes lo que necesitas se hace extremadamente sencillo, así que no te preocupes. Tras haberlo instalado y abierto, dirígete a la parte superior y selecciona Archivo >> Nuevo. Se abrirá una ventana que nos permitirá crear un Lienzo, que es nuestra área de trabajo. Coloca las dimensiones que gustes; para mi firma he usado las medidas 200 píxeles de Altura y 400 píxeles de Anchura. > Si deseas acercar tu Lienzo usa la combinación de teclas CTRL++. > Los ejemplos son imágenes GIF, o sea que irán cambiando conforme pasen los segundos.

![Capturas_gif.gif](https://steemitimages.com/DQmeghgH4qXS5ZwLjBGWUwaKgeQXzBkQfzzsKd3X3tgV7uG/Capturas_gif.gif) [Imagen de mi autoría. Capturas de pantalla.]

A la derecha del programa podemos visualizar una ventana llamada ‘Capas’, allí es donde haremos toda la magia. Para el fondo de la imagen necesitas una imagen de tu gusto; en este caso he elegido una del espacio (Fuente). Selecciona tu imagen fuera del programa con el Clic Izquierdo del ratón o mouse, mantén pulsado y arrastra esta sobre el Lienzo, una vez notes que los bordes de la ventana de tu Lienzo se iluminan, suelta la imagen.

![Firma_GIF_2.gif](https://steemitimages.com/DQmUNxVcj7CjM3MdetFrZzQU1m18aaocufeLJqytA1M96P1/Firma_GIF_2.gif) [Imagen de mi autoría. Capturas de pantalla.]

Como puedes ver se ha agregado una Capa Nueva, y la imagen que elegiste, sin embargo esta será más pequeña de lo normal. Cuando agregues la imagen verás que tiene unos puntos y líneas alrededor, selecciona y arrastra cualquiera de estos para cambiar la forma de la imagen y por ende modificar su tamaño hasta que quede como gustes, también puedes mover la imagen haciendo clic sobre ella; luego pulsa la tecla ENTER.

> Si las líneas y puntos no aparecen utiliza la combinación de teclas CTRL + T.

![Firma_GIF_3.gif](https://steemitimages.com/DQmUwPdVrm2mzz9ARY7VMEmpjTdwA8yuJuNWsna9kkcD8jK/Firma_GIF_3.gif) [Imagen de mi autoría. Capturas de pantalla.]

Ve a la parte superior del programa y selecciona Archivo >> Abrir. Esta vez seleccionarás tu imagen animada, que serán las letras que tú mismo hayas creado: Ya sea por el método que te he enseñado en otro tutorial, porque las creaste tú con Photoshop, porque las descargaste o porque alguien más las hizo por ti. No necesariamente tienen que ser letras, puede ser una imagen cualquiera siempre y cuando sea animada (GIF).

![Firma_GIF_4.gif](https://steemitimages.com/DQmXidyECJeSWDunZprYPrD6hVvW7AXAPYpNhYE48tpeCCn/Firma_GIF_4.gif) [Imagen de mi autoría. Capturas de pantalla.]

Una vez abierta la imagen notarás que al lado derecho hay varias capas. Ve a Selección >> Todas las capas, para que queden seleccionadas, y después ve a Capa >> Agrupar capas, para que se guarden en una carpeta.

> Cada Capa que ves son las animaciones de la imagen GIF, estas nos ayudarán a realizar dicha animación en nuestra firma.

![Firma_GIF_5.gif](https://steemitimages.com/DQmTwxkujyvvr8G9vDW3dpmsfHGwx563F7gSMkBw17gyMEW/Firma_GIF_5.gif) [Imagen de mi autoría. Capturas de pantalla.]

Tu programa tiene una barra de navegación con varias pestañas (Sí, como en Firefox o Google Chrome). Haz Clic Derecho sobre la pestaña de tu imagen GIF y selecciona Mover a nueva ventana. Si lo has hecho correctamente verás cómo se crea una ventana más pequeña con tu imagen, y de fondo puedes ver tu Lienzo.

> Si haces Clic Derecho sobre la barra de pestañas y seleccionas Consolidar todo aquí, harás que todas las ventanas regresen a su respectivo tamaño.

![Firma_GIF_6.gif](https://steemitimages.com/DQmVJ9wtdE4GLUPft6WV26zwNj6Yp1PqjWihRfgN2Ra8fTD/Firma_GIF_6.gif) [Imagen de mi autoría. Capturas de pantalla.]

Dependiendo de la ventana en que estés; la pequeña o la grande, verás sus correspondientes capas al lado derecho del programa. Haz clic sobre la ventana pequeña, dirígete a sus capas y selecciona la carpeta que creamos con anterioridad (Grupo 1), sin soltar el Clic Izquierdo, arrástrala sobre la ventana del Lienzo. Nuevamente, una vez que los bordes de la ventana se iluminen, suelta la carpeta.

> Este proceso puedes hacerlo con todas las letras o imágenes que quieras, cuantas veces desees.

![Firma_GIF_7.gif](https://steemitimages.com/DQmPCoM25FbmSnoFWhhXSVbFJMDfXXhqBpm8JGrYLtp95gn/Firma_GIF_7.gif) [Imagen de mi autoría. Capturas de pantalla.]

Como notarás ahora tu Lienzo posee la imagen y carpeta de tu otra ventana. La razón por la cual hicimos esta carpeta es para hacer más fácil el traslado de las capas. Para mover tu imagen mantén pulsado CTRL + Fechas de dirección o CTRL + Ratón o mouse, y ubícala donde gustes. Después pulsa la tecla ENTER.

![Firma_GIF_8.gif](https://steemitimages.com/DQme7D4f4c5EmUjjy7DU2jhsq5oKSXCtQvPK6JrL41mT9C7/Firma_GIF_8.gif) [Imagen de mi autoría. Capturas de pantalla.]

Ahora ve a Ventana >> Línea de Tiempo. En la parte inferior se abrirá una nueva sección. Selecciona Crear animación de fotogramas. ¡Se ha creado un Cuadro! Estos son los que nos permitirán hacer nuestra animación. Cada Cuadro tiene un tiempo independiente o dependiente entre ellos, y la animación completa tiene una repetición. Haz que dicha repetición sea Infinita como te indico en el ejemplo, y coloca el tiempo que quieras al Cuadro, en mi caso será de 0,1 segundos.

> Como te he indicado, el tiempo de los cuadros no tienen por qué ser iguales entre ellos, de ti depende si quieres que uno de estos dure más, menos.

![Firma_GIF_9.gif](https://steemitimages.com/DQmU3E56dRSRVLu719byxa6JqFpU7uQp2c421izdoK5HyDK/Firma_GIF_9.gif) [Imagen de mi autoría. Capturas de pantalla.]

Ahora debes hacer clic sobre el botón Duplicar para crear un Nuevo Cuadro, ir a la ventana de capas, abrir tu carpeta Grupo 1, Ocultar la Capa 1 y Mostrar la Capa 2 para ir generando el efecto de la imagen en movimiento en cada Cuadro. Repite este proceso hasta llegar a la última Capa. Recuerda: Duplicar >> Ocultar Capa anterior >> Mostrar Capa siguiente.

> Para Mostrar u Ocultar una Capa debes hacer clic sobre el Ojo que está al lado de estas.

![Firma_GIF_10.gif](https://steemitimages.com/DQmaoEQiLPNzg8ekDsQVo6cS3s73pVyTvUuAy9jmNuHb374/Firma_GIF_10.gif) [Imagen de mi autoría. Capturas de pantalla.]

Como puedes ver en mi ejemplo, he decidido agregar diferentes imágenes: Estáticas y letras en movimiento. Con el método de Duplicar >> Ocultar >> Mostrar, he hecho que cada imagen aparezca en un tiempo determinado, todas las letras se empiezan a mover en el mismo Cuadro. Esto quiere decir que si hay cuatro (4) letras, sus respectivas ‘Capa 1’ se ocultarán en el segundo Cuadro, y sus ‘Capa 2’ se mostrarán en el mismo, y así sucesivamente. Haz en cuenta que todo es una sola imagen pero con distintas carpetas que debes manejar a la vez.

![Firma_GIF_11.gif](https://steemitimages.com/DQmcV8d6uRjRDyXFZqjXpyk134U2uyqzZYQstScuu35rekY/Firma_GIF_11.gif) [Imagen de mi autoría. Capturas de pantalla.]

Para probar tu animación pulsa el botón Reproducir. Si la firma ha quedado como gustas ve a Archivo >> Guardar para Web >> Guardar >> Guardar.

![Firma_GIF_12.gif](https://steemitimages.com/DQmQh9rmUyRpr3NfMFnfGcEHiSjFQaeHgN2GaQNtSPh2T95/Firma_GIF_12.gif) [Imagen de mi autoría. Capturas de pantalla.] _____________________ ![Heart_Tutorial.gif](https://steemitimages.com/DQmeck558oZN6tYsa9Q4nnCMzKPjzvQRsPx3AHkCmmuxZzg/Heart_Tutorial.gif)![Heart_Tutorial3.gif](https://steemitimages.com/DQmWYiGdoReE3uCUHk7sWf8ankEGJY6xiS1AMxeu49p5pTE/Heart_Tutorial3.gif)![Shirani_DA_v2_x2.gif](https://steemitimages.com/DQmeQL3qWCLzbVwRzj8RzUQZeD1QjSQaCdjdWy8mqPqMgYF/Shirani_DA_v2_x2.gif)![Heart_Tutorial4.gif](https://steemitimages.com/DQmSt4UuFeSRyCdTuk4BGzBgwBMpRsFTTVTwo2SLLoho59S/Heart_Tutorial4.gif)![Heart_Tutorial5.gif](https://steemitimages.com/DQmVKTpg3mxvdCMgc88Yt9BrAAvAEZEpzokh6o9xQwm8NEt/Heart_Tutorial5.gif) _____________________

¿Y eso es todo? ¡Pues sí! Es muy fácil si ya tienes las imágenes y letras preparadas, de todo el proceso lo más difícil es pasar el Grupo de Capas a la ventana de la firma. ¿Te ha gustado el tutorial? ¿Tienes opiniones o dudas? ¡Deja un comentario! También si quieres que haga un tutorial de cómo recortar los fondos de las imágenes me encantaría que me lo dijeses.

* Si quieres aprender a hacer tus propias letras animadas recuerda visitar mi post: ¿Cómo animar tus propias letras para Steemit? Todas las imágenes que vez en este tutorial son de mi autoría, ya sea porque yo las hice o porque son capturas de pantalla. El vídeo que enlazo no es mío, todos los derechos y créditos son de su autor o autora. El programa que empleo es Photoshop CS6 Portable.

![Saludos2.png](https://steemitimages.com/DQmV7Lx1TXgzoLfb8qCGKVhj2ny9P8xoX7hfC8y2uSCZ56b/Saludos2.png) ______________________ ![Firma_Gif_1.gif](https://steemitimages.com/DQmZgkgaZv68i7XzgvFxvGoDRFZ4NZjLpUtsZZTHusMadGC/Firma_Gif_1.gif)

RE: [BeyondBit Bounties] BitShares Open Source Hangout Needs Open Source Intro & Outro! [Rewards Worth 1300 SBD!]