¿Cómo hacer una firma animada para tus post de Steemit? ¡Imágenes en movimiento!

in #spanish7 years ago

Tutorial_Firma_Animada.gif
[Imagen de mi autoría. Hecha con Photoshop.]


Heart_Tutorial.gifHeart_Tutorial3.gifShirani_DA_v2_x2.gifHeart_Tutorial4.gifHeart_Tutorial5.gif


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
Follow_Firma_x2.gif
Reesteem_Firma_x2.gif


Heart_Tutorial.gifHeart_Tutorial3.gifShirani_DA_v2_x2.gifHeart_Tutorial4.gifHeart_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
[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
[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
[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
[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
[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
[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
[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
[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
[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
[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
[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
[Imagen de mi autoría. Capturas de pantalla.]


Heart_Tutorial.gifHeart_Tutorial3.gifShirani_DA_v2_x2.gifHeart_Tutorial4.gifHeart_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.

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


Firma_Gif_1.gif

Sort:  

¡Excelente tutorial! Me animaré a hacerlo :3

Me alegra que te haya gustado, y por sobre todo, que intentes hacerlo. Si surge cualquier duda al respecto no dudes en preguntar. ¡Saludos! :D

esto me encaaaaaanta muchisimas gracias por compartir esta informacion

Gracias a ti por pasarte, leerlo y comentar al respecto. Me encanta que te parezca de utilidad. ¡Saludos!

Me encanta que siempre traes nuevos y originales post a la plataforma, y lo bien explicados que están, muy detallados, el movimiento que tiene me agrada y como explicas podemos poner el tiempo a como queramos, es excelente pues así más lento o menos lento, según el gusto de cada quien; me surge una pregunta solo se pueden hacer letras mayúsculas?

Me hace feliz que tenga esa opinión sobre mis post, intento hacer lo mejor en ellos y traer información que pienso será útil y gustará. Efectivamente, el tiempo depende de cada quién, a mí es que me gusta poner las letras y demás animaciones rápidas.

En cuanto a su duda: No, también se pueden hacer letras minúsculas. Sin embargo, el estilo de letra que trabajo sólo lo he enseñado a hacer con letras mayúsculas porque es más fácil trabajarlas, y es más visible. Pero no dudo en que pueda traer un tutorial para enseñar a hacer letras minúsculas con este estilo.

Se ve un poquito complicado, pero lo intentare jshfjff

¡No te preocupes! Te aseguro que es sencillo, el único inconveniente es aprender dónde está cada ventana del programa, pero tras unos minutos le agarras el hilo. Igual me alegra que lo intentes, cualquier duda puedes consultar sin problemas. Saludos.

Están excelentes estos post-tutoriales, tienen una explicación concreta y sencilla para las personas que no saben como trabajar digitalmente... Una pregunta ¿eres dibujante? Observé que tu nombre en la página es devianart, y yo sigo en una página de facebook llamada DibujArte el arte de un Devianart... Pd: sí es que lo eres! Me encantan tus dibujos. Y si no lo eres; me gustan mucho tus publicaciones! Tienes mi upvote y una nueva seguidora☺ si lo deseas nos podemos apoyar mutuamente soy nueva en steemit y mi familia es toda de artistas (yo soy músico y dibujante en general). Espero que compartamos mutuamente nuestro arte, saludos @shirani

Me alegra mucho que te agraden mis tutoriales, intento como bien dices, ayudar a tanto expertos en el área digital como a los que no tienen ningún conocimiento base. En cuanto a tu pregunta; sí, soy dibujante, efectivamente tengo un DeviantArt donde subo mis Pixel Art, algunos vistos acá y otros que no he mostrado en esta página. Debo decirlo nuevamente; me hace feliz que te guste lo que hago, y con gusto me agradará ver tu arte. Gracias por tomarte el tiempo para leer lo que he hecho e incursionar más allá. ¡Saludos!