Урок 13. Кривые

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

Навіщо дизайнеру вміти працювати з кривими? Особливо знадобиться у створенні власних іконок, які є невід'ємною частиною будь-якого інтерфейсу. Необов'язково створювати піктограми з нуля, достатньо завантажити підходящу заготовку та підправити/підігнати її вручну під ваше завдання.

По-друге: малювання ілюстрацій, до яких застосовні ті самі прийоми, єдина відмінність: вони зазвичай складніші і виконують іншу функцію на противагу іконками (привернення уваги).

• Кривые Безье
• Виды кривых
• Инструмент Pen в Figma
• Создание линейных кривых от начала до конца
• Редактирование кривых
• Инструмент Move. Перемещение точек
• Инструменты Bend. Управление кривизной
• Инструмент Paint Bucket. Заливка замкнутых контуров
• Настройка обводки
• Скругление углов
• Добавление и удаление точек
• Преобразование обводки в кривые
• Сайты с бесплатными иконками
• Экспорт в SVG
• Домашнее задание
• Выводы

Кривые Безье

Криві Безьє – это математический аппарат для описания кривых, который использовал Пьер Безьє в 1960-х годах для проектирования дизайна кузовов автомобилей компании Renault.

Со временем это открытие сыграло ключевую роль в проектировании и компьютерной графике в 2d и 3d направлениях. Фигуры на основе кривых Безьє называют по-разному, в зависимости от программы, но суть не меняется. Вы можете встретить такие термины: сплайны (spline) и «пути» (path).

Виды кривых

Все кривые Безье можно условно разделить на несколько видов в зависимости от количества точек, из которых они состоят, что определяет их сложность (смотрите рисунок сверху слева направо):

• линейные
• квадратные
• кубические
• высших порядков

Typically, in graphical applications, sequences of cubic Bézier curves are used to construct any shapes. We have understood the theory, now let's move on to the practical part.

Инструмент Pen в Figma

Для построения кривых в Figma есть инструмент Pen (горячая клавиша P). Интересно, что с его помощью можно создать любой примитив (прямоугольник, круг и т. д.). Более того, все примитивы можно быстро конвертировать в кривые. Но начнем с линейных кривых, особенностью которых является то, что контрольные точки не сглаживаются и конечная фигура выглядит грубовато.

Создание кривой

Последовательность действий для создания кривой выглядит так:

1. Выбираем Pen с помощью клавиши P или кликнув по иконке ручки на панели инструментов.
2. Кликаем там, где хотим поставить первую точку. Обратите внимание, что верхняя панель мгновенно изменилась и теперь включает только 4 инструмента и кнопку "Done". Так Figma сигнализирует, что в режиме редактирования кривой.
3. Продолжаем нажимать на рабочей области для создания новых точек. Как только мы имеем две точки, начинает появляться линия между ними.
4. Зажимаем клавишу Shift, чтобы временно ограничить угол наклона линий, которые создаются, и сделать их кратными 45 градусам. На практике это позволяет легко рисовать идеальные горизонтальные, вертикальные и диагональные линии.
5. Чтобы указать последнюю точку фигуры, есть несколько способов:
   • Нажмите на кнопку "Done" верхней панели.
   • Нажмите клавишу Enter на клавиатуре.
   • Нажмите на Esc дважды. Первое нажатие заставит завершить создание кривой внутри объекта. То есть вы можете продолжить кликать и создать еще одну линию в рамках одного слоя. Второе нажатие Esc заставит Figma выйти из редактирования.

Как видите, наша кривая вышла неуклюжей. Чтобы сгладить линию, вместо клика в процессе создания нужно зажать левую кнопку мыши и перемещать ее, пока не получите нужную форму. Далее отпускаем левую кнопку мыши.

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

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

Малюємо коло

Как я ранее упоминала, с помощью кривых можно нарисовать все, что угодно. Знаю, что круг не самая сложная форма из возможных, но хорошее упражнение для новичка. Тем более, нам нужно попрактиковаться в построении сглаженных и замкнутых фигур. Чтобы упростить себе задачу, я нарисовала вспомогательную сетку. Дело в том, что при рисовании идеального круга, нужно отметить точки на одинаковом расстоянии и с идентичными степенями сглаживания. Начнем.

Помните, что создавать точки нужно, зажимая левую кнопку и двигая курсор. Отпускать левую кнопку следует только в тот момент, когда вы будете удовлетворены кривизной линии. Выделите хотя бы 10 минут времени и попрактикуйтесь в рисовании сглаженных контуров, чтобы привыкнуть.

Редагування кривих

Как и в случае с примитивами, вы можете изменить пропорции векторных объектов, просто выделив их и потянув за любой из углов или сторон. Но на этом возможности редактирования не заканчиваются, вы можете:

• Добавить еще линии
• Изменить или переместить точки
• Настроить кривизну
• Добавить заливку замкнутым контурам

Для начала нужно войти в режим редактирования:

1. Выделить векторный объект. Это может быть не только кривая, а и большинство примитивов: прямоугольник, эллипс, линия и т.д.

2. Далее один из вариантов ниже:

   • Нажать клавишу Enter
   • Сделать двойной клик в векторном объекте. И тут предварительно выделять не нужно. Наверное, это самый простой способ.
   • Кликнуть левой иконкой квадратика (Edit Object) сверху в центре.

   После этого панель инструментов будет изменена. Слева появятся новые кнопки для работы с инструментами редактирования сплайнов.

Инструмент Move. Перемещение точек

Горячая клавиша V. Позволяет выделить и переместить одну или несколько точек векторного объекта мышкой. Здесь работает нажатие клавиши Shift, как и при построении новой кривой. Также для перемещения точек можно использовать клавиатуру (клавиши со стрелками). Этот инструмент активируется по умолчанию, когда вы переходите в режим редактирования.

Инструменты Bend. Управление кривизной

Сначала активируем инструмент Bend (в переводе означает сгибать, что уже намекает на назначение), нажав на иконку закругленной линии с двумя точками (вторая справа) на панели инструментов. Для управления сглаживанием линии:

1. Подносим курсор к любой линии между двумя точками. В нижнем правом углу курсора появится иконка изогнутой линии.
2. Удерживаем левую кнопку мыши и тянем. Линия начнет повторять ваши движения, пытаясь подстроиться под положение курсора. Если фигура имела неровные углы, выглядела неуклюже, то одновременно появятся направляющие точки, которые и задают кривизну.
3. Отпускаем левую кнопку мыши, чтобы зафиксировать кривизну.

Для управления сглаживанием через точку кривой:

1. Подносим курсор к любой точке кривой. В правом нижнем углу курсора появится иконка с точкой и двумя направляющими.
2. Зажимаем левую кнопку мыши и тянем. Из точки вытянутся две симметричные направляющие, линии по бокам точки сгладятся. Чтобы управлять только одной направляющей, нажмите кнопку Alt. Чтобы включить привязку к углу наклона (кратная 45 градусам), нажмите кнопку Shift.
3. Отпускаем левую кнопку мыши, чтобы зафиксировать кривизну.

Ниже показаны все перечисленные выше приемы, включая использование клавиш Shift и Alt:

Для управления сглаживанием через направляющие точки:

1. Подносим курсор к любой направляющей точке кривой. В правом нижнем углу курсора появится иконка с точкой и двумя направляющими.
2. При нажатии левой кнопкой мыши направляющая будет удалена.
3. Щелкаем левой кнопкой мыши и тянем курсор, чтобы изменить угол направляющей вместе с противоположной направляющей, то есть симметрично. Если вы хотите изменить угол исключительно одной направляющей, нажмите клавишу Alt. Также здесь работает зажатие кнопки Shift для привязки к углу наклона.

Часто бывает, что направляющие не видны, но по форме линии видно, что они там есть. В таких случаях нужно перейти на инструмент Move и выделить нужную точку. Появятся направляющие, после чего нужно вернуться обратно в режим Bend.

Не найзручніший спосіб показати направляючі. Але є рішення. Достатньо постійно працювати в режимі Move, щоб вибирати точки та показувати направляючі. А в режим Bend переходити за допомогою гарячої кнопки Ctrl або Command на MacOs. Зверніть увагу, що гарячу клавішу потрібно затиснути, доки ви використовуєте інструмент, оскільки відразу після відпускання клавіші ви повернетеся в режим Move.

Посмотрим, как это выглядит на практике. Обратите внимание, мы начинаем в режиме Bend, видно направляющие только двух точек. Далее переключаемся в режим Move, выделяем нужные точки и зажимаем Ctrl (Command на MacOs), чтобы быстро подправить направляющие точек или кривизну линий:

Инструмент Лейка. Заливка замкнутых контуров

Позволяет выборочно закрашивать замкнутые контуры векторной фигуры. Настройки заливки доступны в разделе Fill и полностью повторяют возможности обычных примитивов. Инструкция по использованию:

1. Выбираем инструмент, кликнув по иконке капли или нажав горячую клавишу B.
2. Кликаем внутри замкнутого контура, чтобы закрасить область. К иконке капли добавится плюс.
3. Повторно кликаем внутри закрашенного контура, чтобы убрать заливку.

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

Настройки обводки

Мы уже знакомы с некоторыми настройками обводки с первого урока Figma. Давайте теперь разберем и продвинутые опции:

• Випадаючі меню внизу ліворуч і праворуч задають форму початкової та кінцевої точки контуру. Звісно, ​​якщо контур замкнутий, ми нічого не помітимо.
• Натиснувши іконку з трьома точками внизу праворуч, можна отримати доступ до просунутих налаштувань. Дивіться нижче пункти
• Stroke style — стиль обводки: Solid — суцільна, Dashed — пунктирна. При виборі пунктирного стилю додаються додаткові параметри: Dash — довжина пунктиру, Gap — довжина пропуску, Dash cap — форма пунктиру.
• Join — форма з'єднання точок: Miter — автоматично скошується якщо кут нахилу менше заданого полем Miter angle, Bevel — постійно скошена, Round — заокруглена.

Закругление углов

Доступен альтернативный способ заокругления точек кривой:

1. Перейдите в режим редактирования.
2. Выделите необходимые точки.
3. Укажите степень закругления в поле Corner radius на панели свойств справа.

Обратите внимание, что такой способ округления не влияет на направляющие точки и работает только с углами контуров. Если вы задали кривизну линий с помощью инструмента Bend, округление работать не будет.

Добавление и удаление точек

Как я упоминала выше, добавить и удалить точки можно в любой момент. Предварительно войдя в режим редактирования, попробуйте следующее для копирования точки:

1. Выбираем инструмент Move (клавиша V).
2. Наводим курсор на точку, которую хотим скопировать.
3. Зажимаем кнопку Alt. Курсор изменится на двойной, как бы подсказывая нам, что готов к копированию.
4. Зажимаем левую кнопку мыши и перетаскиваем курсор. Новая точка пойдет за курсором. Обратите внимание, что образуется еще одна линия, так как оригинальная точка была связана с другой линией.

To add a point inside an existing line:

1. Выбираем инструмент Pen (клавиша P).
2. Наводим курсор в середину линии туда, куда собираемся добавить точку. Figma будет подсказывать нам середину линии. Также к курсору в правом нижнем углу добавится плюс.
3. Делаем клик левой кнопкой мыши. Точка добавлена.

Для удаления точки:

1. Выбираем инструмент Pen (клавиша P).
2. Наводим курсор на точку, которую хотим удалить.
3. Удерживаем клавишу Alt. К курсору добавится минус в нижнем правом углу.
4. Делаем клик левой кнопкой мыши. Точка удалена.
5. Еще один хороший вариант: если выделить точку инструментом Move и удалить ее кнопкой Delete, то Figma не соединит соседние точки и может образоваться отдельный контур внутри слоя. Этот способ идеален, если вы удаляете отдельные контуры, например, лишние элементы загруженной иконки, чтобы упростить ее.

Добавлять точки можно и вне существующих линий. В таком случае векторный объект будет состоять из нескольких контуров.

Перетворення обводки в криві

На деяких етапах роботи, особливо перед експортом іконки у формат SVG може знадобитися перетворити всі лінії в контури. Тобто конвертувати обводку в закриті контури із заливкою. Це потрібно робити для того, щоб іконки коректно відображалися у браузері. Після цієї операції ви вже не зможете налаштувати товщину обведення або будь-які інші її властивості, крім кольору. Тому виконуйте цю операцію в останню чергу. Щоб конвертувати, є кілька способів:

• Select the vector object and press Ctrl+Shift+O or Shift+Command+O on MacOs.
• Call the context menu by right-clicking on the desired vector object. Select Outline stroke.

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

Сайты с бесплатными иконками

Теперь вы знаете большинство приемов работы с кривыми. В втором уроке работы с Figma вы узнали, как импортировать файл с помощью перетаскивания. Тогда мы использовали растровые файлы, но с векторными SVG-файлами все происходит так же.

Существует множество сайтов с бесплатными SVG-иконками. Они удобны тем, что позволяют искать по ключевым словам. Здесь нам не обойтись без знаний английского языка или Google Translate. А вот и наш список:

• The Noun Project — 3 000 000+ (так, более 3 миллионов) бесплатных иконок с удобным поиском. Много готовых наборов на темы.
• Font Awesome — 1600+ бесплатных иконок в одном стиле с рубрикатором.
• Cursor.in — крошечный сайт с коллекцией всех курсоров MacOs.

Чтобы загрузить иконку на The Noun Project, воспользуйтесь строкой поиска. Например, я ввела ключевое слово energy и нажала Enter. Загрузится список иконок. Выберите ту, что понравилась. На странице, которая открылась, нужно нажать кнопку Get this icon. Далее выбираем Basic Download, потом Continue. Теперь нажимаем кнопку SVG. Иконка загружается.

Экспорт в SVG

Для экспорта иконки в SVG-файл её нужно предварительно подготовить:

1. Создать пустой фрейм и вставить внутрь объект. Их может быть несколько. Размеры кадров для иконок обычно кратны 8 пикселям. Подойдут такие: 16x16, 24x24, 32x32 и т.д. Если иконка не влазит, уменьшаем её.
2. Выровнять иконку по центру фрейма. Убедиться, что вертикальные и горизонтальные отступы равномерные.
3. Перевести все обводки в кривые.
4. Перекрасить все элементы в чёрный цвет. Дело в том, что разработчики могут перекрашивать иконки, если нужно.

Теперь всё готово. Осталось выполнить сам экспорт:

1. Выделяем фрейм с иконкой.
2. В правой панели кликаем по плюсику напротив секции Export (она последняя).
3. В выпадающем меню меняем формат на SVG.

Домашнее задание

1. Перемалюйте 8 иконок из изображения внизу (тема общественное питание, всего есть 24 иконки на ваш выбор). Используя все известные вам инструменты, а также Pen, который мы изучили на этом уроке.
2. Задание повышенной сложности. Выполнять не обязательно. Выберите 4 иконки, упростите их (уменьшите количество элементов) и сделайте более толстую обводку.
3. Подготовьте все нарисованные иконки и экспортируйте их в формате Svg в две отдельные папки (light, regular – для толстых). Убедитесь, что иконки имеют понятные названия. Поместите две папки в zip-архив. Самостоятельно научитесь архивировать файлы, если не умеете.

Выводы

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

Хочу поздравить вас с завершением курса! Если у вас была проверка домашних заданий, то напишите мне в Instagram, чтобы я сделала вам персональный сертификат о успешном окончании.

Продолжить обучение