Sauvegarder des images SVG à partir de Photoshop CC

Je viens de passer à Adobe CC pour la plupart de mes logiciels de travail et je viens d’expérimenter l’exportation rapide d’images d’Adobe Photoshop CC au format SVG et franchement, j’en sors réjouie!

Avant que je passe à la suite CC, je sauvegardais mes images en svg à partir d’Illustrator et si ma maquette avait été faite dans Photoshop, je devais utiliser ces 2 logiciels pour générer mes fichiers finaux. Maintenant, je peux tout faire à partir de Photoshop, mais il y a quelques particularités à connaître.

Voici donc 2 façons de procéder pour obtenir des fichiers svg prêts à être utilisés sur le web à l’aide de la fonction « Exporter sous… ».

1ère façon – Copie à partir d’Illustrator

Tout d’abord, dorénavant, je vais devoir changer la façon dont je monte mes maquettes web. Avant, je prenais mon icône dans Illustrator et la copiais dans Photoshop en tant qu’objet dynamique afin évidemment de pouvoir la ré-éditer. Cependant, lorsque j’ai utilisé la nouvelle fonction Exporter sous… la sauvegarde en svg s’est faite, mais l’image n’était pas en vecteurs (c’est-à-dire, redimensionnable à volonté, ou « responsive »), mais elle était en bitmap. Voici les étapes qui décrivent la bonne façon de faire.

Étape 1 : Copiez votre icône ou image à partir d’Illustrator.

Étape 2 : De retour dans Photoshop, collez-là en tant que « Calque de la Forme »

copier_svg-1

De cette façon, votre image est importée en vecteurs (contrairement à un objet dynamique qui est interprètée en image bitmap) et devient une forme éditable à volonté dans Photoshop.

Étape 3 : Ce qui est génial avec la fonction « Exporter sous…« , c’est que vous pouvez exporter plusieurs images en même temps. Sélectionnez donc le calque ou les calques (en tenant la touche MAJ enfoncée) des images ou icônes que vous souhaitez exporter en SVG.

Choisissez la fonction « Exporter sous… » en cliquant avec le bouton droit sur les calques ou à partir du menu Calque

copier_svg-2

Étape 4 : Une boîte de sauvegarde s’ouvrira. Dans le menu déroulant Format, sélectionnez SVG. Vous pouvez ajuster plusieurs paramètres dans cette boîte, mais il est préférable que vos images soient déjà dans les bonnes dimensions. La taille de la zone de travail est par défaut dans les même dimensions que l’image. Ne changez pas ces paramètres puisque c’est ce qu’il faut pour le web.

copier_svg-3

Note : Prenez soin à ce que votre icône ou image que vous copiez à partir d’Illustrator, ne soit faite que d’une seule forme. Le chevauchement de 2 vecteurs peut causer des incongruités comme ceci :

copier_svg-4

2ème façon – Forme créée dans Photoshop

Considérant que le principe des svg pour le web, est le fait qu’ils sont en vecteurs, il est aussi possible de travailler directement dans Photoshop et ne pas utiliser Illustrator. En effet si vous utilisez les formes ou l’outil plume, vous travaillez avec des vecteurs.

copier_svg-5

À partir de formes réalisées en vecteurs à partir de Photoshop, vous pouvez donc faire un « Exporter sous… » comme dans les étapes 3 et 4 mentionnées plus haut.

Conclusion

En conclusion, assurez-vous lorsque vous sauvegardez une image en svg pour le web à partir d’Illustrator, que cette dernière est bel et bien en vecteurs. Il y a beaucoup de possibilités pratiques avec cette fonction « Exporter sous… » de Photoshop CC. Peut-être verrez-vous apparaître un nouveau billet sur celles-ci et finalement, j’espère que vous avez apprécié ce billet-ci.

Publicités

Une réflexion sur “Sauvegarder des images SVG à partir de Photoshop CC

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s