Создание анимаций в Illustrator. Как сделать анимацию в Adobe Illustrator Как сделать svg анимацию в adobe illustrator

Оптимизация Web-графики

Графическая информация передается намного медленнее текстовой, а время загрузки изображений пропорционально размеру их графических файлов. Поэтому быстрая загрузка Web-страниц предполагает небольшой размер внедренных в них графических изображений, что достигается за счет их оптимизации. Под оптимизацией изображения понимают его преобразование, обеспечивающее минимальный размер файла при сохранении необходимого в данном случае качества изображения, что достигается в первую очередь путем уменьшения количества цветов в графических изображениях, использования сжатых и специальных форматов файлов и оптимизации параметров сжатия для отдельных фрагментов изображений.

Illustrator имеет встроенные инструменты оптимизации изображений, обеспечивающие благодаря различным методам предварительного просмотра быстрое и эффективное проведение процесса оптимизации. Предварительный просмотр дает достаточно точное представление о том, как будет выглядеть оптимизированное изображение в режиме реального времени, что помогает оценить результат оптимизации и удачно подобрать нужные настройки. А оптимизировать можно как изображения, созданные непосредственно в программе Illustrator, так и иные, например фотографии, которые предполагается разместить на Web-сайте.

Параметры оптимизации задаются в окне Save for Web (Сохранение для Web), вызываемом одноименной командой из меню File (Файл). Программа предлагает использовать один из четырех режимов предварительного просмотра, но для оценки качества оптимизации наилучшим образом подходят два:

• 2-Up (два варианта) — одновременный просмотр оригинала и оптимизированного изображения в соответствии с указанными настройками (рис. 1);
• 4-Up (четыре варианта) — в этом режиме область просмотра делится на четыре окна (рис. 2) для отображения исходного изображения и трех версий оптимизированного: первая версия создается на основе установленных значений оптимизации, а две другие являются вариантами текущих настроек оптимизации.

Оба режима позволяют существенно экономить время на поиске лучшего варианта оптимизации, так как избавляют от необходимости сохранения изображений с разными настройками оптимизации и их последующего визуального сравнения. Кроме того, есть возможность оценить не только качество оптимизированного изображения, но и его размер и время загрузки при разных вариантах соединения. Для сравнения наиболее удобен режим 4-Up (четыре варианта), позволяющий визуально оценить влияние сжатия или уменьшения палитры на качество изображения и его размер и в конечном счете определить лучшие параметры оптимизации.

Illustrator позволяет оптимизировать Web-графику в форматах не только GIF, JPG, PNG-8 и PNG-24, но и в SWF и SVG. Индексированные изображения, имеющие небольшое количество цветов, сохраняют в формате GIF. Для сохранения полноцветных и полутоновых изображений — фотографий и цветонасыщенной графики, например градиентных заливок, — используется формат JPG. Для полноцветных изображений с прозрачными участками применяется формат PNG, который позволяет сохранять как индексированные, так и полноцветные изображения, при этом в формате PNG-8 максимально возможное количество цветов оптимизированного изображения равно 256, а в формате PNG-24 у изображения могут быть миллионы цветов, и потому он похож на формат JPEG. Отличие PNG-24 от JPEG заключается в том, что используемый для оптимизации изображений в формате PNG-24 метод сжатия не приводит к потере качества, но вследствие этого увеличивается размер файла. Форматы SVG и SWF объединяют графические данные, текст и интерактивные компоненты и также могут быть оптимизированы.

Рассмотрим конкретный пример оптимизации изображения. Допустим, в программе Illustrator была разработана эмблема сайта (рис. 3), изначально сохраненная в формате AI. Попытка сразу оптимизировать ее для Web ни к чему хорошему не приведет, так как в этом случае произойдет автоматическое обрезание изображения, при котором не будет учитываться истинное положение полученной в результате деформации надписи (рис. 4 и 5).

Поэтому попробуем экспортировать эмблему в формат PSD командой File=>Export (Файл=>Экспорт) — размер созданного изображения будет составлять 143 Кбайт. Откройте полученный PSD-файл и воспользуйтесь командой File=>Save for Web (Файл=>Сохранение для Web). С учетом ограниченного числа задействованных в изображении цветов в данном случае оптимален формат GIF, с конкретными настройками которого и нужно определиться. Поэкспериментировав с настройками, можно убедиться, что лучшее качество дает выбранный программой по умолчанию алгоритм сжатия Selective (Селективный). Что же касается сглаживания, то, учитывая наличие градиентной заливки, лучше выбрать алгоритм с генерацией шума — Noise (рис. 6). Размер полученного в итоге оптимизации файла составит 6,729 Кбайт (рис. 7), при этом прозрачность фона будет сохранена, в чем несложно убедиться, сохранив изображение в формате GIF вместе с HTML-файлом (рис. 8). В итоге в данном примере были получены файлы emblem.html и emblem.gif в папке Primer1 .

Кнопки

Незаменимым специфическим элементом дизайна любых Web-страниц являются графические элементы управления — кнопки. Представить себе страничку без них просто невозможно. Рисование кнопок сегодня стало особым жанром, а Illustrator позволяет создавать самые замысловатые варианты. К примеру, кнопки, оформленные как сеточные объекты и (или) с наложением масок, смотрятся гораздо эффектнее обычных.

Рассмотрим вариант создания круглой выпуклой кнопки в программе Illustrator. Нарисуйте закрашенный произвольным цветом векторный объект в виде круга (рис. 9) и преобразуйте его в сеточный командой Object=>Create Gradient Mesh (Объект=>Создать градиентную сетку), указав четыре строки и четыре столбца, а в списке Appearance (Вид) выбрав вариант To Center Highlight (Подсветка) равным 60 (рис. 10). Выберите инструмент Direct Selection и щелкните в левом верхнем углу объекта, выделив находящиеся там узловые точки (рис. 11). Измените цвет соответствующей ячейки на белый, выбрав его в палитре Swatches (рис. 12).

Возьмите инструмент Ellipse (Эллипс), установите маркер мыши в центр созданной перед этим окружности и, удерживая нажатыми клавиши Alt и Shift , растяните новую окружность поверх старой так, чтобы она оказалась больше старой на 1-2 пиксела со всех сторон. Сделайте у нее черную границу (Stroke ) шириной в 1-2 пиксела и залейте радиальным градиентом в направлении от красного к белому (рис. 13). Перетащите созданный векторный объект на 1-2 пиксела вправо и вниз, затем, не снимая выделения, кликните на нем правой кнопкой мыши и из контекстного меню выберите команду Arrange=>Send To Back (Упорядочить=>Отправить назад). В итоге получится заготовка для кнопки, представленная на рис. 14.

Как правило, на любой Web-странице имеется несколько однотипных кнопок, различающихся, например, лишь направлением нарисованных на них стрелок, означающих направление перемещения по сайту. Рассмотрим самый простой случай наличия двух кнопок, одна из которых, со стрелкой вниз, будет означать перемещение на следующую страницу, а кнопка со стрелкой вверх — на предыдущую. В качестве заготовки стрелки возьмем обычный треугольник, нарисованный инструментом Polygon (Многоугольник), закрашенный черным цветом и для большего эффекта также оформленный как сеточный объект. Переместим стрелку на кнопку и отрегулируем положение всех объектов друг относительно друга, воспользовавшись соответствующими кнопками палитры Align (Выравнивание). Первая из полученных кнопок представлена на рис. 15. Сделаем копию слоя с кнопкой, выбрав команду Duplicate Layer Layers , — в результате получим два идентичных слоя. Затем на копии слоя выделим стрелку и повернем ее на 180°, выбрав из контекстного меню команду Transform=>Rotate — Трансформация=>Поворот. Получим такую же кнопку, как показана на рис. 16. Обратите внимание, что гораздо удобнее все однотипные кнопки одного проекта хранить в одном файле на разных слоях, что в данном случае и продемонстрировано.

Теперь необходимо сохранить оптимизированные варианты каждой из кнопок. Вначале сделайте невидимым нижний слой — в этом случае будет сохранена кнопка на верхнем слое. Выберите команду File=>Save for Web (Файл=>Сохранить для Web), настройте параметры оптимизации кнопки, например, как показано на рис. 17, щелкните на кнопке Save (Сохранить) и введите имя файла. Сохраненная в итоге кнопка представлена на рис. 18. Теперь верните видимость нижнему слою, а верхний сделайте невидимым и аналогичным образом сохраните вторую кнопку, указав для нее другое имя. Результат представлен на рис. 19.

Теперь осталось удостовериться, что кнопки вполне приемлемо смотрятся на Web-странице, и разместить их на произвольной странице (рис. 20). В итоге в данном примере были получены файл Primer2.htmlи два графических изображения в папке images (папка Primer2 ).

При желании в процессе оптимизации кнопку несложно превратить в слайс. В этом случае после выбора команды File=>Save for Web (Файл=>Сохранить для Web) и настройки параметров оптимизации следует выбрать из палитры инструментов инструмент Slice Select (Выделение слайса) и дважды щелкнуть по изображению, которое в итоге автоматически превратится в слайс с порядковым номером 1 (рис. 21). Повторный двойной щелчок мышью приведет к открытию окна Slice Options (Опции слайса), в котором необходимо будет указать ссылку и при желании изменить имя слайса (рис. 22), а затем сохранить оптимизированное изображение. Результатом в данном случае будут файлы Primer3.html (рис. 23) и Primer3.gif (папка Primer3).

Интерактивные элементы

Одним из способов оживления страницы является внедрение элементов дизайна, которые изменяют свой внешний вид (или состояние) в зависимости от поведения мыши или, реже, в случае возникновения каких-либо иных ситуаций: масштабирования, скроллинга, загрузки, возникновения ошибок и пр.

Среди таких элементов наибольшую известность получили rollovers (от англ. roll over — перекатываться, переворачиваться) — элементы, меняющие облик под воздействием мыши. Примерами типичных ролловеров являются анимированные кнопки. Ролловеры часто используются и при создании других навигационных элементов сайта. В действительности любой ролловер представляет собой не одно, а несколько (до четырех) изображений, каждое из которых соответствует конкретному событию. Основными событиями принято считать следующие: Normal — обычное состояние, Over — наведение курсора мыши на элемент и Down — нажатие левой кнопки мыши при наведении на нее курсора. Теоретически могут быть задействованы такие события, как Click — отпускание левой кнопки мыши после нажатия, Up — после отпускания кнопки, Out — при выходе за пределы активной зоны. Однако на практике чаще ограничиваются изменением элемента только на первые три или даже два события.

Классические ролловеры

В классическом понимании ролловер представляет собой серию графических изображений в формате GIF и соответствующий им HTML-код, благодаря которому в зависимости от поведения мыши одно изображение сменяет другое в окне браузера.

Программа Illustrator не предназначена для непосредственного создания ролловеров в классическом их понимании, однако она может помочь при разработке исходных для них элементов. Идея в этом случае заключается в том, что нужно создать слой с изображением, соответствующим первому событию. Затем сделать копию слоя и преобразовать изображение так, чтобы оно соответствовало второму событию, и т.д. Полученное в итоге многослойное изображение экспортируется в PSD-файл с сохранением слоев, на основе которого и создается ролловер в программе Image Ready. Плюсом применения программы Illustrator, как и во многих других случаях, является ряд ее интересных возможностей, недоступных в других программных средствах, в совокупности с удобством трансформации векторной графики.

Попробуем создать ролловер в виде надписи, меняющей цвет в зависимости от поведения мыши. Откройте Illustrator и создайте форму в виде скругленного и залитого черным цветом прямоугольника (рис. 24), сделайте его копию и расположите ее в свободной части экрана. Преобразуйте первую копию прямоугольника в сеточный объект с подсветкой в центре (команда Object=>Create Gradient Mesh — Объект=>Создать градиентную сетку), указав четыре строки и десять столбцов (рис. 25). Активизируйте вторую копию прямоугольника и настройте для нее градиентную заливку примерно так, как показано на рис. 26. Наложите градиентный объект поверх сеточного, уменьшите непрозрачность градиентного объекта примерно до 80%, а размер — примерно на 1 пиксел, чтобы в итоге сымитировать эффект выпуклости. А затем поверх объектов напечатайте надпись. В исходном виде пусть она имеет белый цвет, который будет соответствовать состоянию Normal (рис. 27), а затем при изменении состояния ролловера цвет надписи будет меняться, например, на зеленый — при наведении на нее маркера мыши (состояние Over) и на голубой — при нажатии кнопки мыши (состояние Down).

Обратите внимание на палитру Layers — на данном этапе в ней имеется всего один-единственный слой. Сделайте две копии данного слоя, применив команду Duplicate Layer (Дублировать слой) из меню палитры Layers , — в палитре станет три слоя (рис. 28). Затем в первой копии слоя измените цвет надписи на зеленый, а во второй — на голубой (рис. 29). В итоге будет получена необходимая заготовка для ролловера.

Экспортируйте созданное изображение в формат PSD с сохранением слоев, воспользовавшись командой File=>Export (Файл=>Экспорт) и выбрав цветовую модель RGB(рис. 30). Откройте созданный PSD-файл в программе ImageReady (рис. 31 и 32). Создайте кадры на основе слоев, выбрав команду Make Frames From Layers (Создать кадры из слоев) из меню палитры Animation . Окно Animation примет вид как на рис. 33. При этом в палитре Rollovers изначально будет создано одно-единственное состояние Normal.

Затем в окне Animation выделите кадр, соответствующий наведенному состоянию, при этом в палитре Layers автоматически выделится слой Layer 1 Copy (рис. 34). Перейдите в палитру Rollovers и щелкните на кнопке Create Rollover state (Создать ролловер-состояние) — рис. 35, что приведет к появлению состояния Over State в палитре Rollovers (рис. 36). Аналогичным образом создайте состояние Down State . Активизируйте состояние Normal в палитре Rollovers и удалите в палитре Animation все кадры, кроме того, который должен соответствовать состоянию Normal . В итоге для каждого состояния ролловера в палитре Animation будет существовать всего один кадр (рис. 37, 38 и 39).

Рис. 38. Вид изображения, окна Animation и палитр Layers и Rollovers для состояния Over State

Проверьте результат, щелкнув на кнопке Preview in Default Browser (Предварительный просмотр в браузере) на панели инструментов и перейдя в окно браузера (рис. 40). После этого сохраните файл, применив команду File=>Save Optimized (Файл=>Сохранить с оптимизацией) и указав вариант HTML and Images (*.html) . В итоге в данном примере были получены файл Primer4.html и серия графических изображений в папке images.

Рис. 40. Окно браузера с Rollover-элементом

SVG-ролловеры

Набирающий популярность формат SVG (Scalable Vector Graphics — масштабируемая векторная графика), созданный на основе стандарта XML, также позволяет получать разнообразные интерактивные элементы, в частности ролловеры, только на практике это реализуется совершенно иначе. Стоит заметить, что создание интерактивных SVG-ролловеров, в отличие от классических, когда соответствующий HTML-код генерируется полностью автоматически, требует знания языка JavaScript и понимания основных принципов объектно-ориентированного программирования.

Для работы с SVG-объектами предназначена специальная палитра SVG Interactivity , которую несложно открыть при помощи команды Window=>SVG Interactivity (Окно=>SVG интерактивность) — рис. 41.

Рассмотрим данный вариант создания ролловера на примере интерактивной кнопки, цвет надписи на которой будет меняться с черного на синий при наведении мыши и вновь преобразовываться в черный при выходе мыши за пределы активной зоны.

Создайте прямоугольную кнопку со скругленными краями и подберите для нее подходящую градиентную заливку, например как показано на рис. 42. Отрегулируйте прозрачность кнопки в палитре Transparence (Прозрачность) — в данном примере значение параметра Opacity (Непрозрачность) установлено равным 50%. Сделайте копию кнопки, залейте ее темно-зеленым цветом (рис. 43), а затем преобразуйте ее в сеточный объект командой Object=>Create Gradient Mesh (Объект=>Создать градиентную сетку), указав четыре строки и десять столбцов, а в списке Appearance (Вид) выбрав вариант To Center (К центру) и установив значение Highlight (Подсветка) равным 100. Уменьшите непрозрачность слоя с сеточным объектом примерно да 40% (рис. 44). Разместите сеточный объект поверх градиентного, и кнопка станет напоминать представленную на рис. 45.

Рис. 44. Превращение копии кнопки в сеточный объект

Дополните кнопку предполагаемой надписью и отрегулируйте ее положение, воспользовавшись соответствующими кнопками палитры Align (Выравнивание). Полученное в итоге изображение будет содержать один слой с тремя наложенными друг на друга объектами (рис. 46). Запланированные события будут относиться к текстовому объекту, поэтому для удобства измените его имя на Text , дважды щелкнув на объекте и введя новое имя. Аналогичным образом измените имя слоя с Layer 1 на Layer (рис. 47).

Обработка событий предполагает использование JavaScript-процедур, поэтому необходимо подключить файл с описанием данных процедур. Он называется Events.js и сохраняется на диске в папке Sample Files\Sample Art\SVG\SVG при установке программы Adobe Illustrator. Для подключения файла Events.js воспользуйтесь командой JavaScript Files SVG Interactivity (рис. 48). Далее нужно нажать кнопку Add (Добавить) и найти нужный файл на жестком диске. Когда его имя появится в поле URL (рис. 49), щелкните на кнопке Done (Выйти).

Рис. 48. Выбор команды JavaScript Files

После этого следует определить реакцию на события мыши для объекта Text . Выделите объект Text, в поле Event (Событие) палитры SVG Interactivity выберите событие onmouseover elemColor(evt, "Text", "#3333FF") — это будет означать, что при нахождении мыши над объектом Text его цвет изменится на синий (рис. 50). Для того чтобы после выхода мыши за пределы активной зоны цвет текста сменился на черный, потребуется создать еще одно событие onmouseout — выберите его в поле Event (Событие) палитры SVG Interactivity . Затем в строке действия введите текст elemColor(evt, "Text", "#000000") — это приведет к возврату черного цвета (рис. 51).

Рис. 51. Окончательный вид палитры SVG Interactivity для объекта Text

Сохраните созданный ролловер как SVG-файл командой File=>Save as (Файл=> Тип файла формат SVG , а затем настроив опции сохранения SVG-файла так, как показано на рис. 52. После сохранения будет получен всего один-единственный файл с расширением SVG, а не два, как в случае классического ролловера, — в данном случае был получен файл Primer5.svg (папка Primer5). Однако для того, чтобы ролловер действительно работал, необходимо дополнительно в папку с SVG-файлом скопировать файл Events.js с описанием JavaScript-процедур. После этого можно проверить работоспособность ролловера — результат будет выглядеть так, как показано на рис. 53.

SVG-анимация

Формат SVG может использоваться и для передачи анимации. Попробуем создать простейший анимационный элемент (в данном случае это будет информация о компании), который будет появляться на экране при наведении мыши на соответствующий графический объект и исчезать при снятии мыши с интерактивного элемента.

Создадим примерно такую серию графических и текстовых объектов, как показано на рис. 54. Переименуем удобным образом все созданные объекты, последовательно щелкая на имени очередного объекта в палитре Layers и вводя нужное имя (рис. 55). Обратите внимание, что выделенные на рис. 56 объекты — Text1, Text2, Text3 и Path1 — будут видимы всегда, а все остальные — только при наведении мыши на объект Text1 .

Рис. 54. Исходный вид изображения

Подключите файл Events.js с описанием JavaScript-процедур, применив команду JavaScript Files (Файлы JavaScript) из палитры SVG Interactivity , нажав кнопку Add (Добавить), указав нужный файл на жестком диске и щелкнув на кнопке Done (Выйти).

Определите реакцию на события мыши для объекта Text1 . Выделите объект Text , в поле Event (Событие) палитры SVG Interactivity выберите событие onmouseover и в строке ниже введите текст elemShow(evt, "Text4"); elemShow(evt, "Path2") . В итоге при нахождении мыши над объектом Text1 будут становиться видимыми объекты Text4 и Path2 . Обратите внимание, что если при возникновении события должно выполниться несколько действий, то они должны быть указаны через знак «;». Затем аналогичную операцию выполните в отношении события onmouseout , введя для него текст , что будет означать скрытие объектов (рис. 57).

Сохраните результат как SVG-файл командой File=>Save as (Файл=>Сохранить как), указав имя файла, выбрав в поле Тип файла формат SVG, а затем настроив опции сохранения SVG-файла в соответствии с рис. 58. После сохранения будет получен файл Primer6.svg (папка Primer6). Не забудьте скопировать в папку с данным файлом файл Events.js. Если после этого запустить созданный файл, то вы увидите результат, представленный на рис. 59. Это почти то, что нужно. Единственное, что не входило в наши планы, — это первоначальное появление объектов Text 4 и Path 2 при загрузке. Чтобы избавиться от этого недочета, выделите сразу оба данных объекта и создайте для них действие elemHide(evt, "Text4"); elemHide(evt, "Path2") при событии onload (рис. 60). Вновь сохраните файл и убедитесь в том, что теперь объекты Text4 и Path2 видны лишь при наведении мыши на объект Text1 .

GIF-анимация

Любая Web-страница немыслима без Web-анимации, в том числе и без анимационных gif’ов. Один из вариантов их создания — применение приложения Adobe ImageReady, позволяющего в числе прочего создавать анимацию из слоев. При этом само многослойное изображение может быть подготовлено в разных приложениях, в том числе и в Adobe Illustrator.

Очень просто создать анимацию на основе элементов из палитры Symbols (Символы), открываемой командой Window=>Symbols (Окно=>Символы) или из одной из библиотек символов, которые можно открыть, применив команду Window=>Symbol Libraries (Окно=>Библиотеки символов).

Для примера попытаемся увеличить размеры любого объекта-символа, ключевые этапы процесса увеличения объекта нужно задать на отдельных слоях. Вначале просто разместите объекты-символы один над другим, а затем увеличьте размер каждого следующего объекта, например как показано на рис. 61. В итоге в палитре Layers будет создан один слой с множеством объектов (рис. 62). Если напрямую экспортировать данное изображение в формат PSD, то это ничего не даст, так как слой один, и естественно, при открытии PSD-файла в программе ImageReady также будет лишь один слой. Поэтому предварительно необходимо разместить объекты на разных слоях. Это можно осуществить разными способами — проще всего вначале выделить слой Layer 1 в палитре Layers и воспользоваться командой Release to Layer (Освободить в слои). Результатом станет перемещение каждого из объектов на свой слой, но все они окажутся вложенными в слой Layer 1 . Поэтому затем придется вручную перетащить все вложенные слои в верхнюю часть палитры Layers так, чтобы они оказались над слоем Layer 1 , а затем ставший пустым слой Layer 1 просто удалить (рис. 63). Экспортируйте изображение в формат PSD, применив команду File=>Export (Файл=>Экспорт) с установками как на рис. 64.

Загрузите созданный PSD-файл в программе ImageReady (рис. 65 и 66). Откройте меню палитры Animation Make Frames From Layers (Создать кадры из слоев). В итоге будут созданы пять кадров, каждый из которых будет соответствовать своему слою, а окно палитры Animation примет вид как на рис. 67.

После этого установите продолжительность каждого из созданных кадров — в данном случае для всех кадров установлена длительность в 0,2 с. А затем сохраните анимацию с оптимизацией с помощью команды File=>Save Optimized (Файл=>Сохранить с оптимизацией). Полученный результат может напоминать рис. 68.

Еще удобнее для получения заготовок, которые нетрудно превратить затем в анимацию в ImageReady, использовать функции Live Blends программы Illustrator. Такое комбинированное применение программ Illustrator и ImageReady существенно ускоряет процесс создания GIF-анимаций.

Для примера нарисуйте два произвольных разноцветных объекта, а затем свяжите их blend-связью с подходящими параметрами (рис. 69). Напрямую использовать данный файл для создания анимации невозможно, так как изображение находится на одном-единственном слое (рис. 70). Поэтому предварительно потребуется каждый элемент blend-объекта разместить на отдельном слое. Для этого в окне Layers выделите строку , активизируйте меню палитры, щелкнув на черной стрелке в ее правом верхнем углу, и выберите команду Release to Layers Sequence (Превратить в слои последовательно) (рис. 71). Удерживая клавишу Shift , выделите созданные слои и разместите их над слоем Layer 1 , а затем удалите сам слой Layer 1 , переместив его в корзину — в итоге палитра слоев примет тот же вид, что и на рис. 72.

Рис. 70. Начальное состояние окна Layers

Экспортируйте созданный файл в формат PSD командой File=>Export (Файл=>Экспорт). Откройте созданный PSD-файл в программе ImageReady (рис. 73). Обратите внимание, что в окне слоев появятся все созданные в программе Illustrator слои (рис. 74), а в окне Animation будет пока один-единственный кадр.

Активизируйте меню палитры Animation , щелкнув на черной стрелке в правом верхнем углу палитры, и выберите команду Make Frames From Layers (Создать кадры из слоев) — в итоге в данном примере будет создано пять кадров, а окно палитры Animation примет вид в соответствии с рис. 75. Выделите все кадры, удерживая клавишу Shift , и установите подходящую длительность кадров — в данном примере для каждого из кадров взято одинаковое время в 0,2 с. Затем сохраните файл с оптимизацией командой File=>Save Optimized (Файл=>Сохранить с оптимизацией), установив в списке Тип файла вариант Images Only (*.gif) . Анимация будет напоминать рис. 76.

Гораздо интереснее выглядит не перемещение, а плавное изменение размеров blend-объектов. Для примера можно воспользоваться уже созданным blend-переходом. В этом случае после создания отдельных слоев для каждого элемента blend-перехода разместите все объекты друг на друге, воспользовавшись кнопками Horizontal Align Center (Выравнивание относительно центра по горизонтали) и Vertical Align Center (Выравнивание относительно центра по вертикали) палитры Align (рис. 77).

Экспортируйте созданный файл в формат PSD (File=>Export — Файл=>Экспорт) и откройте созданный PSD-файл в программе ImageReady (рис. 78). Создайте на основе слоев кадры анимации (Make Frames From Layers — Создать кадры из слоев) и подберите для них подходящую длительность (рис. 79). А затем, чтобы сделать анимацию более эффектной, скопируйте имеющиеся кадры, но в обратном порядке — так, чтобы изображение сначала увеличивалось, а потом уменьшалось, и так по кругу (рис. 80). Затем сохраните файл с оптимизацией (File=>Save Optimized — Файл=>Сохранить с оптимизацией). Полученная анимация представлена на рис. 81.

Рис. 80. Состояние окна Animation после дублирования кадров

Рис. 81. Готовая анимация

В последнее время стала очень популярна разного рода анимация SVG(Scalable Vector Graphics) графики на сайтах и приложениях. Это связано с тем что все новейшие браузеры уже поддерживают этот формат. Вот инфа по поддержке браузерами SVG .

В данной статье рассмотрен простейший пример анимации SVG вектора при помощи легкого Jquery плагина Lazy Line Painter.

Для выполнения и полного понимания данной задачи желательны базовые знания HTML, CSS, Jquery, но не обязательны если вам просто хочется анимировать SVG) Приступим!

И так шаги которые нам нужно выполнить:

1. Создать правильную файловую структуру
2. Загрузить и подключить плагин
3. Нарисовать крутую контурную картинку в Adobe Illustrator
4. Конвертировать нашу картинку в Lazy Line Converter
5. Вставить полученый код в main.js
6. Добавить немного CSS по вкусу

1. Создать правильную файловую структуру
C этим нам поможет сервис Initializr где нужно выбрать параметры как на картинке ниже.

• Classic H5BP (HTML5 Boiler Plate)
• No Template
• Just HTML5 Shiv
• Minified
• IE Classes
• Chrome Frame
• Затем нажать Download it!

2. Загрузить и подключить плагин

Так как initializr поставляется с последней библиотекой Jquery, из архива который нам нужно скачать с репозитория проекта Lazy Line Painter , нужно перенести в наш проект только 2 файла. Первый это ‘jquery.lazylinepainter-1.1.min.js’(версия плагина может отличатся) он находится в корне полученой папки. Второй это example/js/vendor/raphael-min.js.

Эти 2 файла помещаем в папку js. И подключаем их к нашему index.html перед main.js следующим образом:

3. Нарисовать крутую контурную картинку в Adobe Illustrator

1. Рисуем нашу контурную картинку в Illustrator (проще всего это сделать при помощи Pen Tool)
2. Необходимо чтобы контуры нашего рисунка не замыкались тк для нашего эффекта необходимы начало и конец
3. Не должно быть заливок
4. Максимальный размер файла — 1000×1000 px, 40kb
5. Сделаем кроп до границ объекта Object>Artboards>Fit To Artboards Bounds
6. Сохраняем в формате SVG(стандартные настройки сохранения подойдут)

Для примера можете воспользоваться иконками во вложении.

4. Конвертировать нашу картинку в Lazy Line Converter
Просто перетащи свою иконку в окошко что на рисунке ниже.
Толщину, цвет контура и скорость анимации можно будет изменить в самом коде который появится после конвертирования!

5. Вставить полученый код в main.js
Теперь просто вставляем полученный код в пустой файл main.js
Параметры:
strokeWidth — толщина контура
strokeColor — цвет контура
Также можно изменять скорость рисования каждого вектора изменяя значения параметра duration (по умолчанию 600)

6. Добавить немного CSS по вкусу
Удаляем из index.html абзац

Hello world! This is HTML5 Boilerplate.

И вместо него вставляем блок в котором будет происходить наша анимация

затем добавляем немного CSS в файл main.css для более приятного оформления:

Body { background:#F3B71C; } #icons { position: fixed; top:50%; left:50%; margin: -300px 0 0 -400px; }

сохраните все файлы.
Теперь просто откройте index.html в современном браузере и наслаждайтесь эффектом.

P.S. при запуске на локальной машине возможна задержка старта анимации на несколько секунд.

Формат файла Flash (SWF) основан на векторной графике и предназначен для масштабируемой, компактной графики для Интернета. Так как этот формат файла основан на векторной графике, объект сохраняет качество изображения при любом разрешении и идеален для создания кадров анимации. В Illustrator можно создать отдельные кадры анимации на слоях и затем экспортировать слои изображения в отдельные кадры для использования на веб-сайте. Можно также определить символы в файле Illustrator для снижения размера анимации. При экспорте каждый символ определяется в SWF-файле только один раз.

Команда «Экспортировать» (SWF)

Обеспечивает наибольший контроль над анимацией и битовым сжатием.

Обеспечивает больше контроля над смесью форматов SWF и битового во фрагментированном макете. Эта команда предлагает меньше параметров изображения, чем команда «Экспортировать» (SWF), но использует последние использованные параметры команды «Экспортировать» (см. ).

При подготовке объекта к сохранению в формате SWF помните следующие рекомендации.

С помощью приложения Device Central можно увидеть, как будет выглядеть графический объект Illustrator в приложении Flash Player на различных карманных устройствах.

Вставка графического объекта Illustrator

Созданный в приложении Illustrator графический объект можно быстро, просто и без затруднений скопировать и вставить в приложение Flash.

При вставке графического объекта Illustrator в приложение Flash сохраняются следующие атрибуты.

Контуры и фигуры

• Толщина штрихов

  Определения градиентов

  Текст (включая шрифты OpenType)

  Связанные изображения

• Режимы наложения

Кроме того, Illustrator и Flash поддерживают следующие возможности при вставке графического объекта.

При выделении в графическом объекте Illustrator слоев верхнего уровня целиком и вставке их в приложение Flash сохраняются слои и их свойства (видимость и блокировка).

Цветовые форматы Illustrator, отличные от RGB (CMYK, градации серого и пользовательские форматы), преобразуются приложением Flash в формат RGB. Цвета RGB вставляются обычным образом.

При импорте или вставке графического объекта Illustrator можно с помощью различных параметров сохранить определенные эффекты (например, тень, отбрасываемую текстом) в виде фильтров Flash.

Flash сохраняет маски Illustrator.

Экспорт SWF-файлов из приложения Illustrator

SWF-файлы, экспортируемые из приложения Illustrator, соответствуют по качеству и степени сжатия SWF-файлам, экспортируемым из приложения Flash.

При экспорте можно выбрать один из многочисленных заранее заданных стилей, обеспечивающих оптимальный вывод, и указать способ использования нескольких монтажных областей, способ преобразования символов, слоев, текста и масок. Например, можно указать экспорт символов Illustrator в виде роликов или графических изображений, а также создание SWF-символов из слоев Illustrator.

Импорт файлов Illustrator в приложение Flash

Чтобы создать полный макет в приложении Illustrator, а затем импортировать его в приложение Flash за один шаг, можно сохранить графический объект в собственном формате Illustrator (AI) и импортировать его с высокой точностью в приложение Flash с помощью команд «Файл» > «Импортировать в рабочую область» или «Файл» > «Импортировать в библиотеку».

Если файл Illustrator содержит несколько монтажных областей, выберите монтажную область для импорта в диалоговом окне «Импорт» программы Flash и укажите настройки для каждого слоя в этой монтажной области. Все объекты в выбранной монтажной области импортируются в программу Flash как единый слой. При импорте другой монтажной области из того же файла AI объекты из этой монтажной области импортируются в программу Flash как новый слой.

При импорте графического объекта Illustrator в виде файлов AI, EPS или PDF приложение Flash сохраняет те же атрибуты, что и при вставке графических объектов Illustrator. Кроме того, если импортируемый файл Illustrator содержит слои, их можно импортировать одним из следующих способов.

Преобразовать слои Illustrator в слои Flash.

Преобразовать слои Illustrator в кадры Flash.

Преобразовать все слои Illustrator в один слой Flash.

Прозрачный GIF в Adobe Illustrator делается следующим образом. Заходим в меню File > Save for Web & Devices (Alt+Ctrl+Shift+S). В открывшемся окне в поле Optimized file format нужно прежде всего зайти во вкладку Image size (Размер изображения). Дело в том, что в окно оптимизации попадает по умолчанию вся страница, а в этом обычно нет необходимости. Поэтому во вкладке Image Size снимаем выделение с флажка Clip to Artboard (Обрезать по размеру страницы) и нажимаем кнопку Apply.

Затем в списке выбора формата выбираем GIF и отмечаем флажок Transparency.

После этого определим, какие цвета будут прозрачными. Все цвета, присутствующие в изображении, содержатся во вкладке Color Table (Таблица цветов) и отображаются в виде цветных квадратиков. Выбираем в панели инструментов в левой части окна инструмент Eyedropper (пипетка).

Определить цвета можно двумя способами. Проще всего указать цвет пипеткой непосредственно на изображении - после этого цвет выделится на таблице цветов темной обводкой. Ну, а если вы точно знаете, какой цвет должен быть прозрачным, можно выделить его прямо на таблице цветов, нажав соответствующий цветной квадратик. И в первом и втором случае при необходимости выбора нескольких цветов нужно работать с нажатой клавишей Shift (или Ctrl). После выбора цвета, нужно дать указание программе сделать его прозрачным. Для этого нужно нажать иконку Maps selected colors to Transparent (Добавить выбранные цвета к прозрачности). На рисунке эта кнопка обведена кружком, и красный цвет выбран прозрачным. На изображении появится прозрачная область, а квадратик на таблице цветов изменит свой вид - часть его станет белым треугольником. Чтобы отменить выбранный цвет, нужно выделить его в Color Table, а затем опять нажать иконку Maps selected colors to Transparent.

Несколько слов о способе задания прозрачности. За него отвечает выпадающее меню Specify Transparency Dither Algorithm , по-русски - Алгоритм имитации прозрачности (рис. внизу). Можно сделать четыре выбора: No Transparency Dither — нет алгоритма, Diffusion Transparency Dither — диффузный алгоритм, Pattern Transparency Dither — алгоритм на основе узора и Noise Transparency Dither — алгоритм на основе шума. В режиме диффузного алгоритма становится активным ползунок Amount (Величина), позволяющий менять значение диффузии. Что применять на практике? В зависимости от цели и изображения. Я не пользуюсь этой опцией и всегда оставляю по умолчанию - No Transparency Dither.

Нажимаем Save - прозрачный GIF готов. Работа производилась в Adobe Illustrator версии CS4 (v.14), но все действия и клавиатурные сокращения актуальны и для более ранней версии CS3 (v. 13).

У вас есть одна или две иконки, которые вы бы хотели оживить с помощью анимации. С чего бы вы начали? Допустим, у вас есть файлы SVG, программы Illustrator CC и After Effects CC, но, решение ускользает от вас.

В этой статье я собираюсь продемонстрировать, как можно легко анимировать SVG-файл, включая подготовку SVG-файла в Illustrator и импорт в After Effects CC. Также объясню, как можно конвертировать его в Shape Layers и добавлять движения. И, наконец, поговорим об экспортировании и рендеринге.

Конечный результат работы.

Теперь давайте приступим к самой интересной части – научимся оживлять изображения.

Подготовка SVG-файла в Illustrator

Давайте начнем с открытия вашего SVG-файла в Adobe Illustrator CC. Я буду анимировать маленькую автомобильную иконку, которая доступна бесплатно на Week Of Icons.

После открытия файла нам нужно разгруппировать и разделить все объекты на слои. Вы можете сделать это вручную или использовать Release to Layers (Sequence) для ускорения процесса. Прежде чем импортировать файл в After Effects, нам нужно сохранить его в формате файла Illustrator.

Импорт и организация файла в After Effects CC

Теперь все готово для импорта в After Effects CC. Давайте используем сочетание клавиш Ctrl+I (Windows) илиCommand+I (Mac) , чтобы загрузить диалоговое окно Import File , или перейдите к File > Import > File… Там же выберите подготовленный нами файл Illustrator CC и нажмите Import. Должно появиться небольшое диалоговое окно с названием выбранного файла. Выберите Composition из выпадающего списка под названием Import Kind .

На панели Timeline Panel мы увидим новую композицию. Дважды кликаем на нее. Теперь мы должны увидеть слои Illustrator CC с оранжевыми значками слева от названий.

Прежде чем приступить к делу, мы должны преобразовать все эти слои в Shape Layers . Нам нужно выделить их все с помощью Ctrl+A/Command+A , или вручную с помощью Shift + Left Mouse . После этого щелкните правой кнопкой мыши на слой и выберите Create > Create Shapes from Vector Layer .

Теперь, когда новые слои выделены, перетащите их на верхнюю часть панели над слоями Illustrator CC, а затем удалите слои Illustrator CC, чтобы они не мешали.

Хотя в этом нет необходимости, важно, чтобы мы дали каждому слою соответствующее имя и/или обозначили его цветом. Это позволит нам работать более эффективно, поскольку мы будем сосредоточены на ключевых кадрах. В приведенном ниже примере цвета надписей более или менее соответствуют заливке соответствующих им слоев.

Для настройки параметров используйте сочетание клавиш Ctrl+K/Command+K или Composition > Composition Settings… Из Composition Settings нам нужно выбрать ширину, высоту, частоту кадров и длительность (Width, Height, Frame Rate, и Duration). Для этого проекта я выбрал 60 кадров в секунду, чтобы анимация была плавной.

На данный момент кажется, что все готово к работе, но есть еще одна вещь, которую нужно сделать. Нам нужно сгруппировать определенные слои вместе, чтобы их движения были синхронизированы с основным слоем, который мы можем контролировать. Этот метод называется Parenting .

В нашем примере я назначил менее значимые слои (дочерние слои), такие как лобовое стекло, детали кузова, дерево и веревки первичному слою кузова (родительскому слою). Это позволило мне контролировать положение и вращение всего автомобиля (за исключением колес) с помощью родительского слоя.

Создание анимации

Я хотел, чтобы машина наехала на камень и немного зависла в воздухе. Также я хотел, чтобы елка двигалась вверх-вниз, и открылся багажник. Я начал с создания камня, машины и колес. Затем пришло время преодолеть самое большое препятствие – наложить действие на елку. Закончив это, я занялся мелкими деталями, такими как багажник и веревки.

Первым делом нужно было сделать элемент или слой в виде камня, но вместо того чтобы вернуться в Illustrator CC для добавления другого слоя, я просто использовал инструмент Pen Tool в After Effects CC. Это позволило мне быстро спроектировать маленький камень.

Багажник был относительно простой задачей. Я установил его сзади машины и сделал опорную точку в нижней левой вершине. Используя Pick Whip , я назначил его родительскому слою кузова. Предпоследним шагом было придание эффекта вращения, который в свою очередь сделал момент подпрыгивания машины более реалистичным.Bodymovin в сочетании с мобильной библиотекой Lottie .

P.S. вы можете найти мои файлы Illustrator CC и After Effects CC.

Набор иконок доступен для скачивания бесплатно на .