Génération de fichiers d’image à partir de calques

Vous pouvez générer des fichiers d’image JPEG, PNG, GIF ou SVG à partir du contenu d’un calque ou d’un groupe de calques figurant dans un fichier PSD. Les fichiers sont générés automatiquement lorsque vous ajoutez une extension de format d’image prise en charge au nom d’un calque ou d’un groupe de calques. Si vous le souhaitez, vous pouvez également indiquer des paramètres de taille et de qualité pour les fichiers d’image ainsi générés.

La génération de fichiers d’image à partir d’un fichier PSD est particulièrement utile pour la conception de sites Web compatibles avec divers périphériques.

Pour savoir comment créer et exporter des images web, voir Comment exporter des fichiers dans divers formats depuis Photoshop.

Pour mieux comprendre le fonctionnement du générateur de fichiers d’image, prenons l’exemple d’un fichier PSD simple (téléchargez-le depuis ce lien) avec la hiérarchie de calques suivante :

La hiérarchie de calques de ce fichier présente deux groupes de calques : Rounded_rectangles et Ellipses. Chacun de ces groupes de calques contient cinq calques.

Procédez comme suit pour générer des fichiers d’image à partir de ce fichier PSD :

1. Ouvrez le fichier PSD, puis sélectionnez Fichier > Automatisation > Plug-ins générateurs > Fichiers d’image.
2. Ajoutez les extensions de format de fichier souhaitées (.jpg, .png, .gif ou .svg) aux noms des calques ou des groupes de calques à partir desquels vous souhaitez générer des fichiers d’image. Par exemple, renommez les groupes de calques Rounded_rectangles et Ellipses de la manière suivante : Rounded_rectangles.jpg et Ellipses.png ; renommez le calque Ellipse_4 de la manière suivante : Ellipse_4.gif.

Photoshop génère les fichiers d’image correspondants et les enregistre dans un sous-dossier en regard du fichier PSD source. Si le fichier PSD source n’est pas encore enregistré, Photoshop enregistre les fichiers générés dans un nouveau dossier sur votre poste de travail.

Génération de fichiers pour des documents en ligne

Si vous travaillez sur un document en ligne, les fichiers sont enregistrés dans le répertoire « Photoshop Cloud Associates » :

• Windows : C:\Users\votrenom\Documents\Adobe\Photoshop Cloud Associates
• macOS : /Users/votrenom/Documents/Adobe/Photoshop Cloud Associates

Génération de plusieurs fichiers à partir d’un calque ou d’un groupe de calques

Pour générer plusieurs fichiers à partir d’un calque ou d’un groupe de calques, séparez les noms de fichier à l’aide de virgules. Par exemple, le nom de calque suivant permet de générer trois fichiers :

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Enregistrement de fichiers dans un sous-dossier

Vous pouvez choisir d’enregistrer les fichiers d’image générés à partir de calques/groupes de calques dans un sous-dossier directement sous le dossier des fichiers du document. Incluez le nom du sous-dossier dans le nom du calque/groupe de calques, par exemple :

[sous-dossier]/Ellipse_4.jpg 

Exemple d’utilisation pour la conception web

La génération de fichiers d’image à partir d’un fichier PSD est particulièrement utile pour la conception de sites web compatibles avec divers appareils. Prenons l’exemple de la conception du site web suivant et de sa structure de calques :

Générons les fichiers d’image de l’icône se trouvant en haut de la liste ainsi que de la ligne supérieure de la grille d’image Global Hotspots :

• Ajoutons les extensions de format d’image souhaitées aux noms de calque correspondants.

Renommer les calques ou les groupes de calques correspondants

Photoshop génère les fichiers et les enregistre au même emplacement que le fichier PSD source.

Indication des paramètres de qualité et de taille

Les fichiers JPEG sont générés par défaut avec une qualité de 90 %. Les fichiers PNG sont générés sous la forme de fichiers 32 bits par défaut. Les fichiers GIF sont générés avec une transparence alpha de base.

Lorsque vous renommez des calques ou des groupes de calques en vue de la génération de fichiers, vous pouvez personnaliser la qualité et la taille.

Paramètres des fichiers JPEG

• Ajoutez un suffixe au nom de fichier pour spécifier la qualité de sortie voulue : .jpg (1-10) ou .jpg (1-100 %). Par exemple :
  • Ellipse_4.jpg5
  • Ellipse_4.jpg50%
• Ajoutez un préfixe au nom de fichier pour spécifier la taille de l’image voulue (taille relative ou dans un format pris en charge : px, in, cm et mm). Photoshop met l’image à l’échelle en conséquence. Par exemple :
  • 200% Ellipse_4.jpg
  • 300 x 200 Rounded_rectangle_3.jpg
  • 10in x 200mm Rounded_rectangle_3.jpg
    

Remarque : n’oubliez pas d’ajouter un espace entre le préfixe et le nom du fichier. Si vous spécifiez la taille en pixels, vous n’avez pas besoin d’indiquer l’unité. Par exemple, 300 x 200.

Paramètres des fichiers PNG

• Ajoutez un suffixe au nom de fichier pour spécifier la qualité de sortie voulue : 8, 24 ou 32. Par exemple :
  • Ellipse_4.png24
• Ajoutez un préfixe au nom de fichier pour spécifier la taille de l’image voulue (taille relative ou dans un format pris en charge : px, in, cm et mm). Photoshop met l’image à l’échelle en conséquence. Par exemple :
  • 42% Ellipse_4.png
  • 300mm x 20cm Rounded_rectangle_3.png
  • 10in x 50cm Rounded_rectangle_3.png

Remarque : n’oubliez pas d’ajouter un espace entre le préfixe et le nom du fichier. Si vous spécifiez la taille en pixels, vous n’avez pas besoin d’indiquer l’unité. Par exemple, 300 x 200.

Paramètres des fichiers GIF

• Ajoutez un préfixe au nom de fichier pour spécifier la taille de l’image voulue (taille relative ou dans un format pris en charge : px, in, cm et mm). Par exemple :
  • 42% Ellipse_4.gif
  • 300mm x 20cm Rounded_rectangle_3.gif
  • 20in x 50cm Rounded_rectangle_3.gif

Remarque : n’oubliez pas d’ajouter un espace entre le préfixe et le nom du fichier. Si vous spécifiez la taille en pixels, vous n’avez pas besoin d’indiquer l’unité. Par exemple, 300 x 200.

Les paramètres de qualité ne sont pas disponibles pour les fichiers GIF.

Noms de calque complexes

Vous pouvez indiquer plusieurs noms de fichier comportant des paramètres lorsque vous renommez un calque afin de générer un fichier. Par exemple :

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

À partir de ce calque, Photoshop génère les fichiers suivants :

• Delicious.jpg (une image JPG de qualité 8 redimensionnée à 120 %)
• Delicious.png (une image PNG de 24 bits redimensionnée à 42 %)
• Delicious_2.jpg (une image JPG à 90 % dont la taille absolue est de 100 x 100 px)
• Delicious.gif (une image GIF redimensionnée à 250 %)

Exemples de mise à l’échelle absolue

Exemples de mise à l’échelle absolue corrects

• 100x80 foo.png (mise à l’échelle absolue simple)
• 80 x 100px foo.png (espaces entre les longueurs)
• 4in x100 foo.png (combinaison d’unités et d’absence d’unité)
• 90mm x120cm foo.png (combinaison de différentes unités)
• 100x? foo.png (caractère générique)
• ?x60in foo.png (caractère générique au début)

Exemples de mise à l’échelle absolue incorrects

• 100x100foo.png (aucun espace avant le nom de fichier)
• 80x100 60% foo.png (combinaison de mise à l’échelle absolue et relative)
• 50% 80x100 foo.png (combinaison de mise à l’échelle absolue et relative)
• 20in cm x50cm foo.png (unités multiples)
• 30nm x20 nano.png (unité non valide)

Formatage et séparation de plusieurs fichiers

Exemples corrects

• Layer 1.png (l’espace dans le nom du fichier est autorisé, ce qui produit un fichier unique appelé « Layer 1.png »)
• Layer 1.png,Layer 2.jpg (virgule comme séparateur)
• Layer 1.png, Layer 2.jpg (virgule suivie d’un ou plusieurs espaces comme séparateur)
• Layer 1.png+Layer 2.jpg (plus comme séparateur)
• Layer 1.png + Layer 2.jpg (plus suivi d’un ou plusieurs espaces comme séparateur)

Tout mettre ensemble

100% Delicious, 42% Layer 1.png24 + 100x100 Layer.jpg-90% , 250% Quux/Foo Bar Baz.gif génère trois fichiers (la chaîne « 100% Delicious » est ignorée, car il ne s’agit pas d’un nom de fichier) :

• Layer 1.png, à 42 % d’échelle, sous forme de fichier png 24 bits
• Layer.jpg, d’une taille absolue de 100 x 100 pixels, sous la forme d’un fichier jpg de qualité à 90 %
• Foo Bar Baz.gif dans le sous-dossier Quux, à l’échelle de 250 %, sous la forme d’un gif

Spécification des paramètres par défaut des fichiers

Vous pouvez spécifier des paramètres par défaut de document pour les fichiers générés. Suivez ces étapes :

1. Créez un calque vide dans le document.
2. Faites commencer le nom du calque par le mot clé default. Définissez les paramètres à appliquer à tous les fichiers d’image générés depuis le document. Par exemple :
   

Génère tous les fichiers d’image dans le sous-dossier hi-res. Par exemple, [dossier de fichiers] /hi-res/Delicious.jpg.

Génère tous les fichiers d’image dans le sous-dossier hi-res. De plus, ajoute le suffixe @2x aux noms de fichier. Par exemple, [dossier de fichiers] /hi-res/Delicious@2x.jpg.

Enregistre les fichiers d’image réduits de 50 % dans le sous-dossier lo-res sous le dossier de fichiers du document 

Génère deux fichiers d’image depuis un calque :

• Dans le sous-dossier hi-res, un fichier d’image dont le nom porte le préfixe @2x.
• Dans le sous-dossier lo-res, un fichier d’image réduit de 50 %.
  

Désactivation de la fonction de génération de fichiers d’image pour tous les documents

Vous pouvez désactiver la fonction de génération de fichiers d’image pour tous les documents en modifiant les préférences Photoshop.

1. Sélectionnez Edition > Préférences > Modules externes.
2. Désélectionnez l’option Activer le générateur.
3. Cliquez sur OK.

Menu Plug-ins générateurs

Avant la version 25.11 de Photoshop sur poste de travail de juillet 2024, les plug-ins générateurs se trouvaient sous le menu Fichier > Générer.

Désormais, tous les plug-ins générateurs, y compris le plug-in Fichiers d’image par défaut, se trouvent sous le menu Fichier > Automatisation > Plug-ins générateurs.  Cette modification a été apportée pour clarifier le nom du sous-menu et le distinguer des nouvelles fonctionnalités génératives telles que Générer une image.

FAQ