Divine, pour convertir son PSD en thème WordPress

La nouvelle vous surprendra peut-être mais tout le monde n’est pas capable de faire de l’intégration web. Et non, d’ailleurs vous n’imaginez même pas le nombre de graphistes qu’on peut trouver et qui ne connaissent pas le HTML. Aussi, pour eux, Divine risque d’être une alternative séduisante puisque cet outil permet de convertir très facilement un fichier PSD en thème Wordpress… sans aucune ligne de code !

Divine, la page d'accueil

Personnellement, je me suis toujours méfié de ce genre d’outils. Habitué depuis le début à coder sur des machins comme Notepad++ ou Smultron (sur Mac), je n’ai même jamais utilisé Dreamweaver. Question de principe, je préfère tout faire à la main et comprendre comment les choses fonctionnent plutôt que de me reposer sur un logiciel automatisé qui réfléchira à ma place.

Mais voilà, le fait est que tout le monde ne partage pas forcément mon opinion et qu’il existe pas mal de gens bossant dans le web et étant complètement réfractaires aux techniques de développement. Et pour eux, des outils comme Dreamweaver ou Divine sont indispensables. D’ailleurs, on peut dire que ce dernier est particulièrement ambitieux. Convertir des PSD complets en thèmes Wordpress sans saisir une seule ligne de code, c’est le genre de choses qu’on ne voit pas souvent.

Divine, le logiciel une fois installé

Concrètement, pour faire tourner le machin, c’est aussi facile que de perdre son permis de conduire quand on est bourré : on télécharge l’outil sur le site officiel, on l’installe, on lance son Photoshop cracké, on ouvre son gros PSD de bourgeois et on accède au menu “Divine” situé dans la barre d’outils. On retourne ensuite dans le menu “Fichier”, on passe par “Automatisation” et on sélectionne “Divine”. Bon, dit comme ça, le tout a l’air un peu bordélique mais en fait c’est nettement moins compliqué que ce qu’on pense.

Divine, le menu intégré dans Photoshop

Non, c’est vraiment après que les choses sérieuses commencent. Déjà, vous avez intérêt à avoir un PSD super détaillé pour que ce soit plus simple. Ensuite, vous allez devoir convertir chaque élément de votre thème en balise Wordpress. En gros, on va leur attribuer un rôle (titre du billet, contenu du billet, etc…) et en publiant l’ensemble, votre thème sera automatiquement généré.

Divine, définition de la structure du thème

Pour être complètement franc avec vous, je n’ai pas eu l’occasion de tester Divine en profondeur. Ayant pas mal de projets en cours en ce moment (vous en saurez normalement un peu plus pour la rentrée), je n’ai malheureusement pas la possibilité de passer deux heures à tester le fonctionnement du machin. Et c’est bien dommage, parce que j’aurais quand même vachement bien aimé jeter un coup d’oeil aux fichiers générés histoire de savoir si Divine sait coder correctement.

Enfin si vous avez testé l’outil, n’hésitez pas à me dire ce que vous en pensez.

Via le Blogueur Masqué (sur Twitter)

28 réflexions au sujet de “Divine, pour convertir son PSD en thème WordPress”

  1. Merci pour le lien ;)

    Alors j’ai installé le plugin et sous cs3 et sous cs4, il n’apparait que sous cs4 mais il est impossible de l’utiliser.
    En effet j’ouvre un psd que je travaille puis ensuite je clique dans le menu sur “divine”, la fenêtre s’ouvre bien mais aussitôt ça bugg et photoshop se ferme.
    J’ai testé sur 3 pc differents, 2 sous XP sp3 et un sous Vista.

    J’attend avec impatience une version fonctionnelle de ce plugin qui semble prometteur.

    Répondre
  2. Ce soft semble tout simplement génial!

    Les trucs dans le genre codent généralement très mal, c’est un fait. D’ailleurs, la dernière fois que j’ai utilisé Kompozer ou Dreamweaver, c’était pour montrer à un ami l’aspect crasseux du code qu’ils généraient.

    A côté de ça, je me dis aussi qu’il m’a fallu plus de 80 heures pour passer d’un psd à un thème wordpress la dernière fois…

    J’ai hâte de rentrer chez moi pour tester ce truc. Au pire, si c’est vraiment mal codé, notepad++, gedit ou emacs seront là pour corriger le tir.

    Répondre
  3. Je viens de passer 30 minutes dessus, pour ceux qui sont sous CS4, il faut aller dans Files/Automate/Divine.

    Mais bon, comme le précise Joe, limitation au niveau des dimensions et export des images en GIF…
    Et puis… ça marche pas terrible, j’ai testé sur 3/4 maquettes, impossible d’en tirer quelque chose de potable… :|

    Autant faire ses découpes avec toshop, exporter les images et coder sous notepad++. :roll:

    Répondre
  4. Pour les personnes qui ne savent pas faire de l’intégration web, effectivement ce genre de produit peut servir.

    Je vais jeter un oeil à cet outil pour voir ce qu’il peut faire, mais je suis un peu comme toi avec tous ses projets en cours, c’est difficile de trouver du temps !

    Apparement en lisant les commentaires qui me précède, l’outil n’a pas l’air terrible, mais après à chacun de se faire une impression.

    Répondre
  5. T’ain les commentaires m’ont tué…
    Moi qui lutte à découper un design et donc à intégrer (au passage si vous avez de bonnes sources pour apprendre, je suis preneur!) je me suis dis que ce plugin était génial mais si faut passer le double de temps pour ameliorer ce qui est produit…. voila quoi…

    Répondre
  6. @Morgan: Ouais mais bon, je t’avoue que des logiciels capables d’intégrer aussi bien qu’un développeur, tu n’en as aucun. Voilà, c’est dit. Pour faire du bon boulot, faut encore tout se taper à la main et en même temps ce n’est pas forcément très difficile. Le vrai problème, c’est que ça prend beaucoup de temps :)

    Répondre
  7. @Morgan: C’est pas spécialement compliqué. Perso, je commence par définir le gabarit générale de mes sites (la largeur max). Je place des repères, pour pas déborder. Ensuite, une fois que j’ai l’idée générale, je commence à créer mes calques et à marquer les différentes zones (header, menu, contenu, sidebar, footer). Je fais en sorte d’essayer de partir sur des valeurs fixes (genre 250px de hauteur pour le header) histoire que ce soit plus simple.

    Quand ma charte est complètement finie, je me fous sur Notepad++ ou Smultron et je commence par placer les calques principaux sous forme de DIV. Pour un thème Wordpress, je définis aussi les différents fichiers nécessaires. J’intègre le tout avec mes gentilles CSS et, de temps en temps, je vérifie que le site s’affiche de la même manière sur tous les navigateurs. Je préfère le faire au fur et à mesure que de me retrouver à gérer tous les bugs à la fin.

    Une fois que le site est terminé, je passe à la phase d’optimisation. Bon, en même temps, je fais gaffe à mes CSS au fur et à mesure mais je repasse quand même un coup derrière.

    Après, je commence à balancer du contenu et je migre le site chez mon hébergeur. Une fois que j’ai un contenu conséquent (au moins une vingtaine de pages), je passe au référencement et à l’optimisation SEO.

    Et voilà :)

    Répondre
  8. Salut,

    Dans le même genre de principe, il y a aussi Artisteer qui prévoit de sortir sa version Mac pour bientôt.

    Il est vrai qu’il faut un temps soit peu connaitre le code Html et Php si l’on veut un truc qui tourne correctement et éventuellement corriger certains couics, car il y en à toujours.

    Cela peut servir à faire une mise en place rapide des bases, mais la retouche du code est certainement nécessaire pour fignoler l’ensemble des pages (index, page simple, etc.).

    Hervé

    Répondre
  9. retoucher du code ça va, des modifs aussi, mais c’est le passage d’image à code qui bloque chez moi, l’outil tranche etc.
    Pour ça que j’utilise des themes de bases, que je modifie ensuite au besoin…

    Répondre
  10. Même “problème” que Morgan, outil tranche et codage mais en même temps j’ai pas cherché à comprendre, et à vouloir apprendre… avec un peu d’envie et de perserverance c’est obligé, on y arrive. Rappelle toi tes débuts sur Photoshop ;)

    Sinon ton long commentaire pour Morgan, Fred, est vraiment bien. Merci.

    Et oui ils sont radins… tant pis.

    Répondre
  11. @Fred: Ok ok merci, ou ca se ferait sinon ?

    Sinon je viens de tomber par hasard sur un article en anglais ou il recense 20 sites qui expliquent pas à pas comment codé à partir d’un PSD. http://dzineblog.com/2009/0
    Je le conseil pour ceux qui maitrisent un peu l’anglais ;)

    Répondre
  12. @Morgan: Ben ça avance, le thème est déjà presque terminé mais il me reste le plus gros à faire : le contenu + seo. Patience, donc :)

    @Joe: Tu le seras en temps voulu, tant que le projet n’est pas finalisé je préfère ne pas en parler. Sinon merci pour le lien :)

    Répondre
  13. @Divine Team: Bon, bah vive le traducteur de Voilà, hein… Ce sera de l’approximatif mais tant pis, je n’ai pas le choix :

    First of all, thank you for your comment. Therefore really, we all know that Divine is in his first props there still but it all the same produced victim of some seems to be bugs particularly embarrassing and it seems to me mattering you like to make go back up.

    Anyhow, we all hope that Divine will know how to correct shooting and to allow us to gain time on our plans :)

    Thanks for your comment.

    Répondre
  14. La version de Google passe mieux :

    Tout d’abord, l’équipe donne son divin grâce à tous ceux qui ont prêté attention à notre produit.

    Nous avons déjà fait beaucoup, et la principale tâche est maintenant constant d’amélioration et de développement. À ce stade initial de bogues, de problèmes et les malentendus sont normaux.

    Lancement de la version Free, nous avons voulu vous permettre de voir ce que le programme correspond, comment il fonctionne et ce qu’elle fait.

    S’il vous plaît ne vous inquiétez pas pour les bugs – chacun de nous de prendre en considération en raison de vos commentaires, remarques et critiques constructives.

    Si vous avez quelque chose à dire ou de suggérer, n’hésitez pas à visiter notre forum: http://www.ideastrunk.com/d….

    Et n’oubliez pas l’essentiel – tout ce que nous faisons est fait pour vous, les gars.

    Veuillez agréer, Divine Team

    Répondre
  15. @Djéjé15: Houla, c’est de la traduction au mot à mot, hein… Bon, comme je l’ai déjà dit, Divine a du potentiel. Beaucoup de potentiels. Que l’on subisse des bugs, je le comprends complètement aussi mais c’est vrai que c’est frustrant de ne pas pouvoir tester véritablement le produit.

    Bon, et la traduction Voilà :

    Houla, it is translation in the word for word, sorry… Good, as I have already said it, Divine has potential. A lot of potentials. That they is subjected to bugs, I understand it absolutely as but that’s true as it is frustrating not to can test the product really.

    Répondre
  16. Today we are happy to announce about release of completely new web service called Ideastrunk created by Divine team for everyone: customers and developers to make a problem solving easier and quicker, to create high-quality products and implement new ideas with the help and advice of professionals. It’s friendly environment, and you can try it right now enjoying its advantages and possibilities.

    Why Ideastrunk? It offers you:

    1) An information and assistance resource.
    2) Total control for implementation or improvement of web projects.
    3) Time to focus on your core activity.
    4) All kind of support any time.
    5) Clients.

    So you need not go on surfing the Internet for a suitable, inexpensive, online service to find answers to questions appeared sometimes every day or even hour. Ideastrunk is really simple and free. More details at: http://ideas-trunk.ideastru

    Répondre

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.