10 приемов в Sketch, о которых Боярский сказал бы «Тыща чертей, канальи!»

Несколько неочевидных приемов, найденных методом рандома, которые облегчают работу дизайнера

7 min readOct 6, 2016

Мне всегда нравилось крутить настройки приложениях и копаться в меню. Иногда я просто стучу по клавишам в надежде, что одна из них запустит волшебную функцию, которая закроет все мои студенческие кредиты. Пока безрезультатно, но кто знает…

Не подумайте, что я испытываю приложение на прочность. Мне просто хочется узнать его возможности.

Вот несколько фишек, которые я обнаружил, играя с настройками в 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 в другое приложение

Бонус! Тайлер Хоуарт (Tyler Howarth) напомнил нам о возможности экспортировать PNG простым копированием слоя или артборда. Мы очень рады, что можем поделиться с вами этой рекомендацией. Вот, что говорит по этому поводу Тайлер:

“Sketch позволяет копипастить любые артборды/группы/слои из Sketch в другие программы и обратно. Скопируйте артборд, откройте Medium или Slack, вставьте объект туда и вперёд!”

Тайлер, Крутое решение!

9. Быстрая заливка объекта паттерном

Этот трюк напоминает сделку «два по цене одного».

Способ первый: для создания бесшовного паттерна создайте символ из квадратного артборда и набросайте вокруг другие сущности этого же символа. Это даст вам представление о том, как будет выглядеть законченный паттерн.

Способ второй: для заполнения паттерном другой формы мы будем использовать метод, описанный в пункте 8.

Выделите фигуру, которая будет залита узором, откройте меню Fill with Image (Заливка изображением) и перетащите артборд с основой для паттерна на миниатюру изображения.

10. Эффект боке

Разумеется, на десерт мы оставили самое вкусное.

Я из тех, кто фотографирует лучше, чем любитель, но хуже, чем профессионал. Один из самых красивых фотоэффектов — боке. Возможно, сам термин вам не знаком, но эффект вы видели тысячу раз.

БОКЕ (существительное, не склоняется) — фотоизображение объектов, находящихся вне зоны резкости, обычно получаемое при помощи специального объектива.

Источник изображения

Это действительно очень красивый эффект. Благодаря крайне малой глубине резкости взгляд сразу же движется к размытым участкам снимка.

Я побаловался с каракулями, попробовал сделать их разного размера, наложить разные штрихи, применить к каждому эффекты.

Следующее изображение полностью создано в Sketch, без использования фотографий. Всё, что я сделал, — легкий градиент на фоне и три каракули разного цвета, с разной степенью прозрачности и параметрами размытия по Гауссу. Добавил слой с эффектом шума и режимом Overlay (Наложение), кинул сверху стеклянный текст (градиентная заливка с внутренним свечением вверху и внизу). В результате мы имеем довольно убедительную картинку с эффектом боке: