web-dev-qa-db-fra.com

Forme personnalisée Photoshop en chaîne de chemin SVG

Existe-t-il un moyen de retirer la chaîne de chemin SVG d'une forme ou d'un chemin personnalisé Photoshop? Ou existe-t-il un autre moyen d'obtenir/construire des données similaires? Je cherche à faire quelque chose de similaire à ceci:

http://raphaeljs.com/icons/

vectorsvgraphaelphotoshop
33
Will Haynes

Mise à jour: dans les versions récentes de Photoshop, il existe une option intégrée pour exporter l'image au format SVG, qui fonctionne bien sur les chemins et les formes personnalisées. Faites juste:

Fichier -> Exporter -> Exporter sous ... et sélectionnez SVG dans les paramètres du fichier.

Réponse originale:

À partir de Photoshop CC 14.2, vous pouvez créer des fichiers SVG directement à partir de Photoshop:

  1. Créez un fichier nommé generator.json avec le contenu ci-dessous dans votre dossier de départ utilisateur.
  2. Redémarrez Photoshop et ouvrez votre fichier PSD.
  3. Activez le générateur: Fichier> Générer> Ressources d'image.
  4. Renommez votre calque en <something>.svg.
  5. Le fichier svg sera créé dans le répertoire des ressources à côté de votre fichier PSD.

Contenu pour generator.json:

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

Source: http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/

46
Tzach
  1. Sélectionnez et copiez le chemin dans Photoshop
  2. Lancez Adobe Illustrator
  3. Créer un nouveau document
  4. Pâte
  5. Enregistrer en SVG

Cependant, si vous disposez d'Illustrator et n'avez pas créé tous les chemins, il est probablement plus facile de les créer directement dans Illustrator.

Si vous n'avez pas Illustrator, vous feriez probablement mieux d'utiliser l'éditeur gratuit Inkscape SVG pour dessiner vos chemins.

Si vous avez déjà les chemins dans Photoshop et que vous n'avez pas Illustrator, le mieux que je puisse penser est d'activer la palette d'informations dans Photoshop, de sélectionner les points du chemin un par un et d'enregistrer manuellement les positions du point lui-même. comme ses poignées, et à partir de celles-ci, créez manuellement le chemin en utilisant commandes curveto absolues, 'C' (pour les points avec poignées) et commandes lineto absolues, 'L' pour celles des points sans poignées.

44
Phrogz

Une autre option consiste à enregistrer le fichier au format EPS dans Photoshop en veillant à ce que les vecteurs d'exportation soient vérifiés, puis à le charger dans l'illustrateur et à l'enregistrer au format SVG

5
donatJ

Toutes les réponses étaient bonnes, mais pour moi elles étaient trop, il y a un outil en ligne fourni par Adobe:

http://Adobe.com/go/extract_tryitnow_en

Tout ce que vous avez à faire est de télécharger/glisser-déposer/votre fichier .psd, choisissez la couche de chemin et téléchargez en svg. Et vous pouvez extraire le chemin svg, d en particulier.

Ensuite, ce que j'ai fait est de mettre le path dans un élément g, puis de mettre à l'échelle g et de traduire le path

3
ochitos

Pour les formes personnalisées, vous souhaiterez peut-être consulter le script open source récemment publié, appelé Convertir un fichier de formes personnalisées en ensemble SVG (pour Photoshop CS3 ou version ultérieure), utilisé pour convertir un fichier de formes personnalisées ( .csh) ou un fichier de préférences de formes personnalisées (CustomShapes.psp) dans un ensemble de fichiers SVG.

1
user4756015