UX-исследователь — практический курс
UX-исследователь — практический курс
Начните карьеру в области UX или структурируйте свои знания с помощью уникального на рынке курса по UX-исследованию
Узнать подробнее
Создание иконок в Sketch

Создание иконок в Sketch, простая иконка настроек

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

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

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

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

 

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

 

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

UX-исследователь
UX-исследователь
Станьте UX - исследователем - одним из самых востребованных специалистов в продуктовой команде
Забронировать место

 

Создание иконок в 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.

Total
0
Shares
Добавить комментарий

Ваш адрес email не будет опубликован.

Похожие статьи
Подробнее

Как создать красивое (blur) размытие iOS в Sketch, самый верный и простой способ

В общем, я видел ошибки новичков. А дизайнеры просто используют размытость по гауссу с маской, чтобы наложенная кнопка приобретала текстуру размытого фона подложки. Это так просто, но как же вы можете узнать об этом, как не прочитать здесь?)
Sketch Export Generator - Генератор экспорта для Sketch
Подробнее

Sketch Export Generator – Генератор экспорта для Sketch

Sketch Export Generator - это простой плагин для генерации экспорта в iOS и Android с помощью горячих клавиш. Теперь вам не нужно самому выбирать разные размеры экспорта в sketch, плагин это сделает за вас. С помощью горячих клавишь или меню плагина вы сможете с легкостью экспортировать исходники для IOS или Android проекта.

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
0
Share