Adobe illustrator как сделать анимацию. Гайд: как создать SVG анимацию с помощью After Effects CC

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

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

Создайте баннер, на котором будет только текст.

1. Сгруппируйте символы командой Object › Group (Объект › Группировать).
2. Следующая задача - сделать из символов шрифта контурные объекты, иначе не получится корректное формирование слоев. Для этого выделите группу и выберите Type › Create outlines (Шрифт › Трассировка).
3. После этого откройте меню палитры Layers (Слои), щелкнув на кнопке в виде стрелки на палитре (рис. 8.11).

Рис. 8.11 . Меню палитры Layers

Нас в этом меню интересует команда Release to Layer (Sequence) (Преобразовать в слои (Последовательно)), которая переводит каждый отдельный объект на новый слой. Обратите внимание, что при применении команды должна быть выделена именно группа Group , а не слой Layer 1 .

То, как должна выглядеть палитра Layers (Слои) после выполнения Release to Layer (Sequence) (Преобразовать в слои (Последовательно)), показано на рис. 8.12.

Рис. 8.12 . Палитра Layers после выполнения Release to Layer (Sequence)

На этом подготовка закончена, можно сохранять при помощи Save for Web (Сохранить для Web) в SWF. SWF - это основной формат графики, основанной на Flash-технологиях. Точнее будет сказать, что это и есть Flash-формат (рис. 8.13).

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

Конечно, в Adobe Illustrator не реализовано и десятой части возможностей Flash, ведь программа предназначена не для этого. Тем не менее, в ней вы сможете сделать или статичную картинку или простую анимацию.

Рис. 8.13 . Настройки оптимизации для формата SWF

Существуют следующие настройки.

• Read Only (Только чтение). Если вы установите флажок, то файл будет записан таким образом, что его уже нельзя будет открыть для редактирования в какой-либо программе. Это, с одной стороны, уменьшает размер файлов, а с другой, защищает ваши авторские права.
• Настройка, обозначенная 1. Параметр, задающий тип сохранения, - изображение или анимация.
• Если вы выберете вариант AI File to SWF File (Файл Illustrator в файл SWF), изображение будет сохранено в виде статичной картинки, полностью повторяющей то, что вы видите на экране при работе в Illustrator.
• Layers to SWF Frames (Слои в SWF-фреймы) позволяет сделать анимацию на основе имеющихся слоев, которые будут представлены как кадры. Нам нужно выбрать именно этот вариант.
• Curve Quality (Качество кривых). Точность повторения кривыми файла кривых исходного изображения. При уменьшении этого параметра значительно снижается качество, особенно в области мелких деталей, но зато уменьшается размер файла. Для нашего случая оптимально значение "7".
• Frame Rate (Задержка фрейма). Частота смены кадров и, как следствие, скорость анимации. Чтобы эффект был правильным, выставьте не более 4 кадров в секунду.
• Loop (Повторять). Проигрывать анимацию многократно. Подходит для анимации, для которой важен повторяющийся цикл. Баннер относится именно к такому типу.

Формат файла 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.

У вас есть одна или две иконки, которые вы бы хотели оживить с помощью анимации. С чего бы вы начали? Допустим, у вас есть файлы 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.

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

Adobe Illustrator and After Effects
Импорт и простая анимация

Ресурсы : Adobe Illustrator CC
Adobe After Effects CC

Начнем изучение с рисования в Illustrator.

Рисуем
1) Нарисуем в качестве фона Прямоугольник желтого цвета

Рисунок 1 - Rectangle

2) Нарисуем Круг и зальём градиентом
Поработаем немного над кругом:
- удалим нижнюю точку на контуре, получим дугу;
- проведем прямую линию, закрыв низ дуги, получим полукруг

Рисунок 2 - 1) draw circle; 2) gradient; 3) delete point

3) Рисуем Прямоугольник и делаем его копию
- один прямоугольник серый;
- другой прямоугольник тёмно-серый
4) Рисуем Треугольник из звездочки установив число лучей - 3

Рисунок 3 - 1) rect light; 2) rect dark; 3) triangle

5) Рисуем кота с помощью Pen и простых фигур

Рисунок 4 - 1) head; 2) neck; 3) body; 4) leg; 5) tail

А теперь самый ГЛАВНЫЙ момент
Распределим картинки по слоям (то что будет анимировано - на отдельный слой) вот так:

Рисунок 5 - all pics (red mark important layers)

Всё, теперь сохраняем.
Посмотрим настройки сохранения

Рисунок 6 - Save

А теперь следующий этап. Закрываем Adobe Illustrator и открываем After Effects.

Импорт в After Effects
File - Import - File - выбираем наш сохраненный файл Illustrator.
Выберем , чтоб импортировать слои из Illustrator, если поставим footage, то получим картинку с объединенными слоями, а нам этого не нужно.

Рисунок 7 - Import As Composition

Всё, импортировали.
А теперь посмотрим, что у нас есть. Двойной щелчок по композиции , что б открылось и мы увидели слои (если все правильно сделали, то будет несколько слоев). Получим такое, см. рисунок

Рисунок 8 - Open Composition

А теперь то, для чего мы тут сегодня собрались - Анимация.

Анимация в After Effects
Установим точку вращения у стрелки вверху ее с помощью Pan Behind Tool (быстрая клавиша - Y). Просто берем точку и перемещаем туда куда требуется. В результате это будет выглядит так..

Рисунок 9 - Pan tool and Layers

Ну всё, теперь переходим к слоям для анимации.
Нам потребуется слой Arrow и Head_cat.
Начнем с arrow.
Раскроем список, найдем и нажмем на часы. Так мы поставили первую точку на нулевой секунде. Всего анимация будет длиться 2 секунды.
Итак, вот такие настройки надо сделать (всего поставим 3 точки)

А теперь анимируем голову кота.
Раскроем head_cat и найдем Position .
Тут будет 4 точки.
Изменять будет только последнюю координату не трогая остальные.

Рисунок 11 - Position head

Итак, принцип анимации был такой. Стрелка качается из стороны в сторону, как только приближается к котенку, он втягивает голову в себя, задерживается в этом положении немного, а потом возвращает ее на место.

Заключительный этап

Production
Надо создать готовый продукт из своего произведения.
Идем в меню - Add to Render Queue
Откроется панель Render и в Output Module (два щелчка) выберем формат выхода. Я взяла *.mov

Рисунок 12 - Render

Нажимаем на кнопку RENDER и получаем результат (только не забудьте указать путь).
На этом всё.

Всем привет! Сегодня попробую сделать описание возможностей программы Adobe Illustrator , сравнивая ее с возможностями флеша. Это будет не глобальный разбор программы по косточкам, а скорее описание некоторых интересных фишек, которые я открыла для себя в этой программе. Информацию собирала по кусочкам по мере изучения, чтобы выложить все в одном посте. Сразу признаюсь, что я не супер-опытный пользователь иллюстратора, лишь последние полгода использую его в рисовании (до этого все рисовала во флеше). Многие сетуют, что иллюстратор сложный, интуитивно не всегда понятный. В какой-то мере я согласна, что после флеша эта программа сложная. Но тут главное не бросать, а продолжать изучение. И через пару недель появляется мысль, как же я раньше без него обходился!

Итак, что мне понравилось в иллюстраторе, и что я нашла для себя такого, чего нет во флеше.
1. Начну с самого просто, но в то же время нужного. Попробуйте во флеше расположить объекты по кругу. Ранее был Deco Tool , но его убрали, видимо, посчитали ненужным. Решили, что ручками это делать веселее. В иллюстраторе эта функция есть: Effect – Distort&Transform – Transform .

Все быстро и просто, значения (расстояние между объектами, количество копий) задаем сами в настройках.

2. Зиг-заг

Еще боле простая, но тем не менее полезная штука. Казалось бы, мелочь, но во флеше надо рисовать вручную, в иллюстраторе это секундное дело.

3. Деформация объектов (Warp)

Ничего подобного во флеше нет. На примере внизу я показала только 2 способа деформации простых форм(Effect – Warp – Arc/Fish). На самом деле их 15 в последней версии программы.

4. Автоматическое округление углов (Round Corners)

Можно делать вручную: на графическом объекте при выделении в углу (во всех у глах) появляется белая точка и знак скругленной линии. Тянем мышкой, регулируем на свой вкус.

Но это касается только форм, с карандашной линией чуть по-другому – применяем эффект скругления (Effect – Stylize – Round Corners ). На выходе получаем тот же рузультат.

5. Roughen (огрубение)

Эффект применяется к простым формам (Effect – Distort&Transform – Roughen ). На выходе получаем что-то напоминающее низкополигональные 3д-модели. По-моему, круто:) И главное – очень просто.

6. Pucker&Bloat (Втягивание и Раздувание)
Пример на картинке ниже:

7. Расширение формы (Offset Path)

Во флеше есть функция Expand Fill (расширение заливки), с карандашными линиями вообще не работает, в отличии от иллюстратора.

8. Кисти (Art Brush, Pattern Brush, Scatter Brush)
Смотрим ни картинку ниже с примерами:

9.Texture Brush (Текстурные Кисти)

Также в иллюстраторе представлено много текстурных кистей, о которых я писала , и о том, как они появились в новой версии флеша - . Было замечено, что использование кистей в Adobe Animate страшно тормозит. Вот такие дела:(

10. Не уверена, что это прям хитрость, но хочу остановиться на кисточке с забавным названием Blob Brush . Находится на панели инструментов, очень приятная в использовании кисть. Имеет кучу настроек, нравится мне больше обычной. На словах тяжело объяснить о ее преимуществах, лучше один раз попробовать.

10.Split to Grid

Также полезная штука – функция Split to Grid (Object-Path-Split to Grid).Позволяет разрезать форму на равные отрезки. Что это нам напоминает? Верно - окна в многоэтажке. Как по мне, клевая штука для рисования, например, городских пейзажей;)

Eще один полезный инструмент, представленный в иллюстраторе, наверное, со времен его первого релиза. С его помощью можно создавать, например, текстуры дерева:

12. Move (правой – Transform - Move)

Смещение объекта на заданное расстояние. При желании можно сразу создать копию, которая будет размещаться на нужном расстоянии от выбранного объекта по горизонтали/или вертикали. В более ранней версии флеша был плагин, который выполнял данную функцию. К сожалению, не помню его названия.

В иллюстраторе очень удобно создавать бесшовные паттерны (Object-Pattern-Make ). Помню, как я неистово изощрялась во флеше с созданием . В иллюстраторе версии СС 2015 все автоматизировано, куча настроек поможет слепить паттерн в десятках вариаций, имея под рукой всего несколько графических элементов. В более ранних версиях программы все приходилось делать вручную, как во флеше до сих пор.

(На заметку – паттерн можно сделать векторным редактируемым объектом с помощью функции разобрать (Object – Expand Appearence ).

14. Object Mosaic (Мозаика)

Создание цветовой палитры на основе имеющейся картинки. Импортируем понравившуюся картинку в илл (Open), далее Object – Create Object Mosaic . В настройках указываем частоту деления в высоту и ширину.

И на выходе получаем:

15.Blend (Cмешивание)

Используется для создание градиентов. Можно создавать пошаговые переходы, как, например, на картинке. Не скажу, что использую часто, но может кому-то пригодится. Мне кажется, можно использовать в создании несложных фоновых картинок.

Также инструмент можно использовать для клонирования объектов. Размещаем два объекта на расстоянии друг от друга и применяем Blend Options, выбираем количество шагов (количество клонируемых объектов).

16. Инструмент Build Shape Tool. Очень удобная штука для работы с примитивами. Во флеше, как мне показалось, менее удобно.

Зажимая Alt и кликаем по выделенным сегментам – удаляем сегменты. Если просто протягиваем мышкой по нескольким выделенным области – соединям.

Дополнение – инструмент , который помогает автоматически отрезать, соединять и т.д. выделенные формы. Как по мне, он не сильно удобен, чаще пользуюсь Build Shape Tool.

(монтажные области)

18.Custom Tool Panel

Возможность самому создавать свою панель инструментов, отбросив ненужные, а выбрать только те, которые используешь.

Во флеше монтажные области,а именно сцены (Scene 1,2,3.. ) расположены отдельно и между ними нужно переключаться (Shift+F2). В иллюстраторе их все можно расположить перед глазами. Удобно, когда делаешь несколько вариантов одного и того же рисунка, чтобы все варианты были перед глазами для сравнения.

19.Изометрия с помощью Graphic Styles

И последнее - создание изометрии без использования в 1 клик (а если точнее, в 3 клика, потому что сторон у нас 3;) с помощью графических стилей (Graphic Styles ). Как это делается, распишу в следующий раз.

Общее с флеш у иллюстратора – возможность сохранять обьект в символ (symbol) и так же без проблем этот символ можно перенести во флеш (открыть во флеше.ai файл, путем Import – Import to stage ).
Символ в иллюстраторе имеет такие же свойства, как во флеше.
И в завершении напишу, что в иллюстраторе, по моему мнению, уступает флешу. Да-да, и такое есть. И это инструмент заливки (Paint Bucket ). Как не стараюсь привыкнуть к ней в илле, во флеше она удобней.
Если мои заметки стали для вас полезными или что-что от себя хотите дополнить – велкам в комментарии! Всем удачи;)