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é.