Давайте, я покажу это на простом примере создания иконок в Sketch". Сначала вы создаете артборд, нажав букву А на клавиатуре. Вы увидите небольшой крестик вместо привычного значка курсора. Кликните и протяните курсором, чтобы создать прямоугольник. Не обязательно соблюдать равенство сторон. Отцентрируйте артборд на рабочей области, чтобы получить полный обзор с помощью Command+1. Затем перейдите в список слоев и переименуйте его в settings icon (иконка настроек). Затем вставьте фигуру звезды, перейдя в верхний левый угол к кнопке со знаком плюс, Insert. Кликните на нее, перейдите на Shape (фигура) и выберите Star (звезда). Опять вы увидите крестик в виде курсора. Кликните и потяните, удерживая Shift, чтобы стороны звезды были равны. Теперь нам нужен круг. Нажмите О на клавиатуре, затем кликните и протяните, удерживая Shift. Удерживание shift даст вам идеальный круг. Сделайте круг примерно такого же размера, как сама звезда, так чтобы вершины звезды немного выступали за круг. Установите круг по центру звезды. Обычно Sketch автоматически прибивает к центру, но если этого не случилось, просто выделите обе фигуры (кликните на одну и, удерживая Shift, кликните на другую), перейдите в инспектор справа и кликните на опции Align horizontally и Align vertically. Теперь выделите обе фигуры, перейдите в раздел Fills в инспекторе и снимите выделение с маленького синего квадрата. Это нужно, чтобы у иконки был прозрачный фон. Это необходимо, когда вы используете ее как элемент интерфейса в дизайне вашего приложения. Оставьте границы без изменения. Пока фигуры все еще выделены, примените булеву операцию Intersect (пересечение) из панели инструментов над холстом.
Теперь нужен еще меньший круг для серединки, так что нажмите О снова, кликните и потяните, удерживая Shift, и опять перетяните центр круга в центр новой фигуры. Вы также можете передвинуть ее на 1 или 2 пикселя вниз, чтобы выглядело более сбалансировано. Оставьте круг без заливки, сняв выделение с синего квадрата справа. Затем перейдите в список слоев и перетяните круг в фигуру Star 1. Будет выглядеть, будто он исчез, но на самом деле Sketch автоматически выполнило объединение. Чтобы это исправить, просто выделите Path (это наш круг) и кликните на серых квадратах справа, и снимите все выделения. Круг вернется на место. Так мы сделали новую фигуру, состоящую из трех внутренних контура, которые можно редактировать по отдельности. Одна из лучших возможностей в Sketch. Последний шаг состоит в придании фигуре вида иконки настроек. Нужно увеличить количество вершин звезды до восьми, и немного увеличить радиус в инспекторе. Давайте также изменим цвет. Наконец, переименуйте фигуру Star 1 в Settings icon в списке слоев. Теперь у нас есть отличная иконка! Еще одна отличная вещь в Sketch: после создания новой фигуры все внутренние контуры, составляющие фигуру, можно настраивать по отдельности. Все потому, что булевы операции в Sketch динамические. Так что не стоит беспокоиться, если ваша фигура поначалу не идеальна, вы можете всегда вернуться и исправить каждый контур. Когда вы готовы использовать иконку в вашем дизайне приложения, вы можете экспортировать ее, выделив артборд Settings icon (убедитесь, что артборд выделен, а не только фигура), затем перейдите на меню Export справа в инспекторе и кликните на иконку “+”. Выберите нужный размер, формат и кликните на иконку Export Settings внизу инспектора. Сохраните исходник в виде файла Settings icon на рабочем столе.
Я надеюсь, вам понравился этот урок о процессе создания иконок в Sketch. С удовольствием обсудим ваши результаты в комментариях. Перевод статьи medium.com автора Ivana Galic.
Топ коментарі (0)