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.
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.
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.
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
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 :
Cela donnera cela :
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 :
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.