Génération de code HTML à partir de PSD

[frodum]

Bonjour,

Je suis développeur Web (Javscript, HTML, CSS) depuis 6 ans maintenant et je me me pose des questions sur ma façon de travailler, sur la façon d'optimiser mon temps.

Je dois régulièrement générer du code HTML à partir de fichiers Photoshop. En général, j'en extrais les images et je créé le code HTML de A à Z.

Je sens bien que ce n'est pas très optimal et depuis le temps, les outils de génération de code ont bien dû évoluer. Je connais finalement très peu Photoshop et pas du tout les autres produits Adobe (DreamWeaver, Fireworks, ...).

Je sollicite donc votre expérience de développeur web pour connaître vos habitudes et les outils que vous utiliser pour gagner du temps.

Je sais par exemple qu'on peut enregistrer un PSD en HTML en délimitant des zones (avec l'outil tranches), ce qui va générer un squelette de page HTML avec une image par zone. Mais peut-on aller plus loin? Par exemple, en générant les dégradés, en générant du texte et non pas des images (s'il y a du texte évidemment), ...

Est-ce qu'il n'existerait pas un outil qui permettrait d'importer un fichier PSD et de générer, à partir des calques, bien plus qu'un simple squelette de page HTML. Je pensais à Dreamweaver, mais à l'époque où j'avais regardé ce produit, le résultat était vraiment catastrophique.

Et vous, comment faites-vous pour générer le HTML à partir de PSD : tout à la main ? avec des outils ?

Merci pour votre retour d'expérience.

Frodum

[Vil'Coyote]

moi, à la main.

mon découpage de psd correspond à ce que je vais utiliser dans mon css donc derriere une fois le squelette de page html fait je n'ai plus qu'a intégrer mon css.

[Zweet]

Salut ! Le divine project permet de créer des thèmes WordPress directement à partir de Photoshop. Sinon à part ça et l'outil tranche ...

Personnellement ce que je fais quand j'ai un site à faire c'est que je découpe toutes mes images et ensuite je me repaluche le reste (mettre toutes les positions des divs, créer les boutons, etc), ensuite, je ne suis pas directement dans le métier vu que je touche à tout donc mon avis est sûrement réduit.

http://www.divine-project.com/

[frodum]

Merci pour vos réponses.

Je suis dans le même cas que Zweet sauf que c'est mon métier

Je suis donc souvent confronté à faire du pixel perfect et j'ai surtout des contraintes de délais. Je cherche donc à augmenter ma productivité.

Je sens bien, même si je connais bien HTML, CSS, Javascript, que je pourrais aller beaucoup plus vite avec un outil adapté.

Je regarde Dreamweaver et je me dis que ça pourrait être le bon outil. Je découpe mes PSD via l'outil tranche, je génère un squelette de code HTML et je poursuis dans DW. Sauf, que je ne trouve pas de retour d'expérience de développeurs Web de métier qui utiliserait ces outils et qui pourrait me dire : "le gain de productivité est indéniable, en trois clics, j'obtiens un code HTML des PSD qui me sont fournis" et avec DW, je vais beaucoup plus vite à coder.

J'ai toujours pensé que DW s'adressait à des graphistes qui voudraient pondre leur maquette HTML depuis leur PSD sans avoir des connaissances poussées de développement web. Je me trompe sûrement, mais j'aimerais bien qu'on me le dise .

Je peux pas croire que dans les boîtes de développements web, ils utilisent encore notepad++ pour coder. Ils ont forcément des méthodes et des outils de travail pour augmenter le productivité.

Peut-être que des membres du forme utilisant DW pourraient me donner leur avis/retour.

[Zweet]

Concernant le gain de productivité, je suis pas sûr que ça apporte vraiment. Un des seuls gros avantages que je verrais à utiliser Dreamweaver c'est pour la génération des squelettes. Ensuite, le mode graphique déconne souvent du coup tu dois refaire ça à la main, et le code "pissé" par DW est souvent extrêmement dégueulasse donc tu dois le retoucher à la main ...

Enfin je m'en suis servi pour un seul projet, je pense que tu gagnes un peu de temps mais au final pas énormément.

[Bovino]

J'ai toujours pensé que DW s'adressait à des graphistes

Certainement pas. Dreamweaver s'adresse essentiellement à des développeurs (comme tous les EDI). Le mode graphique n'est en rien la finalité de Dream et ne devrait pas être utilisé pour créer une page de zéro... Enfin, c'est mon avis...

[Zweet]

Envoyé par Bovino

Certainement pas. Dreamweaver s'adresse essentiellement à des développeurs (comme tous les EDI). Le mode graphique n'est en rien la finalité de Dream et ne devrait pas être utilisé pour créer une page de zéro... Enfin, c'est mon avis...

J'approuve fortement, le mode graphique fait souvent de la m****.

[frodum]

OK pour la génération de code du mode graphique.

Du coup, on code à la main dans DW avec les aides habituelles (coloration syntaxique, auto-completion, ...).

Je me demande donc quel pourrait être son avantage. C'est un produit Adobe, il y a forcément des synergies avec Photoshop pour accélérer notre travail, non?

[Bovino]

Je ne travaille pas avec DW, mais il me semble effectivement qu'il est possible d'importer une découpe faite avec Photoshop, mais à confirmer quand même...

[ze0ne]

Bonjour, je suis plus ou moins dans le même cas, à la base je suis dev back office, mais depuis quelques temps je me retrouve à faire beaucoup de front.

A mon avis, si un tel outil existe, je suis curieux de voir le résultat

Pour ma part, je découpe sur Fireworks, qui propose des outils plus adaptés que l'exporter vers le web de Photoshop. Dans la mesure du possible j'utilise des grilles ou un framework, c'est un vrai gain de temps même si ça perturbe un peut dans le workflow au départ. Tu gagne un temps fou quand il s'agit de rendre du pixel perfect. Aujourd'hui les navigateurs et autres ide regorgent de plugins, il ne faut pas hésiter à les utiliser.

Pour ma part je travail sur chrome, j'ai la chance de travailler sur deux écrans, mais c'est jouable sur un seul.

Pour résumé, je découpe mon design en fonction de la grille, c'est pas la meilleure façon d'optimiser ces images, mais je n'ai pas trop de soucis à ce niveau, les images pouvant être traitées au cas par cas si besoin. Qui plus est il existe d’excellents outils de traitements par lots sur le marché qui font très bien le travail.

La tendance actuelle voudrai qu'on utilise au maximum les sprites, je ne suis pas contre, mais en fonction du projet j'avoue ne pas toujours y avoir recours par simple gain de temps, même si une fois de plus il existe d’excellents outils pour ce genre de travaux.

Ensuite via l'addon PixelPerfect (toujours sur Chrome), je place mon design au format jpg en background. Via un second addon "Tape", je place mes lignes de découpes sur mon image (si ca ne correspond pas à la grille prédéfinie).

Ensuite j'ouvre mon éditeur (Sublime Text 2), lui aussi gavé d'addon et autres scripts persos. Je n'ai plus qu'a me lancer dans le processus d'intégration, sauf que je ne perds pas mon temps a essayer de placer mon div au pixel prêt, qui se résume à de multiples test sans fin, vraiment casse pied.

Sachant que lorsque je sauvegarde mon fichier sur mon ide, mon éditeur (sur le second écran) rafraîchie la page (html, css, js + cache) et je vois le résultat en temps réel.

C'est un vrai de gain de temps quand on enchaîne les petits projet (type site vitrine par exemple). Ce qui est mon cas en ce moment.

En fonction du projet et de la cible, il existe aussi des alternatives en javascript ou css(3), qui permettent aussi de gagner du temps. A ce propos, vu qu'il s'agit de script Photoshop, il existe des plugins pour ce dernier, qui permettent de
rendre les dégradés... directement en css3. CSS3PS et CSS Hat pour ne citer que les plus connus.

Si tu as des questions, n'hésites pas. Mais sache qu'il existe de très nombreux moyens de booster sa productivité, surtout si ta méthode de travail n'est pas toute jeune.

[frodum]

Envoyé par ze0ne

Mais sache qu'il existe de très nombreux moyens de booster sa productivité, surtout si ta méthode de travail n'est pas toute jeune.

Oui, c'est le cas

En essayant Fireworks, j'ai vite compris que pour le découpage d'image à partir de PSD, j'allais gagner du temps, ça s'est bon à prendre.
=> une question à ce sujet : j'ai pris le premier PSD sous la main, je l'ai importé dans FW (CS6) et je n'ai pas le même rendu que PS (CS6), est-ce normal ? est-ce que ça t'arrive ? est-ce qu'il y a des options sur lesquelles jouées?

Envoyé par ze0ne

j'ai la chance de travailler sur deux écrans

Envoyé par ze0ne

je découpe mon design en fonction de la grille

Tu pars du code HTML généré par Fireworks ?
Je l'ai regardé, c'est soit un tableau, soit des divs placés en absolus. Je mets de côté la réflexion du puriste : quoi des tableaux ??? quoi tout positionné en absolu ?? Mais j'ai du mal à croire que c'est exploitable. Que se passe-t-il lorsqu'on souhaite que la page soit visible sur un tablette dont on peut changer l'orientation, que se passe-t-il sur des dimensions différentes ?

Sublime Text 2 est vraiment bien ?
Peux-tu me conseiller quelques plugins que tu utilises au quotidien, qui te semblent indispensable ?

Merci pour ton retour d'expérience

[ze0ne]

J'approfondierai plus tard, mais pour répondre à "Tu pars du code HTML généré par Fireworks ?".

Non pas du tout.

[Zweet]

Envoyé par Bovino

Je ne travaille pas avec DW, mais il me semble effectivement qu'il est possible d'importer une découpe faite avec Photoshop, mais à confirmer quand même...

J'approuve. En utilisant l'outil tranche et en exportant l'html on peut le réutiliser dans DW. Mais bon, si c'est juste pour découper des boutons autant ouvrir le psd avec Illustrator et les extraire directement, ça se fait en deux clics.