Пользовательская форма в Photoshop SVG - PullRequest
Новая
       53

Пользовательская форма в Photoshop SVG

33 голосов
/ 24 марта 2011

Есть ли способ получить строку пути SVG из пользовательской фигуры или пути Photoshop?Или есть другой способ получить / построить аналогичные данные?Я хочу сделать что-то похожее на это:

http://raphaeljs.com/icons/

Ответы [ 5 ]

46 голосов
/ 28 апреля 2014

Обновление: В последних версиях Photoshop есть встроенная опция для экспорта изображения в SVG, которая хорошо работает на контурах и пользовательских формах. Просто сделай:

Файл -> Экспорт -> Экспортировать как ... и выберите SVG в настройках файла.

Оригинальный ответ:

Начиная с Photoshop CC 14.2, вы можете создавать файлы SVG непосредственно из Photoshop:

  1. Создайте файл с именем generator.json с содержимым ниже в домашней папке пользователя.
  2. Перезапустите Photoshop и откройте файл PSD.
  3. Активируйте генератор: Файл> Создать> Активы изображений.
  4. Переименуйте ваш слой в <something>.svg.
  5. Файл SVG будет создан в каталоге ресурсов рядом с вашим PSD-файлом.

Контент для generator.json: 

{
    "generator-assets":  { 
        "svg-enabled": true
    }
}

Источник: http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/

44 голосов
/ 24 марта 2011
  1. Выберите и скопируйте путь в Photoshop
  2. Запустите Adobe Illustrator
  3. Создайте новый документ
  4. Вставьте
  5. Сохранить как SVG

Если у вас есть Illustrator и вы не создали все пути, тем не менее, вероятно, проще создать их непосредственно в Illustrator.

Если у вас нет Illustrator, вам, вероятно, лучшеиспользуя бесплатный Inkscape SVG редактор для рисования ваших путей.

Если у вас уже есть пути в Photoshop, и у вас нет Illustrator, лучшее, что я могу придумать, - это включитьВ информационной палитре в Photoshop выберите точки пути по одной и вручную запишите положение самой точки, а также ее маркеров, и из них вручную создайте путь, используя команды absolute curveto, 'C' (дляточки с ручками) и абсолютные команды lineto, 'L' для тех точек, которые не имеют ручек.

5 голосов
/ 28 января 2013

Другой вариант - сохранить файл в формате EPS в фотошопе, убедившись, что проверены векторы экспорта, а затем загрузить его в иллюстратор и сохранить как SVG

3 голосов
/ 01 октября 2014

Все ответы были хорошими, но для меня их было слишком много, есть Adobe, предоставленный Adobe:

http://adobe.com/go/extract_tryitnow_en

Все, что вам нужно сделать, это загрузить / перетащить / удалить / ваш файл .psd, выбрать слой пути и загрузить как SVG. И вы можете извлечь svg путь, в частности атрибут d.

Затем я поместил path в элемент g, затем масштабировал g и перевел path

1 голос
/ 06 апреля 2015

Для пользовательских фигур вы можете взглянуть на недавно выпущенный скрипт с открытым исходным кодом, который называется Преобразовать файл пользовательских фигур в набор SVG (для Photoshop CS3 или более поздней версии), используемый для преобразования пользовательских фигур. файл (.csh) или файл пользовательских настроек фигур (CustomShapes.psp) в набор файлов SVG.

...