Automatiser la découpe d’images avec Adobe Generator

articleAdobeGenerator

Il y a quelques semaines, je vous présentais un plugin permettant de rendre des maquettes PSD interactives directement depuis Photoshop CC. Stand In de son nom, n’aurait sans doute jamais vu le jour sans l’introduction de la toute dernière nouveauté du logiciel phare d’Adobe.

La découpe et l’exportation traditionnelle

Chaque intégrateur web connait les étapes habituelles pour découper et exporter les éléments graphiques présents sur des templates.

Personnellement j’ai toujours procédé ainsi:

  • Sélection des calques que je souhaite faire fusionner en vue d’être exportés en une seule et unique image
  • Aplatissement des masques, tracés, différents réglages en vue d’exporter l’élément souhaité (de cette manière, je m’assure d’avoir tout récupéré)
  • Duplication du nouveau calque sur un nouveau document
  • Rognage du document à la dimension de l’image (Image > Rognage)
  • Exportation de l’image via l’export optimisé pour le web (sélection du format, réglage individuel et nommage du fichier)

Bien que toutes ces étapes soient parfois longues, elles restaient jusqu’alors nécessaires. Dorénavant, il existe une alternative de qualité : Adobe Generator.

Lancé publiquement depuis la mise à jour 14.1 d’Adobe Photoshop CC, cette nouvelle fonctionnalité m’a personnellement charmé. En tant que webdesigner, je ne peux que me réjouir devant le gain de temps fabuleux qu’il m’apporte.

Présentation d’Adobe Generator

Découpage automatisé

Comme disait W.W. (Walter White – Breaking Bad) : “It’s over”. En effet, les professionnels tels que moi qui sont confrontés à ce genre de manipulations redondantes peuvent dorénavant être épaulés par cette nouveauté qui génère des découpes de calques et de dossiers automatiquement. Oui oui, vous l’avez bien lu, c’est automatique !

Pour activer la fonctionnalité, rendez-vous dans le menu Fichier > Générer > Images actives.

Il ne vous reste plus qu’a correctement nommer vos différents calques pour que la magie opère. C’est la seule chose à laquelle il faut bien faire attention, car l’outil se base sur une syntaxe bien spécifique qu’il faut respecter. Voici quelques exemples d’utilisation.

Pour indiquer le format :

  • .png (valeur par défaut : png32 avec prise en charge de la transparence)
  • .png8
  • .png24

Pour indiquer la qualité :

  • .jpg (valeur par défaut : 9)
  • .jpg + nbr représentant la qualité sur une échelle de 1 à 10 (ex: .jpg9)
  • .jpg + pourcentage représentant la qualité sur une échelle de 1 à 100 (ex: .jpg 80%)

Pour la taille :

  • Pourcentage représentant la taille + logo.jpg (ex: 200% logo.jpg)
  • nbr L x nbr H (en pixel) + logo.jpg (ex: 250×250 logo.jpg)

Exemple de combinaison possible :

  • 400% tuningfork.png, 250×250 tuningfork.jpg 40% (qui produit un png du nom de tuningfork à 400% de sa taille réelle ainsi qu’un jpg du même nom et de dimensions 250x250px avec une qualité de 40%)
  • 200% logo-retina.png, logo.png (qui produit un png du nom de logo-retina à 200% de sa taille réelle ainsi qu’un png du nom de logo doté des paramètres par défaut puisque non spécifié)

Les possibilités sont nombreuses et voici une vidéo qui montre Adobe Generator en pleine action :

Images en temps réel avec Edge Reflow CC

Adobe Generator établit également une connexion étroite entre Adobe Photoshop CC et Redge Reflow CC, qui je vous le rappelle, permet de créer des mises en forme réactives. De cette façon, votre mise en page initialement créée sur Photoshop CC se retrouvera dans l’éditeur de mise en forme réactive, en vue d’établir les derniers réglages et de récupérer son CSS.

Si vous ne connaissez pas Redge Reflow CC, c’est une erreur. Je vous invite vivement à visiter le site officiel du logiciel.

Open Source, la technologie interopérable

Adobe Generator est basé sur la plateforme node.js qui lui vaut le droit d’être Open Source, ce qui veut dire qu’avec de bonnes connaissances en JavaScript il est tout à fait possible de modifier les plugins existants, voire de créer vous-même vos propres plugins.

D’ailleurs, certaines sociétés ont vu le jour au travers de ce genre d’activité, ce qui est notamment le cas pour Stand In, mais aussi de The Engine Company qui utilise Adobe Generator pour faire évoluer le moteur graphique (LOOM) de leur jeu.

Conclusion

Que dire de plus ? Adobe Generator ne possède que des avantages. Si se n’est pas déjà fait et que vous êtes détenteur d’une licence CC 14.0, il ne vous reste plus qu’à mettre à jour le logiciel via le volet “Aide”. Il n’y a aucun surcoût supplémentaire à prévoir, cette mise à jour est donc gratuite (sous réserve d’un abonnement à la Creative Cloud).

Si vous désirez plus d’informations, je vous invite à consulter l’article du blog d’Adobe en Anglais. Par ailleurs les feedbacks sont toujours autant appréciés !

Automatiser la découpe d'images avec Adobe Generator, 3.3 out of 5 based on 3 ratings

Commentaires

#1
Morgan Fabre

Pour aller plus loin et gagner encore plus de temps, on peut ensuite utiliser CSS Hat qui permet de générer le code CSS3 d’un calque sélectionné.

Entre découpage automatique des images + génération automatique du code CSS depuis PhotoShop, le gain de temps dans un projet d’intégration peut s’avérer important. Notamment sur la génération de boutons un peu complexes.

Réagissez à cet article

Données obligatoires