creation

CSS Hat transforme du Photoshop en CSS

par Nicolas Furno le 31.01.2013 à 12:31
CSS Hat [1.2.0 – US – OS X 10.7 – 29,99 $] est un module pour Photoshop qui est capable de convertir n’importe quel calque en code CSS 3. Très pratique pour les concepteurs de sites Internet, cet utilitaire permet de gagner beaucoup de temps en évitant au développeur de reproduire manuellement l’interface imaginée par son designer.


Une fois installé, CSS Hat est disponible comme extension dans Photoshop (CS4 ou mieux). À partir de là, sélectionnez un calque et cliquez sur le bouton "Copy" pour ajouter le code correspondant dans le presse-papier. Vous pourrez ensuite l’exploiter dans votre site, tout simplement.


Même si l’utilitaire fait de son mieux pour reproduire en CSS le calque d’origine, tout n’est pas parfaitement pris en charge. L’éditeur indique sur son site la liste des propriétés de calque pris en charge et CSS Hat sait aussi intégrer les images non vectorielles en les convertissant en Base64. Le résultat est assez précis si l’on en croit les exemples mis en ligne sur le site officiel, plus que l’outil intégré par Adobe dans la CS6 notamment. On peut en effet obtenir du code CSS pour chaque calque dans cette dernière version, mais le résultat est beaucoup moins précis, toujours selon l’éditeur.


Vendu 29,99 $, ce module ne peut pas être testé avant achat pour le moment. La licence est valide sur OS X et Windows et l’éditeur vous rembourse si vous n’êtes pas satisfait. Ajoutons que les futures mises à jour de CSS Hat sont offertes gratuitement.

|  |  

2
1
Vos réactions (29 réactions)
Capripot [31/01/2013 13:09]

Et sinon vous pouvez utiliser Fireworks intégrer à la créative suite et qui fait exactement ça ! http://tv.adobe.com/watch/learn-fireworks-cs4/creating-cssxhtml-layouts/
tekikou [31/01/2013 13:45]

Je déconseille, rien ne vaut un bon petit CSS "à la main".
jetel [31/01/2013 14:04] via MacG Mobile

@tekikou :
Haha, je plussoie ! ;)
applerider [31/01/2013 14:05] via MacG Mobile

@tekikou :
Très drôle, sans outils adaptés, le code "a la main" est très long. Je gagne beaucoup de temps grâce a DreamWeaver qui a une saisie prédictive et qui permet d'importer du Photoshop rapidement. si tu fait du Notepad + Gimp pour ton site je te comprends, mais si tu es un pro

O_o !!
jetel [31/01/2013 14:10] via MacG Mobile

@applerider :
Perso je fais tout a la main mais je garde une structure que je modifie selon les besoins.

Quand je passe par un logiciel ça me fait gagner un peu de temps au début et après je dois faire le ménage donc bon ... L'un dans l'autre !
HyperBallad [31/01/2013 14:16]

@applerider

Tout est une question de contrôle. À la main tu sais ce que tu fais. Et quand tu sais ce que tu fais, ce n'est pas long.

Intégrer une maquette photoshop en html/css, ce n'est pas un travail qui se fait automatiquement, il faut toujours réfléchir à la meilleure stratégie pour chaque élément, et faire en sorte d'être le plus économique en nombre de lignes. Ce n'est pas juste un découpage bête et méchant.
felixba [31/01/2013 14:20] via MacG Mobile

@applerider :
"Si tu es un pro"

Bah, comme la plupart: toshop + éditeur txt (Coda 2 pour ma part).
kaligram [31/01/2013 14:20]

Personnellement nous l'utilisons en production et ce plugin nous fait vraiment gagner du temps.
Je m'imagine mal coder une règle CSS avec des propriétés CSS3 pour du dégradé à la main par exemple.
jetel [31/01/2013 14:32] via MacG Mobile

@kaligram :
La on est d'accord... M'enfin c'est pas de ça qu'on parle, on parle de tout le code, structure y comprise et pas seulement les dégradée en css3, je me trompe ?
momo-fr [31/01/2013 15:07]

"cet utilitaire permet de gagner beaucoup de temps en évitant au développeur de reproduire manuellement l’interface imaginée par son designer."

MDR, vous y croyez pas quand même chez MacGé ? Si ? Non… :-)
Ali Baba [31/01/2013 15:13] via MacG Mobile

@jetel :
Oui tu te trompes. Il s'agit juste de reproduire des effets, pas toute la structure.
Knozelfhoegtj [31/01/2013 15:30]

kaligram [31/01/2013 14:20]

Personnellement nous l'utilisons en production et ce plugin nous fait vraiment gagner du temps.
Je m'imagine mal coder une règle CSS avec des propriétés CSS3 pour du dégradé à la main par exemple.

Quand on travaille dans le web, on connait quelques outils qui nous facilitent la vie. Pas besoin de débourser 29$, y'a des générateurs de gradient sur le web.

@applerider, j'espère que tu n'es pas un pro, sinon : "Cache donc ce DreamWeaver (dégueulasse) que je ne saurais voir".

@HyperBallad Non, justement, ce n'est pas un découpage bête et méchant. Donc le but c'est pas d'économiser de la ligne. C'est réfléchir sémantique et référencement. Maîtriser son code.

Knozelfhoegtj [31/01/2013 15:33]

Et oui, c'est toujours mieux de tout faire à la main. Mais croyez-moi, quand t'es en freelance et qu'on te demande un site administrable sous CMS avec une deadline qui pointe le bout de son nez, tu craches pas sur ce genre d'outils. Surtout que ça a l'air assez performant.
Mehdib92 [31/01/2013 15:49]

Je ne sais pas si ca se vaut mais il y a CSS3Ps qui est gratuit : http://css3ps.com/
tekikou [31/01/2013 16:28]

@applerider

Mon commentaire n'avait absolument rien de drôle.
Ce genre d'outil produit en général un code CSS vraiment immonde, déjà que le CSS bon, c'est pas très beau d'origine...
Au moins, en écrivant mon CSS "à la main", je peux organiser celui-ci, définir une stratégie d'écriture etc. Certes, je perd un peu de temps, mais c'est du temps gagné lorsque je veux modifier quelque chose, car je sais exactement où cela se situe.
Je pense plutôt que ce genre d'outil nous fait plus perdre du temps qu'autre chose.

J'utilise également des outils avec autocomplétion, je ne suis pas à l'époque de Windows 98 à faire du CSS avec Bloc-note non plus :P (Chocolat.app pour ma part)
2
1



Réagir

Cinq consignes avant de réagir :
  1. Rester dans le cadre de la dépêche. Pour des discussions plus générales, vous pouvez utiliser nos forums.
  2. Développer son argumentation. Les messages dont le seul but est de mettre de l'huile sur le feu seront modifiés ou effacés sans préavis par la rédaction.
  3. Respecter les acteurs de l'informatique et les autres lecteurs. Les messages agressifs, vulgaires, haineux, etc. seront modifiés ou effacés sans préavis par la rédaction.
  4. Pour toute remarque concernant le contenu de l'article, pour nous signaler une erreur, une faute d'orthographe, une omission, merci de nous contacter exclusivement par e-mail.
  5. Relisez-vous, et pour les utilisateurs de Safari profitez de l'aide du navigateur : activez le menu édition > Orthographe > Vérifier l'orthographe lors de la frappe.