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

    
 
Отже, продовжимо досліджувати програму Sketch 3 з метою подальшого світчингу в неї з Фотошопа. Першу частину можна почитати тут .
 
 
Один з головних приводів для гордості у розробників з Bohemian Coding — це абсолютна заточка всього інструментарію під роботу з пікселями. Напевно творці програми самі колись мучилися з Photoshop і Illustrator, доки їм не прийшла в голову ідея створити графічний редактор з нуля, де були б реалізовані найоптимальніші алгоритми підгонки пікселів.
 
Коли ви створюєте графіком в Sketch, вона автоматично прив'язується до пиксельной сітці, так що ви ніколи не отримаєте дрібних значень, а значить — розмитих країв, пухнастих ліній і інших несуразностей. Всі краї утворюються ідеально рівними, а округлості згладжені самим найкращим чином.
 
Але найбільш вражаюча особливість Sketch — це можливість одним махом виправити будь-які об'єкти, у яких з якихось причин утворилися нерівності і розмитості по краях.
 
Давайте для прикладу візьмемо набір простих гліфів, створених в ілюстратора. Всі вони при перенесенні в Sketch вийшли трохи розмитими, що добре видно при сильному збільшенні:
 
 
 
А тепер застосуємо команду Layer> Round To Nearest Pixel Edge. Вуаля! Всі ікони вирівнялися таким чином, що не залишилося ніяких відхилень від нормальної товщини ліній:
 
 
 
Ця дивно проста, але ефективна функція може істотно скоротити час роботи. Особисто я пам'ятаю багато виснажливі години, проведені в чищенні і підрівнювання іконок і логотипів для клієнта. Причому, кожен об'єкт припадало обробляти вручну, щоб підігнати до пиксельной сітці. У Sketch цю справу на пару секунд. Вражає.
 
Втім, будьте обережні. Іноді ця функція спрацьовує не найкращим чином і корчить деякі Безьє-сплайни, можуть з'явитися артефакти. Варто сподіватися на те, що розробники допрацюють алгоритм, і гарантія пикселизации буде стовідсотково прогнозованою.
 
Зрозуміло, в Sketch прекрасно реалізована можливість створення прямокутників з округленими кутами. Що б ви не робили зі своїми прямокутниками, завжди є можливість міняти обрізка кутів як у окремих прямокутників, так і у всіх виділених відразу, а також у конкретно обраних кутів:
 
 
 
До речі, по подвійному кліку на об'єкті або при натисканні клавіші Enter ви потрапляєте в режим редагування його складових. І тоді ви можете вибрати і потягти вузлики Безьє-сплайнів, конвертувати вузлову точку в один з чотирьох типів і виконати ряд інших корисних маніпуляцій.
 
У цьому режимі ви можете вибирати окремі точки, а також вказувати, як вони взаємодіють між собою. У Bohemian Coding вирішили, що дроблення пікселів не надто бажано, тому за основу беруться цілочисельні значення. Але іноді виникають випадки, коли необхідна більш тонка підстроювання. І на цей випадок була додана можливість коригувати вузли на об'кете зі значенням в половину пікселя:
 
 
 
У такому режимі ви можете вибрати один або декілька вузлів і за допомогою миші акуратно зрушити так, щоб утворилася необхідна межа з половинною прозорістю. У деяких випадках це може виявитися досить корисним.
 
У режимі редагування вузли і сегменти кривої підсвічуються при наведенні курсору.
 
Можна легко додавати нові вузли на кривих. Досить навести курсор на одну з граней, яка підсвітиться блакитною лінією. При кліці буде створена нова вузлова точка. Подвійний клік по створеної точки буде перемикати її між кутовий (Straight) і згладженої з симетричними напрямними (Mirrored). При затиснутою клавіші Cmd і при наведенні курсору на будь-який з сегментів кривої буде показана ймовірна точка на даній ділянці кривої, рівновіддалена від наявних вузлових точок, яку можна створити при подальшому кліці. Вельми зручна функція:
 
 
 
Видалити будь-яку точку можна, вибравши її та натиснувши клавіші Backspace або Delete.
 
Шкода, але розробники програми трохи перестаралися, сховавши дві важливі функції при створенні кривих Безьє. Обидві кнопки «Finish Editing» (замінюється натисканням Esc або Enter) і «Close Path» (на жаль, за замовчуванням не замінюється нічим) ледь помітні нагорі в панелі інспектора:
 
 
 
Працюючи з інструментами Pencil або Vector ви не зможете зупинити подальшу промальовування кривої, якщо не була натиснута кнопка «Close Path» або клавіша Esc. Після цього ви зможете вибрати довільні точки вашого об'єкта (простим натисканням або рамкою навколо бажаних точок) і провести з ними будь-які трансформації, наприклад змінити тип виділених точок:
 
 
 
Якщо ж ви на замкнутої кривої натиснете кнопку «Open Path», ви знову отримаєте інструмент домальовування кривої без можливості зупинити це і перейти до вибору необхідних точок. І при цьому ви не зможете замкнути векторну форму, просто підвівши курсор до кінцевий точці, як в Illustrator. Логіка не зовсім ясна, але звикнути можна.
 
Я призначив клавіатурну комбінацію Cmd-Alt-P на функцію Layer> Paths> Close Path, і тепер в процесі створення кривих Безьє можна легко замкнути кінцеві вузли:
 
 
 
Загалом, створення і редагування кривих в Sketch — одне задоволення, особливо після досить безглуздих спроб впровадити функції ілюстратора всередині фотошопа.
 
І, до речі, слід запам'ятати одне правило для Sketch: якщо ви зайшли кудись не туди або натиснули щось не те, завжди натискайте клавішу Esc — практично скрізь у Sketch це скасовує включення будь-якого режиму, так що складно помилитися.
 
У Sketch є функція зміни ширини обведення на довільних ділянках. Потрібно вибрати об'єкт з обведенням і включити режим Layer> Paths> Stroke Width. З'явиться можливість додавати або прибирати парні контрольні точки на контурі, які дозволяють звужувати або розширювати обведення:
 
 
 
Будь-яку обведення при цьому можна легко перетворити на заливку за допомогою функції Layer> Paths> Vectorize Stroke. Я призначив на цю функцію клавіатурне скорочення Cmd-Alt-R:
 
 
 
Текст теж можна перетворити в редаговані криві з допомогою команди Type> Convert Text To Outlines (Shift-Cmd-O):
 
 
 
У більшості випадків конвертація буде успішною, але часом можуть відобразитися небажані артефакти.
 
При конвертації в криві Sketch створює групу, в якій окремим шаром є кожна літера з конвертованого тексту. Відповідно, редагувати вийде тільки кожен символ окремо. Вибрати всі символи відразу і редагувати всі вузлові точки у різних символів одночасно не вийде.
 
Справа в тому, що у Sketch кілька своєрідна і не зовсім звична робота з булевими операціями. Розробники Bohemian Coding вирішили, що будь-які булеві операції над векторними формами будуть Недеструктивні. Тобто в будь-який момент можна поміняти тип взаємодії форм, а також відредагувати будь-яку складову.
 
При цьому результатом булевої операції стає група, яка містить вихідні форми в незайманому вигляді. Ця група відображається в панелі шарів з маленьким значком, який є контуром, отриманими в результаті зчленування вихідних форм. Справа з'являється сіра іконка, яка вказує на те, з яким типом зчленування вищерозміщена форма взаємодіє з нижележащей. Натискання на цю іконку викликає появу попап, де можна вибрати будь-який інший тип булевої операції:
 
 
 
Втім, розробники передбачили можливість об'єднання декількох форм в одну. За допомогою команди Layer> Paths> Flatten (або при натисканні по відповідній кнопці на панелі інструментів) відбувається злиття тих ділянок вихідних форм, які або доповнюють один одного (Union), або віднімають одну з іншої (Substract), або перетинаються (Intersect). У такому випадку результатом буде всього один новий об'єкт. Якщо ж виникають області перетину або дірки, то такі області з'являться як окремі шари. Тому в разі булевої операції Difference ви завжди отримаєте як мінімум два об'єкти, поміщених в групу. Куди більш несподівані варіанти вийдуть, якщо ви намагаєтеся застосувати Flatten до складніших типам зчленування між декількома формами. Трохи незвично, але звикнути можна:
 
 
 
До речі, можна приховати відображення дірок, не змінюючи тип булевої операції і не чіпаючи самі форми. Для цього потрібно в панелі інспектора праворуч натиснути на маленьку іконку шестерінки в розділі Fill і замість режиму Even-Odd вибрати зі спливаючого списку режим Non-Zero. Однак, даний метод працює далеко не завжди. Наприклад, у сконвертування в криві літери A дірка залишилася НЕприхована, тоді як кругла дірка усередині прямокутника зникла (хоча сама кругла форма і раніше присутня в групі):
 
 
 
Якщо Flatten не застосовувався, суміщені з допомогою будь-яких булевих операцій об'єкти можна роз'єднати за допомогою команди Layer> Paths> Split:
 
 
 
Крім того, можна об'єднувати незакриті форми за допомогою команди Layer> Paths> Join. Виберіть два або кілька таких об'єкта, застосуйте Join, і утворюється один об'єкт, в якому найближчі кінці вихідних форм будуть соедініни в одну вузлову точку:
 
 
 
На цьому поки все. У наступних частинах я розповім про свої подальші відкриттях в чудовій програмі Sketch.
 
 Вдалого фотошопинг скетчінг!
 
 

 
 Switch to Sketch. Частина 1
    
Джерело: Хабрахабр

0 коментарів

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