Як створювати Pixel Perfect зображення в Adobe Illustrator

Від перекладача
Радий вітати тебе, %юзернейм%!

Я новачок в професії дизайнера інтерфейсів, і як-то давно, гортаючи вакансії, мене зацікавили вимоги до однієї з них. Серед таких, як знання пакету Adobe, засобів прототипування і навичок в області ux/ui я прочитав, що здобувачеві саме на цю вакансію непогано було б уміти тримати порядок в шарах, структурі і назвах файлів і папок, а так само знати і вміти застосовувати на практиці те, що називається pixel perfect. Мене це зацікавило, так як на моїй роботі ні від мене, ні від інших співробітників цього не вимагають, але я завжди намагався цього дотримуватись і навіть намагався переконати в цьому інших, але мені чомусь не вистачало аргументів, щоб пояснити, для чого це потрібно.

З поняттям pixel perfect я взагалі на той момент не був знайомий, тільки чув десь пару раз, і так як цей пункт стояв у кінці списку вимог «акуратності», я зрозумів, що це щось на зразок апогею, вершини айсберга в організації роботи над макетами.

Я став шукати, але нічого, крім статті на Хабре з пари абзаців про Pixel perfect від програміста не знайшов. Потім я якось почув про Monument Valley, і навіть натрапив на довідник Pixel Perfect Precision, але часу вивчати так багато інформації англійською як-то не було, і перший раз він мене не зачепив. Стало з'являтися час і вийшли деякі статті, одна з яких, наповнена практичними радами по Pixel Perfect зачепила мене, і я вирішив не просто прочитати і зрозуміти, а ще й перевести по можливості літературно, щоб дати питання широку популярність, і поширити тему на Хабре.

Невеликий технічний момент. Оригінальна стаття з Tuts+ називається «How to Create Pixel Perfect Artwork Using Adobe Illustrator», при цьому я можу вас запевнити, що більша частина із запропонованих у статті налаштувань присутній і в Adobe Photoshop CS6, а вже в Adobe Photoshop CC взагалі можна повторити все це повністю.

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

Короткий зміст
Ця частина для тих, кому лінь вникати у аспекти, але хочеться швидше отримати інструкції.
Або для тих, хто вже читав повну статтю, але тепер хоче швидко без зайвих абзаців, на іншому робочому місці застосувати всі необхідні налаштування.

Налаштування Abobe Illustrator

  1. Edit > Preferences > Units > General → Pixels
    Edit > Preferences > Units > Stroke → Pixels
  2. Edit > Preferences > Guides & Grid > Gridline every → 1px
    Edit > Preferences > Guides & Grid > Subdivisions → 1px
  3. Edit > Preferences > General > Keyboard Increment → 1px
  4. View > Snap to Grid
    View > Snap to Point
  5. View > Pixel Preview
Не дякуйте.
Всіх зацікавлених прошу пройти під кат.

Як створювати pixel perfect зображення в Adobe Illustrator


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

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

1. Векторні та растрові зображення

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

Всі зображення, з якими доводиться стикатися в нашому творчому ремеслі, можна розділити на два великих типи. Це растрові та векторні зображення.

Векторне зображення може включати в себе один або безліч об'єктів, які в свою чергу складаються з різного числа опорних точок (anchor points) і ліній, що їх з'єднують (paths). Такі зображення можна масштабувати практично до безкінечності, без втрати якості.

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

Зменшення дозволу файлу не так сильно б'є по якості зображення, але от збільшення дозволу існуючого зображення помітно погіршує якість картинки, з'являються розмиті області, нечіткі краї. Існують спеціальні програми типу Perfect Resize, які використовують спеціальні складні алгоритми для оптимізації чіткості зображень, які ви збільшуєте. Але особисто для мене цей факт є лише зайвим доказом того, що растрова графіка поступається векторної в тому плані, що вона не володіє дуже важливою властивістю, можливістю масштабування без втрати качесва (quality-agnostic scalability).

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

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

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

2. Давайте розберемося, як працює Adobe Illustrator

Перш ніж ви почнете щось виправляти, давайте розберемося, як це працює. Illustrator це ЗА для створення векторної графіки, в якому використовуються математичні алгоритми для створення і відображення кривих (paths) (неважливо, замкнуті вони чи ні) і опорних точок (anchor points). Опорні крапки (anchor points) це такі точки, за допомогою яких ви можете керувати розміром і формою векторного об'єкта.



Самі по собі опорні точки не так важливі. Важливо те, як вони расстравлены і та крива, яку вони формують на вашому полотні (Artboard) (з прив'язками або без), тому в подальших кроках я буду докладно говорити про кожну дрібницю, яка вплине на наше pixel perfect зображення.

3. Налаштування Adobe Illustrator

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

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

Крок 1
Перш ніж ми приступимо до налаштування одиниць вимірювання, я б хотів приділити пару секунд і порівняти вибрані в Adobe Illustrator пункти (points) з пікселями (pixels), щоб подивитися, що змінюється від вибору останніх в якості одиниць виміру.

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

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

Отже, у нас є вибір між двома одиницями вимірювання, ну так в чому ж різниця? Багато статті кажуть, що 1 піксель дорівнює 1 пункту (1 pt = 1 px) але це вірно тільки для дисплеїв і ОС з дозволом 72 ppi так 1 пункт = 1/72 дюйма, і це означає, що на інших екранах, де значення PPI відрізняється, різниця між пунктом і пікселем є, і чим більше пікселів на ДЮЙМ, тим різниця відчутніша. W3 Org, приміром, каже, що 0.75 pt = 1 px.

Apple написала цілу статтю на цю тему — iOS Developer Library page, намагаючись пояснити, чому пункти переважно для використання, ніж пікселі, так як за допомогою пунктів нібито легше робити зображення для різних розмірів екрану.

“наприклад, на екранах з великою роздільною здатністю лінія товщиною в 1 пункт може перетворитися в лінію товщиною 2 пікселя. Коротше кажучи, якщо ви малюєте одне і теж на різних за розміром екранах (один з великою роздільною здатністю, інший з меншим), ваш малюнок буде виглядати однаково на обох екранах»


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

Тепер ви повинні запитати, що ж це використовувати? Я сам, як правило, більше схиляюся до пикселів. Чому? Найпростіше відповісти, що це особисті переваги, засновані на особистому досвіді. Я в основному працюю ілюстратором, і я жодного разу не чув, щоб люди скаржились, що ось на ілюстрації на їх iPhone якась лінія виглядає товщі, ніж на їх ПК.

Крім того, пікселі незалежні від PPI (тобто від щільності пікселів на пристрої), і ви можете просто контролювати дозвіл картинки для пристроїв з великим екраном, просто збільшуючи значення PPI при створенні нового файлу. До того ж, з-за великої різниці у дозволах на різних пристроях, я схиляюся до того, що в той час як 1 пункт може бути дорівнює 2 пікселям на одному з Apple-пристроїв, 1 пункт може так само бути дорівнює іншому кількістю пікселів на іншому пристрої іншого виробника, наприклад, з більшою щільністю пікселів.

У самому справі, рішення приймати вам. Якщо ви вирішили, як і я, вибрати пікселі, то відкрийте Adobe Illustrator меню Units з розділу Preference (Edit > Preferences > Units) і змініть значення General та Stroke Pixels. Так як розмір шрифтів зазвичай ґрунтується на пунктах (point-based), я б порадив вам залишити це значення недоторканим, тим більше, що якщо переключити цей розмір теж на пікселі, ви не поліпшите різкість вашого тексту.



Крок 2
Ми вже налаштували одиниці вимірювання в нашому макеті, тепер настав час перейти до налаштувань сітки (Grid). Я не буду багато рассказывтаь про те, що таке сітка, тому що у мене є інша стаття на цю тему, з якої ви можете почерпнути все по цій темі. Єдине, що я хочу сказати, так це те, що якщо ви дійсно хочете створити реально якісне і різке зображення, вам слід звернути увагу на сітку, зробити її суперточной, прив'язуватися до неї, і працювати, періодично включаючи режим Pixel Preview (ми розглянемо його детальніше через пару хвилин).

Щоб змінити стандартні параметри, відкрийте меню Edit > Preferences > Guides & Grid де ви побачите дві опції, на які слід звернути увагу: опція Gridline every і опція Subdivisions. Особисто я використовую значення 1 в обох випадках, для себе я вирішив, що це самі відповідні мені налаштування, в незалежності від проекту, над яким я працюю. Так, вам доведеться приділяти більше уваги розташуванню елементів, але якщо наша мета — створити максимально деталізоване зображення, то це наш шлях.



Крок 3
Я сподіваюся, всі ви використовуєте гарячі клавіші в роботі. У Illustrator'а є налаштування, які дозволяють нам переміщати об'єкти на невеликі відстані з великою точністю за допомогою клавіш-стрілочок на клавіатурі. Так як ми прагнемо до того, щоб все в макеті було прив'язане до кордонів пікселів, то ми повинні налаштувати так, щоб кожне натискання на стрілочку перемістило наш об'єкт рівно на 1 піксель.

Ці параметри знаходяться в меню Edit > Preferences > General > Keyboard Increment.

Насправді, якщо ви раніше цим не користувалися, я вам скажу — це суперфункция, яка дозволяє нам миттєво переміщати об'єкти без похибки на невеликі відстані! Ті самі ситуації, коли нам потрібно щось чтуь-трохи посунути.



4. Процес

Отже, все, що ми робили до цього — це налаштовували Illustrator, щоб зробити його більш чутливим до пікселям, але в якості гарного прикладу краще привести щось більше, ніж просто налаштування. Я розповім вам про процес, про схему, за якою я сам працюю, коли створюю щось, що буде використовуватися в вебі.

Крок 1
Все починається з параметрів нашого Нового документа. Ми повинні приділити трохи уваги налаштувань при створенні нового документа, це дозволить нам підготувати основу для створення pixel-perfect зображення.

Натисніть Ctrl+N (або відкрийте меню File > New) і зверніть увагу на деякі налаштування, починаючи з Profile.



Так як ми просто-таки схиблені на Pixel perfect, наш Profile повинен бути встановлений у значення Web. Що це змінює? Illustrator в такому разі автоматично змінюється одиниці виміру (Units) пікселі (Pixels), колірний режим (Color Mode) RGB (Red Green Blue).

Якщо ви звернете увагу на Розмір (Size) нашого документа, ви побачите, що і Ширина (Width) та Висота (Height) мають круглі значення (960 x 560 px) без дробової частини (наприклад 960.5 x 560.38). Що в цьому такого важливого? Якщо ви створите Полотно (Artboard), який буде приміром шириною 960.5 пікселів, у вас утворюється невелика область справа, яка не буде збігатися з піксельною сіткою.



Це жахливо, так як ми хочемо, щоб Adobe Illustrator вирівнював всі наші нові об'єкти по сітці (Align New Objects to Pixel Grid). Ця функція дуже важлива, її включення дає програмі інструкції щодо позиціювання нових об'єктів, і прив'язку їх до Піксельною сіткою (Pixel Grid), що робить наше зображення якісним і різким.

Отже, наприклад, якщо ми створимо прямокутник розміром 960 x 560 пікселів, і потім спробуємо відцентрувати (по горизонталі й вертикалі) цей прямокутник по відношенню до нашого Полотна (Artboard), це буде неможливим, так як права і нижня частина полотна не збігаються з піксельною сіткою і межі полотна не лягають в точності на межі пікселів в цій області.



Хтось з вас може подумати, що ця опція важлива, тільки якщо ми малюємо, але мені здається, що і при використанні у пресі це дасть свої плоди, так як ви будете розміщувати Опорні крапки (Anchor points) тільки у вузлах піксельною сіткою, а не де попало.

На замітку: Якщо ви вже почали роботу в документі, розміри якого мають дробову частину, ви завжди можете виправити це в віконці Artboard Tool (Shift + O). Але я б все-таки рекомендував звертати на це увагу і відразу створювати полотна з правильними заокругленими значеннями, це врятує вас від головного болю в майбутньому.

Крок 2
Якщо ми правильно встановили налаштування документа, давайте так само виконувати це правило для всіх розмірів елементів — стежте за тим, щоб ширина і висота всіх елементів була без дробових частин.

Отже, при створенні об'єктів правило накладення на піксельну сітку теж має дотримуватися. Якщо ми хочемо створити чітке зображення, нехай це буде квадрат, ми повинні задати фіксований розмір (приміром 200 x 200 пікселів), таким чином у нас вийде що кожен піксель нашої фігури буде покривати рівно один піксель на піксельною сіткою, і межа пікселя нашої фігури буде збігатися з кордоном точно такого ж за номером пікселя на Полотні (ArtBoard). Щоб переконатися в цьому, давайте створимо фігуру (Shape), наблизимо (Zoom), наскільки це можливо, і ми переконаємося, що навіть на максимальному збільшенні наша фігура буде виглядати кристально чисто, без жодних розмитих країв!



Якщо б ми створили фігуру розмірами 200.4 x 199.9 пікселів, Illustrator застосував би алгоритми згладжування (antialiasing effect) для правої і нижньої частини фігури, кордони перестали б збігатися з піксельною сіткою, і тоді наша фігура буде виглядати гірше, не такою різкою.



На щастя, розумні люди з компанії Adobe не дарма їдять свій хліб, так як придумали рішення цієї проблеми і пропонують його нам, додаючи функцію Прив'язки об'єктів до піксельною сіткою (Align to Pixel Grid), яка знаходиться в самому низу панелі Transform. Якщо ви виділите погано розташований об'єкт, і включіть для нього опцію Align to, розміри об'єкта автоматично округлятся до 200 пікселів, так як це найближче ціле значення.



На замітку: Якщо в вашій панелі Transform немає такої опції, то ви можете включити її відображення в палітрі Transform, вибравши Show Options.



Крок 3
Отже, ми підійшли майже впритул до найважливішим фічами в Adobe Illustrator'е, які дозволяють створювати Pixel Perfect зображення. Є дві функції, які дають схожий ефект, але якщо розібратися, мають ключові відмінності.

Прив'язка до сітки
Як випливає з назви, ця опція прив'язує об'єкти до Сітки (Grid), до тієї самої Сітки, налаштування якої ви виставляли раніше. Цю функцію можна увімкнути в меню View > Snap to Grid (Shift + Ctrl + "). Ця функція включає в Adobe Illustrator алгоритми, за якими всі ваші об'єкти Полотні (Artboard) своїми краями прив'язуються до вузлів і ліній сітки.



Прив'язка до пікселям
Прив'язка до пикселів (Snap to Pixel) трохи відрізняється від попередньої функції, так як прив'язує об'єкти саме до Піксельною сіткою (Pixel Grid), яку ми не можемо змінити. Ця функція прихована, поки ви не дозволите Pixel Preview (Alt + Ctrl + Y), в такому випадку ви сменяете Прив'язку до сітки Прив'язку до піксельною сіткою.



До речі кажучи, ви можете зрівняти ефект цих двох функцій Snap to Grid та Snap to Pixel якщо ви налаштовуєте ваше сітку через кожний 1 піксель, поділом (Subdivision) 1, що насправді є мінімальним значенням вашої сітки, тобто ви настриваете сітку ідентично Піксельною сіткою (Pixel Grid).

Крок 4
Якщо ви будете працювати з прив'язкою до Піксельною сіткою, режим попереднього перегляду буде вашим головним помічником у процесі створення кристально чистих і чітких зображень. Це дозволяє вам зробити збільшення на рівні пікселів, і подивитися, які частини вищого зображення вимагають до себе пильної уваги з вашого боку. Я користуюся цією функцією, і вона весь час мені помогет. Як я сказав раніше, опція може бути активована в меню View > Pixel Preview або по натисненню Alt+Ctrl+Y.

Крок 5
Коли ви намалювали все, що вам потрібно, приділіть трохи часу, і на всяк випадок переконайтеся, що всі опорні точки прив'язані до Піксельною сіткою (Pixel Grid). Якщо ви знайшли якусь точку постала між вузлами сітки, просто позьмите интрумент Direct Selection Tool (A), виділіть цю точку, і перемістіть її на найближчий вузол сітки.

Ви подумаєте, що використання функції Align to Pixel Grid сама бере на себе турботу про такого роду проблеми, але з мого досвіду, іноді в програмі трапляються помилки, і коли це трапляється, то я беру в руки інструмент Direct Selection Tool (A) і виправляю ці проблеми вручну.

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



Фішка в тому, щоб стежити за тим, щоб кут нахилу ручок по можливості був кратний 45°, тобто щоб лінія направляючої була чітко горизонтальна, вертикальна, або диагональна, це робиться з допомогою затиснутої клавіші Shift. Таким чином ми можемо добитися того, що всі точки будуть прив'язані до піксельною сіткою.



До речі, якщо у вас є якийсь об'єкт з скрегленным прямим кутом (зразок кнопки), то постарайтеся зробити так, щоб ручка досягала рівно тій лінії об'єкта, яка як би є його габаритом, щоб ручка не виходила за межі об'єкта.



5. Масштабування об'єктів

Коли ми працюємо з Pixel Perfect зображенням, зміна масштабу зображення може стати для вас справжнім головним болем. Якщо ви виберіть якийсь об'єкт, і потягнете за ручки зміни розміру обмежує габаритної рамки, об'єкт збільшиться або зменшиться, так, але багато його складові частини можуть спотворитися.

Рішенням служить опція Scale (right click > Transform > Scale > Uniform) і використання значень, кратних 50%, наприклад, 150%, 200%, 250% для збільшення і -50% для зменшення вдвічі від початкового розміру.

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



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

6. Обертання об'єктів

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

На жаль, це найсумніша частина роботи, якщо вам важлива така річ, як Pixel Perfect, тому що на даний момент немає універсальних працюючих алгоритмів, які дозволяють легко автоматично прив'язати точки кривих до піксельною сіткою, і навіть в дрібницях це все одно буде впливати на загальний вид зображення. Зазвичай, якщо у мене є прямокутник зі скруглнными кутами, і мені треба його пообертати, я обертаю його і залишаю все так, як є.

Здається, все!

Якщо ви будете слідувати всім цим крокам, то вам вдасться створити зображення високої чіткості, який буде відмінно виглядати на будь-якому з девайсів.

Корисні посилаючись
  • Pixel Perfect Precision — Книга/довідник/гайд від студії UsTwo, яка зробила Monument Valley і ввела поняття Pixel Perfect. Цього довідника на даний момент 4 роки.
    cdn.ustwo.com/PPP/PP3.pdf
    Якщо вас зацікавив мій переклад (або оригінальна стаття), обов'язково прочитайте це керівництво, а краще роздрукуйте повноцінний кольоровий варіант і принесіть в офіс колегам! Якщо у вас, як і у мене, проблеми з англійською, роздрукуйте і принесіть в офіс повноцінну російську версію, яка розташувалася за наступним посиланням.
  • Переклад довідника Pixel Perfect Precision на російську. Переведено 3 видання.
    heartbeat.ua/pp3/PP3_rus.pdf
  • Невелика стаття про переклад Pixel Perfect Precision на Хабре.
    habrahabr.ru/post/242373
  • Коротка стаття про Pixel Perfect верстку на Хабре.
    habrahabr.ru/post/195414
    Це та сама перша і практично єдина стаття, яку мені вдалося у свій час знайти за запитом «Pixel Perfect».

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.