Практичні посібники Deslove
Редагуйте SVG онлайн в Aura та зберігайте редагований оригінал.
Aura — векторний редактор Deslove. У браузері можна відкрити SVG, обрати й редагувати його об’єкти, змінювати кольори та форму контурів. Збережіть проєкт Aura для подальших змін, а окремий SVG — для вебу чи іншого векторного інструмента.
Для дизайнерів, які оновлюють логотип, іконку чи іншу векторну графіку. Повний робочий простір найзручніший на комп’ютері. Інструменти та готові приклади можна спробувати без акаунта; для відкриття власних файлів, збереження й експорту потрібен вхід.
Спробувати інструменти можна без акаунта. Для відкриття власних файлів, збереження та експорту потрібен вхід.
1. Збережіть початковий файл і відкрийте редактор.
Перед редагуванням зробіть копію початкового SVG. Для першої спроби оберіть невелику зміну: наприклад, колір заливки або форму однієї кривої. Збережіть вигляд оригіналу як орієнтир, щоб після імпорту порівняти пропорції, типографіку й колір.
Відкрийте Aura у браузері. Щоб спочатку познайомитися з інструментами, відкрийте приклад зі сторінки редактора без входу. Для власного файлу скористайтеся входом усередині Aura. Якщо ви вже щось намалювали як гість, залишайтеся в тому самому браузері й вкладці: так Aura зможе повернути вас до чернетки після входу.
2. Відкрийте SVG і прочитайте звіт імпорту.
Після входу оберіть «Файл → Відкрити файл…» та вкажіть SVG. Щоб додати графіку до вже відкритого документа, скористайтеся «Файл → Додати SVG до документа…». Перед відкриттям іншого файла збережіть важливі зміни в поточному документі.
Порівняйте імпортований результат з оригіналом і перегляньте «Звіт імпорту». SVG може містити контури, групи, вбудовані зображення, текст, маски й ефекти; не кожен елемент поводиться як простий редагований контур. Якщо Aura повідомляє про непідтримувані властивості, збережіть оригінал і спробуйте простіший експорт SVG із вихідної програми.
3. Знайдіть об’єкт, який хочете змінити.
Оберіть графіку інструментом виділення, а в панелі шарів перегляньте групи й окремі об’єкти. Якщо кілька частин виділяються разом, спершу перевірте структуру групи. Прихований або заблокований шар також може пояснювати, чому елемент не вдається обрати.
З’ясуйте, що саме виділено. Вбудований PNG або JPEG залишається зображенням усередині SVG: відкриття файла не перетворює пікселі на векторні контури. Якщо літери вже переведено в криві, можна змінювати їхню форму, але не просто редагувати їх як текстовий рядок.
4. Змініть заливку або обведення виділеного об’єкта.
Виділіть потрібний об’єкт і змініть колір у налаштуваннях заливки або обведення. Заливка задає колір усередині фігури, обведення — її контуру. Перш ніж застосовувати колір чи палітру, перевірте, який із цих параметрів активний.
Почніть з одного об’єкта й огляньте результат. Без виділення колір задається для нових об’єктів, тому наявна графіка може не змінитися. Якщо логотип складається з кількох частин, перевірте кожну й переконайтеся, що прозорі або незалиті ділянки залишилися такими, як ви задумали.
5. Змініть контур або редагований текст.
Для векторного контуру оберіть інструмент вузлів і виділіть вузол. Перемістіть його, щоб змінити силует, або відрегулюйте напрямні, щоб змінити криву. Внесіть невелику правку й перевірте форму у звичайному розмірі: додаткові вузли не завжди роблять криву плавнішою.
Якщо об’єкт залишається редагованим текстом, змініть напис і типографіку текстовими інструментами. Переводьте текст у криві лише тоді, коли потрібно змінювати форму окремих літер. Після цього літери вже не редагуються як текст. Перед переведенням у криві чи експортом збережіть версію Aura з редагованим текстом.
6. Збережіть проєкт Aura та окрему копію SVG.
Оберіть «Файл → Зберегти як…» і збережіть робочий проєкт Aura (.aura). Цей формат зберігає редагований текст, об’єкти й налаштування документа для Aura. Потім ще раз відкрийте «Зберегти як…» та оберіть SVG для копії, яку плануєте поширювати або використати на сайті.
Під час експорту SVG Aura зберігає текст у вигляді векторних кривих. Форма літер може зберегтися, але такий файл не замінює джерело з редагованим текстом. Тимчасові чернетки відновлення зберігаються в браузері на цьому пристрої: це не хмарна бібліотека проєктів і не резервна копія. Тримайте завантажені файли .aura та .svg у власному сховищі.
7. Перевірте експортований файл там, де його використаєте.
Відкрийте експортований SVG у браузері або програмі, для якої готували файл. Порівняйте кадрування, тло, кольори, криві й літери із задуманим результатом. Іконку перевірте як зі збільшенням, так і в її фактичному розмірі в інтерфейсі.
Якщо щось змінилося, поверніться до джерела Aura й порівняйте потрібний об’єкт зі звітом імпорту. Імпортовані маски, ефекти та сторонні формати можуть потребувати додаткової перевірки. Частина імпорту й експорту у вебверсії використовує конвертацію на сервері Deslove; вебверсія не є офлайн-застосунком. Не очікуйте, що будь-який файл пройде імпорт і зворотний експорт без втрат.
Приклад на практиці
Приклад: змініть колір однієї частини іконки.
Візьміть власну іконку або відкрийте редагований приклад іконок зі сторінки Aura, щоб спробувати виділення й роботу з кольором. Ця вправа змінює графіку, а не трасує растрове зображення.
Мета
Змінити заливку іконки папки, зберігши її обведення й пропорції.
Дії
Оберіть об’єкт папки на полотні або в шарах, перевірте, чи виділено групу або окремий контур, і застосуйте новий колір до заливки. Перед зміною обведення огляньте його окремо.
Що зберегти
Перед наступними змінами збережіть джерело .aura. Після входу в акаунт експортуйте окремий .svg і відкрийте його в браузері: перевірте, що заливка змінилася, а обведення залишилося видимим.
Якщо змінюється все зображення
Скасуйте дію та перевірте виділення в шарах. Можливо, ви обрали групу або джерело містить одне вбудоване зображення замість окремих векторних об’єктів.
Перед завершенням
Перед поширенням SVG.
Початковий SVG збережено, а експортовану копію перевірено там, де вона використовуватиметься.
Заливка або обведення змінилися саме в потрібного об’єкта; маски, прозорість і кадрування виглядають правильно.
Збережено джерело .aura для подальшого редагування тексту й документа; текст в експортованому SVG став кривими.
Важливі файли завантажено у власне сховище: я не покладаюся лише на чернетку відновлення в браузері.
Внесіть одну свідому зміну й перевірте її.
Невелика правка SVG допомагає розібратися з виділенням, заливками й контурами. Збережене джерело та перевірена експортована копія спростять наступну зміну.
Відкрити Aura