Бесплатный скрипт для Photoshop: экспорт векторных слоев из PSD в SVG

    Использование готового и бесплатного скрипта, о котором пойдет речь, значительно упрощает и ускоряет процесс переноса исходников из Photoshop в Sketch. Но я думаю, скрипт может пригодится и для тех, кто с указанной программой не работает. Он экспортирует слои в формат .svg, избавляя от необходимости по одному генерировать SVG файлы.



    Требования:

    — 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');";"
    
    ua-hosting.company
    290.85
    Хостинг-провайдер: серверы в NL / US до 100 Гбит/с
    Share post

    Comments 26

      +3
      Может я сейчас глупость скажу, но не проще ли изначально работать в векторном редакторе для дизайна используя фотошоп только для растровых картинок?
        –4
        Этот скрипт для тех, у кого фотошоп головного мозга)
          +3
          Небольшие и простые элементы (кнопочка, стрелочка, плашечка) удобнее делать прямо в ФШ, не отходя от кассы, чем постоянно прыгать и экспортировать туда-сюда.
          Объемный и сложный вектор, конечно же, нужно изначально делать в Иллюстраторе или чем-то подобном.
            0
            Я про дизайн в принципе, сайтов например
              +2
              Так и я про него. Если макет делается в PS (а в большинстве случаев это так), то удобно небольшие векторные элементы делать там же.
              Полностью рисовать сайт в AI? Ну как-то это мало распространено. Я пробовал когда-то, мне не очень понравилось — с вектором обращаться немного удобнее, но зато гораздо неудобнее с растром. А хочешь не хочешь, любой сайт это сочетание обоих вещей.
              Де факто ситуация на рынке такова, что с вероятностью 99% макет будет либо в psd, либо в скетче. Иллюстратор, корел, файрворкс и пр. — это удел редких маргиналов.
                0
                Видимо мне посчастливилось самому говорить верстальщикам где они будут работать, но как бы обхожусь inkscape и не вижу никаких сложностей, а уж с svg дела проще некуда — копипаст выделенной стрелочки в файловый менеджер, а оптимизировать можно массово позже.
                  0
                  Прошу прощения, как вы из inkscape макета можете выделить один элемент и экспортировать именно его?

                  Уже пол года гоняю Corel из эмулятора только из-за того что не могу найти в inkscape функцию экспортировать выделенный объект =(
                    +1
                    Выделяю объект — Ctrl+C, открываю файловый менеджер — Ctrl+V, ввожу имя файла.svg. Уточнение — работает в линуксах, про венду, мак не в курсе.
                    Экспортировать выделенный объект (или объекты, массово) в png — выделить его — Ctrl+Shift+E
                      0
                      Дико извиняюсь, выходит оффтоп какой-то…
                      Если бы я мог описанным вами способом экспортировать отдельные объекты в svg я бы экономил кучу времени, но увы… у меня не выходит (дабы не быть голословным, вот видео: https://youtu.be/Oi1dlL1Iulw)
                      P.S Файловый менеджер Nautilus, по комбинации клавиш тоже не выходит.
                  0
                  Тоже поофтоплю… что-то мне надоел фотошоп в плане веб-дизайна. Присматриваюсь то к люстре, то к инкскейпу.
                  Насколько сложные сайты вы делаете, можно посмотреть примеры?

                  Как работаете с множеством страниц, удобно ли работать с общими элементами (типа кнопок)?
                  Сам стандарт svg поддерживает ссылки на внешние файлы и даже на объекты другого типа (foreignobject), но насколько мне известно, в inkscape такое пока не реализовали. А было бы удобно нарисовать кнопочки и списочки и сложить их в отдельный документ, а потом ссылаться на них из других документов. Если вдруг понадобится перекрасить, то это можно будет сделать в одном месте.

                  Какие-нибудь приблуды для экспорта наборов картинок (когда нельзя использовать вектор и надо именно картинки) в разных разрешениях (обычное и x2 под ретину) используете?

                  Как там с расширяемостью? Знаю, что там можно писать плагины на python, однажды даже заглядывал в исходники примеров, но это было давно и они были куцие. Можно ли сейчас создавать свои инструменты и интерактивные панели (например, выделил что-то, а панель тебе информацию показывает) или как и раньше только диалоговые окна (три параметра, ок и отмена)?
                    +1
                    Это тянет на неплохой такой разбор инкскейпа,

                    Сам стандарт svg поддерживает ссылки на внешние файлы и даже на объекты другого типа (foreignobject), но насколько мне известно, в inkscape такое пока не реализовали

                    image xlink работает, в том числе на svg файлы, но вставлять придётся руками скорее всего, вставить картинку как ссылку он предлагает только растр, или вставить растр и в редакторе xml поменять ссылку

                    Какие-нибудь приблуды для экспорта наборов картинок

                    Выделяешь несколько объектов — Ctrl+Shift+E (или меню — экспортировать в растр), дальше можно выбрать всё вместе или каждый элемент в отдельности, можно выбрать dpi, так же его можно поменять в настройках для растра по-умолчанию
                    Если набор иконок в разных файлах, то

                    for file in scalable/actions/*.svg
                        do  inkscape -z --file=$file --export-dpi=720 --export-png=512x512/$(basename $file .svg).png
                            inkscape -z --file=$file --export-dpi=360 --export-png=256x256/$(basename $file .svg).png
                            inkscape -z --file=$file --export-png=64x64/$(basename $file .svg).png
                    done

                    Как там с расширяемостью?

                    Не проверял, если честно, лучше сначала искать работающий функционал
                      0
                      или вставить растр и в редакторе xml поменять ссылку

                      Попробовал. Результат: https://i.imgur.com/MujlTjc.png
                      Но эта же svg в браузере показывается без проблем. Другая svg-шка из xlink на месте.
                        0
                        Путь относительный или абсолютный, какие слеши (\ или /)? Не уверен точно как он в венде понимает, но у меня работает как с абсолютными, так и с относительными путями (например, img/icon.svg или /home/$USER/project/img/icon.svg будут равнозначны).
                          0
                          Путь относительный, просто имя файла, т.к. он в этой же директории. Пока там была png-шка всё отображалось нормально.
                      0
                      Тут наверное дело удобства… я вот долгое время рисовал дизайны страниц в CorelDraw =)
                      Освоишь inkscape — будет удобно работать и в нём...
              +1
              Помнится, кто-то продвигал дизайн сайтов в InDesign. Но как-то не взлетело, вроде бы.
                0
                Это приложение, мягко говоря, не для веба. Illustrator хотя-бы, Corel, Inkscape.
              +1
              Последний Photoshop CC и сам сохраняет shape-слои в svg-файлы, без дополнительных скриптов. А ещё и эффекты слоя может предоставить в CSS.
                +3
                — проверьте, запущен и работает ли Illustrator;

                Мда. Я уже понадеялся, что наконец появился способ без использования иллюстратора. Автор, эти скрипты легко гуглятся. Не стоит из-за одного из них писать целый пост.
                  +1
                  для прямого экспорта есть плагин www.zeick.com

                  работает на CC, CC 2014, CC 2015
                  для него не нужен иллюстратор
                  работает как с отдельными слоями, так и с группами
                  не нужны дополнительные манипуляции (дописывать .SVG в имени слоя)
                  имеет как гуй, так и скрипт, который можно повесить на хоккей
                  отрабатывает стили слоев (частично)

                  Из минусов — только цена 19.99 $, но есть бесплатная демо-версия
                    0
                    Там комментатор выше утверждает, что в СС итак есть экспорт в svg. В чем тогда смысл плагина? У меня вот CS6.
                      0
                      Ну во первых зейк вышел раньше чем это появилось нативно, и он честно поддерживает СС,
                      адобовский появился только в СС 14.1 и выше
                      не уверен на счет CC 2014 и СС 2015 но у адоба в версии СС были постоянные проблемы с кадрированием SVG при экспорте
                      к тому же Zeick работает в 1 клик (выделил слои и группы и нажал — кнопку экспорт), а у адоба надо было переименовывать слои, как в скрипте из статьи (в версиях СС точно) в последних вроде если провести предварительную настройку, то стало попроще это делать.

                      для версий CS5 и CS6 могу порекомендовать вот этот плагин http://glifo.uiparade.com — он собирает шейпы в SVG шрифт стоит 19$
                        0
                        Спасиб!
                          0
                          Судя по описанию, эту штука может только в SVG-шрифт экспортировать, а не просто в свг.
                            0
                            Да, так и есть.

                  Only users with full accounts can post comments. Log in, please.