Comment convertir un PSD en HTML et CSS

Par Korben le 18 avril 2008

Bon apparement, ça marche pas (plus ?) donc pas la peine de perdre votre temps… sorry.

Voici une idée de site qu’elle est bonne ! Ca s’appelle PSD2CSS et ça permet de convertir en ligne vos merveilleux PSD directement en HTML + CSS.

Vous vous lachez sur le toshop et PSD2CSS vous en fait un site. (grosso merdo)

Bon, ça c’est sur la théorie et je n’ai pas eu l’occaze de tester la pratique, n’empêche que c’est super pratique je pense (mais si je me demande si Photoshop ne propose pas déjà ce genre d’export).

Enfin, ça peut toujours servir aux gens non équipés en photoshop qui chargent des modeles de PSD pour se lancer dans la création de sites rapides.

Je vous laisse tester PSD2CSS

Je vous recommande aussi la lecture des sujets suivants


Faites un lien vers cette news sur votre site



23 Commentaire(s)

  1. MyAvatars 0.2

    Diti Reply to this comment

    Mouais, PSD caylemal :) .

    Posté le 18 avril 2008 à 13:42:03

  2. MyAvatars 0.2

    Geoffrey Dorne Reply to this comment

    Ca a l’air coooooool :-D

    Posté le 18 avril 2008 à 13:42:41

  3. MyAvatars 0.2

    Geoffrey Dorne Reply to this comment

    arf, j’viens d’essayer, ça marche pas >:(

    Posté le 18 avril 2008 à 13:47:46

  4. MyAvatars 0.2

    Jean-Sébastien Mansart Reply to this comment

    Effectivement ça ne marche pas du tout.
    Une fois le fichier PSD envoyé, hop c’est fini.

    En même temps je ne vois pas comment un script pourrait générer du XHTML / CSS à partir d’un fichier PSD. Quand on connait un tant soit peut le métier d’intégrateur, on comprend vite que c’est impossible.

    En tout cas, c’est un très bon moyen pour récupérer gratuitement et facilement des créations graphiques…

    Posté le 18 avril 2008 à 13:50:46

  5. MyAvatars 0.2

    Geoffrey Dorne Reply to this comment

    je confirme !! pfff m’suis fait avoir et j’aime pas ca !

    Posté le 18 avril 2008 à 13:52:14

  6. MyAvatars 0.2

    Korben Reply to this comment

    Ok, c’est de la merde, j’édite la news…

    Posté le 18 avril 2008 à 13:58:47

  7. MyAvatars 0.2

    fightsoul Reply to this comment

    Korben, tu touches un pourcentage sur le nombre de psd “volés” ? :P

    Posté le 18 avril 2008 à 14:01:57

  8. MyAvatars 0.2

    admin Reply to this comment

    @fightsoul : J’aimerai bien :-) Mais honnetement, je ne pense pas que ça vole des PSD… Je pense que l’appli ne fonctionne pas, c’est tout. Enfin, dans le doute…

    Posté le 18 avril 2008 à 14:12:18

  9. MyAvatars 0.2

    Orni Reply to this comment

    Trop gros pour être vrai :P

    Posté le 18 avril 2008 à 14:13:50

  10. MyAvatars 0.2

    Aigleblanc Reply to this comment

    Arf, je me voyer deja gagner du temps pour mon stage :p mais non ^^

    Posté le 18 avril 2008 à 14:18:28

  11. MyAvatars 0.2

    maley Reply to this comment

    une news du 1 avril non?

    Posté le 18 avril 2008 à 14:19:34

  12. MyAvatars 0.2

    evoBlast Reply to this comment

    ça marche, le seul problème c’est que l’image n’est pas de bonne qualité (dir une gif de 16couleurs), je ne sais pas si ça va rester mais voilà ce que ça m’a donné : http://www.freezepage.com/1208522317SSUOELRIXY

    voilà les dests que j’ai fais:
    j’ai envoyé un Psd enregistré sous photoshop CS3 : marché.
    j’ai envoyé un Psd découpé et enregistré sous photoshop CS3 : marché mais il y a un décalage au niveau des zones.
    j’ai envoyé un Psd enregistré sous photoshop CS2 : marché.
    j’ai envoyé un Psd enregistré sous Gimp : n’a pas marché.
    j’ai envoyé un Psd enregistré sous illustrator CS3 : marché mais le tout en noir et blanc.
    J’ai envoyé un Png : marché mais le tout en noir et blanc.

    Je confirme que ça marche (testé sous firefox 2.0.0.14, windows XP Sp2).

    Posté le 18 avril 2008 à 14:25:00

  13. MyAvatars 0.2

    Manu Reply to this comment

    J’ai testé et ça fonctionne. Chaque layer est converti en png puis positionné en css (tout en absolu). On peut même définir des zones de texte en nommant le layer “_text”.

    �a peut servir, je garde ça en favori.

    PS : test fait rapidement avec GIMP

    Posté le 18 avril 2008 à 14:30:36

  14. MyAvatars 0.2

    GoOz Reply to this comment

    Mouais, comme dit Jean-Sébastien, quiconque connaît vraiment le métier d’intégrateur sait que ça ne peut pas être efficace à 100% !
    Photoshop lui-même fait des exports en html/xhtml. Des tableaux, il est passé au xhtml mais quand on regarde de prêt le code… c’est un sacrilège. Alors sans vouloir être mesquin, je ne pense pas que le site fasse mieux. Tout simplement parce que l’intégration demande de la réflexion sur l’architecture à mettre en place, ce que à ce jour aucune machine ne saurait faire.
    Ã?a fait plaisir ceci dit, ça veut dire que c’est pas demain que je perdrais mon boulot :o Bon ceci dit, j’ai pas envie de décrédibiliser le site non plus, ça peut éventuellement être utile à certains… mais je reste dubitatif sur la qualité du code généré.

    Posté le 18 avril 2008 à 14:42:55

  15. MyAvatars 0.2

    RpGmAx Reply to this comment

    1 GoOZ, je ne suis même allé sur le site, quand je vois le travail que me prend la réalisation d’une charte graphique en xhtml/css valide, je me dis que ce n’est pas demain la veille que ce sera remplacé par un processus machine ;)

    Posté le 18 avril 2008 à 15:21:02

  16. MyAvatars 0.2

    Sylvain Reply to this comment

    Argh mais le père noël n’existe pas !
    Et puis de toute façon comme ça a été dit, l’intégration en html/xhtml c’est pas magique, ça demande de la réflexion.
    Si vous croyez encore au père noël, demandez lui plutôt de vous offrir “Transcender CSS” le dernier bouquin de Andy Clarke :D Ce bouquin vaudra tous les sites magiques de transformation psd to html !

    Posté le 18 avril 2008 à 15:27:05

  17. MyAvatars 0.2

    Sébastien Reply to this comment

    Et il tient compte des user-slices ou pas ?

    Posté le 18 avril 2008 à 15:38:33

  18. MyAvatars 0.2

    Taz Reply to this comment

    pour info sous photoshop on peu tres bien enregistrer son PSD en html/css :) suffit de bidouille un peu les option ;)

    Posté le 18 avril 2008 à 16:48:26

  19. MyAvatars 0.2

    Ludo Reply to this comment

    J’ai écrit un billet là dessus hier soir, et ça marchait très bien! (http://webiswell.fr/18/04/2008/generer-du-htmlcss-a-partir-dun-fichier-photoshop-145/)

    J’ai fait un petit test et ça m’a l’air de fonctionner. Il faut cliquer sur “View and download your converted CSS webpage!” et hop: Fichier>Enregistrer sous…

    Posté le 18 avril 2008 à 22:18:36

  20. MyAvatars 0.2

    NioX Reply to this comment

    Si si ça marche j’ai testé hier. Bon, ça marche plutôt pas mal, en gros ca fait une div par calque, donc il faut bien séparer les éléments. C’est sûr que ça remplacera jamais un intégrateur mais disons que ça peut l’aider dans son boulot ;)

    Posté le 19 avril 2008 à 00:53:31

  21. MyAvatars 0.2

    bugstar Reply to this comment

    Je n’ai pas testé faut l’avouer mais il me semble que cela ne soit pas gratuit.

    Posté le 19 avril 2008 à 09:52:21

  22. MyAvatars 0.2

    Ludo Reply to this comment

    Si si c’est gratuit, mais y a d’autres options payantes (pour les pros).

    Posté le 19 avril 2008 à 12:52:04

  23. MyAvatars 0.2

    bugstar Reply to this comment

    Ah ? ok, désolé !

    Posté le 19 avril 2008 à 17:37:59

1 Trackback(s)

  1. 18 avril 2008 à 15:32:28: de Jean-Sébastien Mansart .com

Lacher un com'

« Retour aux commentaires classiques (texte)