Всім привіт! Сьогодні спробую зробити опис можливостей програми 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. Не впевнена, що це пряма хитрість, але хочу зупинитися на пензлику із забавною назвою BlobBrush. Знаходиться на панелі інструментів, дуже приємна у використанні пензель. Має купу налаштувань, подобається мені більше за звичайну. На словах важко пояснити її переваги, краще один раз спробувати.

10.Split to Grid

Також корисна штука – функція Split to Grid (Object-Path-Split to Grid). Дозволяє розрізати форму на рівні відрізки. Що нам це нагадує? Правильно – вікна у багатоповерхівці. Як на мене, кльова штука для малювання, наприклад, міських пейзажів;)

Ще один корисний інструмент, представлений в ілюстраторі, мабуть з часів його першого релізу. З його допомогою можна створювати, наприклад, текстури дерева:

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

Усунення об'єкта на задану відстань. При бажанні можна відразу створити копію, яка буде розміщуватися на потрібній відстані від вибраного об'єкта по горизонталі/вертикалі. У більш ранній версії флешу був плагін, який виконував цю функцію. На жаль, не пам'ятаю його назви.

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

(На замітку – патерн можна зробити векторним редагованим об'єктом за допомогою функції розібрати ( Object – Expand Appearence).

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

створіння колірної палітрина основі наявної картинки. Імпортуємо картинку, що сподобалася, в ілл (Open), далі Object – Create Object Mosaic. У налаштуваннях вказуємо частоту поділу у висоту та ширину.

І на виході отримуємо:

15.Blend (Змішування)

Використовується для створення градієнтів. Можна створювати покрокові переходи, як, наприклад, на зображенні. Не скажу, що використовую часто, але може комусь знадобиться. Мені здається, можна використовувати для створення нескладних фонових картинок.

Також можна використовувати інструмент для клонування об'єктів. Розташовуємо два об'єкти на відстані один від одного і застосовуємо Blend Options, вибираємо кількість кроків (кількість об'єктів, що клонуються).

16. Інструмент Build Shape Tool.Дуже зручна штука для роботи із примітивами. У флеші, як мені здалося, менш зручно.

Затискаючи Alt та клацаємо по виділених сегментах – видаляємо сегменти. Якщо просто простягаємо мишкою по кількох виділених ділянках – з'єднанням.

Додаток – інструмент, який допомагає автоматично відрізати, з'єднувати тощо. виділені форми. Як на мене, він не дуже зручний, частіше користуюсь BuildShapeTool.

(монтажні області)

18.Custom Tool Panel

Можливість самому створювати свою панель інструментів, відкинувши непотрібні, а вибрати ті, які використовуєш.

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

19.Ізометрія за допомогою Graphic Styles

І останнє - створення ізометрії без використання в 1 клік (а якщо точніше, в 3 кліки, тому що сторін у нас 3;) за допомогою графічних стилів ( Graphic Styles). Як це робиться, розпишу наступного разу.

Спільне з флеш у ілюстратора – можливість зберігати об'єкт у символ (symbol) і так само без проблем цей символ можна перенести у флеш (відкрити у флеші.ai файл, шляхом Import – Import до stage).
Символ в ілюстраторі має такі ж властивості, як у флеші.
І на завершення напишу, що в ілюстраторі, на мою думку, поступається флешем. Так-так, і таке є. І це інструмент заливання ( Paint Bucket). Як не намагаюся звикнути до неї в іллі, у флеші вона зручніша.
Якщо мої нотатки стали для вас корисними або щось від себе хочете доповнити – велкам у коментарі! Всім удачі;)

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) ноги; 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.
Тут буде чотири точки.
Змінюватиме лише останню координату не чіпаючи інші.

Малюнок 11 - Position head

Отже, принцип анімації був такий. Стрілка гойдається з боку в бік, як тільки наближається до кошеня, він втягує голову в себе, затримується в цьому положенні небагато, а потім повертає її на місце.

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

Production
Потрібно створити готовий продукт зі свого твору.
Ідемо в меню - Add to Render Queue
Відкриється панель Render і в Output Module (два клацання) виберемо формат виходу. Я взяла *.mov

Малюнок 12 - Render

Натискаємо на кнопку RENDER та отримуємо результат (тільки не забудьте вказати шлях).
На цьому все.

У вас є одна або дві іконки, які ви хотіли б оживити за допомогою анімації. З чого ви почали б? Допустимо, у вас є файли 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. Тому що цього разу ми будемо робити не статичну картинку, а справжнісіньку анімацію. Уявіть собі, виявляється, за допомогою Adobe Illustrator можна ще й мультики малювати:)

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

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

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

Тепер ви бачите, що просту анімацію робити в 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). Відкрийте меню панелі AnimationMake 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. Готова анімація