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.


WordPress database error: [Can't open file: 'wp_comments.MYI'. (errno: 144)]
SELECT * FROM wp_comments WHERE comment_post_ID = '69' AND comment_approved = '1' ORDER BY comment_date