3.2.2. Веб графіка в Adobe Illustrator
Illustrator пропонує ряд інструментів для створення макетів для веб-сторінок або створення та оптимізації веб-графіки. Наприклад, використовуйте безпечні веб-кольори, враховуйте оптирисьний баланс якості зображення з розміром файлу, та вибирайте найкращий формат файлу, який підходить для вашої графіки. У веб-графіці можна користуватися фрагментами та мапами зображень, а також використовувати різноманітні засоби оптимізації та працювати з програмою Device Central, щоб забезпечити належне відображення ваших файлів у мережі.
Приймаючи рішення щодо веб-графіки, пам'ятайте наступне:
Використовуйте безпечні кольори Інтернету
Колір завжди є ключовим аспектом ілюстрації. Однак, ті кольори, які ви бачите на вашій монтажній області, не завжди будуть виглядати так само в браузері на іншій системі. Ви можете уникнути тремтіння (метод моделювання неіснуючих кольорів) та інших проблем з кольорами, притримуючись наступного під час створення веб-графіки. По-перше, завжди працюйте в режимі RGB. По-друге, використовуйте веб-безпечний колір.
Дотримуйтесь балансу між якістю та розміром файлу. Для розповсюдження зображень у Інтернеті важливо створювати файли з графікою рисого розміру. Веб-сервери пересилають та зберігають файли рисого розміру більш ефективно, а користувачі можуть завантажувати зображення швидше. Розмір і приблизний час завантаження веб-графіки можна переглянути в діалоговому вікні Зберегти для Інтернету та пристроїв.
Оберіть найкращий файловий формат для вашої графіки.Різні типи графіки потрібно зберігати в різних файлових форматах, щоб вони відображалися найкращим чином, та розмір файлу найкраще підходив для Інтернету. Додаткові відомості про формати файлів можна знайти в Параметри оптимізації веб-графіки.
Про режим перегляду у вигляді пікселів
У Illustrator CS5 додано атрибут вирівнювання за піксельною сіткою, щоб веб-дизайнери могли створювати чіткі ілюстрації без розмиття пікселів. Коли для об'єкта ввімкнено вирівнювання за піксельною сіткою, усі горизонтальні та вертикальні контури об'єкта вирівнюються за піксельною сіткою, утворюючи чіткі, нерозмиті обведення. Поки цей атрибут об'єкта ввімкнено, після будь-якого трансформування об'єкт знову буде вирівняно за піксельною сіткою. Щоб увімкнути цей атрибут, на панелі «Трансформування» виберіть параметр «Вирівняти за піксельною сіткою». У Illustrator CS5 також можна встановити параметр вирівнювання за піксельною сіткою для всього документа, при чому в документах для Інтернету цей параметр увімкнено за замовчуванням. Коли цей параметр увімкнено, усі нові створені об'єкти будуть автоматично вирівнюватись за піксельною сіткою.
Докладніше про це читайте в розділі Створення контурів, вирівняних за піксельною сіткою, для робочих процесів в Інтернеті.
Під час збереження ілюстрації в растровому форматі, наприклад JPEG, GIF або PNG, Illustrator встановлює значення дискретизації 72 ppi. Ви можете переглянути як об'єкти виглядатимуть після растеризації, обравши «Перегляд» — «Перегляд у вигляді пікселів». Це особливо зручно, коли вам потрібно точно управляти вставленням, розміром та згладжуванням об'єктів в растеризованих ілюстраціях.
Щоб зрозуміти як Illustrator поділяє об'єкти на пікселі, відкрийте файл, що містить векторні об'єкти, та оберіть «Перегляд», «Перегляд у вигляді пікселів» та збільшіть ілюстрацію, щоб побачити окремі пікселі. Положення пікселів визначається піксельною сіткою, яка ділить монтажну область із приростом в 1‑пункт (1/72 дюйма). Піксельну сітку можна побачити, збільшивши масштаб перегляду до 600%. Під час переміщення, додавання або трансформування об'єктів вони прив'язуються до піксельної сітки. Внаслідок цього зникає ефект згладжування на «прив'язаних» краях об'єкта (зазвичай лівий та верхній краї). Тепер зніміть виділення з команди «Перегляд» > «Прив'язка до пікселів», та перемістіть об'єкт. Тепер ви зможете розташувати об'єкт між лініями сітки. Зверніть увагу на те, як це впливає на згладжування об'єкту. Як ви можете побачити, невеликі коригування можу вплинути на растеризацію об'єкту.
(рис.118перегляд у вигляді пікселів вимкнений (зверху) порівняно з увімкненим (знизу))
Використання Adobe Device Central з Illustrator
Device Central дає можливість користувачам Illustrator попередньо переглянути, як будуть виглядати файли Illustrator на різних мобільних пристроях.
Наприклад, художник-графік може використовувати Illustrator для розробки «шпалер» для мобільних телефонів. Після створення файлу художник зможе легко протестувати його на різних телефонах. Потім він може провести коригування, таке, наприклад, як зміна файлу, щоб він добре виглядав на певних телефонах, або створення двох окремих файлів, що покривають ряд розмірів дисплеїв популярних телефонів.
Доступ до Illustrator з програми Adobe Device Central
Запустіть Device Central.
Натисніть «Файл» — «Новий документ» — в Illustrator.У Device Central з'являється панель «Створити документ» з правильними параметрами, щоб створити новий мобільний документ у виділеній програмі.
Внесіть потрібні зміни, наприклад виберіть версію програвача, розмір дисплея, версію Flash або тип вмісту.
Виконайте одну з таких дій:
Виділіть «Власний розмір» для параметру «Всі обрані пристрої» та додайте ширину та висоту (у пікселях).
Виберіть пристрій або кілька пристроїв зі списку «Набори пристроїв» або Доступні пристрої.
Якщо виділено кілька пристроїв, Device Central вибирає розмір для вас. Якщо ви хочете вибрати інший розмір, клацніть на іншому пристрої чи наборі пристроїв.
Натисніть «Створити».
Відкривається обрана програма з готовим для редагування новим мобільним документом.
Створення мобільного вмісту за допомогою Adobe Device Central та Illustrator
В Illustrator натисніть «Файл» — «Новий».
У профілі «Створити документ» виберіть «Мобільний» та «Пристрої».
Клацніть Device Central, щоб закрити діалогове вікно у Illustrator та відкрити Device Central.
Виберіть тип вмісту.
Наявний список пристроїв зліва оновлюється та показує пристрої, які підтримують обраний тип вмісту.
У Device Central виберіть пристрій, кілька пристроїв чи набір пристроїв.
На основі обраного(их) пристрою(їв) та типу вмісту Device Central пропонує для створення один чи кілька розмірів для монтажної області. Щоб створити один документ за один раз, виберіть запропонований розмір документа (чи виберіть розмір, котрий вказує користувач, для всіх обраних параметрів пристрою та введіть власні значення для ширини та висоти).
Натисніть «Створити».
У Illustrator відкривається порожній файл AI з вказаним розміром. Новий файл має такі параметри, встановлені за замовчуванням:
Колірний режим: RGB
Роздільна здатність растру: 72 ppi
Заповніть порожній файл AI вмістом у Illustrator.
Закінчивши, виберіть меню «Файл» — «Зберегти для Інтернету та пристроїв».
У діалоговому вікні «Зберегти для Інтернету та пристроїв» виберіть бажаний формат та змініть інші настройки експорту за бажанням.
Клацніть Device Central.
У закладці Емулятор Device Central буде відображатись тимчасовий файл з вказаними параметрами експорту. Щоб продовжити перевірку, двічі клацніть назву іншого пристрою у списку Набори пристроїв або Доступні пристрої.
Якщо після попереднього перегляду файлу у Device Central вам потрібно зробити зміни у файлі, поверніться до Illustrator.
У діалоговому вікні Illustrator «Зберегти для Інтернету та пристроїв» виконайте коригування, такі як вибір іншого формату чи якості для експорту.
Що перевірити файл знову з новими параметрами експорту, клацніть на Device Central.
Коли ви будете задоволені результатами, клацніть «Зберегти» у діалоговому вікні «Зберегти для Інтернету та пристроїв» програми Illustrator.
Поради щодо створення зображень Illustrator для мобільних пристроїв
Щоб оптимізувати графічний вміст для мобільних пристроїв, збережіть ілюстрацію, створену в Illustrator, в будь-якому SVG-форматі, включно з SVG‑t, що є спеціально розробленим для мобільних пристроїв.
Скористайтеся наведеними нижче порадами, аби зображення, створене в Illustrator, правильно відображалися на мобільних пристроях:
Створюючи вміст, користуйтеся стандартом SVG. Користуючись SVG для публікації векторної графіки на мобільних пристроях, ви забезпечуєте рисий розмір файлу, апаратну незалежність показу, чудове керування кольорами, змогу масштабувати, змогу редагувати текст (у вихідному коді). Також через те, що SVG ґрунтується на XML, ви можете впроваджувати у зображеннях взаємодію, таку як виділення, підказки інструментів, спецефекти, звук та анімацію.
З самого початку працюйте у кінцевих розмірах цільового мобільного пристрою. Хоча SVG уможливлює масштабування, робота з правильним розміром гарантуватиме, що кінцева графіка буде оптимізована за якістю й розміром для цільового пристрою(їв).
Встановіть колірний режим Illustrator у RGB. SVG візуалізується на пристроях із растровим відображенням RGB, наприклад на моніторах.
Аби зменшити розмір файлу, спробуйте зменшити число об'єктів (включно з групами) або зробити їх менш складними (з меншим числом точок). Використання меншого числа точок значно зменшує кількість текстової інформації, потрібної для опису художньої ілюстрації в SVG-файлі. Щоб зменшити число точок, виберіть «Об'єкт» > «Шлях» > «Спрощення» і спробуйте різні комбінації, щоб знайти рівновагу між якістю і числом точок.
Де можна, використовуйте символи. Символи визначають вектори, що описують об'єкт один раз, а не кілька разів. Це корисно, якщо ілюстрація містить такі об'єкти, як кнопки чи фон, що використовуються повторно.
Створюючи анімаційну графіки, обмежуйте число об'єктів, що використовуються, і намагайтеся, де можливо, повторно використовувати об'єкти, аби зменшити розмір файлу. Застосовуйте анімацію до груп об'єктів, а не до окремих об'єктів, щоб уникнути повторення коду.
Зауважте використання SVGZ, стисненої gzip-версії SVG. Стиснення може значно зменшити розмір файлу залежно від вмісту. Зазвичай текст стискається сильно, але вміст у двійковому кодуванні, такий як вбудовані растри (файли JPEG, PNG або GIF) стискаються незначним чином. SVGZ-файли можна розпаковувати будь-якою програмою, що розпаковує файли, стиснуті gzip. Аби успішно використовувати SGVZ, перевірте, чи здатен цільовий мобільний пристрій розпаковувати gzip-файли.
Про графіку Flash
Формат файлу Flash (SWF) — це формати файлів на основі векторної графіки призначені для масштабування та компактної графіки для Інтернету. Оскільки цей формат файлу є векторним, ілюстрація зберігає свою якість зображення при будь-якій роздільній здатності та є ідеальною для створення кадрів анімації. У Illustrator ви можете створювати окремі кадри анімації на шарах, а потім експортувати шари із зображенням у окремі кадри для використання на вебсайті. Ви також можете задавати символи у файлі Illustrator для зменшення розміру анімації. Під час експорту кожен символ зазначається лише один раз у файлі SWF.
Зберегти ілюстрацію як SWF-файл можна за допомогою команди «Експорт» або Зберегти для Інтернету та пристроїв. Переваги кожної з команд:
Команда «Експорт» (SWF) Забезпечує високий рівень контролю за анімацією та бітовим стисненням.
Команда Зберегти для Інтернету та пристроїв забезпечує контроль над змішуванням SWF та растровими форматами у фрагментованому макеті. Ця команда пропонує менше параметрів для зображення, ніж команда «Експорт» (SWF), але застосовує останні параметри команди «Експорт»
Під час підготовки ілюстрації до збереження у вигляді SWF пам'ятайте про наступне:
Для збереження мінірисьно можливого розміру файлу під час використання символів краще застосовувати символи, що знаходяться на панелі символів, ніж зразки символів у ілюстрації.
Використання інструментів «Знебарвлення символів» та «Стилі символів» збільшує розмір файлів SWF, тому що Illustrator повинен створювати копію кожного зразку символу для збереження їхнього вигляду.
Сіткові об'єкти та градієнти із кількістю точок вузла градієнту, що перебільшує вісім, растеризуються та відображатимуться як заповнені бітові фігури. Градієнти із кількістю точок вузла меншою від восьми експортуються у вигляді градієнтів.
Візерунки растеризуються у рисенькі зображення розміру ілюстрації візерунку та розбиваються на сегменти для заливки ілюстрації.
Якщо бітове зображення поширюється за межі фрагменту, весь об'єкт включається до файлу, який експортується.
SWF підтримує лише округлені кінці та стики. Скошені та квадратні кінці та стики перетворюються на заокруглені під час експорту до SWF.
Візерункова заливка тексту та візерункова заливка обведення перетворюються на контри та заповнюються візерунком.
Хоча текст зберігає багато своїх властивостей під час експорту до SWF, деяка інформація втрачається. Під час імпорту файлу SWF у Flash інтерліньяж, кернінг та трекінг не зберігаються. Замість цього текст розбивається на окремі записи для того, щоб імітувати вигляд інтерліньяжу. При подальшому програвання файлу SWF Flash Player вигляд інтерліньяжу, кернінгу та трекінгу у файлі зберігається. Якщо текст потрібно експортувати у вигляді контурів, виберіть пункт «Перетворення тексту на криві» в діалоговому вікні «Параметри SWF» або перетворіть текст на криві перед експортуванням у SWF, вибравши функцію «Створити обриси».
Вставляння ілюстрації Illustrator
Ви можете створити багату графікою ілюстрацію в Illustrator, а потім скопіювати і вставити у Flash – просто, швидко, легко.
Коли ви вставляєте ілюстрацію Illustrator у Flash, зберігаються такі атрибути:
Контури і фігури
Масштабованість
Товщина ліній
Визначення градієнтів
Текст (включно зі шрифтами OpenType)
Зв'язані зображення
Символи
Режими накладання
Окрім того, Illustrator і Flash підтримують вставлену ілюстрацію у такий спосіб:
Коли ви виділяєте всі шари верхнього рівня у ілюстрації Illustrator і копіюєте їх у Flash, ці шари зберігаються разом із властивостями (видимість і блокування).
Кольори Illustrator, що не є RGB (CMYK, градації сірого, власні), перетворюються на RGB у Flash. Кольори RGB вставляються очікувано.
Коли ви імпортуєте або вставляєте ілюстрацію Illustrator, ви можете використовувати різноманітні параметри, аби зберегти ефекти (такі як тіні на тексті) як фільтри Flash.
Flash зберігає маски Illustrator.
Експортування SWF-файлів з Illustrator
З Illustrator ви можете експортувати SWF-файли, що за якістю і стисненням відповідають SWF-файлам, експортованим із Flash.
Коли ви експортуєте файли, ви можете вибирати різноманітні стилі, аби забезпечити оптирисьне виведення, а також вказати, як саме слід обробляти кілька монтажних областей, символи, шари, текст і маски. Наприклад, ви можете задати, чи мають символи Illustrator експортуватися як кліпи чи графіка, або ви можете створювати символи SWF із шарів Illustrator.
Імпортування файлів Illustrator у Flash
Якщо ви бажаєте створювати цілі макети в Illustrator, а потім імпортувати їх у Flash за один раз, ви можете записати ілюстрацію у рідному форматі Illustrator (AI) і імпортувати його з високою точністю у Flash, скориставшись командами «Файл» — «Імпортувати у сцену» або «Файл» — «Імпортувати у бібліотеку» у Flash.
Якщо ваш файл Illustrator містить кілька монтажних областей, ви можете обрати монтажну область, яку ви бажаєте імпортувати, у діалоговому вікні «Імпорт» та визначити параметри для кожного шару у цій монтажній області. Усі об'єкти в обраній монтажній області імпортуються у Flash як єдиний шар. Якщо ви імпортуєте іншу монтажну область з того ж самого файлу AI, об'єкти з цієї монтажної області імпортуються у Flash як новий шар.
Коли ви імпортуєте ілюстрацію Illustrator як файл AI, EPS чи PDF, Flash зберігає ті самі атрибути, що й у вставленій ілюстрації Illustrator. Окрім того, коли ви імпортуєте файл Illustrator, що містить шари, ви можете імпортувати їх в один із таких способів:
Перетворити шари Illustrator на шари Flash
Перетворити шари Illustrator на кадри Flash
Перетворити всі шари Illustrator на один шар Flash
Створення символу.
Коли ви створюєте символ в Illustrator, діалогове вікно «Параметри символу» дає вам змогу назвати символ і задати параметри, специфічні для Flash: тип символу – відеокліп (що є типовим для символів Flash), місце реєстраційної сітки Flash, 9-фрагментні напрямні масштабування. На додаток ви можете користуватися тими самими комбінаціями клавіш символів в Illustrator і Flash (наприклад, F8, щоб створити символ).
Ізольований режим для редагування символів.
У програмі Illustrator двічі клацніть символ для його відкриття в ізольованому режимі для більш легкого редагування. В ізольованому режимі редагується лише екземпляр символу — решта об'єктів у монтажній області затемнюються і стають недоступними. Після виходу з ізольованого режиму символ на панелі «Символи» і всі екземпляри даного символу оновлюються відповідно. У Flash режим редагування символів і панель «Бібліотека» працюють схоже.
Властивості символу і посилання.
Застосовуючи панель «Символи» або панель керування, ви можете легко призначати назви екземплярам символів, розривати посилання між екземплярами і символами, міняти екземпляри одного символу на екземпляри іншого, створювати копію символу. У Flash функції редагування у панелі «Бібліотека» працюють схоже.
Об'єкти статичного динамічного та введеного тексту
Коли ви переносите статичний текст із Illustrator у Flash, Flash перетворює текст на контури. Окрім того, ви можете налаштувати ваш текст в Illustrator як динамічний. Динамічний текст дає вам змогу редагувати вміст тексту програмно у Flash та легко керувати проектами, що потребують локалізації декількома мовами.
В Illustrator ви можете задати окремі текстові об'єкти як статичний, динамічний чи введений текст. Динамічні текстові об'єкти в Illustrator і Flash мають схожі властивості. Наприклад, обидві програми використовують кернінг, що впливає на всі символи у текстовому блоці, а не на окремі символи, обидві згладжують текст однаково, обидві підтримують зв'язок із зовнішніми XML-файлами, що містять текст.