fbpx
Я разделил робота на несколько частей, после их создания нужно просто правильно разместить все фрагменты, и все.

Как нарисовать иллюстрацию в Sketch, используя только прямоугольник, круг и кривую

Я нарисовал 18 известных роботов для Chato.ps (один из продуктов нашей компании), и множество людей спрашивало меня, как можно нарисовать иллюстрацию в Sketch, сложно ли это? Вообще-то, не очень, а точнее очень просто и быстро. В этом уроке я вам все покажу.

Как нарисовать иллюстрацию в Sketch, используя только прямоугольник, круг и кривую

 

Итак, рисуем иллюстрацию в Sketch

Вам нужно только использовать инструмент ручки (Pen), чтобы добавить множество векторных точек и настраивать кривые. И вам не нужно использовать мышку, чтобы бродить по меню Sketch для поиска всех нужных функций, потому что 98% таких функций управляется через горячие клавиши.

 

Как нарисовать иллюстрацию в Sketch, используя только прямоугольник, круг и кривую

 

Я разделил робота на несколько частей, после их создания нужно просто правильно разместить все фрагменты, и все.

 

Я разделил робота на несколько частей, после их создания нужно просто правильно разместить все фрагменты, и все.

 

Вот моя пошаговая инструкция:

step 1

 

  1. Нажмите R и удерживайте SHIFT, чтобы создать новый прямоугольник.
    B, чтобы спрятать границу.
  2. ENTER – перейти в режим редактирования
    Удерживайте CMD, чтобы поместить ручку на верхний контур.
    Вам покажется точка посередине нажмите на нее, чтобы добавить срединную точку.

step 2

 

  1. Выделите верхние 2 точки.
    Нажмите DELETE, чтобы удалить их.
  2. Удерживайте SHIFT и нажмите на контрольную точку, чтобы удлинить ее.

step 3

 

  1. Нажмите О, чтобы нарисовать овал.
    Измените цвет и размер.
  2. Нажмите R, чтобы нарисовать прямоугольник.
    Измените цвет и размер.

step 4

 

  1. Добавьте радиус для углов.
  2. CMD + D скопируйте прямоугольник.
    Измените цвет, размер и радиус.

step 5

 

  1. CMD + D скопируйте прямоугольник.
    Измените цвет, размер и радиус.
    OPTION + CMD + DOWN разместите его сзади.
  2. О создайте овал.
    Измените цвет и размер.
    OPTION + CMD + DOWN разместите его сзади.
    CMD + D скопируйте овал.
    SHIFT + RIGHT передвиньте вправо.

step 6

 

  1. R создайте прямоугольник.
    Измените цвет и размер.
    Выделите его вместе с фигурой головы.
    CMD + G сгруппируйте их.
  2. Выделите фигуру головы.
    CONTROL + CMD + M использовать ее как маску.
    OPTION + CMD + DOWN поместите ее назад.

step 7

 

  1. О нарисуйте овал.
  2. CMD + D скопируйте овал.
    Удерживайте CONTROL и измените размер.
  3. CMD + D скопируйте овал и поверните на 90′.

step 8

 

  1. Выделите все.
    F скрыть заливку.
    Увеличьте толщину границы.
  2. R нарисуйте прямоугольник.
    B скройте границы.
  3. SHIFT + CMD + T сузьте верх прямоугольника.
    Выделите все.
    Создайте из выделения символ.

step 9

 

  1. CMD + D скопируйте символ.
  2. Поверните на 45′.
  3. CMD + D скопируйте.
    Разверните по горизонтали.

step 10

 

  1. Выделите прямоугольник, сделанный раньше.
    CMD+D скопируйте его.
    Измените цвет и размер.
  2. ENTER перейдите в режим редактирования.
    Выделите две верхние точки.
    Увеличьте размер углов.

step 11

 

Соедините все элементы.
CMD + G сгруппируйте.

step 12

 

 

  1. R нарисуйте прямоугольник.
    B скройте границы.
  2. ENTER перейдите в режим редактирования.
    Выделите две верхние точки.
    Увеличьте углы.
  3. CMD+D скопируйте его.
    Разверните по вертикали и измените цвет.
    Выделите все.
    Создайте символ.

step 13

 

  1. О нарисуйте овал.
    B скройте границы.
  2. R нарисуйте прямоугольник.
    B скройте границы.
  3. Увеличьте радиус границы прямоугольника.
    Выделите все.
    Выровняйте по центру.
    Создайте символ.
  4. CMD+D скопируйте его.
    Поверните на 90′.

step 14

 

Соедините все элементы.
CMD + G сгруппируйте.

 

step 15

 

  1. О нарисуйте овал.
  2. CMD+D скопируйте его.
    SHIFT + OPTION измените размер.
  3. Выделите все.
    SHIFT + OPTION + S скомбинируйте их в режим вычитания.
  4. R нарисуйте прямоугольник.

 

step 16

 

  1. Выделите все.
    CMD + Option + U скомбинируйте их в режим объединения.
  2. B скройте границы.
  3. R нарисуйте прямоугольник.
    B скройте границы.
    Выделите все.
    Создайте символ.
  4. CMD+D скопируйте его.
    Поверните на 90′.

step 17

  1. О нарисуйте овал.
    B скройте границы.
  2. L создайте линию.
    Выделите все.
    Выровняйте по центру.
  3. Выделите линию.
    ENTER перейдите в режим редактирования.
    Выделите верхнюю точку.
    SHIFT + влево передвиньте точку немного влево.

 

step 18

 

  1. Выделите линию.
    CONTROL + C захватите цвет овала.
    Увеличьте толщину границы.
    Перейдите в настройки границы.
    Измените края на закругленные.
  2. Выделите линию.
    CMD+D скопируйте ее.
    Разверните по горизонтали.
    Выделите все.
    Создайте символ.
  3. CMD+D скопируйте его.
    Поверните на 90′.

step 19

 

  1. R нарисуйте прямоугольник.
    B скройте границы.
    Увеличьте радиус границ.
  2. CMD+D скопируйте ее.
    Измените цвет и размер.
  3. О нарисуйте овал.
    B скройте границы.
    Измените цвет.
    Выделите все.
    Выровняйте по горизонтали.
    Создайте символ.

 

step 20

 

  1. О нарисуйте овал.
    B скройте границы.
  2. С помощью Ножниц отрежьте правый контур.
  3. CMD+D скопируйте половинку.
    Разверните по горизонтали.

 

step 21

 

Скомпонуйте все элементы.
CMD + G сгруппируйте.

 

step 22

 

  1. О нарисуйте овал.
    F скройте заливку.
    Измените цвет.
  2. Измените форму.
  3. CMD+D скопируйте 4 раза.
    Увеличьте толщину границ.
  4. CMD+D скопируйте 4 раза.
    Выделите верхний овал.
    Измените цвет.
    Увеличьте толщину границы.

 

step 23

 

  1. L создайте линию посередине.
    OPTION + CMD + DOWN поместите линию на задний план.
  2. Выделите один голубой овал.
    OPTION + CMD + C скопируйте стиль.
    Выделите линию.
    OPTION + CMD + V вставьте стиль.
  3. CMD+D скопируйте ранее созданный прямоугольник.
    OPTION + CMD + DOWN поместите его на задний план.
    Выделите все.
    CMD + G сгруппируйте.
  4. Выделите прямоугольник.
    OPTION + CMD + M используйте как маску.

 

step 24

 

 

Выделите прямоугольник-маску.
F скройте заливку.

Вот и все!

 

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

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Динамические макеты в Sketch
Подробнее

Адаптивные макеты в Sketch с помощью плагина Sketch Flex Layout

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

Плагин Sketch Iconfont

Это отличный плагин Sketch Iconfont для использования иконочных шрифтов в Sketch. Благодаря последнему обновлению можно добавлять иконку в один клик.
0-w5yfzvry84ksowm8
Подробнее

5 ценных плагинов для Sketch

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

Продвинутые текстовые маски в Sketch

В этой статье вы узнаете два метода, которые позволяют полностью контролировать применение маски к тексту, сохраняя при этом возможность редактирования текста.

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share