Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 13 sur 13
  1. #1
    Futur Membre du Club
    Inscrit en
    juillet 2006
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : juillet 2006
    Messages : 17
    Points : 16
    Points
    16

    Par défaut Génération de code HTML à partir de PSD

    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

  2. #2
    Modérateur
    Avatar de Vil'Coyote
    Profil pro
    Développeur Web
    Inscrit en
    février 2008
    Messages
    3 997
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2008
    Messages : 3 997
    Points : 5 873
    Points
    5 873

    Par défaut

    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.
    la vie n'est pas cirrhose des foies ...

  3. #3
    Expert Confirmé

    Développeur NTIC
    Inscrit en
    janvier 2011
    Messages
    1 682
    Détails du profil
    Informations personnelles :
    Âge : 24

    Informations professionnelles :
    Activité : Développeur NTIC
    Secteur : Biens de consommation

    Informations forums :
    Inscription : janvier 2011
    Messages : 1 682
    Points : 3 801
    Points
    3 801

    Par défaut

    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/

  4. #4
    Futur Membre du Club
    Inscrit en
    juillet 2006
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : juillet 2006
    Messages : 17
    Points : 16
    Points
    16

    Par défaut

    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.

  5. #5
    Expert Confirmé

    Développeur NTIC
    Inscrit en
    janvier 2011
    Messages
    1 682
    Détails du profil
    Informations personnelles :
    Âge : 24

    Informations professionnelles :
    Activité : Développeur NTIC
    Secteur : Biens de consommation

    Informations forums :
    Inscription : janvier 2011
    Messages : 1 682
    Points : 3 801
    Points
    3 801

    Par défaut

    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.

  6. #6
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 374
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 22 374
    Points : 87 045
    Points
    87 045
    Billets dans le blog
    4

    Par défaut

    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...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    Expert Confirmé

    Développeur NTIC
    Inscrit en
    janvier 2011
    Messages
    1 682
    Détails du profil
    Informations personnelles :
    Âge : 24

    Informations professionnelles :
    Activité : Développeur NTIC
    Secteur : Biens de consommation

    Informations forums :
    Inscription : janvier 2011
    Messages : 1 682
    Points : 3 801
    Points
    3 801

    Par défaut

    Citation Envoyé par Bovino Voir le message
    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****.

  8. #8
    Futur Membre du Club
    Inscrit en
    juillet 2006
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : juillet 2006
    Messages : 17
    Points : 16
    Points
    16

    Par défaut

    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?

  9. #9
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 374
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 22 374
    Points : 87 045
    Points
    87 045
    Billets dans le blog
    4

    Par défaut

    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...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  10. #10
    Membre habitué
    Homme Profil pro Romain Guinand
    Développeur Web
    Inscrit en
    avril 2012
    Messages
    77
    Détails du profil
    Informations personnelles :
    Nom : Homme Romain Guinand
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Communication - Médias

    Informations forums :
    Inscription : avril 2012
    Messages : 77
    Points : 113
    Points
    113

    Par défaut

    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.

  11. #11
    Futur Membre du Club
    Inscrit en
    juillet 2006
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : juillet 2006
    Messages : 17
    Points : 16
    Points
    16

    Par défaut

    Citation Envoyé par ze0ne Voir le message
    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?

    Citation Envoyé par ze0ne Voir le message
    j'ai la chance de travailler sur deux écrans


    Citation Envoyé par ze0ne Voir le message
    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

  12. #12
    Membre habitué
    Homme Profil pro Romain Guinand
    Développeur Web
    Inscrit en
    avril 2012
    Messages
    77
    Détails du profil
    Informations personnelles :
    Nom : Homme Romain Guinand
    Localisation : France, Morbihan (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Communication - Médias

    Informations forums :
    Inscription : avril 2012
    Messages : 77
    Points : 113
    Points
    113

    Par défaut

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

    Non pas du tout.

  13. #13
    Expert Confirmé

    Développeur NTIC
    Inscrit en
    janvier 2011
    Messages
    1 682
    Détails du profil
    Informations personnelles :
    Âge : 24

    Informations professionnelles :
    Activité : Développeur NTIC
    Secteur : Biens de consommation

    Informations forums :
    Inscription : janvier 2011
    Messages : 1 682
    Points : 3 801
    Points
    3 801

    Par défaut

    Citation Envoyé par Bovino Voir le message
    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.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •