Brave Designers, 10 прийомів у Скетч, про які Боярський сказав би «Тища чортів, канальки! »
Декілька неочевидних прийомів, знайдених методом рандому, які полегшують роботу дизайнера.
Мені завжди подобалося крутити настройки програм і копатися в меню. Іноді я просто стукаю по клавішах, сподіваючись, що одна з них запустить чарівну функцію, яка закриє всі мої студентські кредити. Поки що безрезультатно, але хто знає…
Ось кілька фішок, які я виявив, граючи з налаштуваннями в Sketch:
1. Метод каракулі
Для початку повеселимося.
Я відкрив цей метод близько місяця тому, і з того часу він вірою та правдою служить мені на побаченнях. Дівчата це люблять, чеслово! Можливо, ви вже читали про нього в моєму докладному пості про діаграми.
Візьміть інструмент Олівець (Pencil tool – клавіша P) і намалюйте якусь каракулю, як це роблять маленькі діти. Подекуди зробіть її темніше, повівши олівцем по тому самому місцю. Не забувайте іноді переривати лінію – так цікавіше.
Збільшіть ширину обведення, задайте їй стиль-пунктир, поставте великий проміжок між точками, зробіть округлі кінці. Вуаль! Ви щойно створили випадковий розподіл. Ось як це виглядає у програмі
2. Заокруглення окремих кутів
Отже, тепер ми знаємо, що різним точкам можна задавати різний радіус закруглення в полі Border radius, відокремлюючи крапки слешами:
Зверху ліворуч/Зверху праворуч/ Знизу праворуч/Знизу ліворуч
Простіше простого. Жартую - це реально круто!
Крім того, точки можна виділяти по одній - це заощадить час при роботі з складнішими фігурами.
3. Розбираємо фігуру, щоб вирівняти контейнер після повороту
Уявіть: ви створили кльову фігуру та повернули її на 45º.Контейнер об'єкта також повернувся, і тепер при масштабуванні пропорції спотворюються. Ви почуваєтеся так, наче вас накрило хвилею і ви вже не знаєте, де верх, а де низ.
Просто розберіть фігуру (кнопка Flatten), і контейнер перетвориться на старий добрий прямокутник зі сторонами, паралельними до робочої області.
4. Затиснутий Option і Command-D для копіювання об'єктів та дій
Робите список? Досить копіювати, вставляти та пересувати об'єкти та групи нон-стоп!
Натисніть Option під час перетягування об'єкта або групи на потрібну відстань, потім натисніть Command+D, щоб зробити копію. Так ви не тільки продублюєте фігуру, а й пересунете її на ту ж відстань:
Псссс… артборди також можна так копіювати!
5. Змінюємо налаштування Pathfinder (Обробка контурів) для складених контурів
Згадайте, як часто, коли ви намагалися з'єднати кілька контурів в один, виходив такий результат:
Прикро, правда? Особливо якщо врахувати, що LobsterFest вже на носі, а Логотип до цих пір ще не готовий %. ;(. %%. ;!
Окей, зробіть глибокий вдих. Просто виділіть усі контури складового об'єкта та натисніть кнопку Union (Об'єднати):
Все б добре, але віконця і петлі в літерах — такі ж контури, що зливаються з усіма іншими. Ага.
На щастя, Sketch – розумна штука. Він дозволяє призначати окремим контурам усередині складеного об'єкта різні параметри злиття. Тепер можна вирізати отвори у літерах:
ДОДАТОК: Звичайно, знати про можливість налаштування окремих шарів при об'єднанні корисно, але мегакрутий Стеффен Карспек (Steffen Karspeck) розповів мені, як уникнути злиття внутрішніх контурів вже на першому етапі, просто виставившиправильні налаштування заливки (Fill Preference). Я спостерігав це сотню разів, але добре розібратися у відмінностях двох опцій не доходили руки. Адже це могло позбавити мене від зайвого головного болю 🙂
6. «Стопка» символів для різних станів об'єктів
Не можу згадати, де я вперше побачив цей метод — просто знайте, що вигадав його не я. Але рішення настільки цікаве, що я мушу їм поділитися.
Зробити навігацію за додатком символом — чудова ідея, адже тоді її можна редагувати на одній сторінці, при цьому зміни вноситимуться на решту. Недолік рішення в тому, що для демонстрації активного пункту меню вам доведеться постійно накладати зверху новий шар.
Пропоную позбутися зайвого шару за допомогою методу, який я називаю «Стоп символів»:
Розмістіть різні кнопки навігації один над одним. "Стопка" може бути будь-якого розміру - все залежить від того, скільки станів ви хочете або повинні показати.
Коли закінчите, перетворите все це на один великий символ!
Так як у Sketch різні сутності символу можуть містити різний текст, можна змінити текст у шарі для кожного стану.
Щоб приховати непотрібний стан та очистити текстове поле, введіть пробіл. На гіфці внизу я роблю активним пункт Settings, а два інших залишаю білими (їх нормальний стан).
На гіфці ви бачите «стопку» з чотирьох абсолютно однакових символів, кожен з яких позначає свій стан. Це відмінне рішення, воно дозволяє без проблем змінювати такі параметри, як гарнітуру або розмір шрифту - адже вам вже не доведеться редагувати шар, що лежить зверху, з обраним пунктом.
7. Шукаємо шар
Якщо ви клацаєте по об'єкту в робочій області, затиснувши Command, потрібний шар виявляється за межами видимості у списку шарів, він не підсвічується. Це дуже незручно.
На щастя, неподалік захована функція Reveal in Layer List (Показати шар у списку шарів). Вона поміщає його у видиму частину панелі. Шорткат - Command-Shift-J:
Це дуже зручний спосіб швидко перейти на виділений шар і перемикатися між шарами потрібної групи за допомогою клавіші Tab.
Клацніть по шару, затиснувши Command, потім натисніть Command-Shift-J, щоб шар з'явився у списку.
Ще одна порада Якщо у вас не встановлений плагін для згортання шарів у папці, затисніть Option і клацніть папку - її вміст відразу ж сховається.
Розкривши згорнутий список, ви помітите, що підгрупи також були приховані.
8. Швидкий експорт PNG - 4 способи!
Іноді потрібно швидко зберегти PNG, але при цьому зовсім не хочеться копатися в налаштуваннях експорту, а потім вишукувати, куди зберігся злощасний файл.
Ось чотири способи отримати PNG за допомогою Brilliant Technicolor GIF™:
Метод перший: перетягнути шар з артборду в нову область
Метод другий: перетягнути артборд, зробити його експортованим (Make Exportable) - праворуч з'явиться зображення, яке можна експортувати перетягуванням
Метод третій: перетягнути окрему групу чи шар
Метод четвертий: перетягнути об'єкт із Sketch в іншу програму
“Sketch дозволяє копіпастити будь-які артборди/групи/шари з Sketch до інших програм і назад. Скопіюйте артборд, відкрийте Medium або Slack, вставте об'єкт туди тавперед!”
Тайлер, Круте рішення!
9. Швидка заливка об'єкта патерном
Цей трюк нагадує угоду "два за ціною одного".
Спосіб перший: для створення безшовного патерну створіть символ із квадратного артборду і накидайте навколо інші сутності цього ж символу. Це дасть вам уявлення про те, як виглядатиме закінчений патерн.
Спосіб другий: для заповнення патерном іншої форми ми будемо використовувати метод, описаний у пункті 8.
Виділіть фігуру, яка буде залита візерунком, відкрийте меню Fill with Image (Заливка зображенням) та перетягніть артборд із основою для патерна на мініатюру зображення.
10. Ефект Боке
Зрозуміло, на десерт ми залишили найсмачніше.
Я з тих, хто фотографує краще за любителя, але гірше, ніж професіонал. Один із найкрасивіших фотоефектів – Боке. Можливо, сам термін вам не знайомий, але ефект ви бачили тисячу разів.
БОК (іменник, не схиляється) — фотозображення об'єктів, що знаходяться поза зоною різкості, зазвичай одержуване за допомогою спеціального об'єктива.
Це справді дуже гарний ефект. Завдяки вкрай малій глибині різкості погляд відразу ж рухається до розмитих ділянок знімка.
Я побалувався з каракулями, спробував зробити їх різного розміру, накласти різні штрихи, застосувати до кожного ефекти.
Наступне зображення повністю створено у Sketch, без використання фотографій. Все, що я зробив, — легкий градієнт на фоні і три каракулі різного кольору, з різним ступенем прозорості та параметрами розмиття Гауссом. Додав шар з ефектом шуму та режимом Overlay (Накладення), кинув зверху скляний текст (градієнтна заливка з внутрішнім свіченням вгорі та внизу). УВ результаті ми маємо досить переконливу картинку з ефектом боке: