Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Adobe Photoshop

Cómo hacer una animación de texto inspirada en "stop-motion" en Adobe Photoshop

by
Length:ShortLanguages:

Spanish (Español) translation by Ender Gamboa (you can also view the original English article)

What You'll Be Creating

Aprende a animar textos y títulos para tu sitio web o feed con este rápido tutorial. Hoy aprenderemos a crear una animación de texto GIF inspirada en los clásicos vídeos de "stop-motion".

Mira cómo se desarrollan los pasos en esta rápida lección de vídeo y obtén todos los detalles que necesitas en el proceso escrito más abajo. Ve a Envato Market para ver más efectos increíbles como las acciones de Photoshop.

Sigue este tutorial en nuestro canal de YouTube Envato Tuts+:

Recursos tutoriales

En la producción de este tutorial se han utilizado los siguientes activos:

1. Cómo añadir texto a las fotos en Photoshop

Paso 1

Abre un nuevo documento en Photoshop a 850 x 567 píxeles.

Copia y pega la imagen del paisaje de otoño en una nueva capa.

A continuación, ve a Filtro > Galería de desenfoque > Desenfoque de campo, y añade un Desenfoque de campo de 2,3 píxeles para obtener más profundidad de campo.

Blur the background photo in photoshop

Utiliza la Herramienta Marco Rectangular (M) para seleccionar cada letra de la palabra "REAL" del Stock de Letras de "scrabble". Copia y pega cada letra en su propia capa nueva y nómbralas cuando termines.

Paso 2

Algunas de estas letras están un poco inclinadas. Así que vamos a ajustar su forma.

Pulsa Shift para seleccionar todas las letras y cambia el tamaño (Control-T) para que queden más pequeñas. Si las letras siguen estando desiguales, selecciona la herramienta Mover (M) y mueve cada letra individualmente al lugar correcto utilizando las teclas de flecha derecha-izquierda y arriba-abajo.

Straighten the letters

Ajusta todas las posiciones hasta que estén mucho más rectas.

A continuación, recorta el exceso utilizando la Herramienta Marco Rectangular (M). Para hacer esto, haz una selección grande en la parte superior, y luego pasa por cada capa y pulsa la tecla Eliminar hasta que tengas un resultado limpio. Repite este proceso para la parte inferior.

Even out the top of the letters

Mezcla todos los colores con una Nueva capa de ajuste de Curvas, ajustando las curvas de los canales RGB y Azul así.

Blend colors with curves adjustment

2. Cómo crear una animación GIF de texto en Photoshop

Paso 1

Vamos a preparar la animación.

Para crear una animación GIF en Photoshop, ve a Ventana > Línea de tiempo.

Pulsa en Crear línea de tiempo de vídeo y luego haz clic en la opción Animación de fotogramas.

En general, estamos haciendo dos diapositivas de letras de texto giratorias para esta animación. Es similar a lo que se puede ver para las técnicas creativas para los vídeos de fotogramas.

Así que antes de animar estas piezas de madera, necesitaremos otro conjunto de letras. Selecciona cada letra en el panel de Capas y mantén pulsada la tecla Control-J para crear un Duplicado. Hazlo hasta que cada letra tenga su propia copia.

Duplicate the layers

Paso 2

Para la animación, establece el Ritmo a Siempre, y el Tiempo de Retraso inicial a 0,25 segundos.

Oculta la visibilidad de todas las capas de la copia. Con las capas originales aún visibles, utiliza la herramienta transformación libre (T) para girar cada letra en ángulos opuestos. Si también se llena de gente, no dudes en ajustar aún más sus posiciones con la herramienta de movimiento (V).

Cree dos nuevos fotogramas en el panel Línea de tiempo y luego seleccione el fotograma 2.

Rotate the letters

En este marco, oculte todas las capas de letras originales y luego retira las copias.

Al igual que antes, tendremos que rotar (Control-T) cada letra en ángulos opuestos para dar una vuelta rápida. Esta vez, vamos a empezar por la rotación en la dirección opuesta (en el sentido de las agujas del reloj).

Rotate the letters clockwise

Haz una copia del fotograma 2 y arrástralo hasta el final.Haz una vista previa de tu animación volviendo al principio y pulsando Reproducir.

Ahora puedes guardar esta animación como un GIF. El programa de grabación de pantalla también puede ayudarte a convertirla en un divertido vídeo animado para Instagram.

Ve la animación final a continuación.

Aprende más con nuestros tutoriales

¿Qué mensaje vas a escribir con este tutorial? Espero que este consejo rápido te sirva de inspiración para aprender más sobre los efectos de animación de Photoshop. ¡Crea GIFs rápidos para compartir en línea con tus amigos y muéstranos tus resultados!

Obtén increíbles recursos de diseño

¿Quieres crear vídeos como éste? Descarga los recursos utilizados en este vídeo:

Consulta estos tutoriales para aprender más de nuestros expertos:

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.