Требования:
— Windows или Mac OSX;
— Photoshop CS5, CS6;
— Adobe Illustrator.
Загрузить скрипт PSD в SVG
Как использовать скрипт
1. Скачать скрипт по инструкции, описанной ниже.
2. Перетянуть в свою папку скриптов Photoshop («Adobe Photoshop/presets/scripts»).
3. (ОПЦИОНАЛЬНО) Перейти в Photoshop и сделать для скрипта горячую клавишу «Edit» menu –> Keyboard Shortcuts и потом в File –> Scripts –> PS to SVG. Как вариант, можно выбрать сочетание из CMD+ALT+E.
4. В файле PSD в конце векторных слоев, которые будут экспортироваться, нужно дописать префикс ".svg". Например, слой под названием “Sky” преобразуется в “Sky.svg”.
5. После переименования слоев достаточно активировать скрипт горячей клавишей или через меню File –> Scripts –> PS to SVG. И файлы будут в той же папке, где хранятся PSD.
Примечание: чтобы скрипт работал быстрее, перед его активацией нужно открыть Illustrator.
Проблемы, которые встречаются:
— скрипт не совместим с новыми версиями Photoshop CC;
— дополнительно к SVG, скрипт создает и файлы AI (но их можно просто удалить);
— скрипт работает только с векторными слоями, не с группами слоев.
Если скрипт не работает:
— убедитесь, что Вы помещаете ".svg" (DOT SVG) в конце названия слоя, который нужно экспортировать. А также, что каждый из слоев — в единственном экземпляре;
— проверьте, запущен и работает ли Illustrator;
— перед началом процесса убедитесь, что все экспортируемые слои являются замкнутыми векторами.
В некоторых случаях при экспорте исходников может наблюдаться искажение цвета. Тогда в скрипт после строки:
"bt.body += "app.open(" + s.svgFile.toSource() + ", DocumentColorSpace.RGB, dtOpts);"; "
следует вставить строку:
"bt.body += "app.executeMenuCommand ('doc-color-rgb');";"
Комментарии (26)
UMAX
22.02.2016 21:14+1Последний Photoshop CC и сам сохраняет shape-слои в svg-файлы, без дополнительных скриптов. А ещё и эффекты слоя может предоставить в CSS.
f0rmat1k
22.02.2016 23:14+3— проверьте, запущен и работает ли Illustrator;
Мда. Я уже понадеялся, что наконец появился способ без использования иллюстратора. Автор, эти скрипты легко гуглятся. Не стоит из-за одного из них писать целый пост.
CSS3Ps
24.02.2016 11:58+1для прямого экспорта есть плагин www.zeick.com
работает на CC, CC 2014, CC 2015
для него не нужен иллюстратор
работает как с отдельными слоями, так и с группами
не нужны дополнительные манипуляции (дописывать .SVG в имени слоя)
имеет как гуй, так и скрипт, который можно повесить на хоккей
отрабатывает стили слоев (частично)
Из минусов — только цена 19.99 $, но есть бесплатная демо-версияf0rmat1k
24.02.2016 14:00Там комментатор выше утверждает, что в СС итак есть экспорт в svg. В чем тогда смысл плагина? У меня вот CS6.
CSS3Ps
24.02.2016 15:42Ну во первых зейк вышел раньше чем это появилось нативно, и он честно поддерживает СС,
адобовский появился только в СС 14.1 и выше
не уверен на счет CC 2014 и СС 2015 но у адоба в версии СС были постоянные проблемы с кадрированием SVG при экспорте
к тому же Zeick работает в 1 клик (выделил слои и группы и нажал — кнопку экспорт), а у адоба надо было переименовывать слои, как в скрипте из статьи (в версиях СС точно) в последних вроде если провести предварительную настройку, то стало попроще это делать.
для версий CS5 и CS6 могу порекомендовать вот этот плагин http://glifo.uiparade.com — он собирает шейпы в SVG шрифт стоит 19$
alltiptop
Может я сейчас глупость скажу, но не проще ли изначально работать в векторном редакторе для дизайна используя фотошоп только для растровых картинок?
lifestyle
Этот скрипт для тех, у кого фотошоп головного мозга)
dom1n1k
Небольшие и простые элементы (кнопочка, стрелочка, плашечка) удобнее делать прямо в ФШ, не отходя от кассы, чем постоянно прыгать и экспортировать туда-сюда.
Объемный и сложный вектор, конечно же, нужно изначально делать в Иллюстраторе или чем-то подобном.
alltiptop
Я про дизайн в принципе, сайтов например
dom1n1k
Так и я про него. Если макет делается в PS (а в большинстве случаев это так), то удобно небольшие векторные элементы делать там же.
Полностью рисовать сайт в AI? Ну как-то это мало распространено. Я пробовал когда-то, мне не очень понравилось — с вектором обращаться немного удобнее, но зато гораздо неудобнее с растром. А хочешь не хочешь, любой сайт это сочетание обоих вещей.
Де факто ситуация на рынке такова, что с вероятностью 99% макет будет либо в psd, либо в скетче. Иллюстратор, корел, файрворкс и пр. — это удел редких маргиналов.
alltiptop
Видимо мне посчастливилось самому говорить верстальщикам где они будут работать, но как бы обхожусь inkscape и не вижу никаких сложностей, а уж с svg дела проще некуда — копипаст выделенной стрелочки в файловый менеджер, а оптимизировать можно массово позже.
funnybanana
Прошу прощения, как вы из inkscape макета можете выделить один элемент и экспортировать именно его?
Уже пол года гоняю Corel из эмулятора только из-за того что не могу найти в inkscape функцию экспортировать выделенный объект =(
alltiptop
Выделяю объект — Ctrl+C, открываю файловый менеджер — Ctrl+V, ввожу имя файла.svg. Уточнение — работает в линуксах, про венду, мак не в курсе.
Экспортировать выделенный объект (или объекты, массово) в png — выделить его — Ctrl+Shift+E
funnybanana
Дико извиняюсь, выходит оффтоп какой-то…
Если бы я мог описанным вами способом экспортировать отдельные объекты в svg я бы экономил кучу времени, но увы… у меня не выходит (дабы не быть голословным, вот видео: https://youtu.be/Oi1dlL1Iulw)
P.S Файловый менеджер Nautilus, по комбинации клавиш тоже не выходит.
alltiptop
Проблема решена — оно работает в kde: https://youtu.be/szuUIBsUvs0
Lsh
Тоже поофтоплю… что-то мне надоел фотошоп в плане веб-дизайна. Присматриваюсь то к люстре, то к инкскейпу.
Насколько сложные сайты вы делаете, можно посмотреть примеры?
Как работаете с множеством страниц, удобно ли работать с общими элементами (типа кнопок)?
Сам стандарт svg поддерживает ссылки на внешние файлы и даже на объекты другого типа (foreignobject), но насколько мне известно, в inkscape такое пока не реализовали. А было бы удобно нарисовать кнопочки и списочки и сложить их в отдельный документ, а потом ссылаться на них из других документов. Если вдруг понадобится перекрасить, то это можно будет сделать в одном месте.
Какие-нибудь приблуды для экспорта наборов картинок (когда нельзя использовать вектор и надо именно картинки) в разных разрешениях (обычное и x2 под ретину) используете?
Как там с расширяемостью? Знаю, что там можно писать плагины на python, однажды даже заглядывал в исходники примеров, но это было давно и они были куцие. Можно ли сейчас создавать свои инструменты и интерактивные панели (например, выделил что-то, а панель тебе информацию показывает) или как и раньше только диалоговые окна (три параметра, ок и отмена)?
alltiptop
Это тянет на неплохой такой разбор инкскейпа,
image xlink работает, в том числе на svg файлы, но вставлять придётся руками скорее всего, вставить картинку как ссылку он предлагает только растр, или вставить растр и в редакторе xml поменять ссылку
Выделяешь несколько объектов — Ctrl+Shift+E (или меню — экспортировать в растр), дальше можно выбрать всё вместе или каждый элемент в отдельности, можно выбрать dpi, так же его можно поменять в настройках для растра по-умолчанию
Если набор иконок в разных файлах, то
Не проверял, если честно, лучше сначала искать работающий функционал
Lsh
Попробовал. Результат: https://i.imgur.com/MujlTjc.png
Но эта же svg в браузере показывается без проблем. Другая svg-шка из xlink на месте.
alltiptop
Путь относительный или абсолютный, какие слеши (\ или /)? Не уверен точно как он в венде понимает, но у меня работает как с абсолютными, так и с относительными путями (например, img/icon.svg или /home/$USER/project/img/icon.svg будут равнозначны).
Lsh
Путь относительный, просто имя файла, т.к. он в этой же директории. Пока там была png-шка всё отображалось нормально.
funnybanana
Тут наверное дело удобства… я вот долгое время рисовал дизайны страниц в CorelDraw =)
Освоишь inkscape — будет удобно работать и в нём...
k12th
Помнится, кто-то продвигал дизайн сайтов в InDesign. Но как-то не взлетело, вроде бы.
alltiptop
Это приложение, мягко говоря, не для веба. Illustrator хотя-бы, Corel, Inkscape.