Site Grinder 2, pour convertir vos PSD en sites web
Depuis que je fais du web (soit quelque chose comme 14 ans quand même), on entend parler d’outils miraculeux permettant aux graphistes de convertir leurs PSD en véritables sites web sans aucun effort. Oui, et je vous avais même parlé de Divine cet été, qui était censé proposer ce type de fonctionnalités à tous les passionnés de Wordpress. Et bien je vais remettre le couvert aujourd’hui en parlant de Site Grinder 2, un outil de plus qui aimerait bien s’imposer sur ce marché.
Si j’ai démarré ma « carrière » en utilisant des logiciels comme Dreamweaver (honte à moi), j’en suis très vite venu à mettre les mains dans le cambouis en utilisant simplement le bloc note ou, plus tard, des outils comme Notepad++ (sur Windows) ou Smultron (sur Mac). Et en toute franchise, je trouve qu’il n’y a rien de mieux pour s’approprier ses sites et savoir précisément comment ils peuvent tourner. Cela dit, magnanime comme pas deux, je pense aussi à tous ces graphistes qui n’ont pas forcément ni le temps, ni l’envie, de se mettre au développement et qui préfèreraient, de loin, qu’un logiciel s’occupe de tout pour eux.
Sur le papier, c’est ce que promet Site Grinder 2, un logiciel qui est censé convertir n’importe quel PSD en site web à part entière, et tout ça directement à partir de Photoshop (bon point, toutes les versions sont d’ailleurs supportées). Et ce qui tombe super bien, c’est que je suis justement en train de refaire mon site personnel (au cas où je pourrais passer auto-entrepreneur) et que j’ai suffisamment de matière pour tester l’outil.
Pour commencer, il est donc nécessaire de télécharger et d’installer Site Grinder 2. On précisera juste que l’outil coûte la bagatelle de 129$ dans sa version basique (349$ pour la version « pro ») mais qu’une démonstration est disponible sur le site de l’éditeur. Seul bémol pour cette dernière, un vilain watermark sera ajouté sur chacune de vos images. M’enfin, ce n’est pas dramatique non plus puisque ça vous permettra au moins de vous faire une idée du bouzin avant de claquer toutes vos économies.
Une fois installé, Site Grinder 2 est directement accessible depuis le menu Fichier > Automate > Site Grinder 2. Mais avant de lancer l’outil, vous allez devoir préparer votre PSD à l’export et, autant vous le dire tout de suite, ce n’est pas forcément une mince affaire. Et non, si vous pensiez ne rien faire, vous vous trompiez lourdement. Ainsi, vous allez devoir nommer vos calques en ajoutant un marqueur spécifique selon son rôle. S’il s’agit de texte, vous devrez ajouter le marqueur « -text ». Pour le menu ce sera plutôt « -menu », pour les boutons « -button » et pour les popups « -popup ». Et je vous assure que si vous travaillez sur un gros PSD, ça devient vite très galère à gérer.
Ensuite, après avoir lancé Site Grinder 2, une petite fenêtre fort sympathique va apparaître en vous balançant à travers la gueule toutes les erreurs détectées sur votre PSD et pouvant empêcher la fameuse migration. Précisons toutefois qu’une aide en ligne est disponible pour vous aider à corriger le tir mais que cette dernière est entièrement en anglais et n’est franchement pas simple à comprendre.
Une fois les problèmes réglés, il ne vous reste plus qu’à vérifier les différentes options en naviguant sur les cinq onglets proposés. Là encore, l’outil est assez complexe à comprendre mais, en gros, vous pourrez choisir le format d’export de vos images, ajouter des décorations à vos calques, définir l’alignement de votre page, sa couleur de fond et ainsi de suite.
Après quoi il ne vous restera plus qu’à cliquer sur le bouton « Build » pour que l’export et la conversion démarrent. En fonction de la complexité de votre PSD, cette dernière étape peut durer un moment. Pour vous donner une idée, sur le PSD de mon exemple, PSD qui est par ailleurs d’une simplicité enfantine et qui comportent très peu de calque (une vingtaine), l’opération a duré quelque chose comme 5 minutes.
Une fois l’opération terminé, Site Grinder 2 vous affiche le résultat directement dans votre navigateur. Et là, en toute sincérité, ce n’est vraiment pas génial. Alors attention, car il est possible que je me sois un peu planté dans les options d’export, hein, mais le fait est qu’il semblerait que l’outil ait beaucoup de mal à gérer les effets de transparence et d’opacité. Manque de bol pour moi, j’adore utiliser ce type d’effet et, comme vous pouvez le voir sur la capture qui suit, ça se voit. Concernant le code ainsi généré, il ne m’a pas non plus convaincu. L’outil a tendance à utiliser des « div » à outrance mais, là encore, il est possible que ce soit ma configuration qui pèche un peu. Et ne parlons même pas des classes, qui ne sont pas optimisées le moins du monde.
Ce qui est certain, en tout cas, c’est que Site Grinder 2 n’est pas un logiciel facile à utiliser. Autant vous dire qu’il est presque plus simple d’apprendre le HTML, les CSS et le Javascript. En ce qui me concerne, en tout cas, on peut dire que le bouzin ne m’a pas du tout convaincu. Cela dit, comme j’aime coder, je ne fais sans doute pas partie du public visé.
Mouais, juste mouais car je reste sceptique sur sa façon d’agir.
En fait il utilise le système des tranches dans photoshop?
Si c’est le cas, c’est une manière de faire qui est « lourde et démodée ».
Qui plus est, si c’est toujours le cas… Un tuto de 5minutes permet d’apprendre la technique.
Et si c’est toujours le cas, la transparence n’est pas supportée car en fait, la technique est de diviser les différentes parties du graphisme psd en « tranches », en zone, en mini images d’un puzzle qui une fois assemblées, reconstituent le graphisme obtenu dans photoshop.
Il est donc normal qu’il utilise plein de div.
A la limite, c’est sympa et facile pour un folio ou un petit site perso mais sans plus.
@Ludo: Rassure toi, je ne suis pas spécialement convaincu non plus et je crois que ça se fait bien sentir.
Perso, je n’utilise jamais les tranches. Mon objectif n’est pas de découper ma charte en plusieurs morceaux mais d’essayer de l’optimiser au maximum (et donc le moins d’images possibles). Du coup, je le fais à la main, c’est beaucoup plus simple comme ça. Mais pour la transparence, en tout cas, c’est bon à savoir :)
Et quid de la rétro compatibilité ??
En tout cas, certes ça peut être pratique mais bon, comme toi je ne suis pas un public visé. J’accroche pas avec le WYSIWYG donc pas avec encore un outil qui te mâche le travail.
Tout est par bloc oui mais bon, c’est parfois cool les div ;)
>>T’as commencé par Dream ?? Rhoo la bonne blague pour le code, mon prof qui nous sort t’as pour le code une coloration syntaxique que tu n’as,pas dans un bloc note… Tu parles par défaut elle est à peine mieux.
Notepad++ est le mieux par défaut et léger en plus. Mais pour les templates wordpress par exemple mieux vaut avoir PSpad ( gère les projets ce qui est pratique)
En tout cas un logiciel qui va certes intéressé les débutants mais vu le prix je ne donne pas cher pour son espérance de vie.
Et ouais, j’ai commencé par Dreamweaver et j’ai tenu… hum… une demie journée je crois bien. Au bout d’un moment, j’en avais tellement marre de reprendre le code généré que je me suis dit qu’il fallait que je m’y mette.
Sinon, Smultron gère aussi les projets :)
Dream est quand même une bonne blague j’avais testé la version 8 en version portable (non pas le fouet :) ) il y a de ça quelques années. L’autre jour j’ai installé la CS3 ( sous seven elle fonctionne mieux que la CS4) et bien j’ai pas vu de changement alors que le dream à un beau numéro 10…. Et pourtant ça coute la peau du cul.
Enfin Adobe Powaa.
C’est quand même plus agréable de faire via le code un site je trouve. Ensuite tu as d’excellente extension comme Dragonfly (qui n’est pas une extension d’ailleurs) ou Firebug qui te permettent de faire de la programmation efficace. Quoique avec du Seven sur un grand écran je te garantie que tu programme plus comme avant t’es bien plus efficace.
Wep mais quand t’as pas un mac tu l’utilise comment le Smultron ? Sous Windows comme pour le commun des mortels je parle moi ;)
Bonjour et merci pour ce test !
Qu’en est-il de site grinder 3 ? est-ce mieux et plus facile d’utilisation ? As-t’on enfin le logiciel miracle ?
Merci des réponses !!!
@Benjam: Je ne l’ai pas testé mais je pense qu’il vaut mieux tout faire à la main ^^
The catchy blog with the interesting contents. You give the very useful information that many people dont know before. most of your contents are make me have more knowledge. it is very different. I was impressed with your blog. Never be bored to visit your website again. Have the nice your time.Keep enjoyed your blogging.