Cómo hacer animación en Illustrator. Consejos y trucos en Adobe Illustrator: Trucos en Illustrator. Posibilidad de crear gráficos en Illustrator (frente a Adobe Flash). Preparar un archivo SVG en Illustrator
Optimización de gráficos web
Información gráfica se transmite mucho más lento que el texto y el tiempo de carga de las imágenes es proporcional a su tamaño archivos gráficos. Por lo tanto, la carga rápida de páginas web requiere un tamaño pequeño de archivos incrustados. imágenes gráficas, lo que se logra mediante su optimización. La optimización de la imagen se refiere a su transformación, asegurando un tamaño de archivo mínimo manteniendo la calidad de imagen requerida en este caso, lo que se logra principalmente reduciendo la cantidad de colores en las imágenes gráficas, utilizando formatos de archivo comprimidos y especiales, y optimizando los parámetros de compresión para imágenes individuales. fragmentos.
Illustrator tiene herramientas de optimización de imágenes integradas que hacen que el proceso de optimización sea rápido y eficiente con una variedad de métodos de vista previa. La vista previa brinda una idea bastante precisa de cómo se verá la imagen optimizada en tiempo real, lo que le ayuda a evaluar el resultado de la optimización y seleccionar con éxito la configuración correcta. Y puede optimizar tanto las imágenes creadas directamente en Illustrator como otras, por ejemplo, fotografías que se supone que se publicarán en un sitio web.
Los parámetros de optimización se configuran en la ventana Guardar para Web, llamada por el comando del mismo nombre en el menú Archivo. El programa le ofrece utilizar uno de los cuatro modos de vista previa, pero dos son los más adecuados para evaluar la calidad de la optimización:
- 2-Up (dos opciones) visualización simultánea de la imagen original y optimizada de acuerdo con la configuración especificada (Fig. 1);
- 4-Up (cuatro opciones) En este modo, la ventana gráfica se divide en cuatro ventanas (Fig. 2) para mostrar la imagen original y tres versiones de la optimizada: la primera versión se crea en función de los valores de optimización establecidos y la Los otros dos son variaciones de la configuración de optimización actual.
Ambos modos le permiten ahorrar significativamente tiempo en la búsqueda de la mejor opción de optimización, ya que eliminan la necesidad de guardar imágenes con diferentes configuraciones de optimización y su posterior comparación visual. Además, es posible evaluar no sólo la calidad de la imagen optimizada, sino también su tamaño y tiempo de carga bajo diferentes opciones de conexión. A modo de comparación, el modo más conveniente es 4-Up (cuatro opciones), que le permite evaluar visualmente el efecto de la compresión o reducción de la paleta en la calidad de la imagen y su tamaño y, en última instancia, determinar los mejores parámetros de optimización.
Illustrator le permite optimizar gráficos web no sólo en formatos GIF, JPG, PNG-8 y PNG-24, sino también SWF y SVG. Las imágenes indexadas que tienen una pequeña cantidad de colores se guardan en formato GIF. El formato JPG se utiliza para guardar imágenes, fotografías y gráficos ricos en colores a todo color y en escala de grises, como rellenos degradados. Para imágenes a todo color con áreas transparentes se utiliza el formato PNG, que permite guardar imágenes tanto indexadas como a todo color, mientras que en el formato PNG-8 el número máximo posible de colores de la imagen optimizada es 256, y en En el formato PNG-24 la imagen puede tener millones de colores, y por eso se parece formato JPEG. La diferencia entre PNG-24 y JPEG es que el método de compresión utilizado para optimizar imágenes en formato PNG-24 no produce pérdida de calidad, sino que, como resultado, aumenta el tamaño del archivo. Los formatos SVG y SWF combinan gráficos, texto y componentes interactivos y también se pueden optimizar.
Consideremos ejemplo específico optimización de la imagen. Digamos que se desarrolló el logotipo de un sitio web en Illustrator (Fig. 3), inicialmente guardado en formato AI. Un intento de optimizarlo inmediatamente para la Web no conducirá a nada bueno, ya que en este caso la imagen se recortará automáticamente, lo que no tendrá en cuenta la verdadera posición de la inscripción resultante como resultado de la deformación (Fig. 4 y 5).
Por lo tanto, intentemos exportar el logo a formato PSD con el comando Archivo=>Exportar (Archivo=>Exportar) el tamaño de la imagen creada será de 143 KB. Abra el archivo PSD resultante y use el comando Archivo=>Guardar para Web. Teniendo en cuenta el número limitado de colores involucrados en la imagen, en este caso el formato GIF es óptimo, cuyas configuraciones específicas deben decidirse. Al experimentar con la configuración, puede asegurarse de que mejor calidad proporciona el algoritmo de compresión predeterminado del programa, Selectivo. En cuanto al suavizado, dada la presencia de un relleno degradado, es mejor elegir un algoritmo con generación de ruido Ruido (Fig. 6). El tamaño del archivo de optimización resultante será de 6,729 KB (Fig. 7), mientras que se conservará la transparencia del fondo, lo cual es fácil de verificar guardando la imagen en formato GIF junto con el archivo HTML (Fig. 8). Como resultado, en este ejemplo, los archivos emblem.html y emblem.gif se obtuvieron en la carpeta Primer1.
Un elemento específico indispensable del diseño de cualquier página web son los botones de control gráfico. Es simplemente imposible imaginar una página sin ellos. El dibujo de botones se ha convertido en un género especial hoy en día e Illustrator le permite crear las opciones más complejas. Por ejemplo, los botones diseñados como objetos de malla y/o con máscaras superpuestas se ven mucho más impresionantes que los normales.
Considere la opción de crear un botón redondo y convexo en Illustrator. Dibuje un objeto vectorial en forma de círculo relleno con un color arbitrario (Fig.9) y conviértalo en una malla con el comando Objeto => Crear malla de degradado (Objeto => Crear una malla de degradado), especificando cuatro filas y cuatro columnas, y en la lista Apariencia, seleccionando la opción Al centro de resaltado igual a 60 (Fig. 10). Seleccione la herramienta Selección Directa y haga clic en la esquina superior izquierda del objeto, seleccionando los puntos de anclaje ubicados allí (Fig. 11). Cambie el color de la celda correspondiente a blanco seleccionándola en la paleta Muestras (Fig. 12).
Tome la herramienta Elipse, coloque el marcador del mouse en el centro del círculo creado anteriormente y, manteniendo presionadas las teclas Alt y Shift, estire el nuevo círculo sobre el anterior para que sea 1-2 píxeles más grande que el anterior en todos lados. Déle un borde negro (Trazo) de 1 a 2 píxeles de ancho y rellénelo con un degradado radial en la dirección del rojo al blanco (Fig. 13). Arrastre el objeto vectorial creado 1-2 píxeles hacia la derecha y hacia abajo, luego, sin eliminar la selección, haga clic derecho sobre él y salga Menú de contexto seleccione Organizar=>Enviar al fondo. El resultado será un botón en blanco, como se muestra en la Fig. 14.
Como regla general, en cualquier página web hay varios botones del mismo tipo, que se diferencian, por ejemplo, solo en la dirección de las flechas dibujadas en ellos, que indican la dirección de movimiento en el sitio. Consideremos el caso más simple de tener dos botones, uno de los cuales, con una flecha hacia abajo, significará pasar a la página siguiente, y un botón con una flecha hacia arriba significará pasar a la página anterior. Como plantilla de flecha, tomemos un triángulo normal, dibujado con la herramienta Polígono, pintado de negro y, para mayor efecto, también diseñado como un objeto de malla. Mueva la flecha al botón y ajuste la posición de todos los objetos entre sí usando los botones correspondientes en la paleta Alinear. El primero de los botones resultantes se muestra en la Fig. 15. Hagamos una copia de la capa con el botón seleccionando el comando Duplicar capas de capa, como resultado obtendremos dos capas idénticas. Luego seleccione la flecha en la copia de la capa y gírela 180° seleccionando el comando Transformar=>Rotar Transformación=>Rotar en el menú contextual. Nos saldrá el mismo botón que se muestra en la Fig. 16. Tenga en cuenta que es mucho más conveniente almacenar todos los mismos tipos de botones para un proyecto en un archivo en diferentes capas, como se demuestra en este caso.
Ahora necesitas guardar las versiones optimizadas de cada botón. Primero haga invisible la capa inferior; en este caso, se conservará el botón de la capa superior. Seleccione el comando Archivo=>Guardar para Web, configure los parámetros de optimización del botón, por ejemplo, como se muestra en la Fig. 17, haga clic en el botón Guardar e ingrese un nombre de archivo. El botón finalmente guardado se muestra en la Fig. 18. Ahora devuelva la visibilidad a la capa inferior, haga invisible la capa superior y guarde el segundo botón de la misma manera, dándole un nombre diferente. El resultado se muestra en la figura. 19.
Ahora todo lo que queda es asegurarse de que los botones se vean bastante aceptables en la página web y colocarlos en una página personalizada (Fig. 20). Como resultado, en este ejemplo, se obtuvieron el archivo Primer2.html y dos imágenes gráficas en la carpeta de imágenes (carpeta Primer2).
Si lo desea, es fácil convertir un botón en una porción durante el proceso de optimización. En este caso, después de seleccionar el comando Archivo=>Guardar para Web (Archivo=>Guardar para Web) y configurar los parámetros de optimización, debe seleccionar la herramienta Seleccionar corte de la paleta de herramientas y hacer doble clic en la imagen, que eventualmente se convierte automáticamente en una rebanada con el número de serie 1 (Fig. 21). Al hacer doble clic nuevamente, se abrirá la ventana Opciones de sector, en la que deberá especificar un enlace y, opcionalmente, cambiar el nombre del sector (Figura 22) y luego guardar la imagen optimizada. El resultado en este caso serán los archivos Primer3.html (Fig. 23) y Primer3.gif (carpeta Primer3).
Una forma de darle vida a una página es introducir elementos de diseño que cambien su apariencia(o estado) dependiendo del comportamiento del ratón o, con menos frecuencia, en caso de otras situaciones: escalado, desplazamiento, carga, errores, etc.
Entre estos elementos, los más famosos son los elementos rollovers (del inglés roll over roll over, turn over), que cambian de apariencia bajo la influencia del mouse. Ejemplos de rollovers típicos son los botones animados. Los rollovers se utilizan a menudo al crear otros elementos de navegación del sitio web. En realidad, cualquier rollover no es una, sino varias (hasta cuatro) imágenes, cada una de las cuales corresponde a un evento específico. Los principales eventos se consideran los siguientes: Normal estado normal, Sobre situando el cursor del ratón sobre un elemento y Abajo pulsando el botón izquierdo del ratón al pasar el cursor sobre él. Teóricamente, pueden estar involucrados eventos como Hacer clic al soltar el botón izquierdo del mouse después de hacer clic, Arriba después de soltar el botón y Afuera al salir de la zona activa. Sin embargo, en la práctica, a menudo se limitan a cambiar el elemento sólo durante los primeros tres o incluso dos eventos.
Rollovers clásicosEn el sentido clásico, un rollover es una serie de imágenes gráficas en formato GIF y el código HTML correspondiente, gracias a las cuales, dependiendo del comportamiento del ratón, una imagen reemplaza a otra en la ventana del navegador.
Illustrator no está diseñado para crear rollovers directamente en el sentido clásico, pero puede ayudar a desarrollar los elementos iniciales para ellos. La idea en este caso es crear una capa con la imagen correspondiente al primer evento. Luego haga una copia de la capa y transforme la imagen para que coincida con el segundo evento, y así sucesivamente. La imagen multicapa resultante se exporta a un archivo PSD con las capas conservadas, sobre cuya base se crea un rollover en el programa Image Ready. La ventaja de utilizar el programa Illustrator, como en muchos otros casos, son algunas de sus interesantes funciones que no están disponibles en otros software, combinado con la conveniencia de transformar gráficos vectoriales.
Intentemos crear un rollover en forma de inscripción que cambie de color según el comportamiento del mouse. Abra Illustrator y cree una forma en forma de rectángulo redondeado relleno de negro (Fig. 24), haga una copia y colóquela en una parte libre de la pantalla. Convierta la primera copia del rectángulo en un objeto de malla con un resaltado en el centro (comando Objeto=>Crear objeto de malla de degradado=>Crear malla de degradado), especificando cuatro filas y diez columnas (Fig. 25). Active la segunda copia del rectángulo y configúrelo con un relleno degradado aproximadamente como se muestra en la Fig. 26. Superponga el objeto de degradado encima del de malla, reduzca la opacidad del objeto de degradado a aproximadamente el 80% y el tamaño en aproximadamente 1 píxel para eventualmente simular el efecto de una protuberancia. Y luego imprima la inscripción encima de los objetos. En su forma original, déjelo de color blanco, que corresponderá al estado Normal (Fig. 27), y luego, cuando cambie el estado de desplazamiento, el color de la inscripción cambiará, por ejemplo, a verde cuando se mueva el marcador del mouse. se coloca sobre él (estado Sobre) y se vuelve azul cuando se presiona el botón del mouse (estado Abajo).
Preste atención a la paleta Capas, en esta etapa solo hay una capa en ella. Haga dos copias de esta capa usando el comando Duplicar capa del menú de la paleta Capas; habrá tres capas en la paleta (Fig. 28). Luego, en la primera copia de la capa, cambie el color de la inscripción a verde y en la segunda copia a azul (Fig. 29). Como resultado, se obtendrá el espacio en blanco necesario para la transferencia.
Exporte la imagen creada a formato PSD, conservando las capas, usando el comando Archivo=>Exportar y seleccionando el modelo de color RGB (Fig. 30). Abra el archivo PSD creado en el programa ImageReady (Fig. 31 y 32). Cree marcos basados en capas seleccionando el comando Crear marcos a partir de capas en el menú de la paleta Animación. La ventana de Animación se verá como en la Fig. 33. En este caso, inicialmente se creará un único estado Normal en la paleta Rollovers.
Luego, en la ventana Animación, seleccione el fotograma correspondiente al estado inducido, y la capa Copiar Capa 1 se seleccionará automáticamente en la paleta Capas (Fig. 34). Vaya a la paleta Rollovers y haga clic en el botón Crear estado de rollover (Crear un estado de rollover) fig. 35, lo que hará que aparezca el estado Sobre estado en la paleta Rollovers (Fig. 36). Crea un estado inactivo de la misma manera. Active el estado Normal en la paleta Rollovers y elimine todos los fotogramas en la paleta Animación excepto el que debería corresponder al estado Normal. Como resultado, para cada estado de rollover habrá solo un cuadro en la paleta Animación (Fig. 37, 38 y 39).
Arroz. 38. Vista de la imagen, la ventana Animación y las paletas Capas y Rollovers para el estado Sobre estado
Verifique el resultado haciendo clic en el botón Vista previa en el navegador predeterminado en la barra de herramientas y accediendo a la ventana del navegador (Figura 40). Después de eso, guarde el archivo usando el comando Archivo=>Guardar optimizado y especificando la opción HTML e imágenes (*.html). Como resultado, en este ejemplo se obtuvo en la carpeta de imágenes el archivo Primer4.html y una serie de imágenes gráficas.
Arroz. 40. Ventana del navegador con elemento Rollover
Rollovers de SVGEl cada vez más popular formato SVG (Scalable Vector Graphics) Gráficos vectoriales), creado en base al estándar XML, también le permite recibir una variedad de elementos interactivos, en particular rollovers, pero en la práctica esto se implementa de manera completamente diferente. Vale la pena señalar que la creación de rollovers SVG interactivos, a diferencia de los clásicos, cuando el código HTML correspondiente se genera de forma completamente automática, requiere conocimiento del lenguaje JavaScript y comprensión de los principios básicos de la programación orientada a objetos.
Para trabajar con objetos SVG hay una paleta especial Interactividad SVG, que se puede abrir fácilmente usando el comando Ventana => Interactividad SVG (Ventana => Interactividad SVG) fig. 41.
Consideremos esta opción para crear un rollover usando el ejemplo de un botón interactivo, cuyo color de inscripción cambiará de negro a azul al pasar el mouse y nuevamente se transformará en negro cuando el mouse abandone la zona activa.
Cree un botón rectangular con bordes redondeados y seleccione un relleno degradado adecuado para él, por ejemplo como se muestra en la Fig. 42. Ajuste la transparencia del botón en la paleta Transparencia. En este ejemplo, el valor de Opacidad está establecido en 50%. Haga una copia del botón, rellénelo con verde oscuro (Figura 43) y luego conviértalo en un objeto de malla con el comando Objeto => Crear malla de degradado, especificando cuatro filas y diez columnas, y en la lista Apariencia (Ver) seleccionando la opción Centrar y estableciendo el valor Resaltar en 100. Reduzca la opacidad de la capa con el objeto de malla a aproximadamente el 40% (Fig. 44). Coloque un objeto de malla encima de uno degradado y el botón se parecerá al que se muestra en la Fig. 45.
Arroz. 44. Convierte una copia de un botón en un objeto de malla.
Complete el botón con la inscripción deseada y ajuste su posición usando los botones correspondientes en la paleta Alinear. La imagen resultante contendrá una capa con tres objetos superpuestos entre sí (Fig. 46). Los eventos programados serán relativos a un objeto de texto, por lo que, por conveniencia, cambie su nombre a Texto haciendo doble clic en el objeto e ingresando un nuevo nombre. De manera similar, cambie el nombre de la capa de Capa 1 a Capa (Fig. 47).
El procesamiento de eventos implica el uso de procedimientos de JavaScript, por lo que debe incluir un archivo que describa estos procedimientos. Se llama Events.js y se guarda en el disco en la carpeta Sample Files\Sample Art\SVG\SVG al momento de la instalación. programas de adobe Ilustrador. Para conectar el archivo Events.js, use el comando Interactividad SVG de archivos JavaScript (Fig. 48). A continuación, debe hacer clic en el botón Agregar y buscar el archivo deseado en su disco duro. Cuando su nombre aparezca en el campo URL (Figura 49), haga clic en el botón Listo.
Arroz. 48. Seleccionar el comando de archivos JavaScript
A continuación, debe definir una respuesta a los eventos del mouse para el objeto Texto. Seleccione el objeto Texto, en el campo Evento de la paleta Interactividad SVG, seleccione el evento onmouseover elemColor(evt, "Text", "#3333FF") esto significará que cuando el mouse esté sobre el objeto Texto, su color cambiará a azul (Fig. 50 ). Para que el color del texto cambie a negro después de que el mouse abandone el área activa, deberá crear otro evento onmouseout y seleccionarlo en el campo Evento de la paleta Interactividad SVG. Luego, en la línea de acción ingrese el texto elemColor(evt, "Text", "#000000"), esto devolverá el color a negro (Figura 51).
Arroz. 51. Aspecto final de la paleta Interactividad SVG para el objeto Texto
Guarde el rollover creado como un archivo SVG con el comando Archivo=>Guardar como (Archivo=>Tipo de archivo formato SVG y luego configure las opciones para guardar el archivo SVG como se muestra en la Fig. 52. Después de guardar, recibirá solo uno archivo único con la extensión SVG, y no dos, como en el caso de un rollover clásico, en este caso se recibió el archivo Primer5.svg (carpeta Primer5), sin embargo, para que el rollover realmente funcione, es necesario copiar adicionalmente el archivo Events.js de la descripción de los procedimientos de JavaScript. Después de esto, puede verificar la funcionalidad del rollover y el resultado se verá como se muestra en la Fig. 53.
El formato SVG también se puede utilizar para transmitir animación. Intentemos crear un elemento animado simple (en este caso será información sobre la empresa), que aparecerá en la pantalla al pasar el mouse sobre el objeto gráfico correspondiente y desaparecerá al quitar el mouse del elemento interactivo.
Creemos aproximadamente la siguiente serie de objetos gráficos y de texto, como se muestra en la Fig. 54. Cambiemos el nombre de todos los objetos creados de una manera conveniente haciendo clic secuencialmente en el nombre del siguiente objeto en la paleta Capas e ingresando Nombre deseado(Figura 55). Tenga en cuenta que los resaltados en la Fig. 56 objetos Texto1, Texto2, Texto3 y Ruta1 siempre estarán visibles, y todos los demás solo cuando pase el mouse sobre el objeto Texto1.
Arroz. 54. Vista original de la imagen.
Incluya el archivo Events.js que describe los procedimientos de JavaScript utilizando el comando Archivos JavaScript de la paleta Interactividad SVG, haciendo clic en el botón Agregar, señalando el archivo deseado en su disco duro y haciendo clic en el botón Listo.
Defina una respuesta a los eventos del mouse para el objeto Texto1. Seleccione el objeto Texto, en el campo Evento de la paleta Interactividad SVG, seleccione el evento onmouseover y en la línea siguiente ingrese el texto elemShow(evt, "Text4"); elemShow(evt, "Ruta2") . Como resultado, cuando el mouse esté sobre el objeto Texto1, los objetos Texto4 y Ruta2 se volverán visibles. Tenga en cuenta que si se deben realizar varias acciones cuando ocurre un evento, se deben especificar usando el signo “;”. Luego realice una operación similar para el evento onmouseout, ingresando el texto correspondiente, lo que significará ocultar objetos (Fig. 57).
Guarde el resultado como un archivo SVG usando el comando Archivo=>Guardar como, especificando el nombre del archivo, seleccionando el formato SVG en el campo Tipo de archivo y luego configurando las opciones para guardar el archivo SVG de acuerdo con la Fig. 58. Después de guardar, se recibirá el archivo Primer6.svg (carpeta Primer6). No olvide copiar el archivo Events.js a la carpeta con este archivo. Si después de esto corres porque Este archivo, entonces verá el resultado que se muestra en la Fig. 59. Esto es casi lo que necesitas. Lo único que no estaba incluido en nuestros planes fue la apariencia inicial de los objetos Texto 4 y Ruta 2 al cargar. Para deshacerse de esta deficiencia, seleccione los datos de ambos objetos a la vez y cree una acción para ellos elemHide(evt, "Text4"); elemHide(evt, "Path2") en el evento de carga (Fig. 60). Guarde el archivo nuevamente y asegúrese de que los objetos Texto4 y Ruta2 ahora solo sean visibles cuando pasa el cursor sobre el objeto Texto1.
Cualquier página web es impensable sin animación web, incluidos los gifs animados. Una de las opciones para crearlos es utilizar la aplicación Adobe ImageReady, que permite, entre otras cosas, crear animaciones a partir de capas. En este caso, la propia imagen multicapa se puede preparar en diferentes aplicaciones, incluidas Ilustrador Adobe.
Es muy fácil crear una animación basada en elementos de la paleta Símbolos, abierta con el comando Ventana=>Símbolos, o desde una de las bibliotecas de símbolos que se pueden abrir usando el comando Ventana=>Bibliotecas de símbolos).
Por ejemplo, intentaremos aumentar el tamaño de cualquier objeto simbólico; las etapas clave del proceso de aumento del objeto deben ubicarse en capas separadas. Primero, simplemente coloque los objetos de símbolo uno encima del otro y luego aumente el tamaño de cada objeto subsiguiente, por ejemplo como se muestra en la Fig. 61. Como resultado, se creará una capa con muchos objetos en la paleta Capas (Fig. 62). Si exportas directamente esta imagen al formato PSD, no dará nada, ya que solo hay una capa y, naturalmente, cuando abras el archivo PSD en el programa ImageReady, también habrá una sola capa. Por lo tanto, primero debes colocar los objetos en diferentes capas. Esto puede hacerse diferentes caminos La forma más sencilla es seleccionar primero la Capa 1 en la paleta Capas y usar el comando Liberar a capa. El resultado será que cada uno de los objetos se moverá a su propia capa, pero todos estarán anidados en la Capa 1. Por lo tanto, tendrá que arrastrar manualmente todas las capas anidadas a la parte superior de la paleta Capas para que estén encima de la capa Capa 1, y luego simplemente eliminar la capa Capa 1 ahora vacía (Fig. 63). Exporte la imagen a formato PSD usando el comando Archivo=>Exportar con la configuración como en la Fig. 64.
Cargue el archivo PSD creado en el programa ImageReady (Fig. 65 y 66). Abra el menú de la paleta Animación Crear cuadros a partir de capas. Como resultado, se crearán cinco cuadros, cada uno de los cuales corresponderá a su propia capa, y la ventana de la paleta Animación se verá como en la Fig. 67.
Después de esto, establezca la duración de cada uno de los fotogramas creados; en este caso, la duración de todos los fotogramas se establece en 0,2 s. Y luego guarde la animación con optimización usando el comando Archivo=>Guardar optimizado (Archivo=>Guardar con optimización). El resultado resultante puede parecerse al de la Fig. 68.
Es aún más conveniente obtener espacios en blanco que luego se pueden convertir fácilmente en animación en ImageReady para usar las funciones Live Blends de Illustrator. Este uso combinado de Illustrator e ImageReady acelera significativamente el proceso de creación de animaciones GIF.
Por ejemplo, dibuje dos objetos multicolores arbitrarios y luego conéctelos con un enlace de fusión con los parámetros apropiados (Fig. 69). Es imposible utilizar este archivo directamente para crear animaciones, ya que la imagen está en una sola capa (Fig. 70). Por lo tanto, primero deberá colocar cada elemento del objeto de fusión en una capa separada. Para hacer esto, en la ventana Capas, seleccione la línea, active el menú de la paleta haciendo clic en la flecha negra en su esquina superior derecha y seleccione el comando Liberar a secuencia de capas (Fig. 71). Mantenga presionada la tecla Shift, seleccione las capas creadas y colóquelas encima de la capa Capa 1, y luego elimine la capa Capa 1 y, como resultado, moviéndola a la papelera, la paleta de capas tomará la misma forma que en la Fig. 72.
Arroz. 70. Estado inicial Ventanas de capas
Exporte el archivo creado a formato PSD usando el comando Archivo=>Exportar. Abra el archivo PSD creado en el programa ImageReady (Fig. 73). Tenga en cuenta que todas las capas creadas en Illustrator aparecerán en la ventana de capas (Fig. 74), y en la ventana de Animación por ahora solo habrá un fotograma.
Active el menú de la paleta Animación haciendo clic en la flecha negra en la esquina superior derecha de la paleta y seleccione el comando Crear cuadros a partir de capas. Como resultado, en este ejemplo, se crearán cinco cuadros y la ventana de la paleta Animación tomará el forma de acuerdo con la Fig. 75. Seleccione todos los fotogramas mientras mantiene presionada la tecla Mayús y establezca la duración del fotograma adecuada. En este ejemplo, se toma el mismo tiempo de 0,2 s para cada fotograma. Luego guarde el archivo con optimización usando el comando Archivo=>Guardar optimizado (Archivo=>Guardar con optimización), configurando la opción Solo imágenes (*.gif) en la lista Tipo de archivo. La animación se parecerá a la Fig. 76.
Lo que parece mucho más interesante no es el movimiento, sino el suave cambio de tamaño de los objetos combinados. Por ejemplo, puede utilizar la transición de fusión ya creada. En este caso, después de crear capas separadas para cada elemento de transición de fusión, coloque todos los objetos uno encima del otro usando los botones Centro de alineación horizontal y Centro de alineación vertical de la paleta Alinear (Fig. 77).
Exporte el archivo creado al formato PSD (Archivo=>Exportar archivo=>Exportar) y abra el archivo PSD creado en el programa ImageReady (Fig. 78). Cree cuadros de animación basados en capas (Crear cuadros a partir de capas Crear cuadros a partir de capas) y seleccione una duración adecuada para ellos (Fig. 79). Y luego, para que la animación sea más efectiva, copie los cuadros existentes, pero en orden inverso para que la imagen primero aumente y luego disminuya, y así sucesivamente en un círculo (Fig. 80). Luego guarde el archivo de optimización (Archivo=>Guardar archivo optimizado=>Guardar con optimización). La animación resultante se muestra en la Fig. 81.
Arroz. 80. Estado de la ventana de Animación después de duplicar fotogramas.
Arroz. 81. Animación terminada.
¡Hola a todos! Hoy intentaré describir las capacidades del programa Adobe Illustrator, comparándolo con las capacidades de Flash. Este no será un análisis global del programa, sino más bien una descripción de algunas características interesantes que descubrí en este programa. Recopilé información pieza por pieza mientras la estudiaba para poder publicar todo en una sola publicación. Admito de inmediato que no soy un usuario muy experimentado de Illustrator, solo lo he estado usando para dibujar durante los últimos seis meses (antes dibujaba todo en Flash). Mucha gente se queja de que el ilustrador es complejo y no siempre intuitivo. Hasta cierto punto, estoy de acuerdo en que después del lavado este programa es complejo. Pero lo principal aquí es no darse por vencido, sino seguir estudiando. Y después de un par de semanas surge el pensamiento: ¡cómo me las arreglé sin él antes!
Entonces, ¿qué me gustó del Illustrator y qué encontré que no estuviera en flash?
1. Empezaré por lo más sencillo, pero a la vez necesario. Intente organizar objetos en un círculo en Flash. Anteriormente existía una herramienta Deco, pero se eliminó, aparentemente por considerarse innecesaria. Decidimos que sería más divertido hacerlo con las manos. Illustrator tiene esta función: Efecto – Distorsionar y Transformar – Transformar.
Todo es rápido y sencillo, nosotros mismos configuramos los valores (distancia entre objetos, número de copias) en la configuración.
2. Zigzag
Algo aún más simple, pero no obstante útil. Parecería poca cosa, pero en Flash hay que dibujar a mano, en Illustrator es cuestión de segundos.
3. Deformación de objetos (Warp)
No hay nada como esto en Flash. En el siguiente ejemplo, mostré sólo 2 formas de deformar formas simples (Efecto – Deformación – Arco/Pez). De hecho hay 15 de ellos en ultima versión programas.
4. Redondeo automático de esquinas (Round Corners)
Puede hacerlo manualmente: en un objeto gráfico, cuando se selecciona, aparece un punto blanco y un signo de línea redondeada en la esquina (en todas las esquinas). Arrastramos con el ratón y lo ajustamos a tu gusto.
Pero esto solo se aplica a las formas, con una línea de lápiz lo hacemos de manera un poco diferente: aplicamos un efecto de redondeo (Efecto – Estilizar – Redondear Esquinas). A la salida obtenemos el mismo resultado.
5. áspera
El efecto se aplica a formas simples (Efecto – Distorsionar y transformar – Rugoso). El resultado es algo parecido a modelos 3D de baja poli. Creo que es genial :) Y lo más importante es que es muy sencillo.
6. Pucker&Bloat (Tirones e hinchazón)
Ejemplo en la siguiente imagen:
7. Expansión de formulario (ruta compensada)
Flash tiene una función Expandir relleno; no funciona en absoluto con líneas de lápiz, a diferencia de Illustrator.
8. Pinceles (pincel artístico, pincel de motivo, pincel de dispersión)
Mire la imagen a continuación con ejemplos:
9. Pincel de textura
Illustrator también presenta muchos pinceles de textura, sobre los cuales escribí y cómo aparecían en nueva versión destello - . Se ha observado que el uso de pinceles en Adobe Animate es terriblemente lento. Eso es todo:(
10. No estoy seguro de si esto es un truco real, pero quiero centrarme en un pincel con el divertido nombre Blob Brush. Ubicado en la barra de herramientas, este es un pincel muy agradable de usar. Tiene un montón de configuraciones, me gusta más que la habitual. Es difícil explicar sus beneficios con palabras, es mejor probarlo una vez.
10.Dividir en cuadrícula
Otra cosa útil es la función Dividir en cuadrícula (Objeto-Ruta-Dividir en cuadrícula), que le permite cortar la forma en segmentos iguales. ¿A qué nos recuerda esto? Así es: ventanas en un edificio de gran altura. Creo que es genial para dibujar, por ejemplo, paisajes urbanos;)
Otro Herramienta útil, presentado en Illustrator probablemente desde su primer lanzamiento. Con su ayuda puedes crear, por ejemplo, texturas de madera:
12. Mover (derecha – Transformar - Mover)
Desplaza un objeto a una distancia especificada. Si lo desea, puede crear inmediatamente una copia que se colocará a la distancia deseada del objeto seleccionado horizontal o verticalmente. Una versión anterior de Flash tenía un complemento que hacía esta función. Lamentablemente no recuerdo su nombre.
Illustrator es muy conveniente para crear patrones sin fisuras (Object-Pattern-Make). Recuerdo con qué furia desarrollé la sofisticación en un instante con la creación de . En la versión SS 2015 de Illustrator, todo está automatizado; un montón de configuraciones te ayudarán a crear un patrón en docenas de variaciones, con solo unos pocos elementos gráficos a mano. En mas versiones anteriores Todos los programas debían realizarse manualmente, como hasta ahora en Flash.
(Nota: el patrón se puede convertir en un objeto vectorial editable usando la función Objeto – Expandir apariencia.
14. Mosaico de objetos
Crear una paleta de colores basada en una imagen existente. Importe la imagen que desee a la ilustración (Abrir), luego Objeto – Crear mosaico de objetos. En la configuración especificamos la frecuencia de división en alto y ancho.
Y en la salida obtenemos:
15.Mezclar
Se utiliza para crear degradados. Puede crear transiciones paso a paso, como en la imagen. No diré que lo uso a menudo, pero podría resultarle útil a alguien. Me parece que se puede utilizar para crear imágenes de fondo sencillas.
La herramienta también se puede utilizar para clonar objetos. Coloque dos objetos a una distancia uno del otro y aplique Opciones de fusión, seleccione el número de pasos (el número de objetos clonados).
16. Herramienta Construir forma. Algo muy conveniente para trabajar con primitivas. En flash, me pareció, era menos conveniente.
Mantenga presionada la tecla Alt y haga clic en los segmentos seleccionados para eliminarlos. Si simplemente arrastramos el mouse sobre varias áreas seleccionadas - conexiones.
El complemento es una herramienta que ayuda a cortar, conectar, etc. automáticamente. formas resaltadas. En cuanto a mí, no es muy conveniente, a menudo uso la herramienta Construir forma.
(mesas de trabajo)
18.Panel de herramientas personalizado
La posibilidad de crear tu propia barra de herramientas, descartando las innecesarias y eligiendo solo las que utilizas.
En Flash, las mesas de trabajo, es decir, las escenas (Escena 1,2,3...) se encuentran separadas y es necesario alternar entre ellas (Shift+F2). En Illustrator, todos pueden colocarse ante tus ojos. Es conveniente cuando haces varias versiones del mismo dibujo, para que todas las opciones estén ante tus ojos para comparar.
19.Isométricos usando estilos gráficos.
Y lo último es crear isometría sin usarla en 1 clic (o más precisamente, en 3 clics, porque tenemos 3 lados;) usando estilos gráficos (Graphic Styles). Describiré cómo se hace esto la próxima vez.
Lo que Illustrator tiene en común con flash es la capacidad de guardar un objeto en un símbolo, y con la misma facilidad este símbolo se puede transferir a flash (abra el archivo en flash.ai usando Importar – Importar a escenario).
El símbolo en Illustrator tiene las mismas propiedades que en Flash.
Y para concluir, escribiré que Illustrator, en mi opinión, es inferior a Flash. Sí, sí, existe tal cosa. Y esta es la herramienta de relleno (Bote de pintura). Por mucho que intente acostumbrarme en Illa, es más cómodo en Flash.
Si mis notas te han resultado útiles o si quieres agregar algo propio, ¡bienvenido a los comentarios! Buena suerte a todos;)
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 el ejemplo más simple de una animación vectorial SVG utilizando el complemento ligero de Jquery Lazy Line Painter.
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 haz clic en ¡Descárgalo!
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.
Colocamos estos 2 archivos 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 pegamos el código resultante en un archivo main.js vacío.
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! Este es el texto estándar HTML5.
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 al empezar máquina local Puede haber un retraso en el inicio de la animación durante varios segundos.
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 presionada la tecla Alt mientras hace clic en el ícono 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 esta figura 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.
Se abrirán configuraciones 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 vídeos largos o aplicaciones interactivas aún mejor usarlo Adobe Flash u otros editores flash. Por ejemplo, hice este gato en un viejo Flash Macromedia, que desenterré en mi trabajo.
Además, recientemente se utilizan cada vez más HTML5 y CSS3 para crear animaciones. Este código es compatible con los 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:
