Discussion :

[FirePrawn]

Convertissez vos calques Photoshop en CSS3
grâce à ce nouveau plugin

Un nouveau plugin pour Photoshop vient de voir le jour : CSS3Ps.

Ce plugin, entièrement gratuit, vous permettra de générer le plus simplement du monde du code CSS à partir de calques sous Photoshop.

Il n'est pas rare, dans le monde du web design, de vouloir adapter des créations graphiques pour le design d'un site.
Malheureusement, il est bien souvent compliqué de passer d'une image créée sous Photoshop à un style en CSS.
La solution la plus simple étant d'utiliser l'image directement, mais cela ne permet aucune souplesse en terme de code CSS.
Et c'est justement cette souplesse qu'apporte le plugin CSS3Ps !

Une fois ce plugin installé, vous n'avez qu'à sélectionner l'extension "CSS3Ps" via le menu "Window -> Extension" pour afficher la barre d'outils correspondante.
Le plugin reconnait automatiquement les calques qui sont en cours d'utilisation, et les ajoute dans la liste de la barre d'outils.
Il ne reste plus qu'à sélectionner les calques qui vous intéressent puis de cliquer sur "CSS3Ps" pour générer la feuille de style correspondante.
Quelque soit le nombre de calques sélectionnés, le CSS généré apparait sur une seule feuille de style.

Ce processus de fonctionnement est valable pour les dernières versions de Photoshop.
Pour des versions plus anciennes, la méthode est expliquée sur le site du plugin.

CSS3Ps est disponible pour CS6, CS5, CS4 et CS3 en version Windows et Mac.

Source : CSS3Ps

Et vous ?

Ce plugin est-il susceptible de vous servir ?

[fanick]

Ce plugin est-il susceptible de vous servir ?

En tous cas il sonne tres utile

[Torgar]

J'ai pas encore essayé, ne disposant pas d'une version assez récente, mais ça m'a l'air très intéressant.

En tout cas, c'est une bonne nouvelle pour les relations entre graphistes et intégrateurs

Quelqu'un a t'il essayé des exemples un peu plus poussé que ceux mis sur le site des auteurs ?

[Klyne2]

Personnellement, il risque de m'être utile, oui... Bien sur, il faut d'abord le tester voir ce que ça donne mais la description me semble fort agréable à l'utilisation !

[alex_vino]

En effet le résultat semble tres prometteur.

Reste a tester comment cela fonctionne sur des choses bien plus complexes et la compatibilité du résultat produit.

Ils semblent utiliser les border-radius, box-shadow, gradient... mais le probleme c'est qu'il y a pas mal d'incompatibilité (ou différents résultats) en fonction du navigateur, meme IE8.

Ce qui est dommage c'est que beaucoup d'utilisateurs ont Windows XP et la derniere version d'IE sous XP est 8, donc pas le choix aujourd'hui tout site web doit etre 100% compatible avec IE8.

J'aimerais aussi testé comment cela génere les polices de caracteres, qui sont souvent "spéciale" dans Photoshop et qui est tres difficile d'implémenter de la meme sorte dans tous les navigateurs.

[talfi]

Je viens de tester, le plugin fait un bon job.
Effectivement, après, il faut adapter les règles css par rapport aux navigateurs,
mais le plus dur est fait.

[alex_vino]

Effectivement, après, il faut adapter les règles css par rapport aux navigateurs

Aie, dommage. Au moins des avertissement de compatibilité ca aurait déja été bien.

mais le plus dur est fait.

C'est vrai

[hcoutant]

superbe initiative ! En tous cas cela va bien me servir