Fermer le menu

CSS Hat transforme du Photoshop en CSS

Nicolas Furno | | 12:31 |  29

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.

Catégorie : 
Tags : 

29 Commentaires

avatar 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/

avatar tekikou 31/01/2013 - 13:45

Je déconseille, rien ne vaut un bon petit CSS "à la main".

avatar Jetel 31/01/2013 - 14:04

@tekikou :
Haha, je plussoie ! ;)

avatar Applerider 31/01/2013 - 14:05

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

avatar Jetel 31/01/2013 - 14:10

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

avatar AirForceTwo 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.

avatar Felixba 31/01/2013 - 14:20

@applerider :
"Si tu es un pro"

Bah, comme la plupart: toshop + éditeur txt (Coda 2 pour ma part).

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

avatar Jetel 31/01/2013 - 14:32

@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 ?

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

avatar Ali Baba 31/01/2013 - 15:13

@jetel :
Oui tu te trompes. Il s'agit juste de reproduire des effets, pas toute la structure.

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

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

avatar 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/

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

avatar Knozelfhoegtj 31/01/2013 - 16:30

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

Le code est indenté, commenté, et rien n'y est "immonde". Sur quoi te bases-tu pour dire ça ?

avatar hadrien.eu 31/01/2013 - 18:06

@applerider :
'DreamWeaver'
LOL

avatar Sic transit 31/01/2013 - 18:36

Illustrator ? Vous plaisantez j'espère !!?

Moi, je ne code le PostScript qu'à la main ! Faut pas déconner quand même ; rien ne vaut un bon code bien propre, mitonné avec amour…

Bon, évidemment, c'est un peu plus long, mais il faut savoir ce qu'on veut : on est professionnel, ou on ne l'est pas. Personnellement, mes clients sont rassurés de savoir que le code PostScript que j'envoie pour eux sur ma Laserwriter et qu'il fourniront à leur flasheur est codé à la main ; il arrive même que certains esquissent un vrai petit sourire de satisfaction ! Et ça, aucun logiciel Wysiwyg ne saura le remplacer… !

Alors, croyez-moi, vous n'êtes pas prêts de me voir assis devant l'un de vos logiciels automatiques qui font le boulot à la place de ceux qui portent la blouse et qui se mouillent la chemise sur le code… !

avatar hadrien.eu 31/01/2013 - 19:45

@Sic transit :
Ça n'a rien a voir. Le web est particulier. Il y a des contraintes de poids des fichiers a transférer dont on se fout dans le print.

avatar Ambobo25000 31/01/2013 - 22:15

1. Qui travaille sur Photoshop pour faire une maquette Web ???! C'est Illustrator ou Fireworks. Gérer ses gabarits et maquettes en calques est simplement une perte de temps et un foutoir pas possible. Pas de problème avec les plans de travail d'illustrator. Et surtout pour la gestion du texte. C'est comme si vous vouliez monter une édition sur Photoshop au lieu d'Indesign. C'est un non-sens.

2. Faire son code a la main avec le très bon Sublime Text 2. Et par pitié, utilisez LESS ou SASS pour générer vos gradients ou codes CSS3. Le CSS c'est old school et répétitif.

Oubliez le wysiwyg et surtout Dreamweaver.

avatar Vinyl 01/02/2013 - 00:10

Intéressante cette discussion sur les outils que vous utilisez ! Je code tout à la main aussi, avec un bon éditeur de code avec auto complétion. Ce type de plugin peut servir à des personnes qui ne codent que rarement, comme les graphistes.

avatar Sic transit 01/02/2013 - 11:12

@ hadrien.eu : ne fait pas semblant de ne pas comprendre… Mon analogie avec le PostScript visait simplement à mettre en lumière que la tendance naturelle va à plus de simplicité, et donc vers des outils Wysiwyg, même pour le Web. Je suis d'ailleurs assez étonné qu'ils aient mis tant de temps pour être vraiment valables ; la faute sans doute à l'absence de standards propres et à la domination du format flash. Maintenant, avec CSS + HTML5, on peut enfin générer un code pas trop dégueu sans y mettre les papattes.
Faut vous faire un raison : dans 5 à 10 ans, savoir coder en HTML ou en CSS ne servira plus à rien.
Regardez le Flash, dont plein de petits malins avaient fait leur métier exclusif, il y a une dizaine d'années, et se la touchaient en réalisant des sites Web formidablement dynamiques et créatifs… Maintenant, 99,9% du Flash sur le Web, ce sont des pubs.
J'espère pour eux que tous ces experts en Flash ont eu la présence d'esprit de vite se recycler…

avatar Vinc 01/02/2013 - 12:19

Et non Sic transit, la tendance c'est celle que vient de décrire Ambobo25000. Même Adobe l'a compris :
http://html.adobe.com/edge/code/
Et ce n'est plus seulement la question de HTML5 et CSS3 mais des différents frameworks, grids ou préprocesseurs CSS. Je veux pouvoir choisir d'utiliser le Twitter Bootstrap + Less ou bien SASS / Zengrids.
Aucun éditeur wysiwyg ne permet de faire ça. Peut être que cela arrivera un jour mais c'est pas pour tout de suite : les approches du développement web évoluent trop vite.

avatar seishiro 01/02/2013 - 13:51

Quand je vous lis, j'ai l'impression que Macg regorge de champion du monde de HTML+CSS etc ... Mais quand je vois certains site fait par des sois disant pro qui code tout à la main j'ai envie de vomir.
J'aimerai bien connaitre le Nombre de jour que vous passez à tout faire à la main pour intégrer un design bien galère sorti d'un DA un peu malade en partant de ZERO.

Dans le métier et c'est général à toute activité et faut répondre à cette équation
Coût/délais/performance tout est question d'équilibre.
Alors les débats de qui à la plus grosse on s'en tape.

avatar Knozelfhoegtj 01/02/2013 - 15:48

"1. Qui travaille sur Photoshop pour faire une maquette Web ?"

Juste 90 % des Webdesigner. Donc stop faire celui qui s'y connait si c'est pour dire pareilles sottises.

Pages

Connexion utilisateur