Прозрачный 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).

Теперь несколько усложним задачу - изготовим анимированный 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 (Повторять). Проигрывать анимацию многократно. Подходит для анимации, для которой важен повторяющийся цикл. Баннер относится именно к такому типу.

В последнее время стала очень популярна разного рода анимация 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.

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

Привет. Сегодня на рассмотрении простая анимация в 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 точки)

Second	0	1	2
	+66	- 70	+66

Вот так это будет выглядеть:

Рисунок 10 - Rotation arrow

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

Second	0.1	0.17	1.12	2.0
Position	689.3	729.3	729.3	689.3

Смотрим на картинку.

Рисунок 11 - Position head

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

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

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

Рисунок 12 - Render

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