PSD2CSS online convertit vos fichiers graphiques Photoshop en HMTL + CSS

Vous avez fignolé des heures durant cette belle maquette de page web pixel par pixel et l’idée de devoir maintenant presque tout reprendre à zéro pour convertir tout ce bazar en fichier HTML avec la feuille de style qui va bien vous file de l’urticaire ? Qu’à cela ne tienne, voici PSD2CSS Online, un service

Vous avez fignolé des heures durant cette belle maquette de page web pixel par pixel et l’idée de devoir maintenant presque tout reprendre à zéro pour convertir tout ce bazar en fichier HTML avec la feuille de style qui va bien vous file de l’urticaire ?

psd2css PSD2CSS online convertit vos fichiers graphiques Photoshop en HMTL + CSS

Qu’à cela ne tienne, voici PSD2CSS Online, un service en ligne qui fait le boulot pour vous : c’est gratuit et sans inscription, il vous suffit de télécharger votre fichier Photoshop (jusqu’à 8 Mo) sur le site et quelques secondes plus tard vous récupérez une archive ZIP dans laquelle se trouve un fichier index.html accompagné de sa feuille de style au standard XHTML.
N’ayant pas Photoshop sur mon portable, je n’ai pas pu tester et j’ai donc essayé avec un autre format graphique, ce qui n’a pas donné grand chose.
Je ne comprends pas trop quelle est la méthode employée par ce script pour déterminer les découpes et les blocs mais je suppose qu’il est fondé sur l’identification des calques dans Photoshop, et qu’il reconstitue la page à partir de ces éléments, ce qui me paraît pour le moins empirique car un empilement vertical de calques n’a pas forcément de correspondance avec un alignement de blocs.
Rappelons également que Photoshop est doté d’origine d’une fonction permettant d’exporter ses graphismes au format HTML+CSS, à condition d’avoir préalablement défini des découpes, même si le code fourni n’est pas un modèle de propreté.

30 commentaires

  1. "Rappelons également que Photoshop est doté d’origine d’une fonction permettant d’exporter ses graphismes au format HTML+CSS, à condition d’avoir préalablement défini des découpes."

    Hmmm, tu vas te faire taper sur les doigts ;-)

  2. le fichier généré par Photoshop est bon à mettre à la poubelle oui !

    Je vais tester ce site avec un design bien complexe, on va voir ce que cela donne.

  3. Sur le truc Photoshop on est bien d’accord, d’ailleurs je me demande qui l’utilise (pas moi en tout cas) mais si je n’en n’avais pas parlé vous n’auriez pas tardé non plus à me le faire remarquer ;-)
    (j’ai complété ma phrase)

  4. Ce n’est pas si terrible que ça le css, pour quelqu’un qui a fait en plus sa propre maquette et qui la connaît le plus dure est déjà fait. D’ailleurs maintenant il faut dire xhtml, c’est mieux quand même… Mais je l’avoue au tout début j’utilisais photoshop, ca m’a permis d’apprendre les erreurs a ne pas commettre. Maintenant c’est tout à la mano.

  5. Je vais être cru mais ce site c’est de la branlette !
    Jamais ça ne vaudra un vrai webdesign fait proprement, on ne peux pas se contenter de découper une image et les mettre en fond.
    Sur le web, il faut de la sémantique, et je ne crois pas que ce générateur en fasse cas !
    Encore un site qui permettra à certaines personnes de s’improviser webdesigner (dans le genre frontpage/dreamweaver en mode "création")…

  6. j’ai quand même un doute sur le .psd, il va où une fois sur le site ? faudrait pas voir son boulot à la revente :)

  7. J’ai quand même du mal à y croire… il y a quelqu’un qui fait le travail et renvoie les fichiers découpés et stylisés ???

    Sinon, avec un script, je ne vois pas bien quel rendu de qualité il peut proposer…

  8. Le mieux serait de tester, si quelqu’un veut s’y coller, je n’ai pas Photoshop sur mon portable et je ne l’ai pas réinstallé sur ma machine principale depuis un crash

  9. Le design et son rendu sont fideles…

    Ta maquette est suffisante a comprendre à quoi il joue … a comparer avec le code genere par iWeb, mon bon vieux Textmate a encore de beaux jours devant lui …

  10. Merci 20syl pour le test mais l’url fournie est temporaire (5 mn) donc là on voit plus rien :-/

  11. Je viens de refaire un test avec une vrai maquette et…
    … rien de vaut des petites mains de webdesigner ! ;)

  12. Petite précision pour les découpes Photoshop (qui génèrent un tableau dégueulasse on est d’accord), elles sont très utiles pour faire des newsletters (qui ne peuvent pas être en CSS).

    Tout a une utilité :).

  13. woumpah > C’est faux !
    Tu peux très bien styliser tes newsletter en css !
    Il faut juste que ce soit inline, et faire gaffe à certaines choses (genre ne pas foutre un style sur le body sinon les webmail vont moyennement apprécier).

  14. @Jean-Sébastien, en effet je n’avais pas vu que tu en avais parlé (ainsi que Korben et plein d’autres), autant pour moi ! Mais les commentaires de ton billet sont assez positifs pour ceux qui ont réellement pu le tester.

  15. Trop naz.
    En fait ca prend tout les calques -> les transforme en png.
    Colle le png dans un div, puis positionne ce div avec du css,
    autant dire que ma maquette comportant + de 200 calques, le code est super sympa, tant au niveau html que css (que du absolute d’ailleurs).
    En + les calques masqués sont affichés quand même, et comme dans ma maquette j’ai deux pages dans des groupes différents, ca m’affiche deux pages superposées…
    [URL=uploads.screenshot-progra…

  16. @Olivier Ca fait mal aux yeux ton image !!! Pourtant l’original est plutôt sympa…

    On peut imaginer qu’une incompatibilité sur certains formats d’image est éventuellement normale (mais comment est-ce possible dans du psd ???) mais là c’est rude.

    Peut-être un document en cmjn ??? ou un profondeur de couleurs incompatible ???

  17. Sylvain > à vrai dire je n’ai jamais testé personnellement les newsletters en CSS mais d’après ce que j’ai pu lire sur pas mal de forums, certains logiciels de messagerie bloquent les styles (ennuyeux) et/ou interprètent le code différemment.

  18. allez on va arrêter de dire des bêtises.

    Pour psd2html, on va réfléchir tout simplement:
    j’ai pas besoin d’un site accessible, j’ai même pas besoin qu’il soit propre, par contre comme 99,9% des gens j’aimerais bien qu’il sorte sur google.
    Comment il fait le logiciel pour mettre les bonnes balises ?
    Et comment il sait que ce texte là c’est un lien ?
    Et comment je fait si je veux un rollover ?

    Bref, si faut re-rentrer dans un code dégueulasse pour le fignolage je vois pas l’intérêt.
    Si c’est pour avoir juste une page statique avec du texte… bah faites un pdf ^^

    Sérieusement si vous voulez un site, payez quelqu’un dont c’est le boulot.
    Si c’est un site juste perso
    – vous apprenez le html qui n’est vraiment pas compliqué et qui a plein d’exemple sur le net,
    – ou vous prenez un cms genre wordpress et vous faites des concessions avec votre idée de départ, mais là aussi y’a assez de ressources pour trouver votre bonheur.

    Maintenant si c’est vraiment pour un petit site perso (genre "les vacances de mon chat"), ce n’est pas grave de le faire en xhtml / css.
    Faites-le en html 4, en tableau, en iframe tout pourri. Ca sera toujours moins pire (mais attention, c’est quand même pas top) que de faire appel à ce genre de service douteux et surtout de véhiculer ce message "ouais regarde c’est trop facile de faire du xhtml/css".
    Si c’était le cas, je serais au chomage mais heureusement j’ai encore le temps avec que le lambda avec toute sa galerie de framework et de logiciels magiques me fasse de l’ombre.

    Enfin en ce qui concerne les mails, exporter en photoshop pour les mails c’est tout aussi débile (enfin ça dépend l’usage, je ne veux pas traiter ceux qui le font de débile mais en tout cas c’est erroné de dire que c’est propre ou que c’est à faire).
    Le mail ça doit être optimisé, il faut connaitre l’interprétation des principaux moteurs, ce qui passe, ce ne qui passe pas, ce qui fait que ça risque d’être traité comme spam (et y’en a des astuces a connaitre, parole ^^).
    Donc évidemment que l’on peut faire des mails en css, le truc c’est que certains moteurs de messagerie ne supportent pas certaines balises (certaines essentielles)

    (petite anecdote : un jour on a fait appel a un presta pour un mailing : il a de toute évidence fait un export via photoshop ou fireworks, resultat : 450 images, des rowspan et des colspan de + de 70 cellules, bref un chef d’oeuvre ^^ quand on m’a demandé mon avis sur ce "professionnel" évidemment ma réponse a beaucoup été à base d’insultes)

    Bref ce qui faut se souvenir c’est que le html est un LANGAGE, et comme tout langage il demande des connaissances. Du vocabulaire, de la grammaire, de la conjugaison.

    Vous pouvez avoir un très mauvais anglais mais quand même réussir à vous faire comprendre. Comme vous pouvez avoir un excellent anglais britannique et ne rien comprendre à ce que vous dit un australien (ça c’est une métaphore pour les différents moteurs de navigateurs ou de messagerie).

    Bon je crois que vous avez saisi l’idée maintenant à vous de choisir quel niveau de qualité vous souhaitez mais histoire d’enfoncer le clou psd2html ce n’est même pas "passable" ^^

  19. oups confondu psd2css avec psd2html, qui lui fait les découpes par des intégrateurs à des prix compétitifs (là aussi j’ai mon opinion mais ce n’est pas le sujet ^^)

    chacun aura corrigé de lui-même je suppose

Lire les articles précédents :
Le YouTube de l’été

Etes-vous YouTube-compatible ?La question ne se pose pas en fait car de toute façon vous n'avez plus le choix :...

Fermer