8 plugins Photoshop pour le webdesign

8 plugins Photoshop pour le webdesign

Faut-il le rappeler, Photoshop fait encore parti des outils incontournables d’un bon webdesigner. Pour vous aider à travailler encore mieux et encore plus vite, j’ai sélectionné pour vous 8 plugins utiles pour vos créations quotidiennes.

Plug-in Photoshop ?

Vous le savez tout autant que moi, Adobe Photoshop possède des milliers de fonctionnalités dans sa version de base. Pour aller plus loin et pour certains usages spécifiques au webdesign par exemple, des développeurs pleins de bonnes idées mettent sur le marchés de petits ad-ons bien sympathiques.

Faciles d’installation, souvent gratuites, les ressources présentées ci-dessous vous seront utiles dans votre travail quotidien de webdesigner et intégrateur.

Can Link It

J’ai récemment découvert Can Link It sur Twitter grâce à ‏@huard_olivier et je ne suis pas resté indifférent. Est-ce enfin la fonction que nous attendons tous ? Un genre « d’include » dans un fichier PSD permettant de mettre à jour rapidement plusieurs une partie d’un design, sur plusieurs fichiers en même temps ?

On ne s’excite pas trop vite, mais c’est presque ça. Imaginez que vous avez utilisé un bouton à trois endroits. Ensuite mettez à jour le style du bouton et d’un seul clic sur « Tout mettre à jour », ils se mettent à jour tous les trois, dans tous les fichiers de votre projet. Pour tout comprendre regardez plutôt la vidéo :

Plugin Photoshop

Pixel Dropr

Voilà un plug-in intéressant pour gagner du temps ! Grâce à Pixel Dropr vous possédez un panneau supplémentaire dans Photoshop qui vous permet de glisser / déposer des « assets », comme un bouton, une icône ou même un gros élément de design comme un menu par exemple.

Proposé au prix de 19$, il vous fera gagner du temps en vous évitant de devoir chercher dans vos dossiers de ressources, pas forcément toujours bien rangés. Petit bémol, le plug-in limite votre collection à 30 assets max. Peut-être un peu limite…

Plugin Photoshop

Merci à Stéphanie Walter pour la découverte.

DevRocket

Utile pour vos développements iOS, Dev Rocket vous permet de gagner du temps en proposant des éléments UI, des documents de bases, bref de très bonne conditions pour un export futur propre pour le développement. Le plug-in est vendu 10$.

Plugin Photoshop

Guide Guide

Adieu les casses-têtes des grilles avec GuideGuide. Grâce à ce plug-in gratuit, vous pouvez créer très facilement des guides Photoshop sur lesquels baser votre design. Saisissez vos paramètres (nombre de colonnes, nombre de lignes…), cliquez sur générer et le tour est joué !

Plug-in Photoshop

WebZap

Décidément, ils sont bons ! Encore un outil développé par UI Parade. WebZap permet de créer rapidement et facilement des wireframes grâce à une bibliothèque d’éléments pré-dessinés. WebZap s’adresse d’avantage aux développeurs d’après le site officiel, mais je pense que les webdesigners ou chefs de projets peuvent également en avoir l’utilité.

WebZap

CSS3 PS

Pour résumer en quelques mot, CSS3 PS vous permet de générer du CSS3 à partir de Photoshop ! Le plug-in est gratuit et fonctionne surtout pour les dégradés et les effets de texte.

Photoshop Plug-in

CSS HAT

CSS Hat, le plug-in qui a fait couler beaucoup de pixels lors de sa sortie. Grâce à ce plug-in vous pouvez également générer du CSS3 directement à partir de Photoshop. Contrairement à CSS3 PS il est proposé à 29$. Souvenez-vous, nous en avions parlé ensemble sur le blog.

CSS Hat

Cut & Slice Me

Oubliez les tranches Photoshop. Combien de fois faut-il répéter que l’usage de cet outil pour un design entier est aujourd’hui complètement obsolète ?

Grâce à Cut And Slice Me, exportez vos éléments en quelques secondes. Si vous nommez déjà bien vos calques, ce n’est que du bonheur, car le plug-in récupère les noms pour les fichiers générés. En plus, il permet d’exporter rapidement les différents états de vos boutons et tout ça gratuitement. Par contre, il n’est disponible que sur la version CS6.

Cut And Slice Me

Bonus : supprimer les styles inutilisés grâce à un script Photoshop

Pas de nom pour cette ressources trouvée sur SmashingMag et il ne s’agit pas à proprement parler d’un plugin. C’est un script Photoshop qui permet en un clin d’oeil (plutôt en un clic) de « nettoyer » votre PSD en enlevant les styles inutilisé de vos calques. Si vous souhaitez livrer un PSD vraiment parfait, ce script est fait pour vous !

Remove Unused Layer Styles In Photoshop

Et vous, quels plugins utilisez-vous pour gagner en efficacité ?

Vous aimerez aussi :

Cette entrée a été publiée dans Ressources, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.

15 commentaires sur 8 plugins Photoshop pour le webdesign

  1. Stéphanie dit :

    Merci pour la mention ;) Dans la listes de plugins dont je me sers souvent il y a également http://dmonzon.com/freebies/12-photoshop-tools/ qui rassemble pleins de petits outils qui permettent de gagner un peu de temps. J’apprécie particulièrement l’outil pour distribuer verticalement et horizontalement les éléments.

  2. Ping : Web A lire absolument : 8 plugins Photoshop pour le webdesign | WebdesignerTrends …

  3. Ping : 8 plugins Photoshop pour le webdesign (par WDTrends) | Pierre-Olivier Capéran

  4. David dit :

    Encore une preuve s’il en fallait que Photoshop n’est plus adapté au web. Fireworks propose nativement des solutions similaires aux trois-quarts de ces plugins …

  5. vtcreative dit :

    Je découvre CSS Hat du coup et j’ai bien envi de tester. Je me demande jusqu’ou ils peuvent aller et à quelle point cela peut faire gagner du temps sur un projet web. Bon je ne m’attends pas à un résultat impeccable qui ne nécessite pas d’intervention humaine sur le code derrière mais l’initiative mérite qu’on y jeter un coup d’oeil.

  6. WDTrends dit :

    @Stéphanie : Merci, bien pratique ! Et en plus c’est gratuit :)
    @vtcreative : Oui il faut tester effectivement. D’après moi il s’agit simplement d’une « aide » rapide pour gagner du temps. Comme tu le dit bien, rien ne vaut un check manuel pour du code parfait !

  7. WDTrends dit :

    @David : d’accord avec toi, Fireworks est en théorie, LE logiciel le plus adapté au web, il a d’ailleurs été conçu pour ça. Mais vu l’engouement des webdesigners utilisant Photoshop, le nombre de plugins proposés et les améliorations de la CS6 pour le webdesign, on sent qu’Adobe est à l’écoute.

    D’après moi avec le « design in browser » et les nouveaux outils d’Adobe (http://html.adobe.com/fr), le débat Fireworks / Photoshop va à long terme passer au second plan.

    Merci pour ton avis !

  8. Jibéo dit :

    Je me permet de vous annoncer la sortie d’un nouveau plugin Photoshop ces derniers jours, permettant d’améliorer l’export d’éléments de vos webdesign !
    L’extension s’apelle Enigma64 et elle est distribué par la Team qui a déjà proposé le plugin CSS Hat que l’on peut voir dans votre article !
    Testé ce matin et approuvée car vraiment utile (PS : je ne suis en rien lié aux fabricants de cette extension, c’est juste pour compléter votre article !! )

  9. Jibéo dit :

    J’ai oublié le lien vers l’extension, désolé :
    http://getenigma64.com/

  10. WDTrends dit :

    @Jibéo : Merci pour le partage !
    Effectivement il vient de sortir il y a quelques jours seulement. Hâte de tester également, voir ce que le plugin a dans le ventre :)

  11. WDTrends dit :

    Trouvé sur Smashing Mag, un panel pour mieux gérer les créations isométrique avec Photoshop. Il s’agit de Isometrify est c’est à découvrir par ici : http://blog.kam88.com/en/isometrify.html

  12. bouillot dit :

    Bonjour,

    Le script photoshop pour  » nettoyer  » le PSD me serait bien pratique… Mais où le trouver svp ?

  13. BabZero dit :

    Merci beaucoup pour toutes ces ressources, ça fait plaisir :-)

  14. Ping : Plugins photoshop | Pearltrees

Laissez votre impression, réagissez à l'article !

L'adresse de contact ne sera pas publiée.

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>