Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

CSS3PS : de Photoshop à la feuille de style
Grâce à un nouveau plug-in

Le , par FirePrawn

0PARTAGES

4  0 
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 ?

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de 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.

1  0 
Avatar de 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
0  0 
Avatar de 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 ?
0  0 
Avatar de 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 !
0  0 
Avatar de 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.
0  0 
Avatar de 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
0  0 
Avatar de 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
0  0