Не Photoshop-ом єдиним. Знайомство зі Sketch 3 (Частина 1)

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

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

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

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

Вступ до Sketch

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

Sketch-Intro

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

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

Learn-InsertShape

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

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

Sketch-Toolbar

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

Артборди (Artboards)

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

Learn-ArtboardsPages

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

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

Sketch-Artboards

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

Сторінки

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

Sketch-Pages

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

Sketch-Pages

UI темплейти

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

Screenshot 2015-11-06 22.43.05

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

IOS

Sketch-iOSGUI

Material Design (Android)

Sketch-MaterialDesign

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

Sketch-SaveAsTemplate

Кольори

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

Screenshot 2015-10-05 23.06.01

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

Sketch-InstallNewPlugin

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

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

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

Typography-List

Щоб створити новий шар (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.

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

2 Comments

  1. builder

    Безумовно, цікава програмка. Те, що “важить” набагато менше, ніж Photoshop, можливо, і не така вже й велика перевага, з огляду на можливості сучасної комп”ютерної техніки. А от те, що набагато простіша у використанні – це дійсно суттєво. Але ж у цій бочці меду є величезна ложка дьогтю – не працює під Windows.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.