Як зробити анімацію в ілюстраторі. Tips&Tricks in Adobe illustrator: Трюки в ілюстраторі. Можливості створення графіки в Ілюстраторі (порівняно з Adobe Flash). Підготовка файлу SVG в Illustrator
Оптимізація Web-графіки
Графічна інформаціяпередається набагато повільніше за текстову, а час завантаження зображень пропорційно розміру їх графічних файлів. Тому швидке завантаження Web-сторінок передбачає невеликий розмір впроваджених у них графічних зображеньщо досягається за рахунок їх оптимізації. Під оптимізацією зображення розуміють його перетворення, що забезпечує мінімальний розмір файлу при збереженні необхідного в даному випадку якості зображення, що досягається в першу чергу шляхом зменшення кількості кольорів у графічних зображеннях, використання стислих і спеціальних форматів файлів та оптимізації параметрів стиснення окремих фрагментів зображень.
Illustrator має вбудовані інструменти оптимізації зображень, що забезпечують швидке та ефективне проведення процесу оптимізації завдяки різним методам попереднього перегляду. Попередній перегляд дає досить точне уявлення про те, як виглядатиме оптимізоване зображення в режимі реального часу, що допомагає оцінити результат оптимізації та вдало підібрати потрібні налаштування. А оптимізувати можна як зображення, створені безпосередньо у програмі Illustrator, так і інші, наприклад, фотографії, які передбачається розмістити на Web-сайті.
Параметри оптимізації задаються у вікні Save for Web (Збереження для Web), яке викликається однойменною командою з меню File (Файл). Програма пропонує використовувати один із чотирьох режимів попереднього перегляду, але для оцінки якості оптимізації найкраще підходять два:
- 2-Up (два варіанти) ■ одночасний перегляд оригіналу та оптимізованого зображення відповідно до вказаних налаштувань (рис. 1);
- 4-Up (чотири варіанти) в цьому режимі область перегляду ділиться на чотири вікна (мал. 2) для відображення вихідного зображення і трьох версій оптимізованого: перша версія створюється на основі встановлених значень оптимізації, а дві інші є варіантами поточних налаштувань оптимізації.
Обидва режими дозволяють суттєво економити час на пошуку кращого варіанта оптимізації, тому що позбавляють необхідності збереження зображень з різними налаштуваннями оптимізації та їх подальшого візуального порівняння. Крім того, є можливість оцінити не тільки якість оптимізованого зображення, але його розмір і час завантаження при різних варіантах з'єднання. Для порівняння найбільш зручний режим 4-Up (чотири варіанти), що дозволяє візуально оцінити вплив стиснення або зменшення палітри на якість зображення та його розмір і зрештою визначити найкращі параметри оптимізації.
Illustrator дозволяє оптимізувати Web-графіку у форматах не тільки GIF, JPG, PNG-8 та PNG-24, а й у SWF та SVG. Індексовані зображення, що мають невелику кількість кольорів, зберігаються у форматі GIF. Для збереження повнокольорових і напівтонових зображень фотографій і кольоронасиченої графіки, наприклад градієнтних заливок, використовується формат JPG. Для повнокольорових зображень з прозорими ділянками застосовується формат PNG, який дозволяє зберігати як індексовані, так і повнокольорові зображення, при цьому у форматі PNG-8 максимально можлива кількість кольорів оптимізованого зображення дорівнює 256, а у форматі PNG-24 зображення можуть бути мільйони кольорів, і тому він схожий формат JPEG. Відмінність PNG-24 від JPEG полягає в тому, що метод стиснення, що використовується для оптимізації зображень у форматі PNG-24, не призводить до втрати якості, але внаслідок цього збільшується розмір файлу. Формати SVG та SWF поєднують графічні дані, текст та інтерактивні компоненти і також можуть бути оптимізовані.
Розглянемо конкретний прикладоптимізація зображення. Допустимо, у програмі Illustrator була розроблена емблема сайту (рис. 3), спочатку збережена у форматі AI. Спроба відразу оптимізувати її для Web ні до чого хорошого не приведе, тому що в цьому випадку відбудеться автоматичне обрізання зображення, при якому не враховуватиметься справжнє положення отриманого в результаті деформації напису (рис. 4 і 5).
Тому спробуємо експортувати емблему у формат PSD командою File=>Export (Файл=>Експорт) розмір створеного зображення становитиме 143 Кбайт. Відкрийте отриманий PSD-файл і скористайтеся командою File=>Save for Web (Файл=>Збереження для Web). З урахуванням обмеженої кількості задіяних у зображенні кольорів у цьому випадку оптимальний формат GIF, з конкретними налаштуваннями якого і потрібно визначитися. Поекспериментувавши з налаштуваннями, можна переконатися, що Краща якістьдає обраний програмою за промовчанням алгоритм стиснення Selective (Селективний). Що ж до згладжування, то, враховуючи наявність градієнтної заливки, краще вибрати алгоритм із генерацією шуму Noise (рис. 6). Розмір отриманого в результаті оптимізації файлу становитиме 6,729 Кбайт (рис. 7), при цьому прозорість фону буде збережена, в чому нескладно переконатися, зберігши зображення у форматі GIF разом із HTML-файлом (рис. 8). У результаті прикладі були отримані файли emblem.html і emblem.gif в папці Primer1 .
Незамінним специфічним елементом дизайну будь-яких Web-сторінок є графічні елементи керування кнопки. Уявити сторінку без них просто неможливо. Малювання кнопок сьогодні стало особливим жанром, а Illustrator дозволяє створювати найхитріші варіанти. Наприклад, кнопки, оформлені як сіткові об'єкти та (або) з накладенням масок, виглядають набагато ефектніше звичайних.
Розглянемо варіант створення круглої опуклої кнопки у програмі Illustrator. Намалюйте зафарбований довільним кольором векторний об'єкт у вигляді кола (рис. 9) і перетворіть його на сітковий командою Object=>Create Gradient Mesh (Об'єкт=>Створити градієнтну сітку), вказавши чотири рядки та чотири стовпці, а у списку Appearance (Вид) вибравши варіант To Center Highlight (Підсвічування) дорівнює 60 (рис. 10). Виберіть інструмент Direct Selection і клацніть у лівому верхньому кутку об'єкта, виділивши вузлові точки (рис. 11). Змініть колір відповідного осередку на білий, вибравши його на панелі Swatches (рис. 12).
Візьміть інструмент Ellipse (Еліпс), встановіть маркер миші в центр створеного перед цим кола і, утримуючи клавіші Alt і Shift, розтягніть нове коло поверх старої так, щоб воно виявилося більше старим на 1-2 пікселі з усіх боків. Зробіть у неї чорну межу (Stroke) шириною в 1-2 пікселі і залийте радіальним градієнтом у напрямку червоного до білого (рис. 13). Перетягніть створений векторний об'єкт на 1-2 пікселі вправо та вниз, потім, не знімаючи виділення, клацніть на ньому правою кнопкою миші та з контекстного менювиберіть команду Arrange=>Send To Back (Упорядкувати=>Відправити назад). У результаті вийде заготівля для кнопки, представлена на рис. 14.
Як правило, на будь-якій Web-сторінці є кілька однотипних кнопок, що відрізняються, наприклад, лише напрямом намальованих на них стрілок, що означають напрямок переміщення сайтом. Розглянемо найпростіший випадок наявності двох кнопок, одна з яких, зі стрілкою вниз, означатиме переміщення на наступну сторінку, а кнопка зі стрілкою вгору на попередню. Як заготовку стрілки візьмемо звичайний трикутник, намальований інструментом Polygon (Багатокутник), зафарбований чорним кольором і для більшого ефекту також оформлений як сітковий об'єкт. Перемістимо стрілку на кнопку та відрегулюємо положення всіх об'єктів один щодо одного, скориставшись відповідними кнопками палітри Align (Вирівнювання). Перша з отриманих клавіш представлена на рис. 15. Зробимо копію шару з кнопкою, вибравши команду Duplicate Layer Layers, в результаті отримаємо два ідентичні шари. Потім на копії шару виділимо стрілку і повернемо її на 180 °, вибравши з контекстного меню команду Transform => Rotate | Трансформація => Поворот. Отримаємо таку ж кнопку, як показано на рис. 16. Зверніть увагу, що набагато зручніше всі однотипні кнопки одного проекту зберігати в одному файлі на різних шарах, що в цьому випадку продемонстровано.
Тепер необхідно зберегти оптимізовані варіанти кожної кнопки. Спочатку зробіть невидимим нижній шар - у цьому випадку буде збережена кнопка на верхньому шарі. Виберіть команду File=>Save for Web (Файл=>Зберегти для Web), налаштуйте параметри оптимізації кнопки, наприклад, як показано на рис. 17, натисніть кнопку Save (Зберегти) та введіть ім'я файлу. Збережена в результаті кнопка представлена на рис. 18. Тепер поверніть видимість нижньому шару, а верхній зробіть невидимим і аналогічно збережіть другу кнопку, вказавши для неї інше ім'я. Результат подано на рис. 19.
Тепер залишилося переконатися, що кнопки цілком прийнятно виглядають на Web-сторінці і розмістити їх на довільній сторінці (рис. 20). У результаті в даному прикладі були отримані файл Primer2.html і два графічні зображення в папці images (папка Primer2).
За бажання в процесі оптимізації кнопку нескладно перетворити на слайс. У цьому випадку після вибору команди File=>Save for Web (Файл=>Зберегти для Web) та налаштування параметрів оптимізації слід вибрати з палітри інструментів інструмент Slice Select (Виділення слайсу) і двічі клацнути на зображення, яке в результаті автоматично перетвориться на слайс з порядковим номером 1 (рис. 21). Повторне подвійне клацання мишею призведе до відкриття вікна Slice Options (Опції слайсу), в якому необхідно буде вказати посилання та за бажання змінити ім'я слайсу (мал. 22), а потім зберегти оптимізоване зображення. Результатом у разі будуть файли Primer3.html (рис. 23) і Primer3.gif (папка Primer3).
Одним із способів пожвавлення сторінки є впровадження елементів дизайну, які змінюють свій зовнішній вигляд(або стан) в залежності від поведінки миші або, рідше, у разі виникнення будь-яких інших ситуацій: масштабування, скролінгу, завантаження, виникнення помилок та ін.
Серед таких елементів найбільшу популярність отримали rollovers (від англ. roll over - перекочуватися, перевертатися) - елементи, що змінюють вигляд під впливом миші. Прикладами типових роловерів є анімовані кнопки. Роловери часто використовуються і при створенні інших навігаційних елементів сайту. Насправді будь-який роловер є не одне, а кілька (до чотирьох) зображень, кожне з яких відповідає конкретній події. Основними подіями прийнято вважати такі: Normal звичайний стан, Over наведення курсору миші на елемент і Down натискання лівої кнопки миші при наведенні на неї курсора. Теоретично можуть бути задіяні такі події, як Click відпускання лівої кнопки миші після натискання, Up після відпускання кнопки, Out при виході за межі активної зони. Однак на практиці частіше обмежуються зміною елемента лише на перші три чи навіть дві події.
Класичні роловериУ класичному розумінні роловер є серією графічних зображень у форматі GIF і відповідний їм HTML-код, завдяки якому в залежності від поведінки миші одне зображення змінює інше у вікні браузера.
Програма Illustrator не призначена для безпосереднього створення роловерів у класичному розумінні, однак вона може допомогти при розробці вихідних для них елементів. Ідея в цьому випадку полягає в тому, що потрібно створити шар із зображенням, що відповідає першій події. Потім зробити копію шару та перетворити зображення так, щоб воно відповідало другій події, і т.д. Отримане в результаті багатошарове зображення експортується в PSD-файл із збереженням шарів, на основі якого створюється роловер у програмі Image Ready. Плюсом застосування програми Illustrator, як і в багатьох інших випадках, є низка її цікавих можливостей, недоступних в інших програмних засобах, разом із зручністю трансформації векторної графіки.
Спробуємо створити роловер у вигляді напису, який змінює колір залежно від поведінки миші. Відкрийте Illustrator і створіть форму у вигляді прямокутника, закругленого і залитого чорним кольором (мал. 24), зробіть його копію і розташуйте її у вільній частині екрана. Перетворіть першу копію прямокутника на сітковий об'єкт з підсвічуванням у центрі (команда Object=>Create Gradient Mesh Об'єкт=>Створити градієнтну сітку), вказавши чотири рядки та десять стовпців (рис. 25). Активізуйте другу копію прямокутника та налаштуйте для неї градієнтну заливку приблизно так, як показано на рис. 26. Накладіть градієнтний об'єкт поверх сіткового, зменшіть непрозорість градієнтного об'єкта приблизно до 80%, а розмір приблизно на 1 піксел, щоб у результаті зимитувати ефект опуклості. А потім поверх об'єктів надрукуйте напис. У вихідному вигляді нехай вона має білий колір, який буде відповідати стану Normal (рис. 27), а потім при зміні стану роловера колір напису буде змінюватися, наприклад, на зелений при наведенні на неї маркера миші (стан Over) і на блакитний при натисканні кнопки миші (стан Down).
Зверніть увагу на палітру Layers на даному етапі в ній є всього один-єдиний шар. Зробіть дві копії даного шару, застосувавши команду Duplicate Layer (Дублювати шар) з меню панелі Layers , на панелі стане три шари (рис. 28). Потім у першій копії шару змініть колір напису на зелений, а в другій на блакитний (рис. 29). У результаті буде отримано необхідну заготівлю для роловера.
Експортуйте створене зображення у формат PSD зі збереженням шарів, скориставшись командою File=>Export (Файл=>Експорт) та вибравши колірну модель RGB(рис. 30). Відкрийте створений PSD-файл у програмі ImageReady (мал. 31 та 32). Створіть кадри на основі шарів, вибравши команду Make Frames From Layers (Створити кадри з шарів) у меню панелі Animation . Вікно Animation набуде вигляду як на рис. 33. При цьому на панелі Rollovers спочатку буде створено один-єдиний стан Normal.
Потім у вікні Animation виділіть кадр, що відповідає наведеному стану, при цьому на панелі Layers автоматично виділиться шар Layer 1 Copy (рис. 34). Перейдіть до панелі Rollovers і клацніть на кнопці Create Rollover state (Створити роловер-стан) рис. 35, що призведе до появи стану Over State на панелі Rollovers (рис. 36). Аналогічно створіть стан Down State. Активуйте стан Normal на панелі Rollovers та видаліть у палітрі Animation усі кадри, крім того, який повинен відповідати стану Normal . У результаті кожному стану ролловера на панелі Animation існуватиме лише один кадр (рис. 37, 38 і 39).
Мал. 38. Вигляд зображення, вікна Animation та палітр Layers та Rollovers для стану Over State
Перевірте результат, клацнувши кнопку Preview in Default Browser (Попередній перегляд у браузері) на панелі інструментів і перейшовши у вікно браузера (мал. 40). Після цього збережіть файл, застосувавши команду File=>Save Optimized (Файл=>Зберегти з оптимізацією) та вказавши варіант HTML and Images (*.html) . У результаті прикладі було отримано файл Primer4.html і серія графічних зображень в папці images.
Мал. 40. Вікно браузера з Rollover-елементом
SVG-роловериНабираючий популярності формат SVG (Scalable Vector Graphics) масштабована векторна графіка), створений на основі стандарту XML, також дозволяє отримувати різноманітні інтерактивні елементи, зокрема роловери, тільки на практиці це реалізується інакше. Варто зауважити, що створення інтерактивних SVG-роловерів, на відміну від класичних, коли відповідний HTML-код генерується повністю автоматично, вимагає знання JavaScript і розуміння основних принципів об'єктно-орієнтованого програмування.
Для роботи з SVG-об'єктами призначена спеціальна палітра SVG Interactivity, яку нескладно відкрити за допомогою команди Window=>SVG Interactivity (Вікно=>SVG інтерактивність) рис. 41.
Розглянемо даний варіант створення ролловера на прикладі інтерактивної кнопки, колір напису на якій змінюватиметься з чорного на синій при наведенні миші і знову перетворюватися на чорний при виході миші за межі активної зони.
Створіть прямокутну кнопку із округленими краями і підберіть для неї відповідну градієнтну заливку, наприклад, як показано на рис. 42. Налаштуйте прозорість кнопки на панелі Transparence (Прозорість) У цьому прикладі значення параметра Opacity (Непрозорість) встановлено на 50%. Зробіть копію кнопки, залийте її темно-зеленим кольором (мал. 43), а потім перетворіть її на сітковий об'єкт командою Object=>Create Gradient Mesh (Об'єкт=>Створити градієнтну сітку), вказавши чотири рядки та десять стовпців, а у списку Appearance (Вигляд) вибравши варіант To Center (До центру) і встановивши значення Highlight (Підсвічування) рівним 100. Зменшіть непрозорість шару з сіточним об'єктом приблизно так 40% (рис. 44). Розмістіть сітковий об'єкт поверх градієнта, і кнопка буде нагадувати представлену на рис. 45.
Мал. 44. Перетворення копії кнопки на сітковий об'єкт
Доповніть кнопку передбачуваного напису та відрегулюйте її положення, скориставшись відповідними кнопками палітри Align (Вирівнювання). Отримане в результаті зображення міститиме один шар з трьома накладеними один на одного об'єктами (рис. 46). Заплановані події будуть відноситися до текстового об'єкта, тому для зручності змініть його ім'я на Text, двічі клацнувши на об'єкті та ввівши нове ім'я. Аналогічно змініть ім'я шару з Layer 1 на Layer (рис. 47).
Обробка подій передбачає використання JavaScript-процедур, тому необхідно підключити файл із описом даних процедур. Він називається Events.js і зберігається на диску в папці Sample Files\Sample Art\SVG\SVG під час встановлення програми Adobe Illustrator. Для підключення файлу Events.js скористайтеся командою JavaScript Files SVG Interactivity (рис. 48). Далі потрібно натиснути кнопку Add (Додати) та знайти потрібний файл на жорсткому диску. Коли його ім'я з'явиться в полі URL (мал. 49), натисніть кнопку Done (Вийти).
Мал. 48. Вибір команди JavaScript Files
Після цього слід визначити реакцію події миші для об'єкта Text . Виділіть об'єкт Text, у полі Event (Подія) палітри SVG Interactivity виберіть подію onmouseover elemColor(evt, "Text", "#3333FF") - це означатиме, що при знаходженні миші над об'єктом Text його колір зміниться на синій (рис. 50 ). Для того, щоб після виходу миші за межі активної зони колір тексту змінився на чорний, потрібно створити ще одну подію onmouseout, виберіть її в полі Event (Подія) палітри SVG Interactivity. Потім у рядку дії введіть текст elemColor(evt, "Text", "#000000") - це призведе до повернення чорного кольору (рис. 51).
Мал. 51. Остаточний вигляд панелі SVG Interactivity для об'єкта Text
Збережіть створений роловер як SVG-файл командою File=>Save as (Файл=> Тип файлу формат SVG , а потім налаштувавши опції збереження SVG-файлу так, як показано на рис. 52. Після збереження буде отримано всього один-єдиний файл з розширенням SVG, а не два, як у випадку класичного роловера, в даному випадку був отриманий файл Primer5.svg (папка Primer5). описом JavaScript-процедур. Після цього можна перевірити працездатність ролловера - результат буде виглядати так, як показано на рис.
Формат 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 .
Будь-яка 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. Готова анімація
Всім привіт! Сьогодні спробую зробити опис можливостей програми 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). Дозволяє розрізати форму на рівні відрізки. Що нам це нагадує? Вірно - вікна в багатоповерхівці. Як на мене, кльова штука для малювання, наприклад, міських пейзажів;)
Ще один корисний інструмент, представлений в ілюстраторі, напевно, з часів його першого релізу. З його допомогою можна створювати, наприклад, текстури дерева:
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 і натискаємо на виділені сегменти – видаляємо сегменти. Якщо просто простягаємо мишкою по кількох виділених ділянках – з'єднанням.
Додаток – інструмент, який допомагає автоматично відрізати, з'єднувати тощо. виділені форми. Як на мене, він не дуже зручний, частіше користуюся 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). Як не намагаюся звикнути до неї в іллі, у флеші вона зручніша.
Якщо мої нотатки стали для вас корисними або щось від себе хочете доповнити – велкам у коментарі! Всім удачі;)
Останнім часом стала дуже популярна різноманітна анімація SVG (Scalable Vector Graphics) графіки на сайтах і додатках. Це пов'язано з тим, що все нові браузеривже підтримують цей формат. Ось інформація про підтримку браузерами SVG.
У цій статті розглянуто найпростіший приклад анімації вектора SVG за допомогою легкого Jquery плагіна Lazy Line Painter.
ВихідникДля виконання та повного розуміння даного завдання бажані базові знання HTML, CSS, Jquery, але не обов'язкові якщо вам просто хочеться анімувати SVG) Приступимо!
І так кроки, які нам потрібно виконати:
1. Створити правильну файлову структуру
З цим нам допоможе сервіс 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.
Ці два файли поміщаємо в папку js. І підключаємо їх до нашого index.html перед main.js наступним чином:
3. Намалювати круту картинку в Adobe Illustrator
Для прикладу можна скористатися іконками у вкладенні.
4. Конвертувати нашу картинку в Lazy Line Converter
Просто перетягни свою іконку у віконце, що на малюнку нижче.
Товщину, колір контуру та швидкість анімації можна буде змінити в самому коді, який з'явиться після конвертування!
5. Вставити отриманий код у main.js
Тепер просто вставляємо отриманий код у пустий файл main.js
Параметри:
strokeWidth - товщина контуру
strokeColor - колір контуру
Також можна змінювати швидкість малювання кожного вектора, змінюючи значення duration (за замовчуванням 600)
6. Додати трохи CSS до смаку
Видаляємо з index.html абзац
Hello world! Це 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 спеціально для блогу
Підпишіться на нашу розсилку, щоб не пропустити нічого нового:
