Fredzone
  • News
    • High-Tech
      • Accessoires
      • APN / Camescopes
      • Drones
      • Imprimantes 3D
      • Intelligence Artificielle
      • Ordinateurs
      • Périphériques
      • Réseau / ADSL
      • RV / RA
      • Science
      • Transport
      • TV / Hifi
    • Jeux-Vidéo
      • Consoles
      • Jeux
      • Jeux en ligne
      • MMORPG
    • Logiciels
      • Windows
      • Mac OS
      • Linux
      • Autres
    • Loisirs
      • Animes
      • Cinéma
      • Humour
      • Inclassables
      • Livres & BD
      • Musique
      • Photographie
      • Séries
    • Mobilité
      • Baladeurs
      • GPS
      • Liseuses
      • Objets Connectés
      • Opérateurs / MVNO
      • OS / Applications / Jeux
      • Smartphones
      • Tablettes Tactiles
    • Web
      • Blogosphère
      • Business
      • Design
      • Hacking
      • Piratage
      • Réseaux Sociaux
      • Services
  • Tests
    • Accessoires & Périphériques
    • APN
    • Consoles
    • Objets Connectés
    • Ordinateurs & Machines Hybrides
    • Smartphones
    • Tablettes Tactiles
  • Tutoriels
  • Bons Plans
 Site Grinder 2, pour convertir vos PSD en sites web
Design

Site Grinder 2, pour convertir vos PSD en sites web

by Frédéric Pereira 2 novembre 2009

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

Site Grinder 2, la page d'accueil de l'outil

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.

Site Grinder 2, la charte à convertir

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.

Site Grinder 2, le panneau de configuration de l'outil

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.

Site Grinder 2, quelques options du panneau de configuration

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.

Site Grinder 2, le résultat de l'opération

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.

Site Grinder 2, le code ainsi généré

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

Tags: adobe Design photoshop web 2.0
Avatar

Frédéric Pereira

Floodeur compulsif, Frédéric Pereira est très actif sur Twitter ou encore sur Facebook.

0 0 votes
Évaluation de l'article
S’abonner
Connexion
Notification pour
guest

guest

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

8 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
Ludo
Ludo
12 années il y a

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.

0
Répondre
Fred
Fred
12 années il y a

@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 :)

0
Répondre
dhoko
dhoko
12 années il y a

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.

0
Répondre
Fred
Fred
12 années il y a

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 :)

0
Répondre
dhoko
dhoko
12 années il y a

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 ;)

0
Répondre
Benjam
Benjam
11 années il y a

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 !!!

0
Répondre
Fred
Fred
11 années il y a

@Benjam: Je ne l’ai pas testé mais je pense qu’il vaut mieux tout faire à la main ^^

0
Répondre
kurt rambis los angeles lakers
kurt rambis los angeles lakers
10 années il y a

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.

0
Répondre
wpdiscuz   wpDiscuz

Bons Plans

  • XXiaomi Mi Surface

    Bons Plans

    18 % de réduction à ne pas rater pour ce moniteur gaming incurvé ...

  • Vélo-électrique-HIMO-C30S

    Bons Plans

    Bon plan avec de supers produits à prix incroyables sur geekbuying !

  • Promotion Xiaomi

    Bons Plans

    Profitez de ces produits Xiaomi à des prix imbattables !

  • Smartphone Redmi

    Bons Plans

    C’est l’occasion de vous procurer des Smartphones Redmi à des prix réduits ...

  • Brosse électrique

    Bons Plans

    Ne ratez pas ces belles réductions sur la brosse à dents électrique ...

  • Récent

  • Populaire

  • Commentaires

  • Les 10 films les plus vus sur Netflix du 25 ...

    Franck A.
    26
    0
  • She-Hulk : la réalisatrice veut un caméo de Jessica Jones

    Nass
    27
    0
  • Mark Ruffalo (Hulk) pense que Marvel est plus varié que ...

    Nass
    45
    0
  • Meilleurs_films_amour_Netflix

    Les 4 films ajoutés sur Netflix dès le 17 Août ...

    Domoina Alexia
    34
    0
  • Top 15 des meilleurs logiciels pour convertir des vidéos YouTube en MP3

    Top 15 des meilleurs logiciels pour convertir des vidéos YouTube en ...

    Haryis A.
    34
    0
  • Toutes les explications sur la fin de Lost

    Frédéric Pereira
    3490
    1 031
  • PSN : retour progressif du PlayStation Network

    Frédéric Pereira
    5343
    852
  • Cracker Nintendo DS

    Comment cracker sa Nintendo DS…

    Frédéric Pereira
    7147
    776
  • Invitations Spotify

    250 invitations pour Spotify…

    Frédéric Pereira
    6550
    652
  • Comment cracker la Wii (4.2, 4.3 avec et sans jeux)

    Cracker la Wii : 4.2, 4.3 avec et sans jeux

    Frédéric Pereira
    8323
    582
  • Habib ADECHOKAN
    Habib ADECHOKAN
    on août 13, 2022
    Samsung estime que dans 3 ans les pliables prendront la ...
    En effet, à moins de sortir un appareil ultra révolutionnaire, ça va vraiment être limite. Et avec des prix astronomiques, ...
  • Avatar
    Patrick Graham
    on août 13, 2022
    Nintendo dispose enfin de son propre studio d’animation
    Looking for a way to play your favorite Nintendo DS games on your PC or Mac? Look no further than ...
  • Avatar
    jeff
    on août 13, 2022
    Samsung estime que dans 3 ans les pliables prendront la ...
    C'est bien de prendre ses rêves pour des réalités, depuis un moment Samsung et les autres constructeurs de smartphones espèrent ...
  • Avatar
    KY
    on août 12, 2022
    Comment transformer Gmail en gestionnaire de tâches
    Je suis très ravi de votre service. Mais je demande votre soutien
  • Avatar
    Amandyte
    on août 12, 2022
    Les 23 films ajoutés sur Amazon Prime Vidéo dès le ...
    Encore pas ouff pour le prix demander
  • Annonceurs
  • Devenez rédacteur
  • Politique de confidentialité
  • Mentions Légales
  • Préférences cookies
  • Contact
© Copyright FZN 2022. Tout droit réservé.
wpDiscuz