8.1

 

Темой сегодняшнего урока станет разработка иконок в скетче на примере одного достаточно интересного образца. Усаживайтесь поудобнее и готовьтесь получить множество интересных познаниях.

Урок начинается с самых азов. Вам не обязательно ориентироваться во всех нюансах скетча и иметь познания в дизайне. Программа СкетчАп хорошо подходит для неопытных дизайнеров, ведь он отличается невероятно удобным и интуитивно понятным интерфейсом. Работа с ним оказывается намного проще, чем обучение с Фотошоп. Я готов продемонстрировать это на элементарном примере.

Для начала нам надо разработать артборд, который создается путем нажатия кнопки А на клавиатуре. Вместо курсора появился крестик. Кликаем курсором и начинаем его тянуть, тес самым разрабатывая прямоугольник. Артборд ставим по центру рабочего стола. Теперь переходим в перечень активных слоев и называем его иконкой настроек.

8.3

 

Теперь вставляя туда звездочку. Для этого переходим в верхний левой уголок к кнопочке с изображением плюса. Кликаем, открываем вкладку Shape и выбираем звезду. Снова курсор стал крестиком. Кликаем, тянем с зажатым Shift и стороны нашей фигуры окажутся равномерными.

8.4

 

 Переходим к разработке круга. На клавиатуре жмем О. Кликаем, протягиваем с зажатой кнопкой Shift. Круг оказался идеальным. Сделайте круг примерно таким же, как и звезду. Вершины звезды должны слегка выступать за круг. Ставим круг в середину звезды. Программа должна самостоятельно прибить к центру, однако если такого автоматизма вы не увидели, выделяете обе фигуры и переходим в инспектор на панели справа. Выбираем опции выравнивания.

8.5

 

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

8.6

 

Далее мы должны разработать еще меньший круг, который поместим в серединку. Кликаем по кнопке О. Нажимаем, тянем с зажатием Shift. Снова помещаем центр круга к центру новой фигурки. Также мы можем сдвинуть ее на 1 или на 2 пиксела вниз. Так будет виден баланс. Фигуру не заливаем, а с синего правого квадрата снимаем выделение. Переходим в список слоев в правой части. Перетягиваем круг в звезду.  Вам сперва покажется, что круг пропал. Но на самом деле программа автоматически разработала объединение. Чтобы исправить такую ситуацию, выделяем круг и жмем по серых квадратах справа. Так вы снимете абсолютно все выделения. Круг станет на свое место. Так мы разработали новую фигурку, в которой размещены три внутренних контура. Пользователь сможет отредактировать каждую из них по отдельности.

8.7

 

Последним шагом является превращение этой иконки в иконку настроек. Для этого мы увеличиваем численность вершин звезды до восьми штук. Также мы увеличиваем радиус инспектора. На этом этапе можно изменить и цвет. Теперь переходим в список слоев и занимаемся переименованием фигуры в Settings icon. Так нам удалось разработать отменную иконку.

8.8

 

Скетч имеет еще одно преимущество. После разработки новой фигуры все внутренние контуры, входящие в ее конструкцию, можно быстро изменить по отдельности. Это обусловлено динамическим типом булевых операций. Поэтому не впадайте в панику, если созданная фигура не идеальная. В любой момент вы сможете поправить каждый отдельный контур.

Если вы хотите использовать иконку для оформления приложения, вы быстро сможете ее экспортировать. Для этого нужно выделить артборд Settings icon и перейти в меню экспорта, которое находится в инспекторе. Нажимаем на кнопку +. Устанавливаем нужные размеры и форматы и кликаем на клавишу Export Settings. Сохраняем файл на рабочем столе.

8.9

 

Надеюсь, полученная информация поможет вам достичь значительных успехов при самостоятельном изучении Скетч.