Adobe Illustrator cómo hacer animaciones. Tutorial ilustrado sobre Adobe Illustrator CS. Isométricos usando estilos gráficos
Ahora compliquemos un poco la tarea: creemos un banner Flash animado. Por supuesto, en este caso no es necesario hablar de animación Flash completa; existen paquetes especializados para esto. Pero para crear un vídeo sencillo y amateur, también puedes utilizar Illustrator.
No hay herramientas especiales ni funciones de interfaz, como una línea de tiempo, que son típicas de los programas de desarrollo de animación en Adobe Illustrator. Pero hay una sutileza: puedes usar capas como marcos.
Crea un banner con solo texto.
Arroz. 8.11. Menú de paleta de capas
En este menú nos interesa el comando Liberar a capa (Secuencia), que convierte cada objeto individual en nueva capa. Tenga en cuenta que al aplicar el comando, es el grupo Grupo el que debe seleccionarse, y no la capa Capa 1.
En la figura se muestra el aspecto que debería tener la paleta Capas después de realizar Liberar a capa (Secuencia). 8.12.
Arroz. 8.12. Paleta de capas después de ejecutar Liberar a capa (Secuencia)
En este punto, la preparación está completa, puede guardar usando Guardar para Web en SWF. SWF es el principal formato gráfico basado en tecnologías Flash. Sería más exacto decir que se trata del formato Flash (Fig. 8.13).
Probablemente, hoy en día todos los usuarios ya estén familiarizados con Flash en un grado u otro. Actualmente, este es el formato de animación más común en Internet, con el que se crean la gran mayoría de páginas multimedia de Internet.
Por supuesto, Adobe Illustrator no implementa ni una décima parte de las capacidades de Flash, porque el programa no está diseñado para eso. Sin embargo, en él puedes crear una imagen estática o una animación simple.
Arroz. 8.13. Configuración de optimización para el formato SWF
Están disponibles las siguientes configuraciones.
- Solo lectura. Si marca esta casilla, el archivo se escribirá de tal manera que ya no podrá abrirse para editarlo en ningún programa. Esto, por un lado, reduce el tamaño del archivo y, por otro, protege sus derechos de autor.
- La configuración indicada por 1. El parámetro que especifica el tipo de guardado: imagen o animación.
- Si selecciona la opción Archivo AI a Archivo SWF archivo SWF), la imagen se guardará como una imagen estática, replicando completamente lo que ves en la pantalla cuando trabajas en Illustrator.
- Layers to SWF Frames le permite crear animaciones basadas en capas existentes, que se representarán como cuadros. Necesitamos elegir esta opción.
- Calidad de la curva. La precisión de las curvas repite el archivo de curvas de la imagen original. Reducir este parámetro reduce significativamente la calidad, especialmente en el área de pequeños detalles, pero también reduce el tamaño del archivo. Para nuestro caso, el valor óptimo es “7”.
- Cuadros por segundo. Velocidad de cuadros y, como resultado, velocidad de animación. Para que el efecto sea correcto, configúrelo a no más de 4 fotogramas por segundo.
- Bucle (repetir). Reproduzca la animación repetidamente. Adecuado para animaciones en las que es importante un bucle repetido. El banner pertenece a este tipo.
Hacer un GIF transparente en Adobe Illustrator de la siguiente manera. Vaya al menú Archivo > Guardar para Web y dispositivos (Alt+Ctrl+Shift+S). En la ventana que se abre, en el campo Formato de archivo optimizado, primero debes ir a la pestaña Tamaño de imagen. El hecho es que, de forma predeterminada, toda la página se incluye en la ventana de optimización y, por lo general, esto no es necesario. Por lo tanto, en la pestaña Tamaño de imagen, desmarque la casilla de verificación Recortar a la mesa de trabajo y haga clic en el botón Aplicar.
Luego, en la lista de selección de formato, seleccione GIF y marque la casilla Transparencia.
Después de esto, determinaremos qué colores serán transparentes. Todos los colores presentes en la imagen están contenidos en la pestaña Tabla de colores y se muestran como cuadrados de colores. Seleccione la herramienta Cuentagotas en la barra de herramientas en el lado izquierdo de la ventana.
Hay dos formas de definir colores. La forma más sencilla es especificar un color con un cuentagotas directamente en la imagen; después de esto, el color se resaltará en la tabla de colores con un trazo oscuro. Bueno, si sabes exactamente qué color debe ser transparente, puedes seleccionarlo directamente en la tabla de colores haciendo clic en el cuadrado de color correspondiente. Tanto en el primer como en el segundo caso, si necesita seleccionar varios colores, debe trabajar con el prensado. Tecla Shift(o Ctrl). Después de elegir un color, debe indicarle al programa que lo haga transparente. Para hacer esto, haga clic en el ícono Asigna colores seleccionados a transparente. En la imagen, este botón tiene un círculo y el color rojo está configurado como transparente. Aparecerá un área transparente en la imagen y el cuadrado en la tabla de colores cambiará su apariencia; parte de él se convertirá en un triángulo blanco. Para cancelar el color seleccionado, debe seleccionarlo en la Tabla de colores y luego hacer clic en el ícono Asignar colores seleccionados a transparente nuevamente.
Algunas palabras sobre el método para configurar la transparencia. Es responsable del menú desplegable Especificar algoritmo de tramado de transparencia, en ruso - Algoritmo para simular transparencia (Fig. a continuación). Hay cuatro opciones: Tramado sin transparencia, Tramado con transparencia de difusión, Tramado con transparencia de patrón y Tramado con transparencia de ruido. En el modo de algoritmo de difusión, el control deslizante Cantidad se activa, lo que le permite cambiar el valor de difusión. ¿Qué aplicar en la práctica? Dependiendo del propósito y la imagen. No uso esta opción y siempre la dejo en el valor predeterminado: Sin tramado de transparencia.
Haga clic en Guardar: el GIF transparente está listo. El trabajo se realizó en Adobe Illustrator versión CS4 (v.14), pero todas las acciones y atajos de teclado son relevantes para más versión temprana CS3 (v.13).
Hoy tenemos algo inusual. lección de adobe Ilustrador. Porque esta vez no haremos una imagen estática, sino una animación real. Imagínate, resulta con usando adobe Illustrator también puede dibujar dibujos animados :)
Y para ello no necesitamos nada en absoluto. Correcta organización de capas y exportación del trabajo final a formato swf, donde cada capa se convierte en un cuadro de animación. En el tutorial de hoy dibujaremos una animación de cuenta regresiva al estilo de una película retro. El resultado debería ser un vídeo flash con esta misma cuenta atrás.
Lo primero que debes hacer es dibujar todos los elementos necesarios para la futura animación. Para hacer esto, en un documento separado, hice dos posiciones de un fotograma de película, un círculo como referencia, que se corta en sectores separados, una textura y un rayado vertical para agregar el efecto de la antigüedad, así como todos los números y inscripciones.
Cuando todas las partes de nuestra caricatura estén listas, podemos comenzar a crear la animación en sí. Por conveniencia, es mejor hacer esto en un documento nuevo. En este caso, nuestras capas desempeñarán el papel de fotogramas de animación. Y en la primera capa sólo necesitas copiar un fotograma de la película. Colóquelo en el medio de su área de trabajo.
Ahora cree una segunda capa y copie en ella un fotograma de película, en el que los agujeros a lo largo de los bordes están hechos con un desplazamiento. También hay que colocarlo en el centro.
A partir de estas dos capas ya se puede obtener animación de una película en movimiento. Pero luego necesitaremos muchas más capas. Así que selecciona las dos primeras capas, ve al panel de opciones y haz una copia de las capas.
De manera similar, necesitamos acumular 12 capas de fotogramas de película que definen su movimiento.
Ahora tenemos un montón de capas y todas son visibles. En el sentido de que las capas superiores bloquean las inferiores, lo que no es del todo conveniente para el trabajo. Por lo tanto, puedes desactivar algunas capas haciendo clic en el icono con un ojo a la izquierda del nombre de la capa. Para activar o desactivar todas las capas a la vez, mantenga presionado tecla Alt cuando haces clic en el icono del ojo. Al activar y desactivar las capas, puede ver exactamente qué se encuentra en un cuadro específico de nuestra futura animación. Y ahora, para que podamos agregar una ligera vibración al movimiento de la película, necesitamos mover los fotogramas resultantes ligeramente en diferentes direcciones. Para hacer esto, active solo la capa con la que va a trabajar. este momento y luego mueva el marco un par de píxeles en cualquier dirección.
Una vez que hayas revisado todas las capas y hayas agregado un pequeño cambio, puedes comenzar a crear la animación del círculo en movimiento. Para hacer esto, copie el círculo que consta de sectores del documento con las partes de la caricatura y colóquelo en la primera capa encima del fotograma de la película.
Si anula la selección del círculo, se verá como un todo. Esto es exactamente lo que necesitamos.
Pero como consta de sectores individuales, puedes crear animaciones de forma muy rápida y sencilla cambiando su color. Para hacer esto, copie este círculo en la segunda capa y aclare el primer sector. Recuerdas que nuestra película tiembla al moverse, por lo que no es necesario en absoluto colocar el círculo exactamente en el centro del encuadre. Colóquelo a ojo.
De manera similar, debes copiar el círculo en cada capa siguiente, mientras pintas un sector más con un color más claro que la vez anterior. Juntas, estas 12 capas forman una animación de la película que se mueve con un círculo de relleno.
A continuación necesitamos agregar textura a nuestras capas. Active la primera capa y copie la textura del archivo original con las piezas de repuesto allí.
Luego enciende las siguientes capas una por una y copia la misma textura allí. Para que se vea diferente en cada cuadro, simplemente gírelo 90 grados. Como habrás adivinado, necesitamos agregar textura a los 12 fotogramas.
Si ya está bastante cansado de copiar, puedo complacerlo: queda muy poco. La parte más difícil ya pasó. Ya sólo queda añadir rayones verticales y listo. Para hacer esto, copiamos nuevamente el rasguño original y lo colocamos en un lugar arbitrario en varias capas. En mi caso, los rayones aparecen solo en dos capas.
Ahora que el ciclo principal con animación cinematográfica está listo, solo queda sumar los números. Dado que nuestra cuenta regresiva va del 3 al 1 más la palabra ¡¡¡Vamos!!!, necesitamos aún más capas. No 12, sino hasta 48. Para hacer esto, necesita hacer tres copias más de capas ya preparadas con animación cinematográfica.
Y entonces todo es sencillo. Enciende la primera capa y coloca el número tres allí.
Luego debes copiar este número a las siguientes capas hasta que finalice la animación del círculo. Cuando llegue a la siguiente copia de las capas, donde el círculo nuevamente estará completamente lleno, debe colocar el número dos. De la misma forma, copia el número uno a las capas deseadas. Y cuando llegue a las capas finales para la inscripción ¡¡¡Go!!!, simplemente elimine el círculo antes de copiar la inscripción en la capa deseada.
Eso es todo por la animación. Lo principal aquí es no confundirse. Puedes darle a las capas algunos nombres convenientes, pero era un poco vago :) Y también, cuando termines tu trabajo, asegúrate de volver a activar todas las capas haciendo clic en el ícono del ojo.
En la ventana de configuración de exportación, asegúrese de configurar Exportar como: capas AI a marcos SWF. Es esta opción la que convierte las capas de Illustrator en cuadros de animación. A continuación, haga clic en el botón Avanzado.
Abrirá ajustes adicionales. Aquí debe configurar la velocidad de fotogramas. Tengo 12 fotogramas por segundo. La casilla de verificación Bucle es responsable de la animación cíclica. Gracias a ello, el vídeo se reproducirá en círculo. Y la opción Orden de capas: de abajo hacia arriba reproduce las capas de Illustrator de abajo hacia arriba en el panel. Así es exactamente como construimos nuestra animación.
El resultado es un vídeo flash con nuestra animación.
Ahora ves que hacer animaciones sencillas en Adobe Illustrator no es tan difícil como parece a primera vista.
Pero para crear videos largos o aplicaciones interactivas es mejor usar Adobe Flash u otros editores flash. Por ejemplo, hice este gato en un viejo Flash Macromedia, que desenterré en mi trabajo.
También Últimamente HTML5 y CSS3 se utilizan cada vez más para crear animaciones. este codigo es compatible con navegadores modernos y no requiere el uso de un reproductor flash.
Roman aka dacascas especialmente para el blog
Suscríbete a nuestra newsletter para no perderte nada nuevo:
Recientemente, se han vuelto muy populares varios tipos de animación de gráficos SVG (Scalable Vector Graphics) en sitios web y aplicaciones. Esto se debe a que todo últimos navegadores ya soporta este formato. Aquí hay información sobre la compatibilidad del navegador con SVG.
Este artículo analiza ejemplo más simple Animar vectores SVG usando fácil complemento jquery Pintor de líneas perezosas.
FuentePara completar y comprender completamente esta tarea, es deseable tener conocimientos básicos de HTML, CSS y Jquery, pero no es necesario si solo desea animar SVG). ¡Comencemos!
Y estos son los pasos que debemos seguir:
1. Cree la estructura de archivos correcta
El servicio Initializr nos ayudará con esto, donde debemos seleccionar parámetros como en la imagen a continuación.
- H5BP clásico (placa de caldera HTML5)
- Sin plantilla
- Sólo HTML5 Shiv
- Minimizado
- Clases de IE
- Marco cromado.
- Luego haga clic en ¡Descargarlo!
2. Descargue y conecte el complemento.
Dado que inicializr viene con la última biblioteca Jquery, del archivo que debemos descargar del repositorio del proyecto Lazy Line Painter, solo necesitamos transferir 2 archivos a nuestro proyecto. El primero es 'jquery.lazylinepainter-1.1.min.js' (la versión del complemento puede diferir) y se encuentra en la raíz de la carpeta resultante. El segundo es ejemplo/js/vendor/raphael-min.js.
Estos 2 archivos se colocan en la carpeta js. Y los conectamos a nuestro index.html antes de main.js de la siguiente manera:
3. Dibuja una imagen de contorno genial en Adobe Illustrator.
Por ejemplo, puede utilizar los iconos del archivo adjunto.
4. Convierta nuestra imagen a Lazy Line Converter
Simplemente arrastre su ícono a la ventana en la imagen de abajo.
El grosor, el color del contorno y la velocidad de la animación se pueden cambiar en el propio código, que aparecerá después de la conversión.
5. Pegue el código resultante en main.js.
Ahora simplemente pegue el código resultante en archivo vacío principal.js
Opciones:
StrokeWidth: grosor del contorno
trazoColor: color del contorno
También puede cambiar la velocidad de dibujo de cada vector cambiando los valores del parámetro de duración (predeterminado 600)
6. Agrega un poco de CSS al gusto
Eliminar un párrafo de index.html
¡Hola Mundo! Esto es HTML5 estándar.
Y en lugar de eso insertamos un bloque en el que se realizará nuestra animación.
luego agregamos algo de CSS al archivo main.css para que se vea mejor:
Cuerpo (fondo:#F3B71C;) #iconos (posición: fija; arriba:50%; izquierda:50%; margen: -300px 0 0 -400px;)
guardar todos los archivos.
Ahora simplemente abra index.html en un navegador moderno y disfrute del efecto.
PD Cuando se ejecuta en una máquina local, el inicio de la animación puede retrasarse varios segundos.
El formato de archivo Flash (SWF) se basa en gráficos vectoriales y está diseñado para gráficos compactos y escalables para Internet. Debido a que este formato de archivo se basa en gráficos vectoriales, el objeto mantiene la calidad de la imagen en cualquier resolución y es ideal para crear fotogramas de animación. En Illustrator, puede crear cuadros de animación individuales en capas y luego exportar las capas de imágenes como cuadros individuales para usar en su sitio web. También puedes definir simbolos en el archivo de Illustrator para reducir el tamaño de la animación. Al exportar, cada símbolo se define solo una vez en el archivo SWF.
Comando de exportación (SWF)
Proporciona el mayor control sobre la animación y la compresión de bits.
Proporciona más control sobre la combinación de formatos SWF y de mapa de bits en un diseño fragmentado. Este comando ofrece menos opciones de imagen que el comando Exportar (SWF), pero utiliza las últimas opciones del comando Exportar utilizadas (consulte).
Al preparar un objeto para guardarlo en formato SWF, tenga en cuenta las siguientes pautas.
Con la aplicación Device Central, puede ver cómo se verá un gráfico de Illustrator en la aplicación Reproductor Flash en varios dispositivos portátiles.
Insertar un gráfico de Illustrator
Creado en la aplicación gráfico ilustrador el objeto se puede copiar y pegar rápida, fácil y fácilmente en una aplicación Flash.
Cuando inserta un gráfico de Illustrator en una aplicación Flash, se conservan los siguientes atributos.
Grosor del trazo
Definiciones de gradientes
Texto (incluidas las fuentes OpenType)
Imágenes relacionadas
Modos de fusión
Contornos y formas
Además, Illustrator y Flash admiten las siguientes opciones al insertar un gráfico.
Al seleccionar capas en un gráfico de Illustrator nivel superior por completo y al pegarlas en una aplicación Flash, se conservan las capas y sus propiedades (visibilidad y bloqueo).
Flash convierte los formatos de color de Illustrator distintos de RGB (CMYK, escala de grises y formatos personalizados) a formato RGB. colores rgb insertado de la forma habitual.
Cuando importa o inserta un gráfico de Illustrator, puede utilizar varias opciones para guardar ciertos efectos (como sombras de texto) como filtros Flash.
Flash conserva las máscaras de Illustrator.
Exportar archivos SWF desde Illustrator
Los archivos SWF exportados desde Illustrator coinciden con la calidad y la relación de compresión de los archivos SWF exportados desde Flash.
Al exportar, puede elegir entre una variedad de estilos predefinidos para obtener un resultado óptimo y especificar cómo desea utilizar varias mesas de trabajo y cómo desea transformar símbolos, capas, texto y máscaras. Por ejemplo, puede optar por exportar símbolos de Illustrator como películas o imágenes gráficas y crear símbolos SWF a partir de capas de Illustrator.
Importar archivos de Illustrator a una aplicación Flash
Para crear un diseño completo en aplicación ilustradora y luego importarlo a Flash en un solo paso, puede guardar su obra de arte en el formato nativo (AI) de Illustrator e importarla con precisión a Flash usando los comandos Archivo > Importar al espacio de trabajo o Archivo > "Importar a la biblioteca".
Si archivo ilustrador contiene varias mesas de trabajo, seleccione la mesa de trabajo que desea importar en el cuadro de diálogo Importar de Flash y especifique la configuración para cada capa en esa mesa de trabajo. Todos los objetos en la mesa de trabajo seleccionada se importan a programa flash como una sola capa. Cuando importa otra mesa de trabajo desde el mismo archivo AI, los objetos de esa mesa de trabajo se importan a Flash como una nueva capa.
Al importar ilustraciones de Illustrator como AI, EPS o solicitud en pdf Flash conserva los mismos atributos que cuando se pega objetos gráficos Ilustrador. Además, si el archivo de Illustrator que está importando contiene capas, puede importarlas utilizando uno de los siguientes métodos.
Convierta capas de Illustrator en capas de Flash.
Convierta capas de Illustrator en marcos Flash.
Convierta todas las capas de Illustrator en una capa de Flash.