В Sketch через лампочку

Published in

GSPD

5 min readAug 13, 2018

Кто бы ты ни был: дизайнер, программист, строитель или писатель — не хотелось бы много времени тратить на подготовку к работе. В идеале взять инструмент в руки и начать творить. Благо, сейчас существует огромное количество ресурсов, помогающих нам овладеть тем самым ремеслом как можно скорее.

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

Для начала необходимо подготовить свой “рабочий стол“, настроить Sketch под себя.

Подготовка

- Горячие клавиши

Чтобы не отвлекаться на поиск нужного в программе, не делать мышкой лишние движения, придумали чудесную штуку: Hot Keys.

Для закладывания фундамента необходим Artboard, чтобы начать рисовать, нажмите A.

Аналогично артборду, можно быстро нарисовать прямоугольник (R), овал (O), выбрать вектор (V), начать вводить текст (T). Еще больше горячих клавиш вы найдете по ссылке sketchshortcuts. Главное, не игнорировать эту возможность.

- Панель инструментов

Инструменты всегда должны быть под рукой. Не поленитесь и выберите только самые нужные.

- Стиль по умолчанию

Если при рисовании иконки цвет объектов и толщина линий совпадают, то чтобы каждый раз не изменять border и fill, достаточно у одного объекта выбрать нужный цвет бордера/заливки, толщину линий, прозрачность, а затем нажать Set Default Style.

- Mirror

Mirror — программа, которая облегчила разработку интерфейсов. Она позволяет исключить лишние мысли: как будет смотреться данный шрифт на телефоне, не слишком ли крупно или мелко выглядят объекты. Перед тобой лежит устройство Apple, ты просто рисуешь, при этом видя “конечный” результат.

Процесс

Sketch — векторная программа, и чтобы приступить к рисованию интерфейсов, нужно понять, что из себя представляет векторная графика и как с ней работать, поэтому начинать лучше с малого. Предлагаю нарисовать разные иконки, отличающиеся уровнями сложности, используемыми инструментами.

- Иконка Cloud

👩‍🎨 Если нужно нарисовать квадрат, то зажмите Shift и ведите курсором, контролируя размер “доски для рисования“

Облако будет склеено из окружностей. Нажмите O, зажмите Shift и курсором мыши определите нужный размер.

👩‍🎨 Чтобы несколько раз не рисовать окружности с нуля, их можно продублировать, выделить уже нарисованную, нажать cmd + D и вуаля

2. Переместите каждую окружность на нужное место.

👩‍🎨 Орудуя только стрелками клавиатуры, объект будет сдвигаться на 1px в нужном направлении, чтобы ускорить процесс, во время перемещения зажмите Shift. Также, в настройках можно выставить свои значения

3. Для склеивания выделенных объектов нажмите Union в панели инструментов.

4. Чтобы немного “оживить“ облако, добавим Дугу. Продублируйте окружность → переместите её на нужное место → выберите инструмент Scissors.

👩‍🎨 Scissors удаляет линию между 2-мя точками. Окружность по умолчанию имеет 4. При желании, можно добавить дополнительные точки с помощью инструмента Edit и удалить так, как вам виднее

5. Капли дождя. Нарисуйте окружность → выберите инструмент Edit или двойным щелчком выберите объект → кликните на верхнюю точку и потяните → чтобы заострить кончик, нажмите Straight в правой панели инструментов → продублируйте капли.

Дело сделано. Пошел дождь.

👩‍🎨 Готовую иконку желательно объединить в группу, так её удобнее будет перемещать и сохранять

- Иконка Ice cream и Sun

Солнце. Если с окружностью все понятно, то чтобы получить лучи необходимо нарисовать линию, нажав L, затем с помощью инструмента Rotate расположить линию под нужным углом.
Чтобы лучей было много, нажимаем Rotate Copies, вводим количество 18, сохраняем, каждому лучу определяем свое место.
Улыбку получаем дублированием дуги на облаке.

👩‍🎨Чтобы выделить определенный элемент, который находится в группе, достаточно зажать cmd и навести на него курсор

4. Удаляем капли воды, простым выделением всех элементов и нажатием Delete

5. Мороженое. Облако превращается в мороженое. Для рожка необходимо выбрать вектор, нажав V, поставить точку в нужном месте и “готовить вафлю“ по точкам.

- Иконка Hand

Рука. Чтобы мороженое попало в руки, надо изрядно постараться. Нажав U, выберется прямоугольник с закругленными углами. С помощью дублирования, перемещения, вращения и объединения пальцев, может получиться что-то похожее на руку.

👩‍🎨Чтобы пальцы выглядели более естественно, необходимо выделить их и выбрать угол объединения более плавный

Сохранение

Для сохранения иконки необходимо её выбрать, предварительно сгруппировав → нажать на Export в правой нижнем углу → выбрать формат SVG.

👩‍🎨Данный формат позволяет масштабировать векторную графику без потери качества

Проблема. После сохранения иконки пропала улыбка.

Причина. Удаление линий с помощью Scissors. При сохранении иконки в SVG результат может отличаться от того, что мы рисовали в Sketch: достраиваются ненужные, удаляются нужные линии.

Решение. Выбрать элемент, который был видоизменен с помощью Scissors, нажать на Outlines в панели инструментов.

Советы

За идеями и вдохновением можно обратиться к сайтам с большим хранилищем иконок: FlatIcon, IconFinder, Icons8. Последний — наш российский сайт, иконок не так много, но любой желающий может попросить нарисовать иконку за определенное количество похожий запросов.
Также, чтобы не тратить много времени на рисование, поиск нужной иконки, идеи, можно установить плагин прямо в Sketch и набор иконок будет всегда под рукой.