Тарифы МегаФон 

Как сделать анимацию в adobe illustrator. Tips&Tricks in Adobe illustrator: Трюки в иллюстраторе. Возможности создания графики в Иллюстраторе (в сравнении с Adobe Flash). Загрузить и подключить плагин

Всем привет! Сегодня попробую сделать описание возможностей программы 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 ). Как не стараюсь привыкнуть к ней в илле, во флеше она удобней.
Если мои заметки стали для вас полезными или что-что от себя хотите дополнить – велкам в комментарии! Всем удачи;)

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

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

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

  • Сгруппируйте символы командой Object › Group (Объект › Группировать).
  • Следующая задача - сделать из символов шрифта контурные объекты, иначе не получится корректное формирование слоев. Для этого выделите группу и выберите Type › Create outlines (Шрифт › Трассировка).
  • После этого откройте меню палитры 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) Приступим!

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

  • Создать правильную файловую структуру
  • Загрузить и подключить плагин
  • Нарисовать крутую контурную картинку в Adobe Illustrator
  • Конвертировать нашу картинку в Lazy Line Converter
  • Вставить полученый код в main.js
  • Добавить немного 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

  • Рисуем нашу контурную картинку в Illustrator (проще всего это сделать при помощи Pen Tool)
  • Необходимо чтобы контуры нашего рисунка не замыкались тк для нашего эффекта необходимы начало и конец
  • Не должно быть заливок
  • Максимальный размер файла — 1000×1000 px, 40kb
  • Сделаем кроп до границ объекта Object>Artboards>Fit To Artboards Bounds
  • Сохраняем в формате 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. при запуске на локальной машине возможна задержка старта анимации на несколько секунд.

    Сегодня у нас не совсем обычный урок Adobe Illustrator. Потому что в этот раз мы будем делать не статичную картинку, а самую настоящую анимацию. Представьте себе, оказывается с помощью Adobe Illustrator можно ещё и мультики рисовать:)

    А потребуется нам для этого всего ничего. Грамотная организация слоёв и экспорт конечной работы в формат swf, где каждый слой преобразуется в кадр анимации. В сегодняшнем уроке мы нарисуем анимацию обратного отсчёта в стиле ретро кинофильма. На выходе должен получится флеш ролик с этим самым обратным отсчётом.

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

    Когда все запчасти нашего мультика готовы, можно приступать к созданию самой анимации. Для удобства это лучше делать в новом документе. При этом слои у нас будут играть роль кадров анимации. И в самый первый слой как раз нужно скопировать кадр киноплёнки. Расположите его посередине рабочей области.


    Теперь создайте второй слой и скопируйте в него кадр киноплёнки, в котором отверстия по краям сделаны со сдвигом. Его тоже нужно расположить по центру.


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


    Подобным образом нам нужно накопировать 12 слоёв с кадрами киноплёнки, задающими её движение.


    Вот теперь у нас целая куча слоёв и все они видны. В том смысле, что верхние слои загораживают нижние, что не совсем удобно для работы. Поэтому можно выключить какие-то слои, нажав на иконку с глазиком слева от названия слоя. Чтобы выключить или включить сразу все слои, держите зажатой клавишу Alt, когда нажимаете на иконку глазика. Включая и выключая слои, вы можете видеть именно то, что расположено в определённом кадре нашей будущей анимации. И сейчас, чтобы нам добавить к движению плёнки лёгкое дрожание, нужно посдвигать полученные кадры чуть-чуть в разные стороны. Для этого включайте только тот слой, с которым собираетесь работать в данный момент, а затем сдвигайте кадр на пару пикселей в любую сторону.


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


    Если снять с круга выделение, то он будет выглядеть как единое целое. Именно это нам и нужно.


    Но так как он состоит из отдельных секторов, то можно, изменяя их цвет, очень быстро и легко создать анимацию. Для этого скопируйте этот круг во второй слой и сделайте первый сектор более светлым. Вы помните, что плёнка у нас дрожит во время движения, поэтому совсем не обязательно ставить круг точно в центр кадра. Располагайте его на глаз.


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


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


    Затем по очереди включаем следующие слои и копируем туда эту же текстуру. Чтобы она выглядела по-разному на каждом кадре, просто поворачивайте её на угол 90 градусов. Как вы уже догадались, нам нужно добавить текстуру во все 12 кадров.


    Если вам уже порядком надоело копировать, то могу вас обрадовать – осталось совсем немного. Самое сложное уже позади. Осталось добавить вертикальные царапины, и почти всё. Для этого опять же копируем исходную царапину и ставим её в произвольное место в несколько слоёв. В моём случае царапины появляются всего в двух слоях.


    Теперь, когда готов основной цикл с анимацией плёнки, осталось добавить цифры. Так как отсчёт у нас идёт с 3 до 1 плюс ещё слово Go!!!, то нам нужно ещё больше слоёв. Не 12, а целых 48. Для этого нужно сделать ещё три копии уже готовых слоёв с анимацией плёнки.


    А дальше всё просто. Включаем самый первый слой и ставим туда цифру три.


    Затем нужно копировать эту цифру в следующие слои до тех пор, пока не закончится анимация круга. Когда вы дойдёте до следующей копии слоёв, где круг опять будет закрашен полностью, нужно ставить уже цифру два. Точно так же скопируйте в нужные слои цифру один. А когда вы дойдёте до заключительных слоёв, предназначенных для надписи Go!!!, то просто удаляйте круг, прежде чем скопировать надпись в нужный слой.


    На этом с анимацией всё. Главное тут - не запутаться. Можно давать слоям какие-нибудь удобные названия, но мне было как-то лень:) И ещё, когда вы закончите работу, обязательно включите обратно все слои, нажав на иконку глазика.


    В окошке с настройками экспорта обязательно установите Export As: AI Layers to SWF Frames. Именно эта опция превращает слои иллюстратора в кадры анимации. Далее нажмите кнопку Advanced.


    Откроются дополнительные настройки. Здесь нужно установить частоту кадров Frame Rate. У меня стоит 12 кадров в секунду. Галочка Looping отвечает за цикличность анимации. Благодаря ей ролик будет воспроизводиться по кругу. И опция Layer Order: Bottom Up воспроизводит слои иллюстратора снизу вверх в панели. Как раз именно так мы и строили нашу анимацию.


    На выходе получаем флеш ролик с нашей анимацией.

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

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

    Также последнее время всё чаще для создания анимации применяется HTML5 и CSS3. Данный код поддерживается современными браузерами и не требует использования флеш плеера.

    Роман aka dacascas специально для блога Записки микростокового иллюстратора


    Подпишитесь на нашу рассылку, чтобы не пропустить ничего нового:

    Оптимизация 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. Готовая анимация