Transformer un .psd en un site standard xhtml/css

Envie de voir vos belles maquettes .psd devenir un joli site fonctionnel? Envie de vous plonger dans xhtml/css? Bon alors c’est parti.

100311_wd-tutorielwebdesignpart2-mh

 


« Design a Web 2.0 part.2″ est un tutoriel axé sur le développment, via Break The Network. Découpé en 2 parties, nous vous renvoyons ici sur la seconde partie qui consiste à rendre le psd en une page xhtml/css standard.
L’idée ici est de vous familiariser avec la structure, mais vous pouvez vous rendre sur la 1ère partie du tutoriel pour télécharger le psd (ou le réaliser vous même) et suivre scrupuleusement le tutoriel.

 

Même si l’essentiel d’un web designer reste  la   »création et la conception d’un site web », les mentalités évoluent et beaucoup se mettent à penser que le web designer doit aussi maîtriser (ou au moins) le html/css. La connaissance d’autres langages de programmation étant un plus (as3, php, javascript…etc).

 

N’oublions pas non plus que de plus en plus d’outils « opensource » sont à disposition pour mettre en forme vos psd directement en html/css.
D’autres sites proposent aussi via un formulaire de vous générer le code css (css3 compris, et compatible tous navigateurs). Vous pouvez même changer certains détails : l’angle de chaque coin, l’ombre de votre div, la transition..etc. Copiez-collez le code et le tour est joué.
Bref, même si certains rechignent encore un peu à se pencher sur le développement même, des outils gratuits et libres d’accès existent bel et bien.

 

Certains de ces logiciels et sites feront d’ailleurs l’objet d’un billet prochainement.

 

En tout cas, ce tutoriel reste quand même un bon moyen de faire du xhtml/css de façon simple.

 

Notez que celui-ci est en anglais mais pour les plus fainéants pressés d’entre vous, les deux parties du tutoriel sont téléchargeables :)

 

N’hésitez pas à poster vos maquettes dans notre galerie pour avoir une chance d’apparaître dans la sélection de la rédaction!

 

- Le tutoriel (partie développement uniquement)

- La première partie du tutoriel ( créer le .psd)

- Le site Break The Network

 

100311_wd-breakthenetwork-mh


Articles susceptibles de vous intéresser :

  1. Celass dit :

    Merci à vous pour tous ces tutoriels géniaux !! cependant, les liens proposés pour celui-ci ne marchent pas.. pourriez-vous faire quelque chose ?

    • Morgane dit :

      Bonjour Celass,

      De mon côté les liens fonctionnent, y compris dans le tutoriel le lien qui propose de télécharger le psd.
      Peut être parles-tu du zip avec le code html dedans? Si c’est cela, ça ne dépends malheureusement pas de nous mais d’eux :/
      Tu devras suivre les étapes du tutoriel :P

      Bonne journée !

Laisser un commentaire

*