Как правильно нарезать Vector Smart Object из Photoshop?

Question

[levkoi]

Здравствуйте, являюсь новичком в верстке. Хочу сверстать макет (https://www.behance.net/gallery/69869411/Family-Fa... но при нарезке графики в Фотошоп столкнулась с Vector Smart Object, ранее мне не попадавшимися. При попытке экспортировать содержимое, сохраняется файл AI, который, как я догадываюсь, напрямую в HTML не может быть использован.
Обычно нарезала графику так: Convert to Smart Object, затем указывала расширение, после: Generate Image Assets. Если следовать такому же алгоритму, какое расширение необходимо указывать? Если прописывать .png, картинки сохраняются вместе с фоном и overlay.
Как правильно экспортировать данные объекты?

Answer 1

[Михаил Проскурин]

Интересно узнать версию фотошопа, если она выше CC, то используйте для экспорта векторных объектов формат SVG, и прямо так вставляйте в верстку. Уже давно, никто векторные объекты не вставляет в PNG, так как при адаптации, при увеличение масштаба браузера и в ритина дисплеях, данная картинка будет терять качество. Вектор же будет просто увеличивать свой масштаб, без потери качества.

Comments

[levkoi]

Спасибо за ответ. Использую Photoshop CC 2017. Попробовала выгрузить .svg: результат тот же, за исключением качества, как вы справедливо заметили. Но фон и оверлей никуда не делись, наверное, так и задумано - верстать эти блоки с цельным бэкграундом, а не позиционировать картинку отдельно (что сначала показалось мне дикостью, но, видимо, есть какие-то стандарты дизайна, которые мне еще предстоит узнать))

[Bonchbruyevich]

Столкнулся с такойже проблемой. Вектор, нарисованный в Adobe illustrator, экспортируется из Фотошопа, как заинлайненный png:base64 в svg файле, то есть растр. Можете его открыть блокнотом и посмотреть. Так и не нашёл оптимального решения этой проблемы. Пришлось установить иллюстратор и экспортировать свг из него.