Перед вами стоит задача – создать простую иконку за максимально короткое время, при этом желательно не использовать метод редактирования чужого готового материала – необходимо сделать красивую иконку с нуля, и сделать это нужно своими руками.
Sketch является лучшим инструментом по созданию векторных изображений, в том числе он идеально подходит для создания уникальных значков или иконок.
Попробуйте создать свой уникальный значок. Для примера возьмем изображение двух гаечных ключей. Иконка, которую мы хотим создать, хорошо подойдет для применения к кнопке, при клике на которую пользователь сможет перейти на страницу настроек в вашем проекте.
Sketch позволит вам комбинировать различные формы при использовании следующих конфигураций: Union, Subtract, Intersect, and Difference.
Приступите к созданию базовой формы
Для начала работы, нажмите Command + N, и создайте новый документ. Затем приступите к созданию дескриптора, в данном случае мы приступаем к созданию гаечного ключа. Перейдите в Insert > Choose shape > Rectangle и перетаскивайте курсор, чтобы создать прямоугольник.
Это легко, но в данном прямоугольнике есть острые углы, и выглядит форма немного блочно. Чтобы задать правильные настройки перейдите к правому меню. Перетащите Радиус вправо – функция превратит острые углы сверху и снизу в округленные. Далее нам необходимо скрыть верхнюю часть прямоугольника и добавить еще одну фигуру. Следуйте следующему действию: Insert > Shape > Choose oval.
После этого нажмите на круг и измените его размер удерживая клавишу Shift. Как вы можете увидеть на изображении выше, мы теперь можем перетаскивать созданную фигуру, в нашем случае, расположим круг в верхней части закругленного прямоугольника.
Красные линии являются автоматическими интеллектуальными помощниками, которые показывают нам как лучше применить выравнивание.
Объединяйте и вычитайте фигуры
На этом этапе советуем вам прокрутить рабочую область в верх, чтобы дать себе некоторое пространство. Выделяя ручку внизу, удерживайте Option и перетаскивайте ее вверх, чтобы создать дубликат. Сделаем из нижней части нашей иконки форму, которая сможет вычесть часть верхней фигуры.
Используйте вычитание с использованием упорядочивания
Теперь фигуры скомбинированы и готовы к перемещению и изменению размера. Тем не менее значок еще не совершенен – нам не хватает отверстия в нижней части фигуры – ключа.
Чтобы сделать это, нажмите O, чтобы вернуться к овальному инструменту, и удерживая Shift создайте новую более маленькую фигуру.
Теперь когда наша фигура стала более похожа на гаечный ключ, можно сделать дубликат. Дублируйте фигуру с помощью Command + D и разверните две фигуры на 15 градусов. Старайтесь чтобы две ваши фигуры были перпендикулярны.
Чтобы вырезать зазор между ключом сверху и гаечным ключом, дублируйте изображение еще раз. Теперь в списке слоев вы должны увидеть:
- Гаечный ключ, наклоненный вправо;
- Гаечный ключ, наклоненный влево;
- Дополнительная копия сверху.
Приступайте к созданию границы в 10 пикселей. После того как вы сделали границу, объедините слои.
Теперь перейдите в Слои (Layer) и выберите > Convert to outlines. Данная функция превратит ваш контур в форму, которую теперь можно использовать для дальнейших действий – теперь вырезайте контур.
Наконец, можно выбрать верхнюю и нижнюю копию и использовать функцию Union для их объединения. В данный момент фигура почти готова и готова к применению стиля. Перейдите в Fills и выберите стиль на свое усмотрение – в данном случае мы применили стиль «Blue steel color».
Добавление другого слоя создает градиент по умолчанию.
Теперь у нас есть готовая иконка – «Гаечный ключ» , которая была нужна вам для применения в определенном проекте.
