Забудьте про Photoshop! Знайомство зі Sketch 3: кастомізація, artboards, UI темплейти + інше!

Sketch – це інструмент векторного дизайну для Mac, який повністю зосереджений на створенні користувацького інтерфейсу. Він легкий для вивчення, а ліцензійна версія на порядок дешевша за Photoshop. Завдяки своїй простоті будь-хто легко освоїть Sketch з невеликими зусиллями. І він просто ідеальний для дизайнерів, які працюють для різноманітних пристоїв.

Sketch – це одна з відповідей чому дизайнери так полюбляють Mac. На жаль для користувачів Вінди він не доступний.

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

Sketch на ринку вже більше 5 років, але стрімкої популярності набув лише нещодавно. І, зокрема, був визнаний Програмою Року на NetAwards. Команда розробників невелика і прислухається до зворотного зв’язку. Найголовніше, що вона має надзвичайно активну спільноту.

Вступ до Sketch

Sketch – це інструмент для IOS, Android і веб-дизайну. Він важить менше 40MB, у порівнянні з 1.6GB Photoshop. Як тільки ви відкриваєте Sketch, ви бачите нескінченне полотно. Жодне вікно не запитає вас про те, в які одиниці використовувати або який розмір полотна повинен бути. Так же як нативні додатки OS X, у вас є знайомий користувацький інтерфейс з тулбаром, навігатором та інспектором (Inspector). У результаті, нові користувачі знайдуть Sketch набагато більш доступним, тому що він не стоїть на шляху створення простого дизайну.

Дизайн для Екранів

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

Все що ви дізнаєтеся про Sketch стане миттєво користним у дизайні UI.

Кастомізуємо тулбар

Не відходячи від шаблонів дизайну OS X, налаштувати тулбар можна правим натисканням мишки на нього. Туди можна розмістити будь-які інструменти. Хоча краще не напихати багато, користуючись шорткатами, але є деякі, що складно вивчити, а деякі активуються лише у випадку, коли їх можна використати, тому мати їх в UI зручно. Я б рекомендував винести туди наступне: Colors, Make Grid, Scissors і Convert to Outlines.

Артборди (Artboards)

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

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

Більше того більше не треба ховати пачку леєрів. Навіть навпаки, рекомендують показувати їх усі, для простого прев’ю на iPhone. Ви легко можете їх перетасувати, дублювати (⌘ D) або експортувати. Натисніть A, щоб створити новий артборд, перед вами відкриється список темплейтів (iOS, Android, Web or Print).

Для iOS найкраще вибирати iPhone 6/6s (375 x 667 pt) – бо він найпоширеніший.

Сторінки

Кожна сторінка презентує платформу, або зовсім інше вирішення. Скажімо, для проекту на IOS у вас буде двадцять з гаком артбордів. Тоді ви просто створюєте нову строніку для Android, Web, Apple Watch, tvOS і тд. Тому весь проект у вас вміщується в єдиний файл. Це надзвичайно зручно і збереже вам “століття” часу.

Для швидкого перемикання між сторінками використовуйте шорткат: Fn ↑ і ↓.

UI темплейти

Sketch вже має кілька шаблонів для iOS 9, Material Design і Web. Для доступу йдемо сюди: File ➤ New From Template ➤ iOS UI Design.

Темплейти для iOS 9 і Material Design дуже класні, вони підійдуть для старту, новачкам і профі.

IOS

Material Design (Android)

Також можна завантажувати шаблони з інтернету, наприкладі з цих ресурсів: у Фейсбук або тут. Щоб зберегти їх у список темлпйтів File➤ Save as Template.

Кольори

Багато людей мучаються з кольорами, тому, як нам мене, важливо мати розмаїту палітру для старту. Sketch має інструмент Color, завдяки якому можна зберігати палітри глобально або для обраного документу. Завдяки пипетці можна вибрати кольори і поза програмою, швидкий доступ до пипетки – (^ C). Гарні палітри для старту тут: iOS, Material Design і Flat UI.

Палітри можна шарити як файли – ось приклад. Завантажте плагін Sketch Palettes, щоб швидко імпортувати палітри. (Для установки плагіна натисніть Download ZIP, після розпаковки, двічі натисніть .plugin файл).

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

Робота з текстом

Якщо ви новачок зі шрифтами, можете зразу праямувати до Typography і завантажте кілька сучасних шрифтів. Вбудовані в OS X або безкоштовні з Google Fonts: San Francisco, Avenir Next, Open Sans і Roboto. Якщо ви маєте підписку на Typekit, скачайте Museo і Proxima Nova.

Щоб створити новий шар (layer) натисніть T. Ви можете використовувати Text Styles для перевикорестання у багатьох текстових шарах, а-ля CSS, який дозволяє мати глобальні h1, h2, h3 і тд.

Робота з Іконками

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

Символ (Symbol)

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

Вбудовані Символи

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

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

Мабуть, найкрутіша із нових фіч – це можливість легко експортувати в декілька вирішень екрану. За допомогою Make Exportable у правому нижньому куті екрану, можна експортувати в будь-якому масштабі (1x, 2x, 3x) і 6 форматах (JPG, PNG, SVG, PDF, TIFF і EPS). PDF, зокрема, є корисним для ОС IOS, а SVG – супер формат для Web. Для багатьох користувачів – саме цей функціонал вирізняє Sketch поміж інших програм.

Натисніть Make Exportable, щоб налаштувати свої шари. За замовчуванням, він буде встановити масштаб на 1x, але натисніть знову, і ви швидко отримаєте 2x, а потім 3x. Можна також встановити мастабування на ширину (w) або висота (h). Наприклад, якщо ви хочете, щоб ваш ресурс екпортувався з максимальним вирішенням 800 пікселів у ширину, встановіть 800w.

Наступну частину туторіала читайте ТУТ