Una serie de tutoriales sobre la creación de animaciones de planos en Photoshop CS3 (1): descripción general.
El principio de formación de animación es que el ojo humano tiene la característica de persistencia de la visión. La llamada persistencia de la visión significa que después de ver un objeto, incluso si el objeto desaparece rápidamente, seguirá dejando una imagen continua en los ojos. un cierto período de tiempo. Esto es cierto cuando el objeto es relativamente brillante. Es especialmente obvio en el caso de. Lo más común es utilizar flash al tomar fotografías de noche, aunque hace tiempo que el flash se apagó, el halo aún permanecerá en los ojos del sujeto y durará un período de tiempo.
Es posible que la primera aplicación de esta función la hayamos realizado nosotros cuando estábamos en la escuela primaria. Fue dibujar los movimientos de muchos personajes en el pie de página del libro de texto y luego hojearlo rápidamente para lograr imágenes continuas en los ojos. es animación. Cabe señalar que la animación aquí no se refiere a la animación de dibujos animados. Aunque los principios de producción de la animación de dibujos animados son los mismos, la animación aquí generalmente se refiere a todas las imágenes continuas.
En resumen, la llamada animación consiste en utilizar varias imágenes fijas para reproducirlas continuamente y utilizar la persistencia de la visión para formar una imagen continua. Por ejemplo, las películas tradicionales utilizan una larga serie de películas para grabar continuamente fotogramas individuales y proyectarlos en la pantalla con luces en secuencia a una velocidad determinada. Aquí hay un requisito de velocidad. Imagínese que si hojeamos lentamente el libro de texto, solo experimentaremos múltiples imágenes fijas en lugar de imágenes continuas. Lo mismo ocurre con la reproducción de películas, si la velocidad es demasiado lenta, lo que ve el público equivale a una presentación de diapositivas giratoria. Para permitir que el público experimente imágenes continuas, la película se reproduce a una velocidad de 24 cuadros por segundo, es decir, se proyectan continuamente 24 imágenes fijas en la pantalla en un segundo. La unidad para la velocidad de reproducción de la animación es fps, donde f es la palabra inglesa Frame (imagen, cuadro), p es Per (per) y s es Second (segundo). En chino, significa cuántos fotogramas por segundo o cuántos fotogramas por segundo. Las películas son de 24 fps, a menudo denominadas 24 fotogramas.
Otros dispositivos que pueden producir imágenes en la vida real también tienen el concepto de velocidad de fotogramas, como las señales de televisión. El formato PAL utilizado en China y Europa es de 25 fotogramas, y el formato NTSC utilizado en Japón y América es de 29,97 fotogramas. Si la animación se reproduce en un monitor de computadora, 15 cuadros pueden lograr el efecto de imágenes continuas. De esta forma, cuando hagas vídeos en el futuro, tendrás que pensar en qué dispositivo publicarlos y establecer diferentes velocidades de fotogramas.
La precisión del reconocimiento del ojo humano es en realidad mucho mayor que las velocidades de fotogramas anteriores, porque el sistema visual compuesto por el ojo humano y el cerebro está muy desarrollado. Simplemente tiene diferentes niveles de sensibilidad según el entorno. Por ejemplo, en un entorno oscuro, el tiempo de persistencia visual de las fuentes de luz más brillantes es mayor, por lo que la película sólo requiere 24 fotogramas. Por cierto, a propósito, sólo unos pocos animales tienen ojos que superan a los humanos en algunos aspectos, pero todos ellos son seriamente deficientes en otros aspectos. Por ejemplo, el águila, el "Rey de los Detalles", es daltónica, mientras que el búho, el "Rey de la Visión Nocturna", tiene los ojos fijos y tiene que girar la cabeza para observar su entorno.
En los tutoriales de diseño de Photoshop que vimos en Tianji Design Online, Photoshop se utiliza principalmente para crear imágenes estáticas como carteles y manuscritos impresos. Mencionamos que tiene la capacidad de producir animaciones. Ahora vamos a crear una animación compuesta por varios fotogramas en Photoshop. Expanda una sola pantalla a varias pantallas. Y crea una especie de continuidad de imagen entre estas múltiples escenas para darle forma a la animación.
Hoy en día, muchas animaciones producidas con Flash pueden incluir doblaje e interactividad, lo que hace que toda la animación sea más vívida. La animación producida por Photoshop solo puede llamarse animación simple, principalmente porque solo tiene imágenes y no puede agregar sonido, y el público solo puede verla de manera fija. Pero la simplicidad no significa tosquedad. Aunque el primero proporciona más métodos de producción y expresión, el segundo todavía tiene sus propias ventajas únicas, como la animación de estilo de capa, que puede crear fácilmente algunos detalles hermosos que son difíciles de lograr con otros programas. Además, así como dibujar sobre papel es un acto muy sencillo, cada persona dibuja de manera diferente. Por lo tanto, una excelente animación no requiere necesariamente una tecnología compleja, lo importante es una excelente creatividad.
No importa qué software sea, sus principios de producción son los mismos, al igual que el modo de color RGB que hemos estudiado con tanto ahínco, se puede aplicar en todas partes. Entonces, nuestra tarea actual es utilizar los conocimientos básicos de Photoshop que hemos aprendido, extenderlos a la producción de animación y aprender las habilidades y métodos generales de producción de animación. Este conocimiento aún se puede aplicar a otros aspectos más adelante. Y también presentaremos cómo convertir animaciones de Photoshop en videos y agregarles sonido.
Además de las diferencias en la producción, también existen diferencias en el uso. Las animaciones suelen colocarse en un área determinada de una página web para enfatizar determinado contenido, como las animaciones publicitarias. Este tipo de animación suele tener tamaños fijos correspondientes según diferentes ubicaciones de ubicación, como 468x60, 140x60, 90x180, etc. La animación también se puede aplicar a los MMS de teléfonos móviles (un servicio de mensajes de texto multimedia que puede enviar imágenes, sonidos y vídeos). Cada uno de estos usos tiene sus propias características y hay otros factores a considerar además del tamaño. Como el límite en el número de bytes, el tiempo de permanencia de la trama, etc. Te lo explicaremos paso a paso en el tutorial.
Nota: Antes de comenzar esta serie de tutoriales, requerimos que los lectores hayan aprendido los conceptos básicos de Photoshop, comprendan y dominen conceptos y operaciones como capas de ajuste, estilos de capa, etc., como "Cómo crear una capa de ajuste de curvas", etc. En adelante, solo se dará una breve introducción a la operación y los principios no se explicarán en detalle. Por lo tanto, se recomienda que los nuevos lectores aprendan primero los conceptos básicos.
Además, sólo la versión extendida (extendida) de Photoshop CS3 tiene la función de producción de animación, que no está disponible en la versión normal. La versión CS2 viene con funciones de creación de acciones y el funcionamiento es similar al de CS3 Extended. CS y versiones anteriores requieren el software ImageReady incluido para la producción de animaciones. Se recomienda que utilice la misma versión extendida de CS3 que el tutorial.
Dado que se llama animación, significa hacer que las imágenes en la pantalla se muevan. Ahora dibujemos y creemos una animación "simple y tosca".
Cree una nueva imagen en blanco de 150 × 150, cree una nueva capa y dibuje un rectángulo, aproximadamente como se muestra a la izquierda a continuación, y la paleta de capas como se muestra a la derecha. De esto se puede ver que esta es una capa de celosía ordinaria. En las operaciones reales, también prestaremos atención a esto en los siguientes tutoriales.
Abra la paleta de animación a través de [Window_Animation], como se muestra en la imagen de la izquierda a continuación. En este momento, también hay algunas opciones más en la paleta de capas, como se muestra con la flecha roja en la imagen de la derecha a continuación. Si cierra la paleta Animación, se restaurará a su estado original. No te preocupes por eso por ahora. Además, la paleta de animación a menudo se combina con la paleta de registros de medidas. Esta última no tiene nada que ver con nuestro contenido actual y se puede desactivar.
Después de abrir la paleta de animación, podemos comenzar a hacer animaciones. Haga clic en el botón "Copiar cuadro seleccionado" en la flecha roja de la paleta de animación. 
, verás un nuevo marco agregado. Como se muestra a continuación. De acuerdo con nuestros hábitos anteriores, este ícono debería representar uno nuevo, como una nueva capa, etc. Aunque la explicación literal aquí es copiar, en realidad es uno nuevo, pero el marco recién agregado es en realidad el mismo que el marco anterior. . Mismo contenido. En consecuencia, todos deberían poder imaginar 
La función del botón es eliminar el marco.
Asegúrese de que el segundo cuadro copiado esté seleccionado actualmente en la paleta de animación y luego use la herramienta de movimiento para mover el cuadrado en la capa una cierta distancia, aproximadamente como se muestra en la imagen de la izquierda a continuación. En este momento, la paleta de animación es como se muestra en la imagen del medio a continuación. Se puede ver que aunque la posición del bloque ha cambiado en el cuadro 2, la posición del bloque en el cuadro 1 permanece sin cambios. Esta es una característica muy importante.
Repita esta operación de copiar primero el marco y luego mover el bloque varias veces, y finalmente obtendrá algo como la imagen de abajo a la derecha (similar a esta). Ahora tenemos 7 cuadros y los bloques están en diferentes posiciones en cada cuadro. Preste atención a la oración "La posición de los cuadrados en cada cuadro es diferente" y luego mire la paleta de capas. Es obvio que solo existe una capa (la capa de fondo no se cuenta por el momento), lo que lleva a. una característica: para una capa, digamos, su posición (o coordenadas) se puede especificar individualmente en diferentes marcos. Según esta característica, podemos animar el movimiento de objetos usando una sola capa.
Ahora puedes presionar el botón de reproducción en la paleta de animación. 
, puedes ver el efecto del cuadro moviéndose en la ventana de la imagen, pero se mueve muy rápido. Esto se debe a que el tiempo de retardo del cuadro no está configurado. Tenga en cuenta que ahora hay "0 segundos" debajo de cada fotograma en la paleta de animación. Este es el tiempo de retardo del fotograma (o tiempo de permanencia). El tiempo de retardo del fotograma indica cuánto tiempo se muestra el fotograma durante la animación. Por ejemplo, si el retraso de un determinado cuadro se establece en 2 segundos, cuando se reproduzca este cuadro, permanecerá durante 2 segundos antes de continuar reproduciendo el siguiente cuadro. El retraso predeterminado es 0 segundos y se puede configurar de forma independiente para cada cuadro.
El método para configurar el retraso del fotograma es hacer clic en el tiempo debajo del fotograma y seleccionar el tiempo correspondiente en la lista emergente. Como se muestra en la imagen de la izquierda a continuación, configure el cuadro 7 en 0,5 segundos. "Sin demora" en la lista es 0 segundos. Si no hay ningún tiempo que desee configurar, puede seleccionar "Otro" e ingresar el valor usted mismo (en segundos). También puede modificar el retraso de manera uniforme después de seleccionar varios fotogramas. El método para seleccionar varios fotogramas es el mismo que para seleccionar varias capas. Primero haga clic en el fotograma 1 en la paleta de animación para seleccionarlo, luego mantenga presionada la tecla MAYÚS y haga clic en el fotograma 6. Simplemente seleccione los cuadros 1 a 6. Luego configure la zona horaria de cualquier cuadro, como se muestra en la imagen de la derecha a continuación, configurada en 0,1 segundos. Este es un tiempo de retraso más comúnmente utilizado.
Vuelve a reproducir la animación y verás que el bloque se mueve más lento y permanece más tiempo al final del movimiento. Evidentemente, esto se debe al gran retraso en el que estaba previsto. Este largo retraso en realidad juega un papel destacado y esta característica se puede utilizar para resaltar un tema determinado en la producción real. También encontraremos tiempo para presentar algunas técnicas de expresión en tutoriales posteriores.
Además del tiempo de retardo, otra característica de la animación es que puede establecer el número de bucles de reproducción. Tenga en cuenta que hay un "para siempre" debajo del primer cuadro de la paleta de animación, que es el número de bucles. Después de hacer clic, puede elegir "una vez" o "para siempre", o establecer el número de ciclos usted mismo. Luego reproduzca la animación nuevamente para ver el efecto de la configuración del número de bucle.
Aunque en la mayoría de los casos las animaciones se repiten continuamente (es decir, para siempre), en algunos lugares también se utilizan bucles únicos o varias veces (2 a 3 veces), principalmente cuando se utilizan animaciones para crear componentes web. Por ejemplo, anime el nombre de una columna desde cero para que aparezca gradualmente, de modo que cuando el nombre se muestre por completo, se arregle y no pueda volver a desaparecer y luego aparecer de nuevo. En este momento, es necesario utilizar la configuración del ciclo "una vez".
Presione 〖CTRL+S〗[Archivo>Guardar] para guardar la configuración de la animación y el formato del archivo es psd. Este formato de archivo es propiedad de Photoshop y puede registrar toda la información relevante. Se recomienda que todos guarden sus trabajos en este formato para facilitar futuras modificaciones. Si necesita un archivo de animación independiente que pueda usarse en páginas web, debe usar [CTRL+ALT+SHIFT+S] [Archivo>Guardar para Web y dispositivos], y aparecerá una ventana grande como se muestra a la izquierda a continuación. . Este gran ventanal tiene mucho que cubrir. Pero ahora sólo necesita consultar la configuración en el área de la flecha roja.
Al mismo tiempo, aparecerá un botón de reproducción y opciones de bucle en el área de la flecha verde en la parte inferior derecha de la ventana. Cambiar el número de bucles aquí también cambiará la configuración en el archivo fuente. Tenga en cuenta que si no se selecciona ningún GIF dentro del área de la flecha roja, el botón de reproducción no estará disponible. Esto se debe a que solo el formato GIF admite animación. Si lo guarda a la fuerza en otros formatos como JPG o PNG, la imagen generada solo tendrá el primer fotograma.
Durante el proceso de almacenamiento, puede aparecer el mensaje de advertencia que se muestra a continuación a la derecha. No lo ignore y simplemente confirme. También puedes volver a hacerlo invisible. Sin embargo, todos deben prestar atención al uso de números o inglés de ancho medio al nombrar archivos, y no utilizar caracteres de ancho completo ni caracteres chinos. Esto será más compatible con navegadores de varios idiomas.
En este capítulo, lo que todos deben dominar son dos atributos de la animación, a saber, el tiempo de retardo de fotograma y el número de bucles. Además, debe dominar los métodos para realizar animaciones simples de desplazamiento de objetos, como "copiar cuadros y mover capas". Y utiliza este método para crear una animación con el desplazamiento de dos objetos al mismo tiempo. El efecto es similar a la imagen de abajo.
En la siguiente sección presentamos la segunda parte: las características de propagación del primer cuadro.