Técnicas para crear animaciones en Image Ready

Al principio la ventana principal Imagen lista, se puede confundir fácilmente con Photoshop, son muy similares en apariencia: la misma barra de herramientas, paletas familiares. Como ya hemos señalado, estas similitudes no son accidentales. Una mirada más cercana notará muchas características. Primero, hay varias herramientas especiales en la paleta Herramientas (Figura 10.3).

§ Herramienta Marco de rectángulo redondeado. Está diseñado para crear áreas seleccionadas en forma de rectángulo con esquinas redondeadas. La paleta de propiedades Opciones de esta herramienta contiene un campo Radio, que especifica el radio de redondeo en píxeles.

§ Las herramientas Rectángulo, Rectángulo redondeado y Elipse dibujan inmediatamente un rectángulo, un rectángulo redondeado y una elipse, respectivamente. En este caso, el área seleccionada no se crea y la figura se rellena inmediatamente con el color primario actual.

§ La herramienta Cortar está diseñada para cortar imágenes en fragmentos rectangulares, y la herramienta Seleccionar corte está diseñada para seleccionar dichos fragmentos.

Además, la barra de herramientas tiene botones para los modos Mostrar sectores y Ocultar sectores, correspondientes al comando de cambio del mismo nombre del menú Sectores. El primer modo muestra los límites de los fragmentos en los que se corta la imagen, mientras que el segundo no.

Arroz. 10.3. Paleta de herramientas ImageReady. Sólo se indican las herramientas no disponibles en Photoshop.

Arroz. 10.4. Modos de visualización de fragmentos Ocultar sectores (a), Mostrar sectores (b)

Nota

Si selecciona la herramienta Slice o Select Slice, el modo de visualización de fragmentos se activa automáticamente.

El editor ImageReady también tiene varias paletas especiales:

§ Optimizar. La paleta contiene opciones para optimizar imágenes para exportar al formato seleccionado. Si lees atentamente el capítulo anterior, inmediatamente notarás su similitud con el panel de Configuración del módulo Guardar. Para Web en Photoshop Contiene todas las mismas configuraciones (Fig. 10.5).

Arroz. 10.5. Optimizar paleta

La vista de la imagen optimizada se muestra directamente en la ventana de cada documento Image Ready y necesariamente tiene cuatro pestañas similares a las pestañas del módulo. Fuera de Web (Figura 10.6). La barra de estado de la ventana del documento indica parámetros actuales optimización u otra información que se selecciona en la lista que se abre al hacer clic en la flecha triangular. La misma lista especifica la velocidad esperada del módem, que se utiliza para estimar el tiempo que lleva cargar una imagen en el navegador del usuario.

Arroz. 10.6. Muestre la imagen optimizada en la ventana del documento Imagen lista

§ Tabla de colores. Esta paleta Imagen lista muestra la paleta de imágenes actual cuando está configurada la optimización para el formato indexado (GIF o PNG-8). También tiene su análogo en el módulo Guardar para. Photoshop web y trabajar con él también es similar.

§ Capas. Image Ready admite capas de puntos y texto, así como efectos de capa. Administre las capas de la misma manera que en Photoshop. realizado utilizando una paleta especial. Su única diferencia con la paleta Capas de Photoshop es que muestra todos los efectos aplicados a la capa (Figura 10.7). Además, se han agregado flechas para realizar la transición entre capas y agregar efectos a la fila inferior de botones. Ya que al crear una animación, sus fases se colocarán en capas separadas, los botones de capa anterior o siguiente se utilizan para rebobinar fotogramas. El botón Agregar efectos abre una lista de todos los efectos disponibles para las capas. Seleccionar cualquiera de ellos crea este efecto en la capa actual. Sus parámetros se configuran utilizando una paleta especial de Opciones/Efectos de capa.

§ Opciones/Efectos de capa. Esta paleta se utiliza junto con la paleta Capas y le permite establecer parámetros para una capa y sus efectos asociados. Si se selecciona una fila de efectos en la paleta Capas, entonces la paleta Opciones de capa/Efectos contiene configuraciones para este efecto. Si se selecciona una capa, en esta paleta encontrará los parámetros de la capa (Fig. 10 8).

Se utilizan para crear mapas de enlaces.

Arroz. 10.7. Mostrar efectos en la paleta Capas Programas de imagen Listo

Arroz. 10.8. Paleta Opciones de capa/Efectos en los modos Opciones de capa (a) y Efectos (b)

§ Estilos. Un conjunto de efectos asociados con capa actual, se puede guardar en una paleta de estilos especial. Para reproducir un conjunto de efectos guardado nuevamente o aplicarlo a otra capa, simplemente haga doble clic ratón sobre su icono en la paleta. Inmediatamente después de instalar el programa, la paleta contiene dos docenas estilos listos para usar, creado por desarrolladores (Fig. 10.9).

Arroz. 10.9. Paleta de estilos con estilos predefinidos.

§ Tipo. En Photoshop, los parámetros de texto y la prueba en sí se ingresan en un cuadro de diálogo especial de la herramienta Texto. En Image Ready, ingresar y editar texto es mucho más conveniente. El texto se ingresa directamente en la ventana del documento y la paleta Texto se usa para configurar sus parámetros. Esta paleta es muy familiar para los usuarios. Ilustrador Adobe(Figura 10.10). En él encontrará una lista de fuentes, sus estilos y tamaños de fuente, controles para justificación de párrafo, interlineado, interletraje, ancho de caracteres y posición de la línea base. Destacamos especialmente la posibilidad de elegir entre cuatro grados de anti-aliasing.

Arroz. 10.10. Paleta de tipos en ImageReady

§ Animación. La paleta contiene una lista de todos los cuadros de animación y controla su orden y visualización.

§ Sector: la paleta está diseñada para establecer los parámetros de fragmentos individuales en los que se corta la imagen usando la herramienta Sector o el comando Dividir sector del menú Sectores.

§ Dese la vuelta. La paleta almacena variaciones de la imagen mostrada en el navegador dependiendo de si el cursor está sobre ella o si se presiona el botón del mouse.

Las paletas Colores, Historial, Información, Opciones y Acciones son casi completamente idénticas a las del mismo nombre. paletas de photoshop. Es cierto que la paleta Historia en Image Ready está algo simplificada. Carece de la capacidad de crear instantáneas y asignar estado inicial para HistoryBrush, ya que Image Ready no tiene dicha herramienta.

Con esto, completaremos una breve revisión de la interfaz Image Ready y sus diferencias con Photoshop, y pasaremos a ejemplos de resolución de problemas prácticos.

Probablemente hayas visto imágenes animadas, por ejemplo, texto que aparece y desaparece, una cabeza gira, un hombre corre, un conejo pierde la cabeza, etc. Todo esto es animación gif.

En este artículo explicaré cómo hacer una animación sencilla con texto, por ejemplo, hacer una inscripción y hacer que aparezca desde un estado borroso a uno claro.

Bueno, más cerca del punto...

1. Abre Photoshop y crea. nuevo proyecto, mis dimensiones eran 600x200 y escribo algo de texto

2. Esta será la imagen final (clara), y necesitamos hacer unas intermedias e iniciales.
Primero haga clic en nuestra capa de texto clic derecho y seleccione Rasterizar capa y luego en el mismo menú contextual Haga clic en Duplicar capa.
Establece la primera capa como invisible y selecciona la segunda. Haga clic en Filtro-Desenfoque-Desenfoque de movimiento y establezca el valor de Ángulo en cero y Distancia en 400

Ahora necesitamos crear etapas intermedias con un valor de Distancia igual a: 350, 300, 250, 200, 150, 100, 50, 25. Es decir, ocho capas más. Eso es lo que hacemos. Seleccione la primera capa de texto (original) y haga ocho copias con los mismos nombres:

Selecciona la primera capa y haz un Desenfoque de Movimiento con un valor de Distancia de 25, para la segunda capa 50, para la tercera 100, etc. al octavo con un valor de 350.

3. Como resultado, obtenemos 10 capas. Pulsamos Ctrl+Shift+M, de esta manera pasamos de Photoshop a Image Ready con el proyecto en el que estábamos trabajando.

4. Aquí es donde realmente comienza la creación de la animación.
Seleccione la capa final, configúrela como visible y todas las demás como invisibles, y presione el botón Duplica el fotograma actual en el panel Animación, luego configura la capa 8 como visible y todas las demás como invisibles y presiona el mismo botón. Hacemos esto con todas las capas, encendiéndolas una a una y apagando las demás.

Ya puedes ver el resultado haciendo clic en el botón Reproducir/Detener animación en el panel Animación, pero antes de terminar necesitas agregar un par de toques, primero retrasar los fotogramas. Para ello, selecciona todos los fotogramas y en la parte inferior de uno de ellos cambia el valor a 0 seg. en 0,05 seg.
Y en segundo lugar, una imagen así no siempre debe repetir la animación, limitemos el número a uno. Cambiar para siempre a una vez (esquina inferior izquierda)

5. En la ventana Optimizar en la configuración, configure Gif 128 Dithered (o cualquier otro Gif... - esto afecta la calidad) y presione Ctrl+Shift+Alt+S
Listo.

PD. La animación ciertamente no es muy buena, pero esto es lo más simple que se me ocurrió, excepto quizás por la aparición de puntos y una línea progresiva. Recordar Capacidades de Photoshop¡Y enciende tu imaginación!
Puedes hacer animaciones con 100 o 200... fotogramas.

Adobe ha incluido ImageReady en la versión 5.5 de Photoshop, que le permite crear imágenes animadas utilizando este paquete de gráficos. Esta lección está destinada a quienes tienen habilidades prácticas para trabajar con capas y herramientas de selección en PhotoShop.

Objetivos de la lección

• Educativo: dentro esta lección el estudiante debe dominar las técnicas de creación de animaciones a partir de archivos preparados previamente con fases de movimiento, creando marcos intermedios animaciones, guardar un archivo GIF para una página web.
• De desarrollo: la capacidad de operar con nueva terminología, la capacidad de comparar y generalizar.
• Educativo: educación de la cultura de la información, actitud positiva hacia el conocimiento.

Tipo de lección: Lección de aprendizaje de material nuevo.

Tipo de lección: trabajo práctico.

Métodos: explicativo-ilustrativo, reproductivo.

Materiales utilizados:

• aula equipada con PC;
• PhotoShop versión 5.5 o superior;
• proyector;
• archivos de imagen.

Progreso de la lección

La forma más sencilla es utilizar el programa ImageReady, donde la animación se implementa a partir de archivos preparados previamente con fases de movimiento.

Ejercicio 1. Vuelo de mariposa

Inicie Photoshop y cree nuevo archivo tamaño 100 x 100 píxeles. Rellena el fondo con verde. Inserte la imagen de una mariposa en este archivo en una capa separada (Fig. 1).

Active los límites de visualización del documento (Fig. 2), aparecerán reglas, seleccione la herramienta mover, arrastre la guía como se muestra en la figura (Fig. 3).

Duplicar la capa 1 (Fig. 4).

Comprimamos la imagen de la mariposa horizontalmente. Editar > Transformación libre. Cambiemos el tamaño de la imagen en ancho, reemplazando el valor W=100% por 80% (Fig. 5)

Desactive (Fig. 6) (muestra la visibilidad de la capa) en la capa 1, para ver lo que sucedió en la capa 2 (Fig. 7).

Repita los pasos de las 3 acciones anteriores, realizando una transformación arbitraria a lo ancho en un 60%, 40% y 20% usando la guía como eje de simetría. Obtenemos 6 capas (Fig. 8).

Haga clic en el botón Saltar a ImageReady (Fig. 9).

La aplicación ImageReady se abrirá y el archivo se descargará automáticamente.

Ahora abre o busca el panel Animación en tu pantalla. Si no está visible inicialmente, se puede abrir usando el menú Ventana > Mostrar animación (Fig. 10).

El panel de animación tiene un botón triangular en la parte superior derecha. En el menú de comandos de la paleta Animación, seleccione el comando Crear marcos a partir de capas, que le permite crear su propio marco a partir de cada capa de imagen individual (Fig. 11).

Ahora tenemos seis cuadros (Fig. 12).

Ahora puede presionar el botón de reproducción (Fig. 13) y reproducir la animación (Fig. 14).

Ejecutando el comando Archivo (File) – Save (Guardar), guardamos el archivo en formato photoshop para continuar trabajando con capas de imágenes. Si el trabajo está completo y no es necesario guardar capas, entonces usando el comando Archivo (Archivo) - Guardar optimizado (Guardar optimizado como ...) guardamos el archivo GIF para la página web, usando los parámetros de optimización predeterminados. Puede evaluar el resultado de la optimización utilizando la vista 2-Up, que muestra las imágenes originales y optimizadas.

La capacidad de crear automáticamente cuadros de interpolación es muy útil y se puede aplicar tanto a imágenes gráficas como de texto.

Ejercicio 2. Texto volador

Inicie Photoshop y cree un nuevo archivo de 300 X 150 píxeles. Rellena el fondo con negro. En la parte inferior del panel de capas, haga clic en el icono Nueva capa ( Nueva capa) (Figura 15).

Seleccione un color para el texto y tome la herramienta Texto (Texto) (Fig. 16).

Escriba la primera letra. Ahora repita este paso para que cada letra de la palabra esté en una capa separada (Fig. 17).

Haga clic en el botón Saltar a ImageReady (Fig. 18).

La aplicación ImageReady se abrirá y el archivo se descargará automáticamente. Ahora abre o busca el panel Animación en tu pantalla. Si no está visible inicialmente, se puede abrir usando el menú Ventana > Mostrar animación.

En la parte inferior de este panel, haga clic en el botón Nuevo marco ( Nuevo marco) para hacer una copia del fotograma actual (Fig. 19).

Obtendremos dos fotogramas idénticos en el panel de animación (Fig. 20).

En el panel de capas, haga clic en la capa con la letra Ш (Fig. 21).

Seleccione la herramienta Mover y usando las flechas del teclado, mueva la letra para que quede a la izquierda (o derecha, arriba, abajo) de la imagen visible (Fig. 22), (Fig. 23).

Repita los pasos para las letras restantes. En la paleta de animación (el primer cuadro debe ser solo negro), intercambie los cuadros; para hacer esto, debe mover el primer cuadro al segundo cuadro. El segundo cuadro ahora es negro (Fig. 24).

Haga clic en el botón Tween (Fig. 25) (generación de fotogramas intermedios), que se encuentra en la parte inferior del panel de animación. Se abrirá la ventana de opciones. Introduzca los siguientes valores:

Interpolación con: Marco de pruebas

Marcos para: 5

Capas: Todas las capas

Parámetros: todas las casillas están marcadas

El panel de animación ahora debería contener 7 cuadros (6 con texto +1 negro) (Fig. 26).

Establezca una breve pausa (2 segundos) para el primer cuadro para que se pueda leer el texto (Fig. 27).

Ahora puede presionar el botón de reproducción y reproducir la animación (Fig. 28).

Ejercicio 3. Transformación

La transformación es un proceso en el que un objeto cambia (fluye) suavemente hacia otro.

Descargar ImageReady. Usando el menú Archivo > Nuevo, cree un nuevo archivo con los tamaños correctos e inserte en este archivo, en una capa separada, la imagen de una rana (Fig. 29).

En otra capa, inserte una imagen de un castillo, que aparecerá gradualmente (Fig. 30).

Ahora el panel de capas se ve así (Fig. 31).

Retire la primera capa a la papelera, el panel de capas se ve así (Fig. 32).

Ahora abre o busca el panel Animación en tu pantalla. Si no está visible inicialmente, se puede abrir usando el menú Ventana > Mostrar animación (mostrar panel de animación) (Fig. 33).

El panel de animación tiene un botón triangular en la parte superior derecha. En el menú de comandos de la paleta Animación, seleccione el comando Crear marcos a partir de capas, que le permite crear su propio marco a partir de cada capa de imagen individual (Fig. 34).

Ahora tenemos dos cuadros (Fig. 35).

El panel de animación tiene un botón triangular en la parte superior derecha. Haga clic en este botón y seleccione Interpolación... en el menú o haga clic en el botón (generar fotogramas intermedios). Se abrirá la ventana de parámetros (Fig. 36).

Haga clic en Aceptar y el programa agregará nuevos cuadros (Fig. 37).

Ahora puede presionar el botón de reproducción y reproducir la animación (Fig. 38).

Literatura

1. Pankratova T. Photoshop 6. Curso de formación- San Petersburgo: Editorial "Peter", 2001.
2. Trabajo eficiente con Photoshop 5.5 - San Petersburgo: Editorial "Peter", 2000.
3. Burlakov M. Photoshop 6, ImageReady 3. Libro de referencia. - San Petersburgo.
4. Editorial "Peter", 2001.