Les plugins photoshop pour le développement web

Quand on passe beaucoup de temps à intégrer des maquettes Photoshop, on a besoin d'un petit coup de pouce de temps en temps. Personnellement, j'utilise de nombreux plugins Photoshop pour m'aider dans mon travail au quotidien : en voici la liste non exhaustive.

List Fonts

Ce plugin est un script qu'on lance qui permet de récupérer la liste des polices utilisées dans la maquette Photoshop. Il suffit de se rendre sur cette page : https://github.com/iamdarrenhall/list-fonts et de télécharger le fichier List Fonts.jsx. Une fois que vous l'avez téléchargé, vous n'avez plus qu'à le placer dans le bon répertoire.
Sur mac : Applications / Adobe Photoshop [numéro de votre version] / Presets / Scripts
Sur windows : C:\Program Files\Adobe\Adobe Photoshop [numéro de votre version]\Plug-ins\ 

Démarrez ensuite Photoshop et cliquez sur Fichier, Script et enfin List Fonts, vous aurez alors une pop up qui s'ouvre avec toutes les fonts utilisées dans la maquette.

Capture d’écran 2016-11-03 à 14.34.09

Capture d’écran 2016-11-03 à 14.34.22

Ceci est très pratique lorsqu'un guide de style n'a pas été fourni par le graphiste et / ou client et cela vous évite le travail fastidieux de cliquer sur tous les textes un à un et vérifier la police.

Css Hat

Css hat permet de transformer un calque Photoshop en CSS instantanément.

Par exemple si vous avez une div avec du texte, des bordures, des ombres, ... vous pouvez récupérer automatiquement toutes ces propriétés CSS comme sur l'exemple ci-dessous.

text text-1

De plus, si vous utilisez un préprocesseur de type sass ou less, il est possible de transformer le CSS que vous avez récupéré en SCSS, Sass ou Less.

languages

Par contre, ce plugin est payant, il coûte 50 dollars. A voir donc si vous en avez beaucoup l'utilité mais c'est toujours bien de savoir que cela existe si vous voulez gagner un peu de temps précieux lors d'un développement.
Vous pouvez vous le procurer ici : https://csshat.com/

CSS3 PS

CSS3 PS fait la même chose que CSS Hat, mais gratuitement, il est tout de même moins performant, moins pratique et surtout moins mis à jour.

Pour l'installer il suffit d'aller sur ce lien : http://css3ps.com/Download/ et de télécharger le plugin. Une fois celui-ci téléchargé, placez le dossier entier ici :

Sur mac : Macintosh HD ▸ Bibliothèque ▸ Application Support ▸ Adobe ▸ CEP ▸ extensions
Sur windows : C:\Program Files\Common Files\Adobe\CEP\extensions\

Il vous suffira alors de redémarrer Photoshop puis d'aller dans Fenêtres -> Extensions -> CSS3Ps

Capture d'écran 2016-12-28 14.30.18

Ensuite, il vous suffit de sélectionner un calque ou un groupe de calques et de cliquer sur le logo CSS3PS. Il ouvrira votre navigateur par défaut avec le code en CSS, SCSS ou Sass.

Par exemple pour ce bouton :

Capture d'écran 2016-12-28 15.23.42

Cela donnera cela :

Capture d'écran 2016-12-28 15.23.34

PNG Express

Pour 29 dollars, PNG Express (http://www.pngexpress.com/) vous permet d'exporter très rapidement les PNG et JPG de votre PSD, les SVG et de créer des spécifications du design (comme par exemple les tailles, les positions, la font... etc.)

Lorsque vous installez le plugin, vous pouvez retrouver cette interface :

pngexpress_screenshot_x2
Vous pouvez exporter alors en un seul clic les infos du calques, les JPG, PNG et SVG de votre maquette et vous retrouverez tout cela bien rangé dans un dossier Assets.

 

 

De nombreux autres plugins existent, je ne vous ai donné ici qu'une petite liste exhaustive de ceux que j'ai pu testés. N'hésitez pas à me dire dans les commentaires si vous en connaissez d'autres et ce que vous pensez de ceux que j'ai pu vous donner ici.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.