22.02.2016 10:27
Elena_sm 26 8500 Источник
Использование готового и бесплатного скрипта, о котором пойдет речь, значительно упрощает и ускоряет процесс переноса исходников из 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');";"

Комментарии (26)


  1. alltiptop
    22.02.2016 14:29
    #8781101
    +3

    Может я сейчас глупость скажу, но не проще ли изначально работать в векторном редакторе для дизайна используя фотошоп только для растровых картинок?


    1. lifestyle
      22.02.2016 14:32
      #8781105
      -4

      Этот скрипт для тех, у кого фотошоп головного мозга)


    1. dom1n1k
      22.02.2016 15:27
      #8781151
      +3

      Небольшие и простые элементы (кнопочка, стрелочка, плашечка) удобнее делать прямо в ФШ, не отходя от кассы, чем постоянно прыгать и экспортировать туда-сюда.
      Объемный и сложный вектор, конечно же, нужно изначально делать в Иллюстраторе или чем-то подобном.


      1. alltiptop
        22.02.2016 15:36
        #8781153

        Я про дизайн в принципе, сайтов например


        1. dom1n1k
          22.02.2016 16:16
          #8781185
          +2

          Так и я про него. Если макет делается в PS (а в большинстве случаев это так), то удобно небольшие векторные элементы делать там же.
          Полностью рисовать сайт в AI? Ну как-то это мало распространено. Я пробовал когда-то, мне не очень понравилось — с вектором обращаться немного удобнее, но зато гораздо неудобнее с растром. А хочешь не хочешь, любой сайт это сочетание обоих вещей.
          Де факто ситуация на рынке такова, что с вероятностью 99% макет будет либо в psd, либо в скетче. Иллюстратор, корел, файрворкс и пр. — это удел редких маргиналов.


          1. alltiptop
            22.02.2016 18:29
            #8781261

            Видимо мне посчастливилось самому говорить верстальщикам где они будут работать, но как бы обхожусь inkscape и не вижу никаких сложностей, а уж с svg дела проще некуда — копипаст выделенной стрелочки в файловый менеджер, а оптимизировать можно массово позже.


            1. funnybanana
              23.02.2016 10:42
              #8781615

              Прошу прощения, как вы из inkscape макета можете выделить один элемент и экспортировать именно его?

              Уже пол года гоняю Corel из эмулятора только из-за того что не могу найти в inkscape функцию экспортировать выделенный объект =(


              1. alltiptop
                23.02.2016 12:09
                #8781691
                +1

                Выделяю объект — Ctrl+C, открываю файловый менеджер — Ctrl+V, ввожу имя файла.svg. Уточнение — работает в линуксах, про венду, мак не в курсе.
                Экспортировать выделенный объект (или объекты, массово) в png — выделить его — Ctrl+Shift+E


                1. funnybanana
                  23.02.2016 16:54
                  #8781953

                  Дико извиняюсь, выходит оффтоп какой-то…
                  Если бы я мог описанным вами способом экспортировать отдельные объекты в svg я бы экономил кучу времени, но увы… у меня не выходит (дабы не быть голословным, вот видео: https://youtu.be/Oi1dlL1Iulw)
                  P.S Файловый менеджер Nautilus, по комбинации клавиш тоже не выходит.


                  1. alltiptop
                    23.02.2016 20:09
                    #8782145
                    +1

                    Проблема решена — оно работает в kde: https://youtu.be/szuUIBsUvs0


            1. Lsh
              24.02.2016 00:16
              #8782311

              Тоже поофтоплю… что-то мне надоел фотошоп в плане веб-дизайна. Присматриваюсь то к люстре, то к инкскейпу.
              Насколько сложные сайты вы делаете, можно посмотреть примеры?

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

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

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


              1. alltiptop
                24.02.2016 01:48
                #8782377
                +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

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

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


                1. Lsh
                  26.02.2016 00:39
                  #8784963

                  или вставить растр и в редакторе xml поменять ссылку

                  Попробовал. Результат: https://i.imgur.com/MujlTjc.png
                  Но эта же svg в браузере показывается без проблем. Другая svg-шка из xlink на месте.


                  1. alltiptop
                    26.02.2016 17:30
                    #8785517

                    Путь относительный или абсолютный, какие слеши (\ или /)? Не уверен точно как он в венде понимает, но у меня работает как с абсолютными, так и с относительными путями (например, img/icon.svg или /home/$USER/project/img/icon.svg будут равнозначны).


                    1. Lsh
                      26.02.2016 23:28
                      #8785759

                      Путь относительный, просто имя файла, т.к. он в этой же директории. Пока там была png-шка всё отображалось нормально.


              1. funnybanana
                24.02.2016 08:17
                #8782459

                Тут наверное дело удобства… я вот долгое время рисовал дизайны страниц в CorelDraw =)
                Освоишь inkscape — будет удобно работать и в нём...


    1. k12th
      22.02.2016 15:46
      #8781157
      +1

      Помнится, кто-то продвигал дизайн сайтов в InDesign. Но как-то не взлетело, вроде бы.


      1. alltiptop
        23.02.2016 12:11
        #8781695

        Это приложение, мягко говоря, не для веба. Illustrator хотя-бы, Corel, Inkscape.


  1. UMAX
    22.02.2016 21:14
    #8781357
    +1

    Последний Photoshop CC и сам сохраняет shape-слои в svg-файлы, без дополнительных скриптов. А ещё и эффекты слоя может предоставить в CSS.


  1. f0rmat1k
    22.02.2016 23:14
    #8781425
    +3

    — проверьте, запущен и работает ли Illustrator;

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


    1. CSS3Ps
      24.02.2016 11:58
      #8782641
      +1

      для прямого экспорта есть плагин www.zeick.com

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

      Из минусов — только цена 19.99 $, но есть бесплатная демо-версия


      1. f0rmat1k
        24.02.2016 14:00
        #8782873

        Там комментатор выше утверждает, что в СС итак есть экспорт в svg. В чем тогда смысл плагина? У меня вот CS6.


        1. CSS3Ps
          24.02.2016 15:42
          #8783039

          Ну во первых зейк вышел раньше чем это появилось нативно, и он честно поддерживает СС,
          адобовский появился только в СС 14.1 и выше
          не уверен на счет CC 2014 и СС 2015 но у адоба в версии СС были постоянные проблемы с кадрированием SVG при экспорте
          к тому же Zeick работает в 1 клик (выделил слои и группы и нажал — кнопку экспорт), а у адоба надо было переименовывать слои, как в скрипте из статьи (в версиях СС точно) в последних вроде если провести предварительную настройку, то стало попроще это делать.

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


          1. f0rmat1k
            24.02.2016 16:15
            #8783075

            Спасиб!


          1. f0rmat1k
            24.02.2016 16:19
            #8783079

            Судя по описанию, эту штука может только в SVG-шрифт экспортировать, а не просто в свг.


            1. CSS3Ps
              24.02.2016 16:54
              #8783119

              Да, так и есть.