Vous pouvez générer des fichiers d’image JPEG, PNG ou GIF à 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 appareils.

Vidéo : Génération de fichiers web dans Photoshop CC

Vidéo : Génération de fichiers web dans Photoshop CC
Cette vidéo vous montre les différentes manières d’utiliser le générateur de fichiers dans Photoshop CC pour produire des images de différentes tailles et résolutions, et les exploiter dans d’autres projets.
Chris Converse

Pour savoir comment créer et générer des images web avec Adobe Generator, voir Extraction de fichiers pour le web.

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

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 :

Photoshop - Génération de fichiers d’image
Fichier PSD et sa hiérarchie de calques

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 > Générer > Fichiers d’image.
  2. Ajoutez les extensions de format de fichier souhaitées (.jpg, .png ou .gif) 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 Ellipsesde la manière suivante : Rounded_rectangles.jpg et Ellipses.png ; renommez le calque Ellipse_4 de la manière suivante : Ellipse_4.gif.

Remarque :

les caractères spéciaux : et * ne sont pas pris en charge dans les noms de calque.

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

Photoshop - Noms de fichier d’image
Les noms de fichier d’image sont générés à partir des noms des calques ou des groupes de calques.

Remarque :

La fonction de génération de fichiers d’image est activée pour le document actif. Une fois activée, cette fonction est disponible à chaque réouverture du document. Pour désactiver la fonction de génération de fichiers d’image pour le document actif, désélectionnez Fichier > Générer > Fichiers d’image.

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

Enregistrements de fichiers dans un sous-dossier

Vous pouvez enregistrer les fichiers d’image générés à partir de calques/groupes de calques dans un sous-dossier directement sous le dossier de 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 :

Une conception de site web et sa hiérarchie de calques
Une conception de site web et sa hiérarchie 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.
Photoshop - Renommer les calques ou les groupes de calques correspondants Photoshop
Photoshop - Renommer les calques ou les groupes de calques correspondants Photoshop

Renommez les calques ou les groupes de calques correspondants.

Remarque :

un fichier d’image unique est généré à partir du contenu d’un groupe de calques ou d’un calque. Par exemple, le groupe de calques AdventureCo Logo de la capture d’écran ci-dessus contient un calque de forme et un calque de texte dynamique. Ces calques sont aplatis lorsqu’un fichier d’image est généré à partir du groupe de calques.

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

Photoshop - Fichiers d’image générés
Fichiers d’image générés

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.

Remarque :

Comme sur l’illustration, vous pouvez mélanger différentes unités et des valeurs en pixels pour préciser la taille de l’image finale souhaitée. Par exemple, 4in x 100 Rounded_rectangle_3.jpg est un nom de calque valide pour la génération du fichier.

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.

Remarque :

Comme sur l’illustration, vous pouvez mélanger différentes unités et des valeurs en pixels pour préciser la taille de l’image finale souhaitée. Par exemple, 4in x 100 Rounded_rectangle_3.png est un nom de calque valide pour la génération du fichier.

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.

Remarque :

Comme sur l’illustration, vous pouvez mélanger différentes unités et des valeurs en pixels pour préciser la taille de l’image finale souhaitée. Par exemple, 4in x 100 Rounded_rectangle_3.gif est un nom de calque valide pour la génération du fichier.

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

A 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 64 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 %)

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 :

default hi-res/

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

défaut hi-res/@2x

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.

default 50% lo-res/

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

default hi-res/@2x + 50% lo-res/

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

Remarque :

les facteurs de mise à l’échelle sont remplacés par ceux définis pour les calques individuels.

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.

Remarque :

la commande de menu Fichier > Générer n’est pas disponible si vous désactivez la génération des fichiers d’image à partir des Préférences. Cette fonction ne peut être réactivée que dans la boîte de dialogue Préférences.

FAQ

Faut-il indiquer des noms de fichier uniques ?

Les noms de fichier doivent être uniques au niveau du document.

Quel est le niveau de qualité par défaut pour la génération de fichiers d’image ?

Les fichiers JPG 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.

Photoshop peut-il générer des fichiers d’image à partir de calques présentant des propriétés de transparence et d’autres effets ?

Oui. La transparence et les autres effets appliqués à un calque sont appliqués aux fichiers générés à partir de ce calque. Cependant, ces effets peuvent être aplatis dans les fichiers générés.

Comment les fichiers d’image sont-ils générés à partir de calques qui débordent de la zone de travail ?

Les fichiers sont écrêtés sur les limites du document. Si une image dépasse les limites du document, Generator ne crée pas les fichiers d’image associés.

La virgule est-elle le seul séparateur autorisé entre les noms de fichier d’image ?

En plus de la virgule (,), vous pouvez utiliser le signe plus (+) comme séparateur entre les noms de fichier d’image. Par exemple :

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

est identique à

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

Vidéo : Création d’un projet Edge Reflow à partir de Photoshop Generator

Vidéo : Création d’un projet Edge Reflow à partir de Photoshop Generator
Cette vidéo vous explique comment créer une mise en forme web adaptée à des formats d’écran allant de 320 pixels à plus de 1 000 pixels.
Chris Converse

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne