Switch to Sketch. Частина 4

    
 
Оригінальна версія старовинної французької приказки говорить: Le bon Dieu est dans le détail («Бог в деталях»). Власне, непримітні на перший погляд деталі і відрізняють Sketch від численних конкурентів. Давайте ближче глянемо на цей джерело дивовижних дрібниць.
 
 
Творці Sketch голландець Петер Омвлее, португалець Еммануель Са і британець Крістофер Даунер, запевняють, що самі будучи дизайнерами, робили Sketch виключно для дизайнерів. Всі недоліки, які є в Photoshop, вони вирішили викорінити і дати можливість творчим людям насолоджуватися робочим процесом, не відчуваючи будь-яких навіть самих незначних незручностей. Тому під час створення Sketch скрупульозно досліджувалося кожна дія в інших дизайнерських пакетах і створювався його новий варіант. Основоположними принципами подібних модифікацій стали простота, швидкість виконання і передбачуваність результату.
 
«Просунуті деталі» зустрічають вас вже на етапі створення нового документа.
 
Що ви побачите практично в будь-якому графічному редакторі, виконавши команду File> New?
 
Швидше за все, те ж саме, що в фотошопі — діалогове вікно, в якому необхідно вказати розмір майбутнього документа, вибрати колірну модель і встановити інші параметри:
 
 
 
Розробники з Bohemian Coding задалися питанням: «А навіщо нам потрібні дюйми і сантиметри, DPI і CMYK, якщо ми хочемо малювати інтерфейси і сайти в пікселях і в кольоровій схемі RGB?». І попросту прибрали таке діалогове вікно.
 
Натиснувши Cmd-N, ви отримаєте нове вікно документа миттєво.
 
«Якого ж розміру буде створений документ?» — Запитаєте ви. А ніякого.
 
Справа в тому, що в Sketch безрозмірний кинувся. І, відповідно, нескінченний рівень масштабування. Колір фону у кинувся за замовчуванням білий.
 
Але як же бути, якщо є необхідність якось обмежити розмір свого документа. Наприклад, зробити його під формат iPad Retina Landscape?
 
Для цього і була введена можливість створення сторінок і артбоардов. Натисніть клавішу A (або виконайте команду Insert> Artboard) і виберіть один з відповідних варіантів в списку, що з'явився в панелі інспектора:
 
 
 
Або ж почніть створювати свій власний розмір, натиснувши і потягнувши прямокутну область курсором мишки. При цьому під час створення будуть динамічно відображатися ширина і висота бажаного артбоарда:
 
 
 
Після цього артбоард буде створений. Його ім'я з'явиться в списку шарів, в панелі інспектора з'являться властивості артбоарда. Простір за межами стане сірим, а всередині залишається білим (колір фону потім можна поміняти в інспекторові). Над артбоардом відображається його ім'я, яке можна поміняти, двічі клікнувши на імені в панелі шарів:
 
 
 
Також можна змінити розмір артбоарда, потягнувши за будь-який з кутових або серединних контролов. Артбоарди можна перетягувати на будь-яке місце на канвасе, дублювати, видаляти, вирівнювати один щодо одного. Загалом, виробляти більшість операцій, характерних для звичайного прямокутника, крім, зрозуміло, обертання, скоса та інших спотворень. Фактично, артбоарди — це такі ж векторні об'єкти, що мають свої специфічні властивості і є одночасно групою і маскою для поміщаються всередині інших об'єктів. Те, що входить до складу артбоарда, але виходить за його межі, попросту не показується.
 
Кількість створених артбоардов необмежена, тому в межах одного документа ви можете створити, наприклад, основи для екранів iPhone, iPad, а також для всіх основних типорозмірів іконок:
 
 
 
Крім вибору кольору фону і вказівки можливості включати фон артбоарда в експортований файл, можна використовувати ще дві опції для експорту. Особливо корисною буде Trim Transparent Pixels: якщо ваш артбоард перевищує розмір поміщеного об'єкта, то при включенні цієї опції висота і ширина зображення підганяючи під розміри об'єкта, а всі зайві пікселі будуть відсічені.
 
Крім того, натиснувши на плюсик в розділі Export на панелі інспектора, ви побачите різні опції для експорту (про це поговоримо пізніше) і невелику мініатюру з вмістом артбоарда. Досить натиснути і потягнути цю Мініатюрк в будь-яке місце (Робочий стіл, Finder, Mail.app, Coda тощо). У тому місці буде створений PNG-файл, що містить все те, що знаходилося всередині артбоарда. Дуже просто і приголомшливо зручно:
 
 
 
Це дозволяє обійтися без виклику додаткових вікон начебто Save for Web…
 
Артбоарди ще дуже зручні для створення ієрархії екранів для мобільного додатку. Ви можете розмістити ці їх таким чином, щоб відстежувати всі рівні вкладеності:
 
 
 
Крім цього ви можете створювати будь-яку кількість сторінок. Кожна сторінка при цьому може мати довільне число артбоардов. У палітрі шарів натисніть на саму верхню смужку, де написано Page 1, і ви побачите спливаючий список створених сторінок (споконвічно є одна). Натиснувши на плюсик, ви створите нову порожню сторінку, яку можна перейменувати на свій розсуд:
 
 
 
Дуже зручно в межах одного документа мати кілька сторінок, всередині яких організовані необхідні артбоарди, містять групи шарів. Фотошоп не може похвалитися настільки розвиненої системи організації багатосторінкових документів.
 
На жаль, але поки немає можливості створювати майстер-сторінки, які містять однакові елементи, що повторюються. Але розробники обіцяли реалізувати цю функцію в наступних версіях програми.
 
Однак, при створенні нового документа ви можете скористатися вбудованими шаблонами і створювати власні шаблони на основі ваших документів.
 
Натисніть File> New From Template і виберіть один з п'яти встановлених варіантів або з тих шаблонів, які ви створили за допомогою File> Save As Template.
 
Поки що вбудовані шаблони дозволять вам створювати інтерфейси та іконки для Mac OS і iOS, але в планах у розробників включити аналогічні набори для Android, Windows Phone, Windows, Linux, Tizen та інших операційних систем. Втім, подібні шаблони вже можна відшукати в мережі. Наприклад, ви можете безкоштовно завантажити набір інтерфейсних елементів найсвіжішої системи OS X 10.10 Yosemite .
 
Якщо був обраний попередньо встановлений шаблон iOS UI Design, ви отримуєте чудовий набір символів від Teehan + Lax .
 
Натисніть на вибір сторінок і замість Welcome перейдіть на сторінку Symbols:
 
 
 
Тут ви знайдете всі необхідні елементи для створення додатків під iOS8. Просто перетягуйте потрібні об'єкти на свої артбоарди або створюйте з бібліотеки символів:
 
 
 
Розібратися з цим не важко, тим більше, що Teehan + Lax написали докладний посібник, доступне на першій сторінці Welcome.
 
Отже, зі створенням документа ми розібралися, що ж далі?
 
З експортом ми частково ознайомилися, а важливі деталі обговоримо пізніше.
 
З імпортом справи йдуть таким чином. Sketch розуміє всі основні растрові графічні формати: JPEG, TIFF, PNG, причому для останніх двох враховується альфа-канал. Файли PSD можна імпортувати, але будуть проігноровані шари і канали, зображення буде поміщено як одношарове. Те ж саме відноситься і до формату AI. Крім того, є підтримка трьох векторних форматів: SVG, EPS і PDF. Найкраща ступінь конвертації реалізована лише для SVG (можливі якісь втрати специфічних властивостей, але найчастіше Sketch імпортує все правильно). У випадку з EPS і PDF результат, швидше за все, буде далеко не найкращий, тому переважно спочатку перевести ці файли в SVG за допомогою Adobe Illustrator, як я писав на початку огляду.
 
Макети записуються у форматі. Sketch. Розмір їх виходить відносно невеликим, і істотний вплив на цю величину надає лише велика кількість растрових зображень, поміщених в Sketch. Оскільки, як я вже згадував раніше, всі зображення трактуються як смарт-об'єкти (ви можете зменшити зображення до будь-якого розміру і потім відновити до початкових розмірів без втрати якості), тому будьте обережні і не використовуйте картинок з високим дозволом, якщо в результаті вам потрібно невелике за розміром зображення.
 
Наприклад, файл з порожнім артбоардом для iPhone (640x1136 пікселів) буде займати всього 5 кілобайт проти такого ж файлу. Psd, розмір якого буде в кілька разів більше — 68 кілобайт. Та ж тенденція зберігається і при створенні більш складних макетів. Наприклад, одна композиція у форматі. Sketch у мене вийшла на 785 Кб, тоді як аналогічний. Psd зайняв цілих 3,2 мегабайта. Немає потреби говорити, що макети Sketch значно привабливіше як з точки зору економії простору, так і з точки зору швидкості відкриття і запису.
 
Будучи Cocoa-додатком, Sketch повною мірою підтримує такі чудові функції Mac OS як Full Screen, Auto Save і Versions.
 
Остання особливо важлива, оскільки ви в будь-який момент можете відкотитися до попереднього варіанту дизайну. Якщо ви переробили макет, і хочете повернутися до однієї з минулих записаних версій, натисніть File> Revert To> Browse All Versions і вибирайте вподобаний варіант (про роботу з Versions можна почитати тут ):
 
 
 
Фотошоп не може поки похвалитися подібним функціоналом, тому користувачі змушені вдаватися до не особливо зручним і далеко не завжди зрозумілим способам начебто History Snapshots або Layer Comps. Особисто я так і не зміг звикнути до них, тому Versions для мене виявився дуже корисним методом роботи з змінами в макетах.
 
Натиснувши Ctrl-R, ви включите показ лінійок. Потягнути і витягнути напрямні лінійки, як у фотошопі, в Sketch не можна, але можна створити ці напрямні, двічі клікнувши по лінійці. Можна переміщати їх, схопивши і потягнувши фрагмент направляючої на лінійці. При цьому завжди буде відображатися чисельне значення в пікселях. Пріоритет віддано саме цим числам, тому номінальні розмічальні значення будуть напівпрозорої ховатися, якщо лінійка потраплятиме близько до області цих значень. Дуже зручно, адже ви завжди будете знати, на якому саме місці встановлені ваші напрямні:
 
 
 
Але, як показує практика, створювати ці лінійки абсолютно необов'язково. Адже в Sketch є кілька абсолютно приголомшливих способів контролю за розміщенням об'єктів.
 
Наприклад, ви можете включити режим відображення простий сітки, натиснувши іконку View на тулбарі і вибравши Show Grid або натиснувши Ctrl-G:
 
 
 
Там же можна вибрати Grid Settings і налаштувати сітку під себе:
 
 
 
Але є спосіб і трохи краще. У Sketch є функція побудови складних розмічальних сіток. Викличте View> Show Layout (Ctrl-L) і за замовчуванням будуть відображені стали стандартом 12 колонок для ширини макета 960 пікселів:
 
 
 
Зрозуміло, ви точно так само можете налаштувати лейаута під себе. Наприклад, змінити ширину макету, число колонок, а також додати горизонтальні лінії:
 
 
 
При цьому, якщо вам не дуже подобаються напівпрозорі зафарбовані прямокутники в якості основи для сітки, ви можете поміняти їх на лінійки будь-якого кольору. Зайдіть в налаштування (Sketch> Preferences або Cmd-,) і у вкладці Canvas поміняйте Fill Grid на Stroke Outline, а також налаштуйте переважні кольори:
 
 
 
Звичайно, всі створювані і переміщувані об'єкти будуть прилипати до цих напрямних лініях. Не потрібно більше ніяких сторонніх плагінів і шаблонів з напівпрозорими шарами. Красота!
 
Є нюанси і при створенні об'єктів. Вибравши інструмент малювання, наприклад, округленій прямокутника, ви побачите лінійні розміри створюваного об'єкта, динамічно відображаються праворуч і знизу:
 
 
 
При затиснутою клавіші Shift розміри будуть рівнозначними, а при затиснутій клавіші Alt об'єкт створюється зі удвічі більшими значеннями висоти і ширини.
 
Якщо ви захочете змінити розмір створеного об'єкта, необов'язково звертатися до панелі інспектора (хоча дуже зручно коректувати ці значення саме там, оскільки можливість оперувати не на око, а з точними числами неймовірно дисциплінує). Можна при клавіші Cmd натискати стрілки на клавіатурі і бачити, як динамічно змінюється розмір в інспекторові з кроком в один піксель. При натисканні клавіші Shift ці зміни будуть з кроком в 10 пікселів. Приголомшливо зручна функція.
 
Коли ви переміщаєте об'єкти, вони прилипають не тільки до сіток і напрямних, а й до смарт-гайдів, які з'являються, коли перетаскується стикається з кордонами або центральними осями інших об'єктів:
 
 
 
Але навіть це ще не все!
 
Дизайнери з Bohemian Coding придумали дуже потужний і ефективний спосіб відстеження відстаней.
 
Виділіть один об'єкт і, натиснувши клавішу Alt, підведіть мишку до будь-якого іншого об'єкта (він підсвітить блакитний обведенням), і ви побачите відстані до кордонів того об'єкта:
 
 
 
Ви можете, не відпускаючи клавішу Alt, перемістити мишку на будь-який інший об'єкт, і відстані відобразяться до нього.
 
Але це ще не все! Не відпускаючи Alt і не відводячи курсор миші зі невибраного об'єкта, до якого вам важливо бачити відстані, натискайте стрілки на клавіатурі і пересувайте виділений об'єкт, спостерігаючи, як динамічно змінюються показуються значення. Клавіша Shift також включає крок у 10 пікселів.
 
Якщо ж у вас вибрано декілька об'єктів, то при натисканні клавіші Alt і наведенні на будь-який з об'єктів будуть показані всі чотири відстані від нього до кордонів рамки, що обмежує всю вибірку об'єктів:
 
 
 
І навіть у режимі копіювання об'єкта ви зможете побачити подібні динамічні значення. Натисніть Alt і почніть перетягувати об'єкт. Ви побачите що виникають смарт-гайди, що допомагають розташувати дублікат в потрібне місце. Не відпускаючи Alt і клавішу миші, натисніть Shift — і тепер ви побачите цілий набір всіляких відстаней до граней вихідного об'єкта:
 
 
 
Якщо ви розмістили поруч два об'єкти, і хочете поставити третій, то при його пересуванні в певний момент крім смарт-гайдів з'являться значення в пікселях, що позначають однакові відступи між кожними об'єктами:
 
 
 
Всі ці можливості воістину вражають, адже вони покликані по максимуму оптимізувати компоновку макетів.
  
На цьому все. У наступній частині огляду ми продовжимо досліджувати корисні дрібниці, які заховані в надрах Sketch.
 
 Вдалого фотошопинг скетчінг!
 
 

 
     
Switch to Sketch. Частина 1
 Switch to Sketch. Частина 2
 Switch to Sketch. Частина 3
 
 

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

0 коментарів

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