Як малювати фігури й експортувати векторну графіку (SVG)

Фігури й експорт у SVG за сім кроків

1. 1

   Створіть новий документ

   Перейдіть на lilcactus.app і виберіть Файл› потім Створити… Введіть 800 у полі Ширина і 800 у полі Висота, клацніть шаховий зразок під написом Фон, щоб фон був прозорим, і натисніть кнопку Створити.

   

2. 2

   Намалюйте коло

   Натисніть U, щоб вибрати інструмент Фігура. На панелі параметрів (смузі під меню) у списку Фігура виберіть Еліпс; у списку Режим має бути вибрано Фігура. Утримуючи Shift або ⇧, проведіть майже через усе полотно: на новому шарі з назвою Фігура з’явиться чорне коло. Нові фігури заливаються кольором переднього плану.

   

3. 3

   Задайте точні розмір, положення й колір

   Коли коло виділено, панель Властивості показує його поточні параметри. Введіть 100 у полях X (px) і Y (px) та 600 у полях Ширина (px) і Висота (px), натискаючи Tab після кожного значення: тепер коло розміщено по центру з відступом 100 px.

   Нижче, у розділі Заливка, клацніть зразок кольору, введіть 2E7D5B у полі шістнадцяткового коду й натисніть кнопку OK. Коло стане зеленим.

   

   

4. 4

   Намалюйте білу зірку із заокругленими кінцями

   Натисніть D, а потім X, щоб колір переднього плану став білим. У списку Фігура на панелі параметрів виберіть Зірка і задайте значення: Промені 5, Внутрішній радіус 50 і Радіус кутів 24. Утримуючи Shift або ⇧, проведіть приблизно від чверті кола до трьох чвертей: на окремому шарі з’явиться біла зірка з м’якими кінцями. Щоб розмістити її точно, на панелі Властивості введіть 250 у полях X (px) і Y (px) та 300 у полях Ширина (px) і Висота (px).

   

   

5. 5

   Змініть зірку пізніше

   Фігури залишаються динамічними. Виділивши шар зірки, введіть 6 у полі Промені на панелі Властивості і натисніть Tab: зірка перемалюється із шістьма променями, того самого розміру й з тими самими заокругленими кутами. Поля Ширина (px) і Радіус (px) (радіус кутів) працюють так само.

   

6. 6

   Додайте біле кільце

   Клацніть шар кола (Фігура) на панелі Шари. На панелі Властивості в розділі Обведення у списку Вид заливки виберіть Колір, клацніть зразок і виберіть білий (FFFFFF). У розділі Геометрія обведення введіть 16 у полі Ширина (px), а в списку Положення виберіть Усередині, щоб кільце не виходило за межі кола 600 px.

   

   

7. 7

   Експортуйте в SVG і збережіть проєкт

   Спершу приховайте порожній шар Фон значком ока на панелі Шари: інакше SVG отримає для нього крихітне прозоре зображення, яке інші програми імпортують як зайвий об’єкт. Потім виберіть Файл› потім Експорт› потім SVG… і натисніть кнопку Експортувати. SVG зберігає кожну фігуру як векторний контур, тож вона залишається чіткою за будь-якого розміру на сайті чи в іншій програмі для дизайну, а фон лишається прозорим.

   Щоб фігури залишалися редагованими в Lil Cactus, також виберіть Файл› потім Зберегти як› потім Проєкт Lil Cactus… (Ctrl+Shift+S або ⇧⌘S); після цього Файл› потім Зберегти оновлює цей файл. Файл› потім Зберегти як› потім Photoshop (.psd)… зберігає їх як векторні шари-фігури, але після повторного відкриття PSD вони стають редагованими контурами без динамічних параметрів кутів і променів.

   

Фігури та їхні параметри

• Прямокутник: параметр Радіус кутів на панелі параметрів заокруглює кути — для кнопок і карток.
• Лінія: проведіть від кінця до кінця, а потім задайте на панелі Властивості колір і ширину обведення та Кінці ліній (плоскі, круглі чи квадратні). Нова лінія обводиться кольором переднього плану; якщо її не видно, цей колір збігається з документом — виберіть там інший колір обведення.
• Багатокутник і зірка: Сторони або Промені, а для зірки ще Внутрішній радіус, що визначає, наскільки глибоко врізаються промені.

Список Режим на панелі параметрів визначає, що створює перетягування: шар-фігуру (Фігура), контур, який можна перетворити на виділення чи обвести (Контур), або малювання на поточному шарі (Пікселі), яке вже не редагується як фігура.

Поєднання й зміна форми фігур

Щоб вирізати одну фігуру з іншої, виділіть шар-фігуру й перед малюванням у списку Операція на панелі параметрів виберіть Відняти: нова фігура стане отвором у виділеній, на тому самому шарі. Об’єднати додає до неї, Перетин залишає лише спільну частину, а Виключити — усе, крім спільної частини. Для окремих фігур знову виберіть Новий шар у списку Операція.

Щоб перетягувати окремі точки, клацніть кнопку пера на панелі інструментів правою кнопкою миші, виберіть Пряме виділення і перетягніть точку виділеної фігури. Поєднана або змінена фігура стає довільним контуром: у її списку Фігура на панелі Властивості написано Редагований контур, і вона більше не має динамічних параметрів кутів і променів. Див. урок як користуватися інструментом «Перо».

Що зберігає експорт у SVG

• Шари-фігури із заливкою кольором, лінійним, радіальним або віддзеркаленим градієнтом, з обведенням і штрихами стають векторними контурами. Фігура з кутовим або ромбоподібним градієнтом стає зображенням.
• Текст стає векторними контурами літер, якщо шрифт це дозволяє.
• Фото, стилі шару, як-от тіні, і маски стають зображенням лише для цього шару.
• Видимий шар із режимом накладання, відмінним від Звичайний, відсічна маска або коригувальний шар перетворюють увесь SVG на одне зображення без векторів. Так само буде з документом Lab або в градаціях сірого, а також із документом із нестандартним колірним профілем, що містить текст, прозорість або градієнти. Вікно експорту попереджає про це перед експортом.

Щоб отримати суто векторний файл, використовуйте в дизайні лише шари-фігури й звичайний текст у режимі Звичайний і приховуйте порожні шари.

Розв’язання типових проблем

Фігура вийшла чорною

Колір переднього плану був чорним. Змініть заливку на панелі Властивості або задайте колір переднього плану перед малюванням.

Нова фігура вирізала отвір у старій

У списку Операція на панелі параметрів вибрано Відняти. Скасуйте дію командою Редагувати› потім Скасувати (Ctrl+Z або ⌘Z), виберіть Новий шар і намалюйте знову.

Коло вийшло овалом

Введіть однакові значення в полях Ширина (px) і Висота (px) на панелі Властивості.

Якщо ви переходите з іншого редактора

Photoshop

Інструменти фігур (U) і динамічні параметри фігури на панелі «Властивості».

Фігури й векторна графіка: запитання та відповіді