Cómo hacer un gif en Photoshop CS6. Cómo hacer animaciones gif en Photoshop. Mejora de la animación añadiendo fotogramas intermedios

Nota importante. Si necesita crear rápidamente animación más simple desde varios fotogramas en Photoshop, vaya a la lección - .

Me interesa la animación stop-motion desde hace bastante tiempo, aunque he estudiado poco material. Todos los libros que comencé a leer eran bastante largos, difíciles y “secos”.

Por lo tanto, después de que comencé a comprender un poco sobre la tecnología de creación de animaciones, comencé a buscar formas de darles vida usando Photoshop.

Mucha gente me recomendó que cambiara a otros programas (por ejemplo, Animación TVP Pro), pero yo, no queriendo adaptarme a las nuevas interfaces de otros programas, decidí hacer todo en Photoshop.

Y escribí esta lección específicamente para aquellos que no entendían la tecnología de crear animaciones cuadro por cuadro específicamente en Photoshop. ¿Quién no ha querido indagar un poco y entender qué es qué?

Tocaré dos temas: animaciones cortas y animaciones largas. No debes desplazarte por el tipo de animaciones que no te interesan: puede haber información allí que te será útil para animaciones del tipo que necesitas.

animaciones cortas– estos son avatares animados, emoticones, etc.

animaciones largas– estos son dibujos animados, videos, etc.

Primero les contaré la teoría y luego crearemos animaciones en la práctica.

Adición importante

Mucha gente pregunta: "¿Por qué mi animación es tan entrecortada, por qué mi personaje/objeto se mueve rápido/lento?"
La respuesta es: tu personaje/objeto se mueve. rápido porque dibujaste pocos marcos.

Tu personaje/objeto se está moviendo despacio porque dibujaste muchos marcos.

Tu personaje/objeto se sacude porque no seguiste el movimiento anterior y dibujaste el siguiente, que no es consistente con el anterior.

Recuerda: en un segundo 24 ¡marco!

Entonces, cuando estés listo para crear tu animación, recuerda: 24 marco = 1 segundo, 24 marco = 1 segundo. Nunca olvides este detalle tan importante.

animaciones cortas

Creo que a menudo te has encontrado con animaciones en avatares, emoticones animados.
Algunos emoticones están hechos en Destello, pero yo dibujo el mío en Photoshop. No creas que animaciones tan cortas son fáciles de hacer. Por un lado, sí, son de tamaño pequeño, pero por otro lado, mientras los dibujas 15 -30 fotogramas, estarás ocupado (imagínate, si quieres crear un clip de tres minutos, entonces tendrás que hacer 4320 marcos!).

¿Qué debes recordar y saber?

Digamos que quieres dibujar una chica con el pelo alborotado para tu avatar. Medio:

En primer lugar, el cabello no es cartón: bajo la influencia de un viento moderado, formará ondas transversales.

Así es aproximadamente como se muestra en el diagrama:

Bajo la influencia de un fuerte viento, el cabello quedará casi liso, pero tu personaje tendrá que cerrar los ojos con fuerza y ​​agarrarse a algo para evitar ser arrastrado, ya que en realidad pocas personas pueden soportar tal viento. aunque este tipo de animación se puede utilizar cuando tu personaje anda en bicicleta, por ejemplo.

Y finalmente, una suave brisa levanta y baja suavemente tu cabello.

Viento ligero:

Viento medio:

Viento fuerte:

Lo mismo se aplica a las telas y la ropa: se comportarán de la misma manera que el cabello.

Y ahora, por ejemplo, querías dibujar una animación con el movimiento de tu personaje y objeto. Medio:

En segundo lugar, cualquier acción comienza en alguna parte. ¿Alguna vez has notado que, por ejemplo, para levantarte de una silla, primero la mueves un poco y te inclinas un poco hacia adelante, y solo luego te levantas? ¿O que cuando quieres dar un golpe con la raqueta, primero la alejas y giras el cuerpo con ella, y sólo después das un golpe?

Hay muchísimos ejemplos de este tipo, pero es mejor mirar:

Para evitar meterse en problemas con estos movimientos antes de acciones(DPD), analiza y observa con más frecuencia los movimientos de personas o animales.

Pequeña adición

En general, nunca te olvides de la física. El peso de los objetos, los materiales con los que están hechos (elasticidad, suavidad, dureza, etc.), todo esto es necesario.

¡Ten en cuenta que sin esto, tu animación estará muerta, terrible y fea!

Es mejor trabajar en ello y nunca apresurarse.

animaciones largas

¡Oh, aquí es donde comienza la diversión!

¿A menudo, mientras miras dibujos animados o anime, has admirado la animación y envidiado a quienes saben cómo hacerla? Todas estas maravillosas escenas, movimientos plásticos y mucho más. etc.? Honestamente lo admito, sí. Cada vez que veo algo, trato de entender cómo trabajaron los animadores con ello. ¿Cómo crearon todo esto?

Pero, debido a que no sé en qué programas funcionan, estoy tratando de comprender todo el proceso utilizando los mecanismos de Photoshop.

Y ya sabes, ¡encuentro respuestas a todas mis preguntas!

Pero pongamos todo en orden.

El proceso de creación de una animación larga.

1. Inicialmente necesitamos una IDEA

Por ejemplo, decidiste hacer un video corto en el que varias chicas bailarán.

Si eres un animador experimentado, puedes "hacer bailar a alguien" en tu vídeo desde 3 y más chicas.

Pero al comienzo de su trayectoria como animador, es mejor limitarse a uno o dos.

2. Ahora necesitas crear un guión gráfico escena por escena (RPS).

¿Qué es y con qué se come?

Imagínate una película. Ahora imagina el número varios tipos de diferentes cámaras. De cerca, paisaje, cámara siguiendo al personaje...

Está bien cuando no hay tantos. Pero cuando hacemos un clip completo puede haber más. 30 ¡cosas!
Por eso los animadores inteligentes utilizan algo tan maravilloso que parece un libro rayado.

En él representan escenas.

Sólo algunos dibujan una escena en cada sección de la tabla, luego otra, una tercera, etc., mientras que otros dibujan imágenes en cada sección de la tabla al cabo de unos segundos (pido disculpas si no lo expliqué claramente).

También es muy conveniente que puedas hacerlo al lado de la descripción; de lo contrario, a veces lo dibujas, luego de un rato lo miras y no entiendes: ¿qué he representado aquí?

Entonces tomamos nota de este guión gráfico para las escenas y usamos estos libros.
Ni siquiera tienes que hacer un libro, solo crear archivo grande en Photoshop y dibuja todas las escenas allí.

3. Ahora necesitas idear un trasfondo, un concepto de personaje y un movimiento.

Dibujamos los movimientos en el libro RPS.

Si tienes más de una escena en un vídeo, tendrás que dibujar varios fondos diferentes. Dibujarlos en archivos separados.
Y recuerda una cosa: el fondo no aparece de la nada. Entonces, si quieres que la cámara se mueva hacia un lado, entonces el fondo también debería estar allí. aquellos. Tendrás que dibujar el fondo a lo largo (o a lo ancho, o tal vez a ambos) más.

Entonces piensas bien apariencia tu personaje y comienza a crear animación.

Pasar de la teoría a la práctica

A partir de ahora pensemos un poco en IDEA y, en general, en el punto “El proceso de creación de animación”. ¿De qué estoy hablando? Además, ahora necesitarás un conejillo de indias al que obligarás a moverse. No haremos un vídeo en el que 4320 marcos. La mejor y más sencilla forma de entenderlo es cómo crear una animación cuadro por cuadro usando 24 -72 - animación de cuadros.

Bueno, ¡comencemos!

1. nosotros creamos nuevo documento. Para mi animación tomé tamaño pequeño – 400 incógnita 500 píxeles.

2. Ahora, si no tienes una ventana en la parte inferior izquierda " Animación", mira hacia arriba, abre la pestaña " Ventana» - « Animación».*

* - Los ejemplos utilizan la versión rusificada. Photoshop CS2.

En la captura de pantalla de arriba vemos la ventana de animación en la que se encuentra el primer fotograma, debajo hay un pequeño panel en el que se encuentran los botones:

Siempre/una vez- al seleccionar "Siempre" se repetirá la animación. Si selecciona Una vez, la animación solo se reproducirá una vez. (En mi lección hay ambas versiones de animaciones: en bucle, donde se muestra el principio de DPD, reproducida una vez, donde se muestra el cambio de escena).

Seleccionar el primer fotograma- nos lleva de vuelta al principio.

Selecciona el fotograma anterior- No llamemos al Cap. (=

Reproduce animación/Detiene la animación- Reproducir/Detener.

Selecciona los siguientes fotogramas- siguiente fotograma. ¡Tu gorra!

Cuadros de animación de interpolaciones.- usando este botón podemos agregar transiciones suaves entre dos fotogramas agregando otros nuevos.

Duplica cuadros seleccionados- no es del todo el nombre correcto... Sería mejor decir "Agregar un nuevo marco".

Elimina los fotogramas seleccionados- cesta.

3. Ahora podemos empezar a dibujar. Para hacer esto, coloque el fondo que creó anteriormente en Fondo(Fondo/Fondo).

4. Luego crea nueva capa(Ctrl+Shift+Alt+N) y dibuja tu personaje en él.

4. Ahora viene lo difícil: tendremos que dibujar al mismo personaje muchas veces seguidas en diferentes poses.

Creamos un nuevo marco, y… Hay dos opciones:

A) O empiezas a dibujar tu personaje de nuevo cada vez, o...

B) Copie la capa anterior y cámbiela (¡termina de dibujar y borrar, en lugar de usar la transformación! Rara vez necesitará una herramienta de este tipo, escribiré más adelante cuando).

Una vez que obtenga algo de capacitación en animación, podrá utilizar ambas opciones sin dolor. (Puedes probar cada uno de ellos en un documento aparte).

Opción A:

1. Dibujamos nuestro primer cuadro.

2. Para ver cómo cambiar la siguiente, reducimos la opacidad de la capa a aproximadamente 30% y creamos una nueva capa en la que dibujamos el conejo para el segundo cuadro.

3. Terminamos de dibujar el segundo cuadro y apagamos la visibilidad de la primera capa anterior.

Opción B:

1. Crea un marco con el personaje y haz que esta capa sea invisible.

2. Luego duplíquela (Ctrl+J) arrastrando la capa al botón "Crear una nueva capa" a la izquierda de la papelera.

3. Ahora hacemos visible la segunda capa y comenzamos a cambiarla.

Así, al duplicar la capa anterior, creas nuevos fotogramas y los cambias, y no el mismo.

5. Nos sentamos y dibujamos marcos. 10 -15 ...

6. Y veamos qué pasó.

Resultó ser un conejo corriendo.

Además, no se copia ni una sola parte: cada fotograma se dibuja de nuevo.

Vea usted mismo:

Al crear una animación, debes recordar que es bastante difícil cambiar entre cientos de capas y, por lo tanto, no debes posponer pintar o cambiar nada para más tarde. Hazlo de inmediato.

Casi el final

Arriba hice una reserva sobre la herramienta ().
Merece la pena utilizarlo cuando, por ejemplo, quieras alejar la cámara, acercarla, girarla, etc. (Si solo necesitas mover el fondo, utiliza editores de vídeo, te resultará más fácil). No utilices distorsión, inclinación u otras herramientas de transformación innecesariamente.

Y, después de haber salvado nuestra gif-animación como formato de archivo de video .avi, por ejemplo, puedes ir con seguridad a Estudio de cine Windows Vivir.
A partir de ahí, haz lo que tu corazón desee con tu clip.

Y luego podrás subir tu clip a youtube.com y disfrutar del trabajo que has realizado.

MUCHAS GRACIAS por su atención, Lero-art estuvo con ustedes. Disculpe por la dificultad para hablar, la presentación extraña y otros defectos en la lección, si los hay. Todos ellos se deben al hecho de que los pensamientos se confunden y las palabras no se forman en oraciones...

¡Pero espero que hayas aprendido algo nuevo e interesante por ti mismo!

3. Buscamos nuestra carpeta con fotos preparadas y hacemos clic izquierdo en la primera foto, mantenemos presionada la tecla Shift, y hacemos clic en la última, entonces quedarán todas seleccionadas. Haga clic en ABRIR.

4. Todas las fotos se abren en Photoshop. Comencemos a crear las capas que necesitaremos para la animación o creando gifs fotos. Abrí una foto especialmente amplia. Y será la 1ª capa.

Para convertir una foto en una capa, haga doble clic en ella con el botón izquierdo del mouse.

5. Para crear una segunda capa, debemos hacer clic en el icono al que apunta la flecha. En la segunda capa colocaremos otra foto.

6. Pisoteamos nuestras fotografías, que están abiertas al lado de la primera, y seleccionamos una fotografía estrecha. Les recuerdo que esto no es necesario... C fotografías idénticas más fácil de trabajar. Entonces, encontramos la foto deseada, vaya al menú - selección - seleccione TODOS.

7. Después de esto, pequeños guiones comenzarán a correr alrededor de la imagen, esta es la selección. Ahora vaya al menú - edición - copiar.

8. Volvemos a nuestra primera foto, que ya tiene capas, vamos al menú – edición – pegar. Y nuestra foto estrecha se inserta en una nueva capa. Pero no puede seguir siendo tan estrecho. Necesitamos agregar un fondo debajo. Para hacer esto, haga clic en el icono (1), arrastre la capa debajo foto estrecha, luego usa el cuentagotas (2) para seleccionar el color que desees haciendo clic en la foto. Elegí verde claro. Y rellenar una nueva capa, para lo cual activamos la herramienta de relleno (3) y luego hacemos clic izquierdo en el campo de trabajo de la foto. Tenga en cuenta que en este momento el nuevo debe estar activo. fondo transparente. Las capas activas están resaltadas en azul. Después de tus acciones capa transparente será coloreado.

9. Ahora necesitamos fusionar dos capas (foto estrecha y fondo). Damos un paso con el botón izquierdo del ratón sobre la primera capa. Mantenga presionada la tecla Shift y haga clic en la segunda capa. Están resaltados en azul. Vaya al menú - capas - fusionar capas.

10. Obtenemos esta imagen.

11. Repita los pasos 6 a 10 de mi tutorial para crear una capa con otra foto estrecha. Lo tengo en la capa 2. Y creo otra nueva capa transparente para colocar allí la última foto ancha (capa 3).

12. Para hacer esto, siga los puntos 6, 7, 8 de la lección. Eso es todo. Listo. Capas para nuestro fotos gif creamos.

13. Puedes empezar a animar con tus capas, pero yo decidí crear un fondo para nuestra imagen. Para hacer esto, vaya al menú - imagen - tamaño del lienzo. Aumentamos nuestro lienzo en 50 piezas de ancho y alto. Haga clic en Aceptar.

14. Lo tenemos así.

15. Crea una nueva capa (tengo la capa 4), arrástrala hasta el final debajo de todas las fotos, puedes hacer un fondo del mismo color que el fondo de tus fotos estrechas. Elegí un color base un poco más oscuro.

Puedes decorar tu sustrato de cualquier forma. Espero que sepas cómo configurar los parámetros de la capa, pero si no, es sencillo. pisando capa deseada y haz doble clic en él con el botón izquierdo del mouse y se abre una ventana con los parámetros de tu capa, y allí abres cada parámetro individual por separado y aplicas o cambias su configuración. Apliqué el efecto en las opciones de capa. sombra interior y Resplandor interior con la opción de capa Multiplicar... El color de la sombra es ligeramente más oscuro que el tono del fondo. Pero aquí no me comprometo a imponerles mi opinión. Tienes tu propia visión. Pruébalo, cambia la configuración. No da miedo. Siempre puedes volver al resultado original, para lo cual vas al menú - editar - volver.

Por cierto, en mi ultima foto Arbusto de glicina, hay mucho en Francia y su época de floración es a finales de abril o principios de mayo. Fotografié este arbusto en el jardín de los padres de mi amigo. También hay arbustos de glicina en mi jardín búlgaro y creo que pronto nos deleitará con sus flores que parecen nubes de color lila.

16. Ahora es el momento de poner tu logo, esto es especialmente importante si tu imagen estará ubicada en tu sitio web. Para usuarios comunes Es posible que esto no se aplique. Déjame recordarte que hice una lección de Photoshop sobre. Lo repasaré brevemente: ve al menú - archivo - lugar. Buscamos nuestro archivo PSD con un logo preparado previamente, lo pisamos y pulsamos en el botón Colocar.

17. Arrastra la capa con el logo hasta la parte superior, como la mía. Si es necesario, amplíe el logotipo para el tamaño correcto, para lo cual nos dirigimos al menú – edición – escalado. Con una abrazadera Tecla Mayús estirar o encoger el logotipo. Active la herramienta "mover" (la herramienta superior con la flecha y + en la barra de herramientas) y mueva el logotipo a la ubicación deseada.

Todo está preparado con la creación de animación.

17. En el primer fotograma de la animación, deberías tener visible la capa de fondo, la primera capa con tu foto (en mi caso capa 0) y el logo (posición 1). Para buena visualización establece el tiempo de retraso para tu foto 5 segundos(posición 2). Después de determinar el tiempo de retardo y configurarlo en el primer cuadro, todos los cuadros posteriores estarán con tiempo dado 1 cuadro, es decir 5 segundos en mi caso. Para crear un segundo cuadro, haga clic en el icono que se muestra en la posición 3.

18. En el segundo cuadro, cambie la visibilidad de la capa de la primera imagen a la segunda, tal como se muestra en mi captura de pantalla.

Los GIF están en todas partes. Las imágenes animadas que alguna vez fueron humildes son ahora el idioma no oficial de Internet. La animación GIF es la más manera rápida expresar emociones en Twitter, y también podemos pasar horas mirándolo, desplazándonos por las noticias en VK, Facebook u Odnoklassniki.

hay suficiente gran número sitios donde puedes encontrar gifs ya preparados sobre una variedad de temas. Pero no hay nada mejor que una animación GIF hecha por ti mismo. con mis propias manos. ¿Crees que este es un proceso difícil? Estás equivocado, es bastante simple. Puedes crear rápidamente animaciones GIF en un formato gráfico. editor de photoshop, convirtiendo ya vídeo existente, o utilizando una serie de imágenes estáticas. Echemos un vistazo más de cerca a cómo se hace esto.

Nota: En todos los ejemplos de este artículo, estoy usando Photoshop CC 2017.

Cómo crear animaciones GIF a partir de vídeo

Primero, debe iniciar Photoshop, ir a "Archivo" > "Importar" > "Marcos de video a capas" y seleccionar la grabación de video deseada.

En el cuadro de diálogo que se abre, puede importar la grabación de video completa o seleccionar solo una parte determinada de ella. Si elige la segunda opción, arrastre los controladores debajo de la ventana avance para establecer los puntos de inicio y fin. Se importará la parte del vídeo entre estos identificadores.

Nota: Tenga en cuenta que lo que más vídeos, que importas, más grande será tu GIF. Además, si estás importando un vídeo que es demasiado largo, elegir Mantener cada 2 fotogramas (o más) es una manera fácil de reducir el tamaño sin afectar demasiado la calidad.

Asegúrese de que la casilla de verificación Crear animación cuadro por cuadro esté marcada y luego haga clic en Aceptar. Comenzará el proceso de importación de video. Esto puede llevar algún tiempo, dependiendo del tamaño del clip. Una vez completada la importación, se abrirá un área de trabajo en la que cada fotograma del vídeo se colocará en su propia capa.

En la parte inferior de la pantalla hay una paleta de escala de tiempo. Muestra todos los fotogramas que conformarán tu animación GIF.

Puede agregar y eliminar marcos como mejor le parezca, o editar cualquiera de las capas existentes de la misma manera que edita capas en cualquier otra imagen. Para obtener una vista previa de su animación GIF, simplemente haga clic en el botón Reproducir en la parte inferior de la línea de tiempo.

El resultado final debería ser algo como esto:

Crear animación GIF a partir de una serie de imágenes estáticas

Si no tiene secuencias de video para usar como base para su animación GIF, puede crear una manualmente a partir de una serie de imágenes estáticas. Es un poco más complicado, especialmente si quieres hacer algo interesante, pero el proceso básico es simple.

Creas tu GIF a partir de un único archivo de imagen que contiene varias capas. Cada capa es un fotograma separado de su futura animación. Hay dos formas de empezar:

1. Si ya ha creado imágenes para su animación, impórtelas eligiendo Archivo > Scripts > Cargar archivos en la pila.... Haga clic en Examinar y seleccione sus imágenes, luego haga clic en Aceptar. Cada imagen se colocará en capa separada dentro del mismo archivo.
2. Si aún no ha creado imágenes, hágalo ahora. Recuerda que cada imagen separada- esto es parte de una futura animación.

Ahora estás listo para comenzar a crear animaciones.

Animar imágenes estáticas

Así es como funciona. Cuando crea manualmente un cuadro de animación, todas las capas visibles se incluyen en él. Las capas que estén deshabilitadas no se incluirán en el marco generado.

Para crear el primer cuadro, haga visible la primera capa y desactive todas las demás. Luego, al crear el segundo cuadro, haga visible la segunda capa, y luego la tercera capa en el tercer cuadro, y así sucesivamente. Una vez que empieces, todo quedará más claro.

Para comenzar a crear una animación, abra la línea de tiempo si no se abre automáticamente. Para este propósito en panel superior Haga clic en "Ventana" y seleccione "Línea de tiempo" en el menú que se abre. En el centro del panel que se abre, haga clic en "Crear animación de fotograma". Esta acción creará el primer fotograma de tu animación. En la paleta Capas, oculte las capas que no desea que formen parte del marco.

Ahora haga clic en el botón Nuevo marco", que duplicará el cuadro anterior. Una vez más, oculte las capas adicionales y haga visibles las que deberían incluirse en el marco.

Repita este proceso hasta que haya agregado todos los fotogramas necesarios para la animación.

Terminación

Finalmente, configure el tiempo de visualización para cada cuadro. Seleccione el primer cuadro y luego presione Mayús y haga clic en el último para seleccionarlos todos. Ahora haga clic en la flecha hacia abajo debajo de uno de los cuadros y seleccione un retraso. Sin demora significa que la animación se ejecutará rápidamente, mientras que la cantidad establecida de segundos hará que los fotogramas permanezcan en la pantalla durante un período de tiempo determinado.

Finalmente, configura las opciones de bucle, que encontrarás en la parte inferior del panel Línea de tiempo. Este parámetro controla cuántas veces se reproducirá la animación. En la mayoría de los casos, seleccionará la opción "Siempre".

Ahora haga clic en el botón Reproducir en la parte inferior de la pantalla para obtener una vista previa de la animación resultante. Deberías ver algo como esto:

Puedes editar marcos simplemente seleccionándolos y cambiando la visibilidad de las capas (también puedes cambiar la opacidad o hacer otras más configuraciones complejas). Agregue capas adicionales si las necesita o haga clic en el ícono de la papelera para eliminarlas.

Cuando esté satisfecho con el resultado, puede pasar a la sección "Guardar animación" o seguir leyendo para mejorar la animación resultante.

Mejora de la animación añadiendo fotogramas intermedios

Photoshop admite una potente función de interpolación de animación. Esto le permite crear más animaciones suaves, generando automáticamente cuadros de transición entre dos cuadros existentes. En este ejemplo, voy a repasar todos los fotogramas para darle al cielo estrellado un efecto de centelleo.

Para comenzar, seleccione el primer fotograma y haga clic en el botón Crear ajustes en la barra de herramientas en la parte inferior de la línea de tiempo.

En el cuadro de diálogo que se abre, establezca el elemento "Marcos intermedios" en el valor "Siguiente fotograma" y, para el elemento "Agregar marcos", especifique el valor a su discreción. Más alto valor significa una transición más suave pero más lenta. Haga clic en "Aceptar" para crear los marcos intermedios.

Ahora repita este proceso para los otros fotogramas fuente que agregó. Cuando llegue al último, configure "Entre fotogramas" en "Primer fotograma". Esto ayudará a crear transición suave al comienzo de su bucle de animación.

Haga clic en el botón de reproducción para obtener una vista previa del efecto.

Guardar animación

Cuando haya terminado, primero guarde el archivo como un archivo ".PSD". Esto guardará toda la información de la capa y la animación para que puedas editar tu animación más tarde si es necesario. Después de esto, puedes proceder directamente a guardar.

Para guardar la animación creada, vaya a Archivo > Exportar > Guardar para Web ( versión antigua)...". En la ventana que se abre, seleccione formato gif, y en el campo “Colores” ingrese 256. Para reducir tamaño total archivo, reduzca el tamaño en el campo "Tamaño de imagen".

Puede ver el tamaño de la animación en la esquina inferior izquierda de la ventana de vista previa. Si es demasiado grande, arrastre el control deslizante Residuos hacia la derecha. Esto afectará la calidad, pero reducirá significativamente el tamaño del archivo.

Hazlo animado imagen gif Photoshop es bastante posible incluso para un principiante. Photoshop le permite crear animaciones cuadro por cuadro cambiando cuadros y luego guardar el trabajo como una imagen gif.

Esto significa que Photoshop no crea la animación en sí, sino que solo organiza una presentación cuadro por cuadro de imágenes preparadas previamente y las genera en el formato final. Número de fotogramas en animación terminada gif puede ser cualquier cosa, pero cuanto mayor sea el número, mayor será el tamaño del archivo. Por lo tanto, siempre debes esforzarte por reducir el número de fotogramas al mínimo. Sin embargo, cuantos más fotogramas se reflejen en un segundo de animación, más fluida será. Generalmente no es una buena idea aumentar el número de fotogramas por segundo más allá de 30, porque el ojo humano no puede distinguir más fotogramas por segundo. Incluso en películas y vídeos se utilizan 24 fotogramas por segundo.

Además, al crear animaciones en Photoshop, debes tener en cuenta que varios dispositivos y los navegadores pueden a diferentes velocidades reproducir animación con un gran número cuadros por segundo, dependiendo de su capacidades técnicas. Entonces, Teléfono móvil, por ejemplo, sólo puede reproducir 10 fotogramas por segundo. Esto significa que un segundo de animación con 30 cuadros tomará 3 segundos, por lo tanto, la animación se ralentizará.

Al elegir el número de fotogramas por segundo de una animación, todo depende de lo que se representará en la animación y de su propósito.

Cabe señalar que el número de fotogramas por segundo de la animación gif no es constante y cambia fácilmente al crear la animación. En pocas palabras, es posible especificar el tiempo de visualización de cada cuadro individual. Por ejemplo, puede configurar el primer fotograma de una animación para que dure un segundo y el segundo fotograma para que dure cinco segundos.

Esto es muy útil cuando necesitas mantener un determinado cuadro por más tiempo, por ejemplo con texto, sin aumentar el peso. archivo gif. Normalmente, una imagen animada simple puede tener hasta 10 fotogramas en total, normalmente entre 4 y 6.

Al establecer el tiempo de diferentes fotogramas, una animación de 4 fotogramas puede durar desde una fracción de segundo hasta un minuto o más. Pero hay que tener en cuenta que también animaciones largas También se debe evitar: la animación no es un videoclip, algunos navegadores no esperan el final de la animación y comienzan a reproducirla desde el principio, con pérdida instantánea. Imágenes gif desde la pantalla.

También debe prestar atención al hecho de que la calidad y la reproducción del color de un dibujo en el formato de animación GIF suele ser notablemente menor que en formato jpg o similar, este
peculiaridad.

La animación tampoco debe realizarse en resolución alta, esto provocará una carga adicional en los navegadores o teléfonos y, muy probablemente, simplemente reducirá la velocidad de reproducción. Dependiendo del propósito de la animación, la resolución recomendada puede ser de hasta 100 a 150 píxeles de ancho o alto. Además, cuanto menor sea la altura de la animación, mayor puede ser su ancho y viceversa. Por ejemplo, una resolución de cuadro de 400X50 píxeles es una resolución aceptable, pero 400X150 ya es demasiado y sólo es adecuada para fines especiales.

Pero, aún así, lo más importante a lo que debes prestar atención al crear una animación gif es su peso. Para uso general en páginas de Internet o en dispositivos, el tamaño de la animación no debe exceder los 400 KB. Este es el máximo.

Recomendaciones generales en los parámetros de animación gif para fines generales (avatares, barras de usuario, firmas, etc.)

Peso- no más de 400 KB, mejor que 150 KB - 200 KB.
Permiso- en total no más de 30.000 píxeles (la cantidad se multiplica por el alto por el ancho, por ejemplo, 400X50 = 20.000).
Tiempo de reproducción completo- no más de 15 segundos.
Número de fotogramas Puede ser cualquier cosa, siempre y cuando el peso del archivo gif o el tiempo de la animación no superen las recomendaciones anteriores, normalmente cuanto más pequeño, mejor.
Número de fotogramas por segundo- no más de 30, según las necesidades.

Crea animaciones de Photoshop.

Photoshop sólo puede crear animaciones a partir de la versión CS3. Para crear un archivo animado, debe preparar las imágenes necesarias con anticipación o crear imágenes directamente con Photoshop.

En nuestro ejemplo, usamos todas las opciones a la vez. Haremos una animación para la firma “Avatar”.

Opción lista:

Creación:

Primero, busquemos fotos originales para crear animación:

Ahora vamos a crear nuevo archivo en Photoshop. Especifique ancho 400, alto 50. Modo de color- 8 bits.

Ahora activemos la ventana "Animación". Ventana > Animación. En la parte inferior aparecerá un área especial para trabajar con animación.

Muestra todos los fotogramas que están en la animación en secuencia. Hasta el momento solo hay un fotograma, de duración 0 segundos, pero siempre podemos añadir otros nuevos. Los marcos siempre se pueden reorganizar hasta que la imagen se guarde en formato gif.

Cada cuadro muestra las capas visibles para él. En el modo de animación, para cada fotograma, condiciones separadas visibilidad de la capa o sus otras características, transparencia, contorno, color, etc.

Tenga en cuenta que las características de la capa para el primer fotograma se aplican a todos los fotogramas de la animación. Esto significa que, por ejemplo, si cambia el color del texto en el décimo fotograma de la animación, cambiará solo en el décimo fotograma y, si cambia en el primero, en todos los fotogramas de la animación a la vez.

Llena el lienzo de color. Seleccione la herramienta Relleno (predeterminada, letra G) y el color #3a55a4, y rellene el lienzo.

Agreguemos las imágenes originales al lienzo (Archivo > Colocar, o simplemente puede arrastrarlas desde la carpeta) y cambiar su tamaño.

Cuando agregas nuevas imágenes al lienzo, forman una nueva capa. Son estas capas con las que trabajaremos en el proceso de creación de la animación.

No olvides guardar periódicamente tu trabajo para no perder los cambios que has realizado. sigue trabajando archivo de photoshop posible en formato PSD. (por defecto).

Primero necesitas crear el diseño de la imagen y el primer fotograma. Es importante tener en cuenta que los navegadores o dispositivos que no podrán reproducir la animación
muestra sólo su primer fotograma. Por tanto, el primer fotograma de la animación debe reflejar toda su esencia.

Muestre y mueva la capa animatsiya1 al borde izquierdo del lienzo. Para hacer esto, seleccione la capa deseada (animatsiya1), luego: Editar > transformar > voltear horizontalmente. Luego simplemente moveremos la capa.

En el primer cuadro, no necesitamos la capa animatsiya2, por lo que debemos ocultarla. Si oculta una capa, no aparecerá en el marco seleccionado. Agreguemos algo de texto (letra T). También debe cambiar el color del texto, por ejemplo, a blanco; de lo contrario, se fusionará completamente con el fondo.

El texto también es una capa separada. El primer fotograma de la animación está listo. Creemos un segundo cuadro. Más precisamente, creemos una copia del primer fotograma. Para hacer esto, haga clic en el signo de la hoja en el área de animación.

El segundo fotograma se selecciona automáticamente, pero podemos seleccionar cualquier fotograma con el que queramos trabajar.

Para el segundo fotograma ocultaremos la primera capa animatsiya1 y haremos capa visible animatsiya2. Además, aplique un efecto a la capa de texto y vuelva a pintarla de un color diferente. Haz doble clic en la capa “AVATAR”, Estilos > Superposición de colores, y haz clic en el pequeño cuadro de color. Establezcamos el color #8fbeff.

Como resultado, así es como se ve ahora el segundo fotograma.

Aunque Photoshop no crea animaciones por sí mismo, puede crear fotogramas intermedios. Agreguemos 5 fotogramas intermedios entre nuestros dos. Para hacer esto, debe seleccionar "Crear fotogramas intermedios", a la izquierda del botón "Duplicar fotograma" en el área de animación. Pero primero debe seleccionar dos cuadros, entre los cuales se crearán cuadros intermedios. Puede seleccionar varios fotogramas a la vez manteniendo pulsada la tecla Shift.

Agreguemos 5 fotogramas.

Ahora, la cinta de fotogramas de animación consta de 7 fotogramas. Los marcos intermedios proporcionan una transición suave de un marco a otro.

Debe configurar el tiempo de visualización del cuadro. Ahora todos los fotogramas no tienen tiempo de visualización: 0 segundos.

El tiempo para mostrar fotogramas se puede configurar de forma masiva, seleccionando varios fotogramas o por separado para cada uno. Establezcamos el tiempo de visualización de los fotogramas 1 a 6 en 0,1 segundos y el fotograma 7 en 1 segundo. Para hacer esto, haga clic en la flecha al lado del tiempo de visualización del cuadro.

¡Listo! La cinta de cuadros de animación está lista. Se puede ver directamente en Photoshop haciendo clic en la flecha Reproducir en el área de animación.

El formato debe establecerse en Gif. Todas las demás configuraciones afectan calidad gif animación y su peso original. Si la animación resulta demasiado pesada, puede reducir el número de colores a 128, por ejemplo, u optimizar inmediatamente la animación para el tamaño de archivo deseado. Para ello, haga clic en el icono de tres barras en la parte superior derecha, seleccione “optimizar por tamaño de archivo” e ingrese el peso inicial. La animación en sí se optimiza para el peso requerido con un mínimo posibles pérdidas calidad.

Por supuesto, este es un ejemplo muy básico de cómo crear una animación gif en Photoshop, pero muestra los conceptos básicos de cómo se crea la animación. Con la experimentación, puedes hacer mejores, más detalladas y hermosas animaciones, pero el principio de su creación es el mismo.