Нещодавно я зіткнулася з проблемою, яка змусила мене неабияк потрудитися, нишпорячи по просторах інтернету в пошуках рішення. Мені потрібно було експортувати елементи дизайну, намальовані в Adobe Photoshop в формат SVG. Я думаю, багато хто стикався з такою проблемою і вам буде цікаво дізнатися, як же я вийшла з ситуації, що склалася.
Почну з того, що формат SVG - це формат масштабована векторна графіки, що входить в підмножина розширюваної мови розмітки XML. який в свою чергу використовується в web програмуванні і мобільних розробках. Якщо сказати своїми словами, то SVG файл зберігає в собі програмний код зображення, а XML. взаємодіючи з HTML або певними мовами програмування, дозволяють цей код перетворювати в це саме зображення у вікні браузера або у вікні мобільного додатка. Таким чином, можна використовувати векторну графіку в дизайні сайтів або додатків. А це дає величезні переваги - адже, як ви всі знаєте, векторна графіка може, як завгодно масштабироваться без втрати якості.
У Adobe Photoshop є можливість створення векторної графіки за допомогою фігур і інструменту Перо. Напрямок дизайну, яке активно використовує даний тип графіки, називається Flat дизайн. Щоб в браузері елементи дизайну виглядали так само вигідно, як і у вихідному файлі та при цьому вільно масштабувати без втрати якості логічно буде зберегти їх у векторному форматі, інакше, навіщо вся затія? Векторний об'єкт, збережений у форматах jpeg або png. сприймається як растрова графіка. Тому логічно буде зберігати векторні об'єкти в формат SVG.
Обмовлюся, що в цей формат так само можна зберігати об'єкти з растровими елементами. Наприклад, векторна фігура з параметром накладення «Тінь». Але в підсумку цей об'єкт буде масштабироваться з втратою якості, як елемент растрової графіки. Так що, рекомендую зберігати в формат SVG саме векторну графіку.
Тому, ось вам мій складніший шлях експорту об'єктів з Photoshop в SVG.
Припустимо, ви вирішили створити дизайн мобільного застосування в стилі Flat. використовуючи векторні фігури. У вас є ось такі елементи.
Для початку збережемо весь документ в формат PDF. Файл - Зберегти як ... вибрати формат PhotoshopPDF. З'явиться діалогове вікно, в якому я рекомендую змінити лише одну настройку. Вкладка Стиснення - Стиснення: Чи не показувати.
Тепер, можна сміливо відкривати отриманий PDF документ в Adobe Illustrator. Якщо там є текст, то він буде перетворений в криві.
Як бачите, всі об'єкти розподілені по верствам і розбиті на групи, кожен контур редагований. На прикладі контур однієї з кнопок виділений за допомогою інструменту «Виділення».
Уже з Adobe Illustrator ви можете зберігати об'єкти окремо або всі разом в формат SVG.
Файл - Зберегти як ... вибрати формат SVG.
У діалоговому вікні я вибираю такі настройки:
(Visited 2 999 times, 14 visits today)