Photoshop CC astuce intégration UI design génération assets formats à la volée

Cette fonctionnalité existe depuis la sortie de la version Photoshop CC. Elle permet d’exporter des calques à des formats différents en les nommant directement dans la palette calques.
Cette astuce est bien pratique pour les concepteurs et intégrateurs d’applications mobiles et web, même si les éléments graphiques peuvent être générés en CSS ou en directement en SVG.

Voici l’explication et démo en vidéo (en anglais).

NB il faut l’activer sur chaque PSD dans lequel vous travaillez via le menu Fichier, Générer, Fichiers d’image.

Les paramètres sont les suivants :

  • .jpg (valeur par défaut : 9), .jpg(1-10)
  • .gif
  • .png (valeur par défaut : png32 with semi-transparent alpha), .png8, .png24, .png32
  • 1-n%, (longueur) px x (largeur) px pour l’agrandissement

Voilà 4 exemples :

  1. “200% logo@2x.png, logo.png” produit un logo 2x plus grand et un autre à la taille d’origine
  2. “banner.jpg10” génère une image avec la qualité maximale en jpeg
  3. “400% bouton.png, 250×250 bouton.jpg40%” génère un PNG 4x un JPEG 250×250
  4. *”@2x” c’est une convention pratique pour nommer les images retina

Astuce, pensez à bien enlever les espaces (sauf avec l’attribut % )et les majuscules.
On retrouve cette fonction de Photoshop CC 14.1 à CC 2018.

Résultat en live avec SDK

Voilà une autre vidéo de démo avec le rendu en temps réel grâce au kit de développement LOOM connecté à un smartphone et une tablette !