Jean-Jacques’s Blog

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

2-Transférer le document 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”.

4-Votre document va donc être découpé en plusieurs zones

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 / XHTML

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.

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.

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