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