Создание иконок в Sketch

Сегодня мы с вами рассмотрим создание иконок в Sketch на одной иконке. Если вы только слышали о Sketch, новом инструменте от комады Bohemian Coding, и решили попробовать поработать с ним, вы пришли прямо по адресу!

В этом уроке я начну с самого начала. Вам не нужно знать Sketch, вам даже не обязательно иметь навыки в дизайне. Приложение Sketch идеально подходит новичкам, так как он располагает потрясающе простым и интуитивными пользовательским интерфейсом, который помогает очень быстро освоить азы (гораздо быстрее, чем в Photoshop, например). Давайте, я покажу это на простом примере создания иконок в Sketch».

Сначала вы создаете артборд, нажав букву А на клавиатуре. Вы увидите небольшой крестик вместо привычного значка курсора. Кликните и протяните курсором, чтобы создать прямоугольник. Не обязательно соблюдать равенство сторон. Отцентрируйте артборд на рабочей области, чтобы получить полный обзор с помощью Command+1. Затем перейдите в список слоев и переименуйте его в settings icon (иконка настроек).

 

Создание иконок в Sketch - создаем арборд

 

Затем вставьте фигуру звезды, перейдя в верхний левый угол к кнопке со знаком плюс, Insert. Кликните на нее, перейдите на Shape (фигура) и выберите Star (звезда). Опять вы увидите крестик в виде курсора. Кликните и потяните, удерживая Shift, чтобы стороны звезды были равны.

 

Создание иконок в Sketch - ресуем звезду

 

Теперь нам нужен круг. Нажмите О на клавиатуре, затем кликните и протяните, удерживая Shift. Удерживание shift даст вам идеальный круг. Сделайте круг примерно такого же размера, как сама звезда, так чтобы вершины звезды немного выступали за круг. Установите круг по центру звезды. Обычно Sketch автоматически прибивает к центру, но если этого не случилось, просто выделите обе фигуры (кликните на одну и, удерживая Shift, кликните на другую), перейдите в инспектор справа и кликните на опции Align horizontally и Align vertically. Будет примерно так.

 

Создание иконок в Sketch - рисуем круг

 

Теперь выделите обе фигуры, перейдите в раздел Fills в инспекторе и снимите выделение с маленького синего квадрата. Это нужно, чтобы у иконки был прозрачный фон. Это необходимо, когда вы используете ее как элемент интерфейса в дизайне вашего приложения. Оставьте границы без изменения. Пока фигуры все еще выделены, примените булеву операцию Intersect (пересечение) из панели инструментов над холстом.

 

Создание иконок в Sketch - выравниваем круг и звезду

 

Теперь нужен еще меньший круг для серединки, так что нажмите О снова, кликните и потяните, удерживая Shift, и опять перетяните центр круга в центр новой фигуры. Вы также можете передвинуть ее на 1 или 2 пикселя вниз, чтобы выглядело более сбалансировано. Оставьте круг без заливки, сняв выделение с синего квадрата справа. Затем перейдите в список слоев и перетяните круг в фигуру Star 1. Будет выглядеть, будто он исчез, но на самом деле Sketch автоматически выполнило объединение. Чтобы это исправить, просто выделите Path (это наш круг) и кликните на серых квадратах справа, и снимите все выделения. Круг вернется на место. Так мы сделали новую фигуру, состоящую из трех внутренних контура, которые можно редактировать по отдельности. Одна из лучших возможностей в Sketch.

 

Создание иконок в Sketch - рисуем маленький круг и объединяем фигуры

 

Последний шаг состоит в придании фигуре вида иконки настроек. Нужно увеличить количество вершин звезды до восьми, и немного увеличить радиус в инспекторе. Давайте также изменим цвет. Наконец, переименуйте фигуру Star 1 в Settings icon в списке слоев. Теперь у нас есть отличная иконка!

 

Создание иконок в Sketch - увеличиваем количество вершин

 

Еще одна отличная вещь в Sketch: после создания новой фигуры все внутренние контуры, составляющие фигуру, можно настраивать по отдельности. Все потому, что булевы операции в Sketch динамические. Так что не стоит беспокоиться, если ваша фигура поначалу не идеальна, вы можете всегда вернуться и исправить каждый контур.

Когда вы готовы использовать иконку в вашем дизайне приложения, вы можете экспортировать ее, выделив артборд Settings icon (убедитесь, что артборд выделен, а не только фигура), затем перейдите на меню Export справа в инспекторе и кликните на иконку “+”. Выберите нужный размер, формат и кликните на иконку Export Settings внизу инспектора. Сохраните исходник в виде файла Settings icon на рабочем столе.

 

Создание иконок в Sketch - экспортируем иконку настроек

 

Я надеюсь, вам понравился этот урок о процессе создания иконок в Sketch. С удовольствием обсудим ваши результаты в комментариях.

Перевод статьи medium.com автора Ivana Galic.