1 added
1 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>Прежде чем рисовать, важно разобраться, как работают инструменты для создания векторных иллюстраций. Если вы уже всё о них знаете -<a>сразу переходите к практике</a>. Если нет - читайте нашу инструкцию.</p>
1
<p>Прежде чем рисовать, важно разобраться, как работают инструменты для создания векторных иллюстраций. Если вы уже всё о них знаете -<a>сразу переходите к практике</a>. Если нет - читайте нашу инструкцию.</p>
2
<p>В качестве упражнения сделайте простой квадрат, превратите его в многоугольник и скруглите углы:</p>
2
<p>В качестве упражнения сделайте простой квадрат, превратите его в многоугольник и скруглите углы:</p>
3
<p>1. Нажмите P и кликните в любую часть макета.</p>
3
<p>1. Нажмите P и кликните в любую часть макета.</p>
4
<p>2. Кликните ещё раз в любую другую часть макета, и у вас появится линия.</p>
4
<p>2. Кликните ещё раз в любую другую часть макета, и у вас появится линия.</p>
5
<p>3. Таким же образом сделайте ещё три линии, чтобы у вас получился квадрат. Последняя линия должна соединиться с первой. Чтобы линии получились ровными, делайте их с зажатой клавишей Shift. И квадрат готов.</p>
5
<p>3. Таким же образом сделайте ещё три линии, чтобы у вас получился квадрат. Последняя линия должна соединиться с первой. Чтобы линии получились ровными, делайте их с зажатой клавишей Shift. И квадрат готов.</p>
6
<p>4. Теперь добавьте новые углы. Для этого нажмите V, наведите курсор на любую сторону вашего квадрата, зажмите появившуюся точку и тяните её в сторону.</p>
6
<p>4. Теперь добавьте новые углы. Для этого нажмите V, наведите курсор на любую сторону вашего квадрата, зажмите появившуюся точку и тяните её в сторону.</p>
7
<p>5. Наведите курсор на любую точку многоугольника, зажмите Ctrl (⌘) и тяните в стороны, чтобы угол сгладился.</p>
7
<p>5. Наведите курсор на любую точку многоугольника, зажмите Ctrl (⌘) и тяните в стороны, чтобы угол сгладился.</p>
8
<p>Когда вы скруглили углы, вокруг точки появились линии - их называют усами. Если вы захотите их отредактировать, то старайтесь вести их в сторону изгиба угла, чтобы они не пересекали линию дуги. Иначе вектор будет мятым.</p>
8
<p>Когда вы скруглили углы, вокруг точки появились линии - их называют усами. Если вы захотите их отредактировать, то старайтесь вести их в сторону изгиба угла, чтобы они не пересекали линию дуги. Иначе вектор будет мятым.</p>
9
Иллюстрация: Skillbox Media<p>А вот ещё несколько полезных функций векторного редактора:</p>
9
Иллюстрация: Skillbox Media<p>А вот ещё несколько полезных функций векторного редактора:</p>
10
<p>1. Любую стандартную фигуру в Figma - круг , квадрат , треугольник или многоугольник - можно редактировать как вектор. Чтобы это сделать, создайте фигуру и дважды кликните по ней правой кнопкой мыши:</p>
10
<p>1. Любую стандартную фигуру в Figma - круг , квадрат , треугольник или многоугольник - можно редактировать как вектор. Чтобы это сделать, создайте фигуру и дважды кликните по ней правой кнопкой мыши:</p>
11
<p>2. Если нажать P, зажать Alt и кликнуть по любой точке - она удалится.</p>
11
<p>2. Если нажать P, зажать Alt и кликнуть по любой точке - она удалится.</p>
12
<p>3. Как и у стандартных фигур в Figma, у замкнутого вектора можно изменить цвет заливки и параметры обводки.</p>
12
<p>3. Как и у стандартных фигур в Figma, у замкнутого вектора можно изменить цвет заливки и параметры обводки.</p>
13
<p>4. Вы можете изменить толщину линии в любой точке вектора. Для этого на панели инструментов нажмите , наведите курсор на вектор и тяните вверх или вниз.</p>
13
<p>4. Вы можете изменить толщину линии в любой точке вектора. Для этого на панели инструментов нажмите , наведите курсор на вектор и тяните вверх или вниз.</p>
14
<p>Очень рекомендуем сразу пробовать пользоваться Figma Draw, так как в этом режиме у вас будет больше возможностей для создания и редактирования векторов. Подробнее об этом<a>читайте в нашей инструкции</a>.</p>
14
<p>Очень рекомендуем сразу пробовать пользоваться Figma Draw, так как в этом режиме у вас будет больше возможностей для создания и редактирования векторов. Подробнее об этом<a>читайте в нашей инструкции</a>.</p>
15
<p>Человеческий мозг запоминает только основные детали объектов, поэтому перед началом работы обязательно подыщите референс, чтобы ничего не выдумывать на ходу.</p>
15
<p>Человеческий мозг запоминает только основные детали объектов, поэтому перед началом работы обязательно подыщите референс, чтобы ничего не выдумывать на ходу.</p>
16
<p>Мы будем рисовать мяч для регби, на фотографии вы сразу увидите его основные и второстепенные детали:</p>
16
<p>Мы будем рисовать мяч для регби, на фотографии вы сразу увидите его основные и второстепенные детали:</p>
17
<em>Изображение: Gerald R. Ford Presidential Museum / Skillbox Media</em><p>Мы будем рисовать в режиме Figma Draw, так как в нём все важные элементы интерфейса будут под рукой.</p>
17
<em>Изображение: Gerald R. Ford Presidential Museum / Skillbox Media</em><p>Мы будем рисовать в режиме Figma Draw, так как в нём все важные элементы интерфейса будут под рукой.</p>
18
<p>1. Создайте круг и растяните его по длине и высоте мяча, чтобы получился овал.</p>
18
<p>1. Создайте круг и растяните его по длине и высоте мяча, чтобы получился овал.</p>
19
<p>2. Подгоните форму овала под мяч, чтобы они были похожи. Для удобства сделайте ваш круг полупрозрачным, чтобы видеть контур мяча на фотографии.</p>
19
<p>2. Подгоните форму овала под мяч, чтобы они были похожи. Для удобства сделайте ваш круг полупрозрачным, чтобы видеть контур мяча на фотографии.</p>
20
<p>1. Скройте ваш овал с формой мяча, чтобы он не мешался.</p>
20
<p>1. Скройте ваш овал с формой мяча, чтобы он не мешался.</p>
21
<p>2. Создайте круг и растяните его по основному шву, который пересекает его.</p>
21
<p>2. Создайте круг и растяните его по основному шву, который пересекает его.</p>
22
<p>3. Подгоните форму овала под шов. Идеально обводить его не нужно - при необходимости вы сможете поправить его позже.</p>
22
<p>3. Подгоните форму овала под шов. Идеально обводить его не нужно - при необходимости вы сможете поправить его позже.</p>
23
<p>Чтобы её сделать, воспользуйтесь хитростью с наложением слоёв:</p>
23
<p>Чтобы её сделать, воспользуйтесь хитростью с наложением слоёв:</p>
24
-
<p>1. Создайте круг и с помощью одной из его сторон повторите внешний ��равый край полосы.</p>
24
+
<p>1. Создайте круг и с помощью одной из его сторон повторите внешний правый край полосы.</p>
25
<p>2. Создайте ещё один круг и с его помощью повторите внутренний левый край полосы.</p>
25
<p>2. Создайте ещё один круг и с его помощью повторите внутренний левый край полосы.</p>
26
<p>3. Выделите обе фигуры, нажмите на панели инструментов снизу на иконку . В результате видимой останется только та часть, в которой ваши круги не пересекаются, - она и образует белую полосу. Если у вас получилось наоборот, поменяйте местами слои на левой панели.</p>
26
<p>3. Выделите обе фигуры, нажмите на панели инструментов снизу на иконку . В результате видимой останется только та часть, в которой ваши круги не пересекаются, - она и образует белую полосу. Если у вас получилось наоборот, поменяйте местами слои на левой панели.</p>
27
<p>Если вы не видите иконки снизу, то переключитесь на Figma Draw и попробуйте ещё раз.</p>
27
<p>Если вы не видите иконки снизу, то переключитесь на Figma Draw и попробуйте ещё раз.</p>
28
<p>4. Скорее всего, ваша полоска будет вылезать за пределы мяча - оставьте это как есть, вы исправите это позже.</p>
28
<p>4. Скорее всего, ваша полоска будет вылезать за пределы мяча - оставьте это как есть, вы исправите это позже.</p>
29
<p>Правую полосу можно сделать так же, как и левую, либо нарисовать её самостоятельно с помощью инструмента . Мы сделали проще - просто скопировали левую полосу и подкорректировали её форму. Слои с активным смешением . можно редактировать так же, как и обычный вектор:</p>
29
<p>Правую полосу можно сделать так же, как и левую, либо нарисовать её самостоятельно с помощью инструмента . Мы сделали проще - просто скопировали левую полосу и подкорректировали её форму. Слои с активным смешением . можно редактировать так же, как и обычный вектор:</p>
30
<p>1. Белый шов повторяет форму поперечного. Возьмите поперечный шов и скопируйте его, затем добавьте точки по краю белого шва на фотографии и удалите остальные. У вас должна получиться короткая линия.</p>
30
<p>1. Белый шов повторяет форму поперечного. Возьмите поперечный шов и скопируйте его, затем добавьте точки по краю белого шва на фотографии и удалите остальные. У вас должна получиться короткая линия.</p>
31
<p>2. Дважды нажмите Esc, чтобы сбросить выделение основания шва. Затем с помощью пера добавьте стежки. Это важно делать на новом слое, чтобы вы могли независимо менять их толщину.</p>
31
<p>2. Дважды нажмите Esc, чтобы сбросить выделение основания шва. Затем с помощью пера добавьте стежки. Это важно делать на новом слое, чтобы вы могли независимо менять их толщину.</p>
32
<p>3. Выделите основание шва и стежки и на правой панели в блоке Stroke выберите , чтобы скруглить углы вектора. При необходимости скорректируйте получившуюся длину.</p>
32
<p>3. Выделите основание шва и стежки и на правой панели в блоке Stroke выберите , чтобы скруглить углы вектора. При необходимости скорректируйте получившуюся длину.</p>
33
<p>1. Переместите фотографию с мячом и раскройте все элементы вашего векторного мяча.</p>
33
<p>1. Переместите фотографию с мячом и раскройте все элементы вашего векторного мяча.</p>
34
<p>2. Скопируйте цвета мяча в вашу иллюстрацию. Для этого выберите любой ваш элемент, нажмите I и возьмите цвет пипеткой с фотографии.</p>
34
<p>2. Скопируйте цвета мяча в вашу иллюстрацию. Для этого выберите любой ваш элемент, нажмите I и возьмите цвет пипеткой с фотографии.</p>
35
<p>3. Скопируйте основание мяча и на нижней панели инструментов нажмите , чтобы сделать маску. На панели слоёв поместите все элементы в неё - но кроме оригинала основания мяча.</p>
35
<p>3. Скопируйте основание мяча и на нижней панели инструментов нажмите , чтобы сделать маску. На панели слоёв поместите все элементы в неё - но кроме оригинала основания мяча.</p>
36
<p>4. По желанию, сделайте ещё одну копию основания и с помощью градиентов добавьте тень и свет.</p>
36
<p>4. По желанию, сделайте ещё одну копию основания и с помощью градиентов добавьте тень и свет.</p>
37
<p>В результате у вас получится примерно такой мяч:</p>
37
<p>В результате у вас получится примерно такой мяч:</p>
38
<em>Изображение: Skillbox Media</em>
38
<em>Изображение: Skillbox Media</em>