Я нарисовал 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.