CSS3PS : de Photoshop à la feuille de style

Le , par FirePrawn, Expert éminent sénior
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 ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de fanick fanick - Membre régulier https://www.developpez.com
le 29/06/2012 à 10:10
Ce plugin est-il susceptible de vous servir ?

En tous cas il sonne tres utile
Avatar de Torgar Torgar - Rédacteur https://www.developpez.com
le 29/06/2012 à 10:51
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 ?
Avatar de Klyne2 Klyne2 - Membre régulier https://www.developpez.com
le 29/06/2012 à 13:46
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 !
Avatar de alex_vino alex_vino - Membre émérite https://www.developpez.com
le 30/06/2012 à 9:39
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.
Avatar de talfi talfi - Futur Membre du Club https://www.developpez.com
le 30/06/2012 à 11:25
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.

Avatar de alex_vino alex_vino - Membre émérite https://www.developpez.com
le 30/06/2012 à 12:44
Citation Envoyé par talfi  Voir le message
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.

Citation Envoyé par talfi  Voir le message
mais le plus dur est fait.

C'est vrai
Avatar de hcoutant hcoutant - Futur Membre du Club https://www.developpez.com
le 10/07/2012 à 14:33
superbe initiative ! En tous cas cela va bien me servir
Offres d'emploi IT
Chef de Projets MOA Web
Solic Group - Ile de France - Gentilly
Ingénieur solution web #multi-devices #javascript h/f
MATIERE GRISE - Ile de France - Paris (75000)
Développeur web (H/F)
Xynergy - Nord Pas-de-Calais - Villeneuve-d'Ascq

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -