Ahora hemos aprendido muchos métodos para hacer animaciones, pero todavía no tenemos muy clara la forma final de animación. ¿Cómo generar animación? ¿Dónde se usa? ¿A qué debemos prestar atención durante el uso? En esta lección explicaremos estos temas en detalle.
Actualmente, el principal formato de imágenes animadas en los sistemas Windows es el GIF, que también se puede mostrar directamente en páginas web. Es actualmente el formato de imágenes animadas más utilizado. La inclusión de animaciones en los ahora populares mensajes MMS de teléfonos móviles también pertenece al formato GIF. El formato GIF admite expresiones tanto fijas como animadas. Ya sea quieto o animado, las características son las mismas.
El principio de implementación de la animación en formato GIF no es complicado. Puede entenderlo como una combinación de varias imágenes fijas (cuadros) para mostrarlas a su vez. También existen relaciones operativas entre estas imágenes (cuadros), que son similares a las operaciones de cualquier ruta seleccionada, es decir, suma, resta y eliminación. Esto es para optimizar el recuento de bytes de la animación.
Si se agrega un determinado marco, el marco anterior se conservará y el contenido de este marco se agregará para formar una nueva imagen. Por ejemplo, la animación de la barra de progreso común es un ejemplo típico, como se muestra en la figura siguiente. Supongamos que una barra de progreso consta de 3 cuadros. En términos de la forma teórica del cuadro que vemos, parece que los cuadros más cortos y medianos están almacenados. en estos 3 fotogramas respectivamente y la imagen de la barra de progreso más larga. Pero, de hecho, el segundo cuadro solo contiene los píxeles que no están en el primer cuadro y luego actúa sobre el primer cuadro de manera aditiva, formando una imagen "1 + 2". Lo mismo ocurre con el cuadro 3. Esta optimización reduce efectivamente el recuento de bytes de la imagen.
El método de resta es todo lo contrario: borra ciertos píxeles en el cuadro anterior de la imagen, lo que puede entenderse por la "barra de progreso inverso". El método de eliminación consiste en borrar completamente el fotograma anterior. Se utiliza principalmente cuando no hay correlación entre los dos fotogramas antes y después. Por ejemplo, cuando se cambia de todo rojo a todo verde, si no hay píxeles iguales entre sí. En los fotogramas anterior y siguiente se utiliza el método de eliminación.
En la producción real, Photoshop decidirá automáticamente qué método adoptar en función de la situación de la imagen, sin intervención manual. Basta entender estos métodos de cálculo como un conocimiento. También se puede utilizar como referencia a la hora de concebir animaciones.
Ahora hablemos de la siguiente característica importante del formato GIF, que es el límite en la cantidad de colores. GIF solo puede admitir un máximo de 256 colores , lo que significa que una imagen GIF solo puede tener un máximo de 256 colores. Esto es especialmente obvio en los GIF estáticos. Algunas imágenes con colores intensos, como los degradados de varios colores, son difíciles de expresar perfectamente en los GIF. Como se muestra en la imagen de la izquierda a continuación, una parte de una foto (tenga en cuenta que es una parte, no la imagen completa) es una imagen en PNG de 24 bits y GIF256 sin tramado ni tramado de difusión. La imagen completa es un escaparate tomada en Venecia, como se muestra abajo a la derecha.
Se puede ver claramente que PNG de 24 bits tiene el mejor color y puede considerarse como la imagen original. El formato GIF tiene una expresión de color deficiente. Sin tramado, aparecen manchas de color en algunas áreas con transiciones de color en la imagen original. Bajo el tramado por difusión, las manchas se aclaran un poco, pero el granulado es más intenso. Esto se debe al principio del tramado en sí. El concepto de tramado se introdujo en el tutorial básico.
Cabe señalar que 256 colores se refieren a la imagen completa. Si toda la imagen original tiene el tamaño que se muestra a continuación, la diferencia entre los 256 colores y la imagen original no es muy grande. Esto se debe a que al reducir los colores a 256 colores, Photoshop los ordenará según los colores de la imagen original. Este proceso también se llama indexación, que consiste en agrupar colores similares en uno.
Si los colores de la imagen original contienen varios tonos, cuando se promedian los 256 colores, el número asignado a un solo tono será muy pequeño. Por el contrario, si el tono de la imagen original es básicamente el mismo o cercano, también se pueden expresar bien 256 colores. Esta es la razón por la que el color anterior 256 que no era de imitación parecía que las manchas eran obvias, pero ahora las manchas son menos obvias. Debido a que la imagen original del primero contiene más tonos, algunos colores se asignan a azul, rojo, etc., y menos colores a la fase amarilla. La imagen original de este último básicamente sólo tiene la fase amarilla, por lo que no es necesario asignar colores a otras tonalidades.
La siguiente imagen es una foto de la calle tomada en Piacenca. Comparamos diferentes partes de la misma. Los cuadrados a continuación son tablas de colores y los bloques de colores representan los 256 colores utilizados. El impacto de la composición de color de la imagen original en el índice de color se puede ver fácilmente en la tabla de colores. Hay más tonos en la imagen de la izquierda, por lo que el número de fases azules asignadas al cielo entre los 256 colores es menor, y hay manchas de color obvias en el cielo de la imagen. La imagen de la derecha básicamente solo contiene la parte del cielo, por lo que la mayoría de los 256 colores se asignan a la fase azul, lo que hace que el cielo en la imagen funcione mejor.
Utilice [Archivo>Guardar para Web y dispositivos] [CTRL+MAYÚS+ALT+S] y aparecerá el cuadro para guardar la configuración. Esta es nuestra función de salida más utilizada, especialmente en los tutoriales de extensión de diseño web que aprenderemos en el futuro.
Después de ingresar a la interfaz de configuración, preste atención a la flecha roja. Lo que debe ver en la pestaña "Optimización" es el efecto real después de la salida, es decir, el efecto en el navegador o el software de visualización de imágenes. La pestaña "Original" es el efecto en Photoshop y no se puede utilizar como estándar de referencia. Esto debe recordarse.
La flecha verde es el área de configuración correspondiente, desde la cual configuramos el formato de imagen en GIF, configuramos el número de colores en 256 y desactivamos la opción de tramado. Su configuración corresponde al efecto en el lado izquierdo de la imagen de arriba.
Preste atención a la indicación del conteo de bytes en la flecha azul, este es un indicador muy importante, siempre que debemos hacer que este número sea lo más pequeño posible, de lo contrario no podremos usar imágenes o animaciones de manera efectiva.
Para reducir la cantidad de bytes, es necesario reducir la cantidad de colores y la cantidad de bloques de colores en la tabla de colores se reducirá en consecuencia. Pero es obvio que muy pocos colores tendrán un impacto significativo en la calidad de la imagen y pueden formar fácilmente manchas de color. Aunque activar el tramado puede reducir las manchas de color, también aumentará el número de bytes. Es como un balancín entre el número de bytes y la calidad. No se pueden tener ambas. Para las imágenes destinadas a transmitirse a través de Internet, el número de bytes suele ser más importante porque la mayoría de los visitantes no tendrán la paciencia de esperar varios minutos hasta que se muestre una página web. Además de las imágenes, las páginas web también tienen otros códigos que también necesitan ocupar bytes. Por lo tanto, minimizar el número de bytes es un principio básico. Por supuesto, este principio entra en conflicto con la calidad de la imagen, que requiere que tengamos habilidades suficientes para equilibrar ambas en el proceso de concepción y producción. Estas técnicas incluyen:
1. No utilices colores demasiado intensos en la animación. El motivo ya se ha mencionado. Más colores provocarán una disminución de la calidad de la imagen después de la indexación y formarán manchas de color antiestéticas. En este caso, es mejor utilizar un solo color. Aunque puede que no quede lo suficientemente bonito, al menos puede evitar la aparición de defectos como manchas.
2. Si se necesitan colores intensos, los píxeles de las partes con colores intensos deben mantenerse estacionarios en la animación. Debido a que existe una relación operativa entre los fotogramas anterior y siguiente de la animación GIF, la parte en estado fijo se puede utilizar en fotogramas posteriores y no es necesario almacenar esta parte de la imagen en esos fotogramas posteriores. Esto puede reducir efectivamente la cantidad de bytes mientras se mantiene el color intenso de toda la animación. Por el contrario, si los píxeles más ricos también se mueven, entonces los píxeles más ricos deben almacenarse en fotogramas posteriores, lo que aumentará en gran medida el recuento general de bytes de la animación.
Comparación de las dos animaciones a continuación. La primera mantiene el brillo exterior, la proyección y otras partes de la bola sin cambios, y solo cambia la parte resaltada. El segundo es el movimiento general de la pelota. Bajo la premisa de la misma velocidad de fotogramas, la misma duración y 256 y sin vacilación, el número de bytes del primero es 9,29 K y el del segundo es 57,1 K. La diferencia es de hasta 6 veces. Entonces, el tiempo que tardan en transmitirse en la red será 6 veces mayor.
Cuando concebimos una animación debemos considerar de antemano su finalidad. Si se va a utilizar en una página web, también debemos hacer referencia a su importancia en la página web. Si no es muy importante y es decorativa, intentar reducirla. número de bytes tanto como sea posible. Esto se puede conseguir desde dos aspectos: reducir el número de colores durante el almacenamiento y una buena planificación de la producción. Si encuentra una animación con instrucciones importantes que deben ser coloridas o dinámicas, debe reducir el tamaño de la animación tanto como sea posible. Debido a que el número total de píxeles en una imagen de tamaño pequeño también es pequeño, la indexación con 256 colores no parecerá tan apretada. Puedes aprender esto a través de tus propios experimentos.
Otra característica importante de GIF es que admite la transparencia del fondo , lo que le permite combinarse bien con el fondo de la página web. También puedes generar un GIF con un fondo transparente desactivando la capa de fondo. Sin embargo, la transparencia del fondo del GIF sólo puede estar en dos estados: completamente transparente o completamente opaco, pero no translúcido en el medio. Por lo tanto, a menos que los límites de la imagen sean líneas horizontales, verticales o diagonales de 45 grados, se formará un alias obvio debido a la transparencia. Como se muestra en la figura siguiente, aparece un conjunto de gráficos con diferentes límites bajo diferentes colores de fondo. No es difícil ver la diferencia entre los dos.
Cabe señalar que el principio de formación de bordes irregulares no es solo un problema de imagen, sino también factores relacionados con las limitaciones físicas de la pantalla. El conocimiento relevante se menciona en el tutorial básico.
Para imágenes con píxeles semitransparentes (como estilos de sombra paralela), si desea guardarlas como fondo transparente, debe activar el proyecto de tramado de transparencia, de modo que se puedan usar pequeños puntos dispersos con diferente densidad para simular la translucidez. . Como se muestra en la siguiente figura. Se puede ver que aunque el GIF bajo "Sin tramado de transparencia" también tiene un fondo transparente, la parte translúcida original aún conserva el blanco, por lo que solo se puede aplicar a un fondo blanco. Este último se puede aplicar a cualquier fondo. Como se muestra abajo a la derecha.
Cabe señalar que el vacilante de transparencia no es una solución perfecta, incluso se puede decir que es una solución muy pobre. Pero debido a las limitaciones de transparencia del propio GIF, también es una solución. En la producción real, si decide utilizar el formato GIF, debe evitar generar píxeles semitransparentes en los límites de la imagen. En otras palabras, trate de evitar el uso de tramado de transparencia.
Otra cosa a tener en cuenta es que si la animación de salida tiene un fondo transparente, puede cambiar la relación de cálculo de cada cuadro en el estado no transparente y también puede hacer que aumente el número de bytes de la animación.
Ahora hablemos brevemente sobre el uso de animaciones como mensajes MMS en teléfonos móviles.
China Mobile actualmente permite un máximo de 100.000 mensajes MMS. Lo mejor es controlar las animaciones por debajo de 95.000 y dejar algo de espacio para el texto y el código del propio SMS. Otra cosa a tener en cuenta es el tamaño de la animación. Los diferentes modelos de teléfonos móviles tienen diferentes tamaños de animaciones que se pueden mostrar perfectamente debido a sus diferentes resoluciones de pantalla. La llamada visualización perfecta significa que la resolución de la pantalla del teléfono móvil es igual o mayor que el tamaño de la animación. Si el tamaño de la animación excede la resolución de la pantalla del teléfono móvil, el teléfono móvil la reducirá para su visualización. Pero la calidad de la animación reducida será muy pobre. Los tamaños de pantalla comunes son:
128×128: Común en los primeros y actuales teléfonos móviles de gama baja. Es el tamaño básico de las animaciones MMS. La mayoría de las animaciones MMS descargadas de Internet son de este tamaño porque pueden ejecutarse en casi todos los teléfonos móviles que admiten MMS.
128×160: Aunque tiene algunos píxeles más que el anterior, se utiliza principalmente para mostrar cierta información, por lo que la mayoría de los tamaños de animación que se pueden ejecutar siguen siendo 128×128.
176×208, 240×320: comúnmente utilizado en teléfonos móviles con sistemas operativos abiertos como Symbian y Windows Mobile, y puede reproducir animaciones a pantalla completa. También hay teléfonos móviles normales que utilizan esta resolución, pero no es seguro que admitan la reproducción en pantalla completa.
480×640: Común en modelos de teléfonos móviles de gama alta. Aunque teóricamente puede admitir la reproducción en pantalla completa de animaciones del mismo tamaño, debido a las limitaciones del propio GIF, no se garantiza la fluidez de la reproducción.
Al crear animaciones MMS, 128 × 128 debe ser el tamaño principal a considerar, porque tiene la mejor compatibilidad y, debido a su pequeño tamaño, la cantidad de bytes de animación para el mismo contenido es menor que la de tamaños más grandes. Por supuesto, si se determina la resolución de la pantalla del receptor, también se puede fabricar en un tamaño comparable a ella. Es mejor que el fondo de la animación sea blanco para que no haya bordes obvios. Porque el blanco también es el color de fondo cuando los teléfonos móviles muestran mensajes MMS, al igual que el fondo de las páginas web. Por supuesto, a veces es necesario crear deliberadamente una sensación de límite (como el contorno de un sello). Puede tomar su propia decisión según la situación específica. Además, debido a que la mayoría de los teléfonos móviles no pueden cambiar el fondo cuando muestran mensajes MMS, no tiene mucho sentido utilizar un fondo transparente en la animación de los mensajes MMS.
Hay un botón "Central de dispositivos..." en la esquina inferior derecha de "Guardar para Web y dispositivos". Después de presionarlo, puede obtener una vista previa del efecto de la animación en el dispositivo de teléfono móvil seleccionado. Como se muestra a continuación. Puede seleccionarlo de la lista de dispositivos de la izquierda. El seleccionado en la imagen es Nokia 3110. Adobe Device Central es en realidad una base de datos de dispositivos móviles que proporciona un entorno centralizado para quienes producen para dispositivos móviles. Además de la visualización normal, también puede simular la situación de visualización cuando la luz de fondo de la pantalla del teléfono móvil está apagada y la pantalla exterior está retroiluminada. Sin embargo, estas características actualmente tienen poca importancia para nosotros.
Otro tema al que hay que prestar atención es la velocidad de fotogramas de la animación. En una computadora, las animaciones a 30 fps básicamente se pueden reproducir sin problemas, pero el procesador de un teléfono móvil no es mejor que el de una computadora de escritorio y sus recursos son limitados. La velocidad de fotogramas de la animación debe establecerse en 2 ~ 5 fps. Para teléfonos móviles con sistemas operativos abiertos, debido a que el rendimiento de su procesador es mejor que el de los teléfonos móviles normales, se puede configurar en 10 fps o más. Al mismo tiempo, factores como el tamaño, la duración total, el número de bytes, etc. también afectan el efecto de reproducción en los teléfonos móviles. Lo mejor es probar la animación en su teléfono móvil para ver qué tan fluida es.
Si desea generar animaciones de varios tamaños diferentes, es mejor utilizar el formato vectorial para la producción, y el formato vectorial también es el mejor formato para guardar la imagen original, de acuerdo con el principio de "preservar la máxima editabilidad" que siempre hemos tenido. defendido.