Creación de animación avanzada en Photoshop: descripción general del panel Línea de tiempo. Lecciones de Photoshop. Animación. Cómo crear animaciones GIF en Photoshop

Photoshop aún está lejos de poder crear animaciones en él alta calidad. Pero todavía tiene suficientes funciones para hacerlo, lo cual es especialmente importante si no quieres perder el tiempo aprendiendo una nueva aplicación.

En este artículo hablaré de varios tecnologías avanzadas, que te ayudará a crear animaciones complejas en Photoshop. Miraremos los paneles de la línea de tiempo y varias propiedades, que se puede animar. También hablaré sobre la importancia de las capas de ajuste, filtros y objetos inteligentes para la animación.

Descripción general del panel de línea de tiempo

Al abrir el panel de línea de tiempo ( Ventana > Línea de tiempo), puedes elegir entre dos tipos de línea de tiempo: vídeo y animación de fotogramas. Este último está destinado a la animación cuadro por cuadro. Este panel funciona convirtiendo capas en el panel Capas en cuadros individuales. No entraré en detalles sobre esta línea de tiempo; En su lugar, me gustaría centrarme en la línea de tiempo del vídeo:

Photoshop tiene dos líneas de tiempo. ( Versión más grande)

Línea de tiempo para vídeo

La línea de tiempo de vídeo le permite crear animaciones de fotogramas clave, en las que puede definir puntos clave a lo largo de la línea de tiempo, y Photoshop interpretará los fotogramas intermedios en una animación sólida. vamos a crear animacion sencilla para ver cómo funciona:


El panel Línea de tiempo muestra la capa (1) con propiedades para la capa (2). La línea de tiempo muestra el indicador de tiempo actual (3) y los fotogramas clave existentes (4). ( Versión más grande)

La imagen de la línea de tiempo de arriba muestra capas del panel Capas. Cada uno de ellos contiene un panel desplegable que le permite ver las propiedades de capa disponibles para la animación. Para animar una propiedad de capa, haga clic en el icono del cronómetro, que le permite crear un fotograma clave para la animación. Tenga en cuenta que el cuadro se coloca automáticamente en el indicador de tiempo actual:


El icono del cronómetro está seleccionado para la propiedad Posición. El fotograma se agrega automáticamente a la línea de tiempo. ( Versión más grande)

Arrastra el indicador de tiempo actual a otro punto de la línea de tiempo y mueve la capa. Se agregará automáticamente otro fotograma a la línea de tiempo:


Mover una capa agrega automáticamente un marco a punto actual indicador de escala de tiempo. ( Versión más grande)

Cuando se reproduce la animación, muestra un objeto en el lienzo moviéndose de una posición a otra:

Photoshop crea automáticamente animaciones entre fotogramas.

Tipos de capa

Antes de hacer animaciones en Photoshop, veremos todos los tipos de capas y sus propiedades que se pueden utilizar para ello.
Una capa estándar (píxeles) es una capa que contiene información de píxeles. Este es el tipo de capa principal en Photoshop.

Propiedades de esta capa:

  • Posición;
  • Opacidad;
  • Estilo.


Una capa estándar en la línea de tiempo con propiedades de capa.

Al agregar una máscara de capa o máscara vectorial a cualquier capa, ingresamos propiedades adicionales relacionado con esta máscara:

  • Posición de la máscara de capa;
  • Habilitar máscara de capa.


Una capa con una máscara de capa en la línea de tiempo.


Capa con una máscara vectorial en la línea de tiempo.

Una capa de forma contiene una forma creada con la herramienta Forma o la herramienta Pluma. Debido a que las formas y los segmentos de línea se crean utilizando información de máscara vectorial, las propiedades de esa máscara se agregan a las otras propiedades de la capa:

  • Posición;
  • Transparencia;
  • Estilo;
  • Posición de la máscara vectorial;
  • Habilitar máscara vectorial.


Una capa de forma en la línea de tiempo con propiedades de capa.

La capa de texto contiene texto editable. Si el texto ha sido rasterizado, será una capa estándar con información de píxeles. Esto hay que tenerlo en cuenta incluso antes de realizar un gif con animación en Photoshop.

Las propiedades de la capa de texto incluyen:

  • Perspectiva;
  • Transparencia;
  • Estilo;
  • Ajuste de texto.


Capa de texto en la línea de tiempo con propiedades de capa.

Un objeto inteligente puede contener cualquiera de los tipos de capas anteriores o una combinación de ellos. Representa un contenedor para cualquier capa que almacene capa original sin cambios, usando en su lugar nuevo conjunto propiedades. Estas propiedades incluyen:

  • Perspectiva;
  • Opacidad;
  • Estilo.


Capa de texto en la línea de tiempo con propiedades disponibles.

Dado que el objeto inteligente conserva la calidad original de la capa, se puede escalar sin perder calidad. Pero no se puede estirar más allá de las dimensiones de la capa original que contiene. Esto conduciría a una pérdida de calidad.

También me gustaría mencionar dos tipos más de capas: capa de vídeo y capa 3D. Ambas capas son significativamente diferentes de todas las demás enumeradas anteriormente. Una capa de vídeo es un grupo de capas que contiene su propio conjunto de propiedades. 3D más allá de lo que contiene conjunto único propiedades, funciona en un entorno completamente diferente al de otras capas, lo que lo hace aún más complejo. En las imágenes siguientes puedes ver cómo aparecen ambas capas en la línea de tiempo:


Un grupo de capas de vídeo en la línea de tiempo con propiedades de capa.


Una capa 3D en la línea de tiempo con propiedades de capa.

Le aconsejo que, antes de crear una imagen GIF en Photoshop, se familiarice usted mismo con estos dos tipos de capas. Más adelante en este artículo me centraré únicamente en tipos estándar capas, sin vídeo y 3D.

Propiedades de capa

Veamos las propiedades de capa básicas disponibles para la animación.

La propiedad "Posición" le permite mover un objeto a lo largo de los ejes X e Y. La posición del objeto se controla mediante la herramienta "Mover":

La propiedad Posición del objeto establece fotogramas clave para mover la pelota hacia adelante y hacia atrás a lo largo del eje x.

La propiedad Opacidad le permite crear marcos de opacidad de capas. Está disponible en el panel de capas:

La propiedad Opacidad del objeto se utiliza para crear un efecto de disolución.

La propiedad Estilo le permite crear fotogramas clave de estilo de capa. Puede acceder a ellos haciendo doble clic en la capa en la paleta de capas:

Los estilos de capa Relieve, Superposición de color y Sombra se han transferido a marcos para crear un efecto dominó.

La posición de una máscara de capa o máscara vectorial establece fotogramas clave para la posición de las máscaras a lo largo de los ejes X e Y. Esto funciona mejor cuando la máscara no está asociada con la capa:

La posición de la máscara especifica marcos para ocultar la parte de la capa bajo la cual aparece. para nueva capa.

También podemos habilitar o deshabilitar la máscara de capa o máscara vectorial. Para activar o desactivar una máscara de capa, vaya a Capa > Máscara de capa y elija Activar o Desactivar. Para máscaras vectoriales, vaya al menú. Capa> máscara vectorial . También puedes mantener presionada la tecla Mayús y hacer clic en la máscara de capa en la paleta Capas para activarla o desactivarla.

En este artículo hablaré sobre qué es la animación en Photoshop. Veremos cómo funciona la animación en Photoshop usando el ejemplo de la creación de un banner de Año Nuevo.

trabajaré en Adobe Photoshop CS6. Mi interfaz es rusa, ya que escribo desde el trabajo.

Tengo la versión en inglés en casa y te aconsejo que estudies en versión en inglés, he aquí por qué:

  • Puede navegar fácilmente por el programa en cualquier idioma (después del inglés, puede encontrar herramientas en ruso fácilmente, porque este es su idioma nativo, y después del ruso puede tener problemas de adaptación).
  • Mayoría buenas lecciones Escrito exactamente en inglés.
  • Las localizaciones de programas a menudo difieren entre sí y la calidad de la traducción de la interfaz a veces deja mucho que desear. La traducción incorrecta de las herramientas puede confundir a una persona que comienza a aprender el programa.

Comencemos a crear animaciones en Photoshop CS6.

Iniciemos Photoshop.

nosotros creamos nuevo documento Archivo -Nuevo (Ctrl+N).

En la ventana que se abre, configure las dimensiones del banner: 600 x 120, llamémoslo "banner de Año Nuevo" -> "Ok".

Creando un fondo

Selecciono de antemano los materiales que utilizaré en mi trabajo (fondos, tipografías, etc.).

Abra la textura preparada: Ctrl+O. Puedes descargar la textura que uso.

Abra la paleta de capas “Capas” – F7.

Seleccione la ventana con la textura, arrastre la capa desde la paleta de capas a la capa con el banner.

Si la textura resulta demasiado pequeña o muy grande en comparación con el banner, ajuste su tamaño usando la transformación "Ctrl+T".

Aparecerán pequeños marcadores cuadrados en las esquinas de la imagen. Mantenga presionada la tecla Mayús para mantener la relación de aspecto a medida que cambia el tamaño y arrastre el controlador de la esquina en diagonal para reducir o aumentar el tamaño de la imagen hasta que el fondo ocupe toda la superficie del banner.

Después de ajustar la textura al tamaño del banner, pasamos a su corrección de color.

Vaya al menú “Imagen” - “Ajustes” - “Tono/Saturación” (Imagen - Corrección - Tono/Saturación).

Configuré las siguientes configuraciones para lograr un color brillante y saturado:

Escribimos el texto

Cree una nueva capa (Ctrl+Shift+N) o haga clic en el icono de nueva capa en la paleta de capas.

Seleccione la herramienta Texto horizontal (T).

Selecciona un pincel con cualquier estrella, pinta con color blanco #ffffff. Para seleccionar un color, haga clic en el pequeño cuadrado en la parte inferior del panel izquierdo.

En una nueva capa, dibuja estrellas en lugares aleatorios. Para hacer que las estrellas brillen más, haga clic varias veces en un solo lugar. Esto es lo que obtuve:

Haz un duplicado de la capa (Ctrl+J). Haga clic en el icono del ojo en la paleta de capas para ocultar la visibilidad de la capa anterior.

Selecciona la capa superior con una copia de las estrellas. En el panel izquierdo, seleccione la herramienta Lazo (L).

Seleccione cada estrella por turno, presione “V” (Herramienta Mover) y muévala a cualquier otro lugar, así en diferentes cuadros tendremos estrellas diferentes lugares, lo que creará un efecto de parpadeo.

Después de mover todas las estrellas a otro lugar, cree un duplicado de la capa en la que trabajó (Ctrl+J), oculte la capa anterior en la paleta de capas haciendo clic en el ojo y repita nuevamente la operación de mover las estrellas a otro lugar. lugares, también puedes terminar de dibujar varias estrellas nuevas.

Así, tendremos 3 capas con estrellas, en cada una de las cuales las estrellas estarán en diferentes posiciones.

Todo está listo.

Pasemos a crear animaciones en Photoshop.

Abre la línea de tiempo. Vaya al menú "Ventana" - "Línea de tiempo" (Ventana - Línea de tiempo).

En el panel de línea de tiempo que aparece, encontramos en el medio el botón “Crear línea de tiempo de video” (Crear una línea de tiempo para video).

Después de esto, la báscula cambiará de apariencia. Ahora haga clic en el icono con tres cuadrados en la esquina inferior izquierda de la ventana para crear una animación cuadro por cuadro.

Se ha abierto el panel de animación cuadro por cuadro. Ahora solo hay un cuadro en el que se muestran todas las capas visibles (el contenido del cuadro seleccionado se muestra en la ventana principal del monitor).

Vaya a la paleta de capas - F7. Ahora necesitamos desactivar las dos capas de estrellas superiores (haga clic en el ojo), dejando solo una visible. Este será el primer fotograma.

Ve a la paleta de capas. Apaga la primera capa con estrellas, enciende la segunda. Así, en el segundo cuadro mostraremos estrellas en otros lugares.

Haga clic en el icono del nuevo marco nuevamente. Apaga la segunda capa con estrellas, enciende la tercera.

Preste atención al tiempo debajo de cada cuadro, esta es la duración del cuadro. 5 segundos, que son los valores predeterminados, es demasiado para nosotros: la animación se ralentizará, haga clic en la flecha y establezca la duración de cada cuadro en 0,1 segundos.

Para que los fotogramas cambien sin problemas, necesitamos crear fotogramas intermedios entre los fotogramas clave. Para hacer esto, estando en el primer cuadro, haga clic en el icono con varios círculos en la parte inferior del panel temporal.

En la ventana que aparece indicamos cuántos fotogramas intermedios queremos crear. Lo configuraré en 2. Para todos los fotogramas excepto el último, configúrelo en "Siguiente fotograma".

Entre el primer y el segundo fotograma clave ahora tienes 2 intermedios.

Ahora nos encontramos en el segundo fotograma clave (ahora es el cuarto consecutivo), nuevamente hacemos clic en el icono con círculos y creamos 2 fotogramas intermedios más. Ahora sólo necesitamos cerrar el último y el primer fotograma para obtener una animación fluida.

Seleccione el último fotograma en la línea de tiempo. Haga clic en los círculos. En la ventana que aparece, en la línea “ Intermedios» seleccione “Primer cuadro”, agregue los mismos 2 cuadros.

Ahora, debajo de los cuadros en la parte inferior izquierda, indicamos el número de repeticiones de la animación “Constantemente”.

Selecciona el primer cuadro, presiona el triángulo a la derecha “Reproducir” para ver qué pasó.

Seleccionar el formato de archivo para guardar GIF, haga clic en “Guardar...”, seleccione el directorio donde guardaremos, haga clic en “Guardar” nuevamente.

Entonces, en esta lección vimos cómo hacer animaciones en Photoshop CS6.

Espero que hayas aprendido algo nuevo y útil de este tutorial.

clair123rf; Traducción: pescado

¿Alguna vez te has preguntado cómo se crean los GIF animados? El autor de la lección te invita a dominar algunos secretos de la animación en una noche con la ayuda de esta lección. También aprenderá a utilizar la línea de tiempo, que está disponible en Versiones de Photoshop CS6. ¡Ahora comencemos!

Resultado de la lección.

Paso 1

Crear un nuevo documento ( Ctrl + N) con dimensiones de archivo de 800 x 500 píxeles. Rellena el fondo con el color que quieras. Ahora vayamos al menú. Capas - Estilo de capa - Superposición de degradado(Capa > Estilos de capa > Superposición de degradado). Aplicar siguientes ajustes: Estilo Radial(Radial), colores desde el negro (#000000) hasta el azul (#54799b), que se utilizará en el centro.

Paso 2

Crea una nueva capa y nómbrala Capa de ruido. Seleccione una herramienta Llenar(Herramienta Bote de pintura) y rellenar la capa creada color oscuro(#231f20). Dejar capa activa Capa de ruido y ve al menú Filtro - Ruido - Agregar ruido(Filtro>Ruido>Agregar ruido). En el cuadro de diálogo de configuración del filtro, establezca los siguientes valores: Efecto(Cantidad) 3%, distribución Uniforme(Uniforme) y haga clic en Aceptar.

Paso 3

Presione la combinación de teclas (Ctrl + U) y en el cuadro de diálogo de configuración de corrección que aparece, ingrese los valores Saturación(Saturación) 100%: cambia el modo de fusión de esta capa a Luz suave (Luz suave).

Nota del traductor: Para lograr el mismo color que el autor en la captura de pantalla, puede ajustar el valor de Tono/Saturación tono de color(Tono) puesto - 140.

Paso 4

Añade el texto que quieras. Aquí utilizaremos el texto del logotipo del sitio web 123RF. En estilos de capa use Ataque(Ataque). Seleccione valores de tamaño de trazo según sus preferencias.

Nota del traductor: En la captura de pantalla del autor ya hay texto rasterizado junto con el estilo Trazo. Para lograr el mismo efecto, después de aplicar el trazo, establezca el Relleno de la capa de texto en 0%, convierta esta capa en un objeto inteligente y luego rasterícela.

Paso 5

En este paso crearemos efecto brillante para texto usando estilos de capa. Haga doble clic en la capa para abrir la ventana Opciones de estilo. Para personalizar los estilos de capa, utilice las capturas de pantalla siguientes.

Realce(Bisel y relieve)

sombra interior (Sombra interior)

Resplandor interior(Resplandor interior)

Superposición de colores(Superposición de colores)

Resplandor exterior(Resplandor exterior)

Sombra(Sombra paralela)

Paso 6

Una vez que haya terminado de crear efectos de iluminación usando estilos de capa, vaya a la paleta Capas y reduzca el valor de esta capa. Rellenos(Rellenar) en 0%.

Paso 7

Duplique la capa que creó en el paso 5 y desactive todos los estilos de capa en esta copia. Ahora configura los estilos así:

sombra interior(Sombra interior)

Resplandor interior(Resplandor interior)

Paso 8

A continuación se muestra el resultado después de aplicar los estilos de capa.

Paso 9

Ahora crearemos puntos de luz en movimiento. Cree 5 capas encima de las existentes y cámbieles el nombre a 1,2,3, R y F. Si tiene su propio texto, cree capas según sus letras. Agrupa estas capas en una carpeta y dale un nombre. Puntos de luz y cambiar el modo de fusión a Aligerar la base(Sobreexponer color).

Activar la herramienta Cepillar(Herramienta Pincel), seleccione un pincel suave, establezca Opacidad(Opacidad) al 95% y dibuja puntos encima del texto con color blanco. Para cada letra hay un punto de luz independiente en su propia capa. A continuación, en la captura de pantalla, puede ver cómo se ven las capas del autor en la paleta de capas.

Paso 10

Ahora vayamos al menú. Ventana - Línea de tiempo(Ventana > Línea de tiempo). Notarás que tus capas ya están construidas en esta paleta en el lado izquierdo. Seleccione cada una de las cinco capas resaltadas que están en el grupo. Puntos de luz y asegúrese de que el indicador de tiempo actual (control deslizante azul) esté en el fotograma cero. Ahora en cada capa del grupo, cuando esté activa, haga clic en la opción Posición(Posición) para crear un fotograma clave.

Nota del traductor: Para activar la escala de tiempo, haga clic en el botón Crear una línea de tiempo para un vídeo(Crear línea de tiempo de video) y todas sus capas se cargarán en la línea de tiempo. Se seleccionará la misma capa o grupo que en la paleta de capas.

Paso 11

Establezca el indicador de hora actual (control deslizante azul) en 01:00 F y mueva las capas con puntos claros a lo largo de la trayectoria de su movimiento en relación con el contorno de la letra.

Paso 12

Así es como se verá posición inicial punto de luz en las letras. Mueva el indicador de tiempo actual a lo largo de la escala y mueva capas con puntos de luz, creando fotogramas clave. Sigue moviéndolos hasta que hayas terminado de mover la mota sobre toda la letra de cada capa de texto. Para obtener instrucciones, consulte algunas capturas de pantalla a continuación.

Nota del traductor: Haz pequeñas secciones para mover los puntos de luz para que su movimiento y, en consecuencia, la animación sean suaves.

Aprenderás:

  • Cómo cambiar la duración de la animación y hacer una presentación de diapositivas con transiciones.
  • Cómo funciona la línea de tiempo y cómo colocar fotogramas clave.
  • Cómo mover el indicador de tiempo y encender el cronómetro.
  • Cómo recortar una o más capas. Cómo animar estilos de capa.
  • Cómo agregar animación dibujada a mano, parpadear y animar una máscara.
  • Cómo animar objetos 3D.
  • Cómo guardar animación.

La lección consta de las siguientes secciones:

1. Vídeo de entrenamiento.
2. Cambie a la línea de tiempo.
3. Duración y velocidad de fotogramas de la animación.
4. Opciones de línea de tiempo.
5. Animación transición suave de una imagen a otra.

9. Edite la posición de los fotogramas clave.
10. Recorte de capas.

12. Usando papel de calco.
13. Animación de enmascaramiento.
14. Agregue títulos.

16. Animación de iluminación.
17. Guardar animación.
18. Animación de objetos 3D.
19. Tamaños de pancartas.
20. Preguntas.
21. Tarea.

Cambiar a la línea de tiempo

A partir de Photoshop CS3, se agregó una línea de tiempo a la animación cuadro por cuadro normal. Esto ha ampliado enormemente las capacidades del programa para crear animaciones y videos. En este modo, cada capa de la paleta Capas se ubica en su propia pista temporal. Cualquier cambio en la paleta Capas se refleja inmediatamente en el panel Animaciones. El panel de animación se ha vuelto similar a un panel de programa liviano. Adobe después Efectos.

Al crear un nuevo documento, en la sección Preestablecido, seleccione Película y vídeo. Asegurar que modo de color era RGB, resolución 72 ppi, profundidad de bits 8 bits/canal. Haga clic en Avanzado y seleccione Relación de aspecto de píxeles cuadrados si no buenas razones especifique un formato diferente.

Para cambiar entre fotograma y línea de tiempo, utilice el botón o . (la apariencia del botón depende del tipo de panel de animación: temporal o cuadro por cuadro). O haga clic en el botón en el panel de animación y seleccione Convertir a línea de tiempo. Una cosa a tener en cuenta es que al pasar de la animación de la línea de tiempo a la animación cuadro por cuadro, existe la posibilidad de perder cuadros clave. La animación en sí permanece sin cambios.

Para abrir el menú, haga clic en el botón de la derecha esquina superior paneles de animación. Este menú es diferente del que abrimos mientras trabajábamos con animación cuadro por cuadro.

Duración de la animación y velocidad de fotogramas.

Después de seleccionar Configuración del documento, se abre una ventana
ajustes. Aquí puedes cambiar la duración de la animación. Tenga en cuenta que reducir la duración de un vídeo o animación creado previamente eliminará fotogramas al final del documento. También se eliminarán los fotogramas clave que se encuentren dentro del intervalo de reducción.

Al crear un documento nuevo, la duración predeterminada de la línea de tiempo se establece en 10 segundos y la frecuencia depende de la opción Tamaño del documento seleccionada.

Al seleccionar un documento que no sea Película y vídeo: 30 fotogramas/seg.

Video formato amigo- 25 fotogramas/seg.

Video formato NTSC- 29,97 fotogramas/seg.

Película: 24 fotogramas/seg.

Vídeo en DVD: tal vez 25; 29,97 y 23,976.

Vídeo para Web (instalado de forma independiente): de 10 a 15 fotogramas/seg.

Opciones de línea de tiempo

Te sugiero que mires la línea de tiempo en ejemplo de presentación de diapositivas. Como ejemplo, seleccioné varios trabajos de estudiantes para la lección “Herramientas de selección...”. Anteriormente, configuré todas las imágenes en el mismo tamaño 800x600 y resolución 72.

Abre el archivo presentación de diapositivas.psd. La paleta Capas contiene 8 capas, incluida la capa de fondo. Hay 7 capas en el panel Animación.

En la línea de tiempo, cada capa tiene parámetros animados:

Posición, Opacidad, Estilo e Iluminación Global. Para verlos, haga clic en la flecha a la izquierda de la capa.

Así es como se ve la línea de tiempo de la animación:

Cuadro clave.

Habilite el cronómetro.

Animación de una transición suave de una imagen a otra.

Para cambiar cualquiera de estos parámetros, establezca el indicador de tiempo en el punto de inicio y haga clic en el icono; aparecerá un fotograma clave. Mueva el indicador de tiempo al punto final y cambie parámetros requeridos en la paleta Capas, aparecerá un segundo fotograma clave.

Capa abierta Olga Zh. EN punto cero hora, haga clic en el icono del cronómetro a la izquierda de Opacidad; aparecerá un fotograma clave. Mueva el indicador de tiempo a 01:00f. En la paleta Capas, reduzca el valor de opacidad al 0%. Aparecerá un segundo fotograma clave en la intersección del indicador de tiempo actual y la capa de Opacidad. Si ahora presiona el botón Reproducir (Iniciar animación) o simplemente mueve el indicador de tiempo actual, notará cómo la primera imagen abre suavemente la segunda capa.

Vaya a la capa Nadezhda D. Haga clic en el icono del cronómetro a la izquierda de Posición. Mueva el indicador de tiempo a las 02:00.

Por cierto, puedes configurar el indicador de hora actual más de una manera exacta: Haga doble clic en la línea con los números que indican la hora. Se abre la ventana Establecer hora actual tiempo exacto). Los dos últimos dígitos indican fotogramas por segundo. Penúltimos segundos. Si necesita colocar con precisión el indicador de tiempo en 2 segundos, entonces este campo debería decir: 0:00:02:00. Puede corregir los números manualmente o puede ingresar 60 en este campo. Porque V este documento La velocidad de fotogramas predeterminada es 30 fotogramas por segundo, luego dos segundos serán 60 fotogramas. Si haces clic y mantienes presionada la hora actual tecla alternativa, entonces habrá un cambio entre código de tiempo y personal.

Entonces, momento adecuado instalado. Seleccione Mover en la barra de herramientas. Cambiar capa Nadezhda D. diagonalmente hacia la derecha y hacia abajo fuera de la imagen. Desplácese por la animación.

La capa se desvanecerá hacia la esquina inferior derecha, revelando la imagen subyacente.

Cambiar a capa Tania R.. Hagamos una transición de moda a través del flash blanco. Este efecto se utiliza a menudo en publicidad para centrar la atención.

Establezca el indicador de tiempo en 0:00:02:00. Haga clic en el icono del cronómetro a la izquierda de Estilo. Vaya al menú y seleccione Copiar fotograma clave. Mueva el indicador de tiempo a la marca de 2 segundos y 15 fotogramas (0:00:02:15). En el menú de animación, seleccione Pasado fotograma clave. Establezca la hora en 0:00:02:20. Ve a la paleta Capas. Abrir estilos de capa doble clic en la capa Tanya R. Marque la casilla de verificación Superposición de color. Vaya a configuración y cambie el color a blanco. Vuelve al panel Animaciones (tiempo 0:00:02:20) y haz clic en el icono del cronómetro a la izquierda de Opacidad. Mueva el indicador de tiempo a las 03:00. En la paleta Capas, baje la opacidad a 0.

En la siguiente capa (Julia B) cambiaremos la posición para que la imagen retroceda. bien. Ajuste el indicador de tiempo a la marca de 3 segundos. Cree un fotograma clave haciendo clic en el icono a la izquierda de Posición. Vaya a la marca de 4 segundos. Seleccione Mover en la barra de herramientas. Mueva la capa hacia la derecha fuera del lienzo mientras mantiene presionado Tecla Mayús. Aparecerá un nuevo fotograma clave.

Editar la posición de fotogramas clave

Reproduce la animación. En capas Nadezhda D. Y Julia B. la transición comienza demasiado pronto. No tenemos tiempo de mirar la imagen, pero ya empieza a moverse. Para mantener su atención en la imagen, mueva los primeros fotogramas clave 15 fotogramas hacia la derecha. Esto se puede hacer simplemente arrastrando y soltando. Haga clic en el fotograma clave para que se vuelva amarillo. Amarillo indica que está resaltado. Mueva el indicador de tiempo 15 fotogramas hacia la derecha. Mueva el fotograma clave hasta que se cruce con el indicador de tiempo. Ahora el movimiento comenzará un poco más tarde.

Recortar capas

Recorta la siguiente capa (Elena I). Primero configure el indicador de tiempo en 5 segundos. Luego pasa el cursor sobre el final de la capa. El cursor cambiará a una flecha de doble cara. Abrazadera botón izquierdo mouse y arrastre el borde hacia la izquierda hasta que se cruce con el indicador. Cuando ejecutes la animación, verás que la capa desaparecerá repentinamente a los 5 segundos, revelando la capa subyacente. Puedes recortar varias capas al mismo tiempo si primero las seleccionas con usando Mayús o Ctrl.

Nota: al mantener presionada la tecla Mayús mientras presiona los botones y se pasa al valor entero siguiente/anterior de segundos o fotogramas en la línea de tiempo. En nuestro caso, el indicador que está en 0 segundos se moverá 1 segundo. o a 30 fotogramas.

Agrega animación dibujada a mano a la siguiente capa. Para hacer esto, vaya a la capa.
Olesya T. animación en el panel. Luego en el menú Capas – Capas de video – (Crear una capa de video vacía). Establezca la hora en 05:00 seg. En la barra de herramientas, seleccione Difuminar(Difuminar). Intensidad 100%, diámetro 1100 y marca de verificación (muestras de todas las capas). Realiza unos 15 movimientos circulares alrededor de la imagen.

Mueva el indicador de tiempo a 05:01. Desenfoca la imagen con la herramienta Desenfocar con la misma configuración, pero haz movimientos más pequeños del mouse: aproximadamente 10 veces. Mueva el indicador de tiempo a 05:02. Repita los pasos anteriores (reduzca los movimientos circulares con el mouse a 5 veces).

En la marca 05:03, desenfoque la imagen de manera similar usando 2 movimientos circulares con el mouse. Recorta la capa al valor de tiempo 06:00.

Usando papel de calco

Para facilitar su uso, a veces puede utilizar papel de calco. Para hacer esto, haga clic en el botón (Cambiar el papel de calco). Para desactivar el seguimiento, haga clic en este botón nuevamente. Puede personalizar la piel de cebolla seleccionando Opciones de piel de cebolla en el menú de animación.

Animación de enmascaramiento

Queda la última capa Svetana P.. Aplíquele una máscara haciendo clic en el icono en la parte inferior de la paleta Capas.

Si hay una máscara en la capa, se agregan dos parámetros más: Posición de la máscara de capa Y Habilitar máscara de capa. Establezca la hora a las 06:00. Al animar el movimiento de una capa con una máscara, asegúrese de verificar ambas líneas: Posición y Posición de la máscara de capa. De lo contrario, la máscara permanecerá inmóvil y la capa se moverá.

Cree fotogramas clave en los parámetros Posición de máscara de capa y Habilitar máscara de capa.

Ve a la paleta Capas. Agregar una máscara de capa Svetlana P, haciendo clic en el icono. Llena la máscara con negro. Entre las miniaturas de la capa y la máscara, elimine el icono de cadena para romper el vínculo entre ellas. Mueva el indicador de tiempo a las 06:05. Seleccione la herramienta mover y mueva la máscara hacia la derecha para que aparezca la imagen.

A las 07:00, recorte la longitud de la capa Svetlana P.

Aplica el filtro Nubes a la capa de fondo. Preestablezca los colores en blanco y azul.

Agregue un estilo de capa Superposición de degradado (Superposición de degradado).

Agregar títulos

Puedes agregar créditos al final de la animación. Tome la herramienta Texto. Escribe la palabra Fin. Rasteriza la capa. Dale estilos de capa: relieve, superposición de color y trazo. Tendrás que recortar el inicio de la capa hasta la marca de las 07:00 para que no aparezcan los créditos antes de empezar a trabajar en la capa con la máscara.

También es necesario acortar la duración de la animación. Para hacer esto, seleccione Configuración del documento en el menú de animación. Establezca la duración en 08:00.

Volvamos a la capa de vídeo. En la capa de vídeo no sólo puedes difuminar la imagen, sino también difuminarla con la herramienta de difuminar (dedo), clonar con la herramienta de sello, rellenarla y también pintar con cualquier pincel.

Agreguemos un poco de brillo. Seleccione el pincel número 70 blanco con la configuración como en la imagen de abajo. A partir de las 06:05, pinta sobre la capa de vídeo con este pincel. Salta un fotograma y vuelve a realizar algunos trazos. Continuar hasta el final de la capa.

Ahora la capa de video tiene un área borrosa y un área con parpadeo, pero los efectos se aplican a diferentes imágenes.

Animación de iluminación

Agreguemos una animación de Luz Global.

La iluminación global se puede ajustar en estilos de capa: Sombra paralela (Sombra), Sombra interior (Sombra interna) y Bisel y relieve (Relieve).

Configure el indicador de tiempo a las 07:00. Cree un fotograma clave en la capa Títulos haciendo clic en el icono
cronómetro a la izquierda de Global Lighting. Mueva el indicador a las 07:29. Ir a la paleta de Layres. Ingrese los estilos de capa de relieve. Asegúrese de que la casilla de verificación Usar luz global esté marcada. Cambie los valores de Ángulo (-90) y Altura (40).

Puede establecer otros valores moviendo la marca dentro del círculo. El resultado será un hermoso flujo a lo largo del contorno de las letras. Este efecto de animación se puede utilizar para simular. cambio rápido hora del día. La sombra cambiará su posición con respecto al sol.

Eso es todo. Puede proceder a guardar la animación. Pero antes de eso me gustaría añadir algunas palabras. No deberías usar tantos efectos diferentes para tu presentación de diapositivas como lo hice yo. Quería presentarles la configuración tanto como fuera posible, por eso resultó que había demasiados efectos. Los efectos y filtros no se pueden animar. Las capas de ajuste no se pueden animar con configuraciones de ajuste como brillo, saturación, color, etc.

Guardar animación

Guardar en formato gif no tiene sentido, porque los colores cambiarán más allá del reconocimiento.

Guardar en formato PSD para perfeccionarlo o importarlo a Adobe After Effects.

Para grabar un video, use el menú Archivo – Exportar – Renderizar video.

En esta ventana, ingrese el nombre del archivo, especifique la ruta y haga clic en el botón Configuración....

Haga clic en el botón Opciones. Seleccione el tipo de compresión de la lista desplegable: Foto - JPEG. Entonces está bien. Y de nuevo está bien. Prestar.

Animación de objetos 3D.

En esta lección sólo tocaremos brevemente el tema de los objetos 3D. Habrá una lección separada para un estudio más detallado. La animación de objetos 3D es posible desde Photoshop CS4. Abra el archivo Nastya.jpg. Para animar una capa normal como 3D, seleccione el menú 3D - Nueva postal 3D a partir de capa ( Nueva postal de la capa 3D). O menú 3D – Nueva figura a partir de capa ( Nueva figura de capa) – (Sombrero). Puedes elegir cualquier otro objeto de la lista en lugar de un sombrero. Observe cómo ha cambiado la miniatura de la capa.

Establezca la duración de la animación en 1 segundo o 10 fotogramas. Para hacer esto, seleccione Configuración del documento en el menú.

Crea otra capa debajo de la capa 3D. Y rellénalo con un poco de color usando herramienta de pintura Balde (Llenado/balde).

Aparecerán elementos adicionales en el panel de animación:

Posición del objeto 3D

Posición de la cámara 3D

Configuración de renderizado 3D

Sección transversal 3D (sección transversal 3D).

En la línea Posición del objeto 3D, haga clic en el icono del cronómetro y aparecerá el primer fotograma clave. Mueva el indicador al cuadro 9. Seleccione en la barra de herramientas - Girar el objeto 3D (Rotar). Apunte al objeto, mantenga presionado el botón izquierdo del mouse; el sombrero comenzará a girar. ¡Todo! Puedes guardar la animación.

Tamaños de pancartas:

Rectángulo mediano 300 x 250

Cuadrado emergente de 250 x 250

Rectángulo vertical de 240 x 400

Rectángulo grande de 336 x 280

rectángulo de 180 x 150

pancarta de 468 x 60 de largo

Pancarta de medio largo de 234 x 60

Microtira de 88 x 31

120 x 90 botón 1

120 x 60 botón 2

140 x 75 botón 3

pancarta vertical de 120 x 240

Botón cuadrado de 125 x 125

Soporte principal de 728 x 90

Rascacielos de 160 x 600 de ancho

Rascacielos de 120 x 600

Anuncio de media página 300 x 600

Preguntas:

  1. ¿Qué parámetros no se pueden animar en la línea de tiempo?

Estilo.

Iluminación global.

Posición de la máscara de capa.

Posición del objeto 3D.

Escala.

  1. Cómo configurar el indicador de tiempo con una precisión de un cuadro.

Haga doble clic en la línea con los números que indican la hora.

Haga clic en el icono del cronómetro.

En el menú del panel Animación, seleccione Configuración del documento.

Tarea:

1) Grabe una presentación de diapositivas breve utilizando una línea de tiempo. Puedes tomar fotografías de la lección o elegir las tuyas propias.

2) Crea cualquier banner o tarjeta de video. Muestra tu imaginación. Que sea una pequeña animación, pero propia.




Arriba