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

    image
 
Про програму Sketch я дізнався ще рік тому. Скачав демо тоді ще 2-й версії. Зізнатися, вона мене абсолютно не вразила. Якийсь занадто простий здалася. Я звик до навороченим інтерфейсам софта від Adobe, а розташування панелей в стилі Apple iWork (Pages, Numbers, Keynote) мені з якоїсь причини не подобається. До того ж мені виявилося комфортніше працювати з темним інтерфейсом, якою нині є в Photoshop CC. Плюс Sketch 2 був досить кривуватий, містив чимало прикрих багів, та й взагалі враження не надавав швидкістю роботи. Загалом, погрався з демкой і благополучно забув. Втім, виявилося, що даремно…
 
 
 
Але з часом став все частіше і частіше зустрічати схвальні відгуки на адресу програми (наприклад, тут і тут ). Особливо багато їх стало з'являтися навесні 2014 року, коли Bohemian Coding випустили 3-ю версію свого продукту. Творці запевняли, що, будучи самі дизайнерами, вони зосередилися на виготовленні продукту, максимально заточеного під потреби саме дизайнерів. У першу чергу — дизайнерів інтерфейсів і сайтів. Ну, тобто, ніби як для мене.
 
Я знову скачав демо вже нової версії, потикав, покрутив. Щось сподобалося, щось ні. І знову у мене не склалося враження, що програма ця мені підходить. Повернувся до звичного фотошопу.
 
І так сталося, що мені довелося робити дуже складний і вкрай цікавий проект, де було потрібно малювати інтерфейсні елементи для iPad з роздільною здатністю Retina. Там було багато тулбаров, панелей, спливаючих вікон. Все це вирішено було зробити з ефектом матовою напівпрозорої як в iOS7 (transcluent frosted glass). У фотошопі це зробити непросто, особливо, якщо потрібні динамічні об'єкти, при переміщенні зберігають розмиття розташованих нижче шарів. Такий метод, втім, є. Але він таїть у собі ряд недоліків. По-перше, потрібно постійно створювати нові смарт-об'єкти, якщо міняється структура фону. По-друге, на кожну панель потрібно виділяти копію смарт-об'єкта з розмиванням, щоб зробити необхідну маску. Загалом, через це макет дуже швидко роздувся.
 
Одного разу я виявив, що він ледь поміщається в оперативній пам'яті, сильно уповільнює всі процеси, а на жорсткому диску займає вже близько 700 мегабайт! Я спробував розділити макет на логічні складові і розбив його на кілька менших частин. І все одно, кожен PSD займав як мінімум 100-200 мегабайт. До того ж часом доводилося одночасно відкривати два-три цих макета, щоб перенести якісь шари з одного в інший. При цьому фотошоп моторошно гальмував, що дико нервувало, адже у мене далеко не самий шустрий мак. Моєму дідусеві вже п'ять років, на його борту всього лише двоядерний Core2Duo та простенька відеокарта з 256мб відеопам'яті. На момент покупки він більш-менш справлявся з покладеними завданнями, тоді адже фотошоп був версії CS5, а вона була не настільки ненажерливої, як нинішній CC. На жаль, Adobe з року в рік нарощує свої продукти всілякими пляшками і функціями, які в дев'яти випадках з десяти виявляються марними і тільки погіршують продуктивність пакета, роздувся до потворного стану.
 
Загалом, морока і головний біль.
 
І тоді я згадав про Sketch. Дізнався, що там для шарів є властивість Background Blur , що дозволяє просто добитися необхідного ефекту матового скла на напівпрозорих панелях без застосування будь-яких хитрощів.
 
Скачав актуальну на даний момент версію 3.0.3 (яка, до речі, по завіреннях розробників і численними відгуками користувачів, нарешті, позбулася більшості багів і непорозумінь). І став пробувати. Бо твердо вирішив світчнуться з фотошопа у щось більш підходяще, незважаючи на те, що продукту від Adobe я був вірний цілих 15 років.
 
Ось як виглядає мій варіант розташування панелей в Photoshop CC (клікабельно):
 
 01b-photoshop-thumb.jpg
 
А ось так виглядає віконце запущеного Sketch з невеликою доведенням верхнього тулбара під мої потреби:
 
 02b-sketch-small.jpg
 
Ну що ж, настала пора випробувати програму в роботі.
 
Для початку я вирішив імплантувати в макет основу, яка у мене була в форматі EPS. Це простенька векторна ілюстрація мультяшного характеру.
 
Фотошоп дозволяє відкрити EPS у вигляді смарт-об'єкта, який можливо редагувати лише в Adobe Illustrator, двічі клікнувши по імені шару в фотошопі. Мені такий варіант абсолютно не годився, оскільки була потреба в певні моменти приховувати якісь об'єкти з ілюстрації, переносити їх в іншому місце, обертати і робити напівпрозорими. Поетом мені довелося вибирати в ілюстратора потрібні об'єкти окремо, переносити їх через Copy / Paste в фотошоп як смарт-об'єкти, поки я не отримав потрібний набір з 20 шарів необхідних мені компонентів. З одного боку, це виявилося дуже виснажливим заняттям, а з іншого боку, макет тільки однієї основи у форматі PSD виріс до непристойних 40 мегабайт, хоча початковий EPS важив всього лише 7 мегабайт. Ось така «приголомшлива» зв'язка у продуктів одного пакету — Photoshop і Illustrator. Дивно, що досі Adobe не зробила адекватне і обопільне розуміння цими програмами форматів PSD і AI.
 
Може виникнути резонне питання, а чому я цілком і повністю не працюю в ілюстратора? Ну от якось не склалося у мене з ним. Щось мені в ньому сильно не подобається, ніяк не можу звикнути. Та й до того ж, він монстр не менше роздутий, ніж фотошоп, і продуктивністю аж ніяк не радує. Плюс там і зовсім неможливо зробити ефект матового скла простими методами. Іншими словами, Adobe Illustrator мені потрібен лише як певний проміжний інструмент, а в якості основної середовища для дизайну особисто мені не годиться.
 
І тому я використовував Illustrator як перевалочну базу. Справа в тому, що хоча Sketch і розуміє формат EPS, але імпортує його якось криво, нерідко перебріхуючи заливки і обведення. Зате дуже добре дружить з форматом Scalable Vector Graphics (SVG). Тому в ілюстратора наявний EPS перезаписав в SVG і відкрив в Sketch. Треба сказати, завантаження макета пролетіла за лічені секунди, а всі об'єкти зберегли свої характеристики. Скажу навіть більше — всі угруповання векторних форм виявилися вірними, так що вибрати потрібний об'єкт і зробити що-небудь з ним вийшло простіше просто. Власне, те, що потрібно. І файлик у форматі. Sketch у підсумку виявився дещо більше вихідного EPS — 7,5 мб. Проти 40 з гаком мегабайт. Psd!
 
Заодно я подивився розміри, які обидві програми займають на диску і в пам'яті, а також виміряв секундоміром швидкості запуску, відкриття і запису документа, виходу з програм.
 
Ось які вийшли результати:
 
 03-table.jpg
 
Як видно, фотошоп з тріском програє по всіх статтях. До того ж не дозволяє повністю редагувати всі перетягнуті з ілюстратора об'єкти, як це вміє Sketch.
 
Більшість клавіатурних комбінацій виявилися однаковими для обох програм, але до деяких довелося звикати в Sketch. що, загалом-то, не проблема. І навіть по закінченні якогось часу, повертаючись в фотошоп, я вже за звичкою кілька разів намагався використовувати скетчевскіе шорткати. Всі вони описані на цьому сайті: sketchshortcuts.com
 
Там же, до речі, описано, як додати свої власні шорткати. Наприклад, в Sketch не було клавіатурного скорочення для показу / приховування напрямних гайдів, так що я додав звичну комбінацію Cmd-;
 
 04-sketchkb.png
 
Вважаю, що в майбутньому в міру використання програми я додам ще кілька зручних сполучень. Втім, і тих, що є, цілком поки достатньо.
 
Наступним етапом стала необхідність створення того самого напівпрозорого вікна з ефектом матового скла в стилі iOS7. Як я вже писав вище, в фотошопі доводилося використовувати хитрість з копією смарт-об'єкта, яка піддавалася гауссової Розмивка (Gaussian Blur на 20 пікселів) з додаванням шуму (Add Noise зі значенням 1%).
 
Ось як виглядала розстановка шарів в фотошопі. Для прикладу я взяв просту фонову фотографію і додав білий прямокутник з округленими кутами, який імітував спливаюче вікно з ефектом матового скла:
 
 05-pspanel.png
 
Розмір цього PSD — 5,5 Мб
 
Те ж саме я зробив у Sketch за допомогою вбудованих ефектів Background Blur і Noise. вийшло ось що:
 
 06-spanel.png
 
А розмір цього файлу. Sketch — 643 Кб. Майже в десять разів менше! При цьому всього лише три шари (власне, для основи попап потрібен всього один шар, а не три, як у фотошопі).
 
Чи треба говорити, що аргументів на захист фотошопа, з яким я пропрацював довгих 15 років починаючи з версії 3.0, попросту не знаходиться.
 
Далі я взяв зображення побільше, вже під iPad Retina і став створювати напівпрозорі віконця, нашпіговивая їх іконками і текстом. І виявилося, що моя слабенька відеокарта не витримує такого навантаження, і при спробі перемістити все це добро з великою кількістю Блура починаються досить відчутні гальма.
 
Але, як виявилося, це легко розв'язувана проблема. Тому як в Sketch є така дивовижна штука, як лінковані стилі.
 
Досить вибрати один з об'єктів, на якому є всі необхідні ефекти прозорості, розмиття, заливка і шум і додати лінкуватися стиль:
 
 07-saddlinkedstyle.png
 
Потім застосувати цей стиль до всіх потрібних об'єктів.
 
І якщо потрібно якось перетасувати всі ці об'єкти на екрані, можна тимчасово прибрати ефекти розмиття і шуму, натиснувши на відповідні чекбокси, і ці ефекти відключаться у всіх об'єктів з даним стилем. Тоді переміщення і трансформація всіх шарів буде максимально швидкою. Ну а перед тим, як експортувати зображення, потрібно точно так само легко парою кліків включити ефекти:
 
 08-snoblur.png
 
Коли я створив 10 таких попап в фотошопі, розмір файлу збільшився до 19,1 мб, тоді як аналогічний. Sketch виріс лише до 672 Кб!
 
У Sketch геть відсутні будь кнопки для вирівнювання об'єктів один щодо одного, хоча є такі пункти в меню Arrange (Align і Distribute). Спочатку це мене збентежило, адже я звик у фотошопі використовувати такі кнопки на панелі інструментів. Але, як виявилося, вони абсолютно не потрібні. Адже в Sketch прекрасно реалізовані смарт-гайди, і при переміщенні об'єкта можна легко розпізнати, коли вона прилипає до країв іншого об'єкта або знаходиться в центрі:
 
 09-salign.png
 
У ході експериментів я виявив ряд цікавих особливостей Sketch, які неймовірно покращують і прискорюють робочий процес.
 
Наприклад, в фотошопі завжди дратувала «стрибучість» тексту, якщо необхідно змінити тип вирівнювання рядків. Варто було до вирівняні по центру текстовому блоку застосувати вирівнювання вліво, як весь текст зсувався вправо. Напевно, в цьому є якась логіка, але погодьтеся, що всякий раз доводилося вгадувати таку поведінку і занова коректувати положення шару:
 
 10-pstext.png
 
У Sketch ніяких стрибків не відбувається. Текстовий блок залишається на місці, тоді як змінюється лише взаємне вирівнювання рядків усередині цього блоку. Дрібниця, а приємно:
 
 11-stext.png
 
До речі, ще трохи про текст. Розробникам сайтів та інтерфейсів буде приємно дізнатися, що Sketch використовує системний антиалиасинг, причому можна як включити, так і відключити субпіксельних рендеринг, що дозволяє отримати максимальну відповідність того, що буде відображатися на сайті або в програмі. А що там у нас в Photoshop? У версії CC на додаток до вже наявних п'яти типам згладжування (None, Sharp, Crisp, Smooth і Strong) додали ще два (Mac і Mac LCD). Але жоден з них не повторює антиалиасинг, використовуваний, наприклад, в браузерах. Що робить усю цю оберемок методів згладжування практично даремною (хоча None у вкрай рідкісних випадках може виявитися корисним).
 
Ось як для порівняння виглядають типи згладжування в Photoshop, Sketch і в браузері Safari:
 
 12-alias.png
 
І якщо в фотошопі після створення текстового об'єкта необхідно в панелі інструментів вибрати щось інше, наприклад, інструмент переміщення об'єктів, а для того, щоб повернутися до редагування тексту, вибрати інструмент тексту, то в Sketch ніяких перемикань між інструментами не потрібно. Вибирайте створений текстовий шар, двічі клікайте і редагуйте. Після чого достатньо натиснути на будь-який інший об'єкт або порожню область кинувся.
 
Дуже зручним є підсвічування об'єкта блакитний обведенням при наведенні мишки. Причому підсвічується також рамка навколо імені даного об'єкта в палітрі шарів:
 
 13-highlight.png
 
При роботі в фотошопі я нерідко стикався з дивною і ніяк не прогнозованою екстраполяцією розмірів. Наприклад, потрібно вставити в макет з десяток зображень різного розміру, перетворити їх на смарт-об'єкти і підігнати висоту всіх цих об'єктів під задану величину. Скажімо, зменшити їх пропорційно до 100 пікселів по висоті.
 
І ось тут нерідко починалися муки. Оскільки кожен об'єкт припадало зменшувати вручну, постійно контролюючи точність екстраполяції. При цьому потрібно було звертатися до верхньої панелі, де розміри за замовчуванням вказувалися у відсотках, а для введення точного значення в пікселах потрібно було дописувати «px», і дуже часом дратувало, якщо вчасно не перемкнув розкладку і ввів «зч», на що фотошоп лаявся, бо таких одиниць виміру він не розуміє. До того ж символ ланцюжка, що відповідає за пропорційну зміну масштабу, як на зло, за замовчуванням завжди відключений, і доводилося щоразу нагадувати собі його включити. Звичайно, і до таких мукам можна звикнути, але чи треба воно?
 
У більшості випадків фотоошоп справлявся з масштабуванням коректно, але іноді траплялися екземпляри, у яких висота була то 99, то 101 піксель. У реальності там просто добвлялась ледь помітна напівпрозора смужка на одній зі сторін.
 
У Sketch ж якщо ви масштабіруете об'єкти (особливо це важливо у відношенні растрових об'єктів), то вони приймають виключно цілочисельні значення, такі, як ви вказали у вікні інспектора. І ніяких «пухнастих» країв.
 
І при цьому ніяких додаткових символів на кшталт «px» вводити не потрібно, оскільки Sketch спочатку заточений під роботу з пікселями. Втім, можна ввести і відсотки, він нормально розпізнає і смасштабірует об'єкт. Крім цього, можна використовувати арифметично операції начебто 300 * 2 або 256 +128.
 
Дуже корисною виявилася варіативність клавіатурною комбінації Cmd-D. Якщо шар не був переміщений з копіюванням, цей шорткап просто дублює шар. А от якщо вироблялося переміщення шару з одночасним копіюванням (при затиснутій клавіші Alt), виклик Cmd-D продублює об'єкт з відповідним зсувом щодо оригіналу. Так що можна швидко розкидати копії на однакову відстань.
 
Є й інший, більш цікавий спосіб розподілу об'єктів — створення сітки з об'єктів. Для початку потрібно виділити необхідні об'єкти:
 
 14a-grid-selected.png
 
Потім необхідно вибрати команду меню Arrange> Make Grid…
 
 14b-grid-nobox.png
 
І об'єкти розподіляться із зазначеними відступами:
 
 14c-grid-nobox-result.png
 
А якщо включити чекбокс Boxed, то будуть враховуватися не лінійні розміри самих об'єктів, а однакового розміру бокси, усередині яких розміщуються вибрані об'єкти:
 
 14d-grid-box.png
 
При цьому розмір передбачуваного боксу автоматично обчислюється програмою під найбільший розмір одного з об'єктів, а самі об'єкти будуть отцентровани усередині боксу по горизонталі і вертикалі. Це дуже зручно для розподілу нерівнозначних об'єктів:
 
 14e-grid-box-result.png
 
Мається, до речі, цікава опція для трикутників. Якщо ви відредагували намальований трикутник так, що він став з різними кутами і сторонами, можна легко перетворити його на рівнобедрений, натиснувши на інспектора чекбокс Equilateral:
 
 15-equilateral.png
 
Звичайно, навіть у самій свіжій версії є невеликі прикрі баги. Наприклад, маніпуляції з об'єктами часом залишають екранні артефакти. Але розробники активно працюють над усуненням цієї проблеми. У бета-версії 3.0.4 я вже не спостерігав таких нюансів. Очевидно, що програма від версії до версії буде ставати все краще і стабільніше. Крім того, відрадно, що розробники внемлют побажанням дизайнерів. Я теж запропонував парочку ідей, і мені відповіли на наступний день, включивши мої побажання в wishlist на майбутні версії.
 
На цьому поки все. У наступних частинах я розповім про свої подальші відкриттях в чудовій програмі Sketch.
 
 Вдалого фотошопинг скетчінг!
    
Джерело: Хабрахабр

0 коментарів

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