Розбираємося з сіткою в Adobe Illustrator

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

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

Матеріал розрахований на новачків, і трохи розповідає про двох речах:
  1. Як уникнути тієї проблеми, з якою у вас в макетах відстань між елементами або гайдами починає включати в себе дробові частини пікселів;
  2. Як використовувати сітки для прототипування в Adobe Photoshop і Adobe Illustrator.
Мені цей матеріал цікавий з тієї точки зору, що я був би дуже вдячний, якби на самому початку моєї роботи дизайнером інтерфейсів мені хтось розповів про піксельною сіткою. Тому, я сподіваюся, що полегшу комусь життя, публікуючи цей переклад.

Як і минулого разу, одна з цілей, чому я пишу цю статтю на Хабр (а не обмежуюся, приміром, переведенням на Tuts+) — це складання після перекладу корисних посилань по темі. Закликаю хабражителей так само ділитися своїми міркуваннями й інструментами, якими ви користуєтеся при створенні сіток, може бути якимись іншими редакторами. Один мій знайомий товариш прокоментував попередню статтю таким чином, що, звичайно, матеріал прикольний, але сам він користується Sketch'їм, а там це все з коробки. Розкажіть, чим користуєтеся ви?

До речі, хоча в статті мова йде про Adobe Illustrator, Adobe Photoshop можна так само використовувати і піксельну сітку, і прив'язку до пікселям, і свою власну настроювану сітку.

Короткий зміст

  • Щоб увімкнути/вимкнути сітку в Adobe Illustrator Photoshop, натисніть сполучення клавіш Ctrl + '
  • Щоб увімкнути/вимкнути гайди в Adobe Illustrator Photoshop, натисніть Ctrl + ;


Ну, поїхали.

Розбираємося з сіткою в Adobe Illustrator



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

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

Так, я збираюся розповісти вам про Сітці.

Що таке Сітка?

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

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

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



Чому знання Сітки важливо?

Ми дали загальне уявлення того, що з себе представляє Сітка. Але навіщо їй взагалі користуватися? Якщо ще раз повторити коротко, то Сітка — це те, що допомагає нам розташувати елементи один щодо одного і виставити відносини між розмірами і розташуванням об'єктів. Сітка як би пропонує нам правила, за якими ми можемо розташувати об'єкти на макеті, а найголовніше — структурувати контент.

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

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

Цифра VS Друк

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

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



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

Використання прив'язок

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

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

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

На всяк випадок уточню, що під цілими значеннями я маю на увазі числові значення без дробових частин, тобто наприклад якщо ми збираємося намалювати прямокутник, то ми будемо його малювати з шириною 200 пікселів і висотою 100 пікселів, а не 200.84 пікселя на 99.8 пікселів.

Розширене поняття сітки

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

Крок 1
При запуску будь-якого нового проекту в Illustrator, ми завжди починаємо з параметрів нового документа. Давайте відкриємо Illustrator і створимо новий документ з наступними налаштуваннями:
  • Кількість полотен: 1
  • Ширина: 800 пікселів
  • Висота: 800 пікселів
  • Одиниці виміру: пікселі
На вкладці додаткових налаштувань:
  • Колірний режим: RGB
  • Роздільна здатність при растеризації: 300 пікселів на дюйм
  • Прирівнювати нові об'єкти до піксельною сіткою: відзначено




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

Справді, ви в будь-який момент можете змінити значення PPI, якщо зайдете в Effect > Document Raster Effects Settings.

Крок 2
Після того, як ви налаштували документ, створіть чорний квадрат розмірами 100х100 пікселів, і додайте його в лівому верхньому кутку Полотна, використовуючи палітру Align.



Крок 3
Щоб зрозуміти, як працює сітка, давйте подивимося на це. Відкриваємо меню View > Show Grid (або натискаємо Ctrl + „), і тут же на екрані з'являється стандартна сітка 1000х4.



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

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

Давайте скасуємо наші останні кроки, повернемо квадратик на своє місце, і зайдемо в меню View → Snap to Grid (Shift + Ctrl + Y), а потім знову оппробуем поперемещать наш об'єкт.



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

Давайте розберемося, чому Illustrator веде себе саме так, спробуємо зрозуміти пристрій Сітки. Як я говорив раніше, є передвстановлені настройки Сітки, ось вони:
  • Крок сітки через кожні 1000px
  • Поділки всередині кроку сітки: 4


Що насправді означають ці налаштування?

Це дуже легко, дивіться. Через кожні 1000 пікселів Illustrator буде малювати клітку, поділену на 4 частини (тим самим всередині клітини з'явиться сітка 2х2), тобто вийдуть клітини, кожна з яких розміром 1000 х 1000 пікселів, і в свою чергу поділена ще на 4 клітини розмірами 250 х 250 пікселів (1000/4 = 250).



Т. к. наш полотно має розміри всього лише 800х800 пікселів (тобто повністю уміщається три квадрата сітки 250 пікселів і ще залишається 50 пікселів), прив'язка буде спрацьовувати на верхню ліву частину цього простору, яка вміщується у 1000 х 1000 пікселів. А нижня і права частина простору на лінії товщиною 200 пікселів, виділення червоним, залишається незадіяним.

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



Налаштування сітки

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

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

Мої налаштування сітки такі:
  • Лінія сітки через кожні: 1 піксель
  • Поділки всередині кроку сітки: 1
Якщо ви хочете поекспериментувати і налаштувати Сітку під себе, вам просто потрібно зайти в меню Edit > Preferences > Guides & Grid і налаштувати все так, як вам хочеться.



Швидке прототипування з використанням сітки

Давайте зробимо невелику вправу і спробуємо зробити швидкий прототип веб-сайту з використанням сітки через кожні 800 пікселів з поділом на 4 кроки на полотні розміром 800 х 800 пікселів.

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

Крок 1
Створюємо прямокутник розміром 800х200 пікселів і распологаем його зверху нашого полотна, розфарбуємо його кольором #191919. Тепер візьмемо інструмент Текст і підпишемо цей елемент як Шапку нашого веб-сайту.



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

Крок 2
Створимо невеликий прямокутник розміром 600х400 пікселів і кольором #191919 і спробуємо розмістити його, використовуючи кнопки на клавіатурі, в лівій частині нашого полотна, відразу під шапкою. Цей жлемент так само слід підписати, це буде Content.



Крок 3
Давайте створимо об'єкт поменше розміром 200х400 пікселів кольором #B24747 і потім розмістимо його в правій частині, праворуч від вмісту, а потім підпишемо його Sidebar.



Крок 4
Завершуємо наше прототипування додаванням останнього елемента 800х200 пікселів і кольором #191919. Розташуємо цей прямокутник внизу полотна і назвемо його Footer.



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

Двоїста прив'язка

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

За замовчуванням, якщо ви створюєте новий документ, режим Preview зазвичай виставлений в положення Default. Це означає, що те, що ви створюєте — це те, що ви бачите. (Тобто ви бачите вектор таким, який він є, не расстрированным). У цьому випадку опція Snap to відноситься до Сітці, яку ви налаштовуєте, і Сітка залежить від тих значень, які ви виставите в параметрах.

Якщо ви включите Pixel Preview (View → Pixel Preview) і наблизити зображення, Illustrator покаже вам пікселі, з яких складається ваша векторне зображення. Коли режим прив'язок включений пікселі, кожне натискання на стрілки клавіатури буде переміщати ваш об'єкт на фіксоване число пікселів, яке виставлене у налаштуваннях Keyboard Increment.

На замітку: Так, ви можете включити Keyboard Increment на будь-яку к-ть пікселів, яке вам зручно. Ця опція розташований у меню Edit > Preferences > General > Keyboard Increment.



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

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

Корисні ресурси
  • Чої Вин. Як спроектувати сучасний сайт. Професійний веб-дизайн на основі сітки. б.м.: Пітер, 2012.
    Існує безліч книг про сітки. популярні і не дуже, але я читав саме цю, тому саме її і рекомендую. Тут по кроках дуже докладно описується процес розробки універсальної сітки (яка в готом варіанті лунає багато де). Вобщем-то після прочитання точно все встає на свої місця, стає зрозуміло, чому і навіщо.
  • 960 Grid System — один з різноманітних готових наборів сіток. Тут є вже створені шаблони макетів під всі популярні редактори зразок Photoshop, Illustrator, InDesign і т. д. Список дуже великий, ознайомтеся.
  • GuideGuide і Griddify — плагіни для Photoshop для створення сіток.

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

0 коментарів

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