Générer une css et du xhtml automatiquement avec photoshop !!!

Vous travaillez avec Photoshop et souhaitez créer un fichier XHTML et CSS depuis votre fichier psd ? Plusieurs stratégies sont possibles, apprendre CSS et XHTML ou alors générer automatiquement un fichier XHTML et CSS avec photoshop et imageready.

Si si c’est possible, vous ne rêvez pas :)

Permettez moi tout d’abord de vous présenter un livre qui est vraiment très bien fait pour apprendre à créer de belles CSS:

Le Zen des CSS

1-ouvrir votre fichier dans photoshop ouvrir le

2-Transférer le document dans image readyediter dans image ready

3-Découper votre document (ce découpage correspondra aux zones définies dans votre fichier css) , pour ce faire utiliser l’outil “slice”.outil de slice

4-Votre document va donc être découpé en plusieurs zones résultat de l'image slicées

5-A présent que vous avez défini les zones de votre document il faut paramétrer ImageReady afin qu’il puisse vous exporter du CSS / XHTMLoutput settings

6-Puis choisir l’export CSS (toujours dans File->Outputsettings)

7-Une fois que vous avez terminé le réglage des paramètres vous valider votre choix en cliquant sur OK. Et la et bien c’est la déception rien ne se passe….pas de panique il reste encore une dernière étape.

8-Pour exporter le fichier XHTML qui contiendra la CSS il faut sauver le résultat.sauver le résultat

Voila à présent imageready vient de vous créer un document (X)html ainsi qu’un répertoire contenant toutes les images. Si vous souhaitez voir le code CSS il vous suffit d’éditer le fichier html qui vient d’être généré par imageready en l’affichant dans votre navigateur.

afficher le code source

-Maintenant le travail est terminé…

Après il vous restera certainement quelques retouches à faire ce qui impliquera d’avoir des connaissances a propos de CSS. Je trouve que c’est vraiment un gain de temps assez énorme ! J’étais assez étonné que peu voir pas de tutoriels à ce sujet n’existent sur le web (en tout cas je n’en n’ai pas trouvé).

En éspèrant que ça puisse vous servir.

N’hésitez pas à me poser vos questions si vous avez des remarques ou si une des étapes n’est pas assez explicite.


3 Responses to “Générer une css et du xhtml automatiquement avec photoshop !!!”


  1. 1 Jean Claude Attitude Feb 9th, 2006 at 7:38 pm

    mmm, mouai ca génère des balises tables, c’est encore pas du XHTML Transitional ou Strict, donc meme si ça peut faire gagner du temps, il vaut mieux apprendre le CSS. En tout cas merci d’avoir pris le temps de faire un tuto, qui aidera les débutants ;)

  1. 1 tapemoi.com Trackback on Feb 8th, 2006 at 2:52 pm
  2. 2 Babylon-Design - Tutoriaux WebDesign : Adobe Photoshop, XHTML/CSS, Accessibilit Trackback on Feb 8th, 2006 at 4:47 pm
Comments are currently closed.