У п'ятій частині основ Figma ми дізнаємося про булеві операції та навчимося використовувати їх на практиці. Це незамінний інструмент для роботи з векторною графікою, особливо з іконками та логотипами.
Про булеві операції
Булеві операції – поняття не нове. Вони прийшли до нас із такої науки як логіка, а математично можуть бути записані за допомогою теорії множин. Активно використовуються у програмуванні при побудові складних умов. Наприклад, відомі нам навіть із екселівських таблиць логічні оператори «і», «або» та «не».
Бульові операції потрібні для побудови складних векторних фігур із простих примітивів. Наприклад, кілька кругів можна об'єднати у хмару. У Figma є п'ять операцій:
- Об'єднання
- Віднімання
- Перетин
- Виключення
- Перетворення на криві
Для виконання роботи з цими інструментами потрібно два або більше векторних елементів (фігур, примітивів).
Після застосування одного з п'яти інструментів булевих операцій ми отримаємо не просто готову фігуру. Figma об'єднує вектори в групу та дозволяє редагувати кожен елемент (рухати, змінювати форму, скасовувати дію булевої операції шляхом винесення елемента з групи).
Об'єднання фігур (Union Selection)
Цю операцію слід застосовувати тоді, коли ви хочете отримати одну суцільну фігуру із кількох. Як результат, для всіх частин цієї фігури діятимуть однакові правила заливки, обводки або інших ефектів.
Параметри майбутньої єдиної фігури будуть взяті з верхнього шару вибраних векторів.
Давайте спробуємо зробити просту іконку за допомогою булевої операції «Об'єднання». Для цього:
- Заздалегідь намалюйте дві або більше (в моєму випадку – три) векторні фігури.
- За допомогою кнопки Shift та лівої кнопки миші – виділяємо необхідні об'єкти. У верхній панелі по центру у нас з'являється меню Boolean Groups з боковою стрілочкою, натиснувши на яку, ми побачимо перелік команд.
- Обираємо команду “Union Selection”.
Віднімання фігур (Subtract Selection)
Актуально, якщо вам потрібно відрізати якусь частину, зробити отвір чи вигин у фігурі. Як результат, ми побачимо найнижчий шар наших векторних об'єктів, за винятком тих його частин, які були перекриті шарами вище.
Давайте спробуємо зробити просту іконку за допомогою булевої операції «Віднімання». Для цього:
- Заздалегідь намалюйте векторні фігури. Пам'ятайте, що верхній шар ми віднімаємо з нижнього.
- За допомогою кнопки Shift та лівої кнопки миші – виділяємо потрібне. У верхній панелі по центру у нас з'являється меню Boolean Groups з боковою стрілочкою, натиснувши яку ми побачимо перелік команд.
- Обираємо команду “Subtract Selection”.
Цю операцію потрібно застосувати для того, щоб видимою стала лише та частина, на якій перетинаються наші векторні фігури. Тут параметри заливки, обводки та інших ефектів будуть взяті з верхнього шару.
Давайте спробуємо зробити просту іконку за допомогою булевої операції «Перетин». Для цього:
- Заздалегідь намалюйте векторні фігури.
- Повторюємо ті самі дії, що й з попередніми функціями. Щоб панель Boolean Groups з'явилася, потрібно затиснути Shift та мишкою вибрати фігури.
- Обираємо команду “Intersect Selection”.
- Заздалегідь намалюйте дві векторні фігури.
- Затискаємо Shift та ЛКМ, щоб вибрати обидві одночасно.
- На панелі зверху обираємо команду “Exclude Selection”.
Важливий момент: виключення працює лише з двома векторними шарами. Якщо ми додамо на перетин двох шарів третій, то він інвертує дію. Приклад:
Зазвичай цю операцію використовую в останню чергу для запікання результату перед експортом до SVG. Це дозволяє оптимізувати кількість точок і тим самим заощадити дороге місце на диску, адже чим менше місця займає іконка, тим швидше вона завантажиться під час перегляду сторінки, на якій буде використана.
В результаті виходить об'єднання усіх елементів в одну фігуру з подальшим переведенням об'єктів у криві. Тобто ми більше не зможемо змінювати вміст групи таким же чином як у “Union Selection”. Елементи нашої групи переведені в криві, і ми можемо редагувати їх форму лише за допомогою кривих. Приклад:
Через великий наплив охочих проходити курс я роблю перевірку домашніх завдань платною. 30$ (по поточному курсу), 10% перекажу ЗСУ. За один донат перевірю домашки до усіх уроків.
За реквізитами пишіть в дірект Інстаграму @frusia.pro
Курс і уроки залишаються безкоштовними.
Домашні завдання більше не перевіряються для громадян росії.
- А ви знали, що одні з найпопулярніших іконок, які дизайнери використовують на більшості сайтів – це соціальні мережі та різноманітні сервіси? Спробуймо намалювати іконки, які наведені нижче на картинці. Використовуйте для малювання булеві операції, про які дізналися у цьому уроці. Спробуйте самостійно зрозуміти, яка операція є актуальною для кожної з них.
Для більш легкого і точного відображення перенесіть картинку в Figma. Пам'ятайте, що у фіналі кожна іконка має бути згрупована.
![Перше домашнє завдання до 8-ого уроку з UX/UI курсу]( "Перше домашнє завдання до 8-ого уроку з UX/UI курсу")
- Завдання підвищеної складності. Використовуйте булеві операції для того, щоб максимально точно повторити наступні чотири іконки. Зверніть особливу увагу на кольори та частинки, з яких вони складаються.
![Друге домашнє завдання до 8-ого уроку з UX/UI курсу]( "Друге домашнє завдання до 8-ого уроку з UX/UI курсу")
На перевірку надсилайте посилання на файл у Figma. Сподіваюся, ви пам'ятаєте, що готовим іконкам потрібно дати змістовні назви.
Сьогодні ви познайомилися з булевими операціями, які виручать вас при створенні складних елементів інтерфейсу, іконок, простих ілюстрацій і навіть частин інфографіки. Якщо раніше ми об'єднували примітиви в групи, то зараз ми знайомі з ефективнішими та зручнішими способами побудови векторної графіки.
Нам ще потрібно вивчити роботу з кривими на рівні точок і важелів, але про це в наступних уроках.
Підписуйтесь на мене в Instagram – @frusia.pro – будьте в курсі анонсів нових уроків, дивіться перевірки домашніх завдань у сторіс, ставте запитання, а також на вас чекає безліч корисних постів про дизайн.
Продовжити навчання