CSS Hat transforme du Photoshop en CSS

Nicolas Furno |
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.
avatar Capripot | 
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 | 
Je déconseille, rien ne vaut un bon petit CSS "à la main".
avatar Jetel | 
@tekikou : Haha, je plussoie ! ;)
avatar Applerider | 
@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 | 
@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 | 
@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 | 
@applerider : "Si tu es un pro" Bah, comme la plupart: toshop + éditeur txt (Coda 2 pour ma part).
avatar kaligram | 
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 | 
@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 | 
"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 | 
@jetel : Oui tu te trompes. Il s'agit juste de reproduire des effets, pas toute la structure.
avatar Knozelfhoegtj | 
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 | 
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 | 
Je ne sais pas si ca se vaut mais il y a CSS3Ps qui est gratuit : http://css3ps.com/
avatar tekikou | 
@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 | 
"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 | 
@applerider : 'DreamWeaver' LOL
avatar Sic transit | 
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 | 
@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 | 
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 | 
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 | 
@ 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 | 
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 | 
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 | 
"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.
avatar Ambobo25000 | 
@Knozelfhoegtj Je débuté sur Photoshop, et franchement je ne regrette pas de l'avoir laissé tombé, tous les Webdesigner autour de moi me disent la même chose : une fois qu’ils ont gouté à Illustrator, ils se demande pourquoi ils ne l'ont pas fait plus tôt. Je te conseille d'essayer… À la base, Photoshop, c'est de la retouche d'images, mais vu que c'est devenu une usine à gaz, on peut faire n'importe quoi avec, au détriment de la productivité. Et pour l'éternel débat Wysiwyg et Code, il existera toujours des professionnels qui préfèrent maîtriser la qualité de leur code. Et si la tendance était à l'applicatisation de la création web, des langages comme Processing ou Arduino ne seraient pas en plein boom. Les designers commencent à comprendre que le Code est à la source de la création numérique, et non pas les logiciels Adobe !! Mettez les mains dans le cambouis les mecs ! ^^
avatar hadrien.eu | 
@Ambobo25000 : 'Qui travaille sur Photoshop pour faire une maquette Web ???! ' Malheureusement. Quasiment tout les graphistes. Tu es le seul qui doit utiliser illustrator pour faire du web.
avatar hadrien.eu | 
@Sic transit : 'l'absence de standards propres' Html et CSS sont standardisés. Je confirme ce que je disais, le web et le print n'ont rien a voir et tu n'y connais rien en web. Je ne connais *AUCUN* intégrateur web qui utilise des outils WYSIWYG pour intégrer une maquette.
avatar hadrien.eu | 
@Sic transit : 'Maintenant, avec CSS + HTML5, on peut enfin générer un code pas trop dégueu sans y mettre les papattes.' J'aimerais savoir par quelle magie.

CONNEXION UTILISATEUR