UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Как нарисовать иллюстрацию в Sketch, используя только прямоугольник, круг и кривую
Редакція
Редакція

Опубліковано • Оновлено

Как нарисовать иллюстрацию в 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)