Поради по роботі з Illustrator. Для веб-дизайнерів, що вважають за краще Photoshop

Поради щодо роботи з Illustrator. Ось шалена ідея – спроектуйте свій наступний веб-проект у Illustrator. Якщо ви основний веб-дизайнер, швидше за все, ви не дуже добре відреагуєте на цю пропозицію. Illustrator просто не може робити все, що вміє Photoshop, так?

Не зовсім так.

Хоча Photoshop де-факто перетворився на інструмент веб-дизайну, Illustrator більш ніж здатний задовольнити ваші потреби. Завдяки своїм інструментам верстки це часто найкраща та більш підходяща програма для веб-дизайну.

Оскільки більшість фахівців з веб-дизайну не хочуть бродити по Illustrator в пошуках доказів, я склав список пов'язаних з Інтернетом функцій, які вам потрібно знати, щоб почати експериментувати з веб-дизайном в Illustrator.

Спробуйте деякі з них, і я гарантую, що ви почнете використовувати Illustrator в якості стандартного інструменту в робочому процесі веб-дизайну.

1. Насамперед: встановіть для всіх одиниць значення Пікселі. Поради по роботі з Illustrator

За замовчуванням Illustrator використовує метричні одиниці для розмірів об'єкта та точки для тексту. Це відмінні налаштування для більшості випадків дизайну, але для веб-дизайну ви, мабуть, захочете бачити пікселі всюди. Тому, перш ніж ви почнете працювати над чимось ще, переконайтеся, що ваші одиниці правильно налаштовані.

Щоб встановити одиниці вимірювання в пікселі:

1. Відкрити в меню "Правка"
2. Виберіть одиниці вимірювання в підміню налаштувань.
3. Встановіть для всіх параметрів значення «пікселі»

2. Створюйте документи за допомогою профілю веб-документа.

 

Коли ви хочете розпочати роботу над новим дизайном, легко перейдіть до вікна «Новий документ» і пропустіть деякі важливі деталі — наприклад, повідомити Illustrator, що ви плануєте працювати над веб-дизайном, щоб не використовувати кольори CMYK. та розмиті краї об'єкта. Просто не забудьте вибрати налаштування профілю «Інтернет» у вікні «Новий документ», і все буде гаразд.

3. Увімкніть вирівнювання по піксельної сітці для об'єктів. Поради по роботі з Illustrator

Ця функція рятує життя, якщо у вас коли-небудь виникала проблема з розмитими краями форми в Photoshop.

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

На верхній кнопці включено вирівнювання по піксельної сітці, що завжди призводить до чітких кордонів.

Щоб включити вирівнювання піксельної сітки на рівні об'єкта:

1. вибрати об'єкт
2. Відкрийте панель «Перетворення» ( «Вікно»> «Перетворити»).
3. Встановіть прапорець «Вирівняти по піксельної сітці» в нижній частині панелі (якщо ви його не бачите, двічі клацніть панель, щоб відобразити параметри)

Примітка. Вирівнювання по піксельної сітці включено за замовчуванням для всіх нових об'єктів, створених за допомогою профілю веб-документа. Однак, якщо ви вставляєте об'єкти з інших файлів Illustrator, вам необхідно вручну налаштувати для них вирівнювання пікселів. Поради по роботі з Illustrator

4. Увімкніть попередній перегляд пікселів.

Функція Pixel-Preview змусить Illustrator поводитися так само, як Photoshop, при масштабуванні вашого зображення вище 100% - замість того, щоб щоразу отримувати ідеальні вектори, ви фактично бачитимете пікселі, якби ви працювали з растровим зображенням.

Включивши попередній перегляд в пікселях, ви відчуєте, що перебуваєте в Photoshop.

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

Акуратно, чи не так?

Включення або відключення попереднього перегляду пікселів

1. Відкрити меню перегляду
2. Виберіть «Перегляд в пікселях».

5. Використовуйте вікна Artwork. Поради по роботі з Illustrator

Уявіть, що на ваш проект наведені дві відеокамери.

Одна камера має нормальний рівень масштабування, показуючи 100% ваших робіт. Інша камера має рівень масштабування 400% та наведена на один конкретний значок, над яким ви працювали.

Подібно до хірурга, ви використовуєте камеру з зумом, щоб вносити крихітні зміни на рівні пікселів у значок, час від часу поглядаючи на камеру зі 100% зумом, щоб побачити, як вона насправді виглядає у своєму реальному розмірі.

Вікна обкладинок відмінно підходять, коли вам потрібно працювати з дрібними елементами, такими як значки - вам не потрібно постійно збільшувати та зменшувати масштаб, щоб перевірити, як все виглядає.

Це і є вікна Artwork – вони дозволяють переглядати ваш дизайн одночасно з різними рівнями масштабування, налаштуваннями кольору та іншими варіаціями. Для веб-дизайну це дуже зручно, особливо коли ви працюєте з деталями на рівні пікселів.

Щоб використовувати вікна Artwork:

1. Відкрийте меню «Вікно» та виберіть «Нове вікно». Illustrator створить нову вкладку з тим самим документом у поле зору.
2. Знову перейдіть в меню "Вікно", виберіть "Упорядкувати" > "Перемістити все у вікно". Це дозволить вам змінювати розмір та розміщувати вікна поряд один з одним так, як ви вважаєте за потрібне.
3. Експериментуйте з різними рівнями масштабування в вікнах і почніть вносити деякі зміни, щоб побачити, як це працює. Поради по роботі з Illustrator

6. Використовуйте символи, щоб швидко створювати кнопки, значки та багато іншого.

Скільки разів ви створювали одну й ту саму (або майже ту саму) кнопку, значок або віджет у Photoshop? Якщо ви захоплюєтеся веб-дизайном, ви, ймовірно, займаєтеся ним щодня.

Illustrator допоможе вам заощадити час і уникнути цієї повторюваної роботи за допомогою символів.

По суті, символи – це нескінченний набір готових елементів дизайну, які можна додати у твір простим перетягуванням, а потім за потреби змінити. Це ідеально підходить для кнопок, значків та інших стандартних об'єктів, які не потрібно створювати з нуля.

Але є ще одна причина, по якій символи є потужними, і вона називається інстансірованіем.

Символи не тільки зручні, але і дозволяють легко оновлювати повторювані елементи дизайну.

 

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

Порада: якщо ви не хочете, щоб це сталося з певним екземпляром символу as, клацніть правою кнопкою миші об'єкт у своїй ілюстрації та оберіть «Розірвати посилання на символ». Це виключить його з автоматичних оновлень.

Ось хороше відео, яке пояснює, як використовувати символи і управляти ними:

Використання символів у Adobe Illustrator з Adobe TV .

Щоб використовувати існуючий символ:

1. Відкрийте панель «Символи» з меню «Вікно».
2. Перетягніть обраний символ на свою роботу

Створити новий символ:

1. Створіть зображення символу
2. Відкрийте панель «Символи» з меню «Вікно».
3. Перетягніть ілюстрацію на панель
4. Натисніть ОК в діалоговому вікні для підтвердження.

Щоб відредагувати символ:

1. Відкрийте панель «Символи» з меню «Вікно».
2. Двічі клацніть символ, щоб увійти в режим редагування.
3. По завершенні двічі клацніть в будь-якому місці за межами зображення символу, щоб вийти з режиму редагування.

7. Легко розширюйте об'єкти за допомогою 9-сегментного масштабування. Поради по роботі з Illustrator

Це розширена функція символів, яка дозволяє визначати, які частини об'єкта розтягуються під час масштабування, а які залишаються незмінними.

Зліва: приклад розтягнутої кнопки з налаштуванням 9-сегментного масштабування та без неї. Справа: налаштування 9-сегментного масштабування включає переміщення 4 напрямних, які повідомляють Illustrator, які частини об'єкта захищені та які частини можна масштабувати.

 

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

Щоб по-справжньому зрозуміти, як це працює, послухайте цей чудовий відеоурок від Adobe TV, щоб швидко освоїтися:

Використання 9-сегментного масштабування з символами з Adobe TV .

8. Скрізь закруглені кути!

Ви можете створити прямокутник із закругленими кутами у Photoshop, але Illustrator дозволяє застосовувати неруйнівний ефект закруглених кутів практично до будь-якого об'єкта. Що таке неруйнівний ефект? Це означає, що ви можете вмикати, вимикати або змінювати його налаштування, не торкаючись вихідного об'єкта, що лежить в основі.

Практично до будь-якого типу об'єкта можна застосувати ефект закруглені кути і при необхідності відрегулювати. Поради по роботі з Illustrator

Щоб застосувати ефект закругленого кута:

1. Створіть прямокутник або будь-який інший об'єкт з гострими кутами
2. В меню «Ефекти» виберіть «Стилізація»> «Закруглені кути».
3. Введіть радіус кута і натисніть Попередній перегляд, щоб побачити, як це виглядає.
4. Натисніть ОК, щоб застосувати ефект.

Щоб змінити ефект закругленого кута:

1. Виберіть об'єкт із закругленими кутами
2. Відкрийте панель «Оформлення» з меню «Вікно».
3. Знайдіть ефект закруглені кути і двічі клацніть його, щоб змінити його налаштування, або клацніть значок ока, щоб включити або вимкнути його.

9. Створення швидкої заливки растровим візерунком. Поради по роботі з Illustrator

Тонкі фонові візерунки користуються великим успіхом у веб-дизайні, але багато дизайнерів думають, що їх нелегко застосувати в Illustrator.

Мушу визнати, це не інтуїтивно, але рішення просте.

Щоб створити візерунок растрового зображення:

1. Помістіть зображення викрійки на свій твір
2. Натисніть "Вставити" на верхній стрічці (важливо - без цього працювати не буде!)
3. Перетягніть візерунок на палітру зразків
4. Застосуйте зразок до будь-якого об'єкту, щоб заповнити його узором

10. Автоматичне розміщення тексту навколо зображень і об'єктів.

Photoshop відомий своїми дуже елементарними можливостями редагування тексту. Якщо ви хочете обернути текст навколо зображення, вам потрібно створити два або три різних текстових фрейма і імітувати ефект. Поради по роботі з Illustrator

На щастя, Illustrator надав вам все необхідне.

Щоб обернути текст навколо зображення:

1. Виберіть зображення або об'єкт, навколо якого ви хочете обернути текст
2. Відкрийте меню «Об'єкт», виберіть «Перенесення тексту»> «Створити».
3. Щоб встановити відстань обтікання, знову відкрийте меню «Обтікання текстом» і виберіть «Параметри обтікання текстом».
4. Перемістіть зображення по тексту, щоб побачити ефект обтікання

11. Створюйте багаті візуальні ефекти за допомогою налаштувань зовнішнього вигляду об'єкта. Поради по роботі з Illustrator

У Illustrator панель «Зовнішній вигляд» об'єкта працює так само, як ефекти шару Photoshop — ви можете додати кілька заливок і штрихів до об'єкта, а потім пограти з їх режимами передачі, непрозорістю та ефектами, щоб отримати цікаві результати.

Цей текст являє собою всього лише один об'єкт векторної форми, стилізований за допомогою панелі зовнішнього вигляду і ефектів.

Ігровий майданчик досить великий — від падіння тіней, розмиття та свічення до текстурування, спотворень та 3D. Таким чином ви можете відтворити більшість ефектів Photoshop, продовжуючи працювати з векторною графікою.

Панель Зовнішній вигляд потужна і захоплююча - я пропоную вам відразу спробувати її або подивитись підручник нижче, щоб зрозуміти, як вона працює:

Освоєння панелі зовнішнього вигляду з Adobe TV .

Ви готові почати експериментувати з Illustrator?

Створення веб-сайтів і користувальницьких інтерфейсів за допомогою Photoshop тепер стало нормою, і більшість дизайнерів задоволені цим рішенням. Поради по роботі з Illustrator

Але те, що Photoshop став настільки поширеним, не означає, що Illustrator нема чого запропонувати — якраз навпаки. З такими інструментами, як вирівнювання піксельною сіткою, обтікання текстом і зовнішній вигляд об'єктів, він переконливо доводить себе.

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