Adobe Photoshop CC

Création et production d'illustrations web avec Adobe Generator

Apprenez à produire automatiquement des images transparentes, optimisées et parfaitement cadrées à partir de fichiers Photoshop multicalques. (Lecture : 30 min)

Création et production d'illustrations web avec Adobe Generator

30 min

Produisez automatiquement des illustrations web à l'aide d'un nouveau flux de production.

Avec Adobe Photoshop CC, vous pouvez facilement créer des ressources d'image à partir de compositions destinées à un site web. Vous pouvez aussi créer un projet Adobe Edge Reflow CC incluant les ressources graphiques, le code HTML et le code CSS, ce qui facilite la création de mises en forme réactives pour vos sites web. Dans cet article, vous allez commencer par créer des ressources d'image dans Photoshop CC, puis générer un projet Edge Reflow CC qui vous aidera à créer une mise en forme réactive pour votre site web.

De quoi ai-je besoin ?

Télécharger les fichiers Fichiers d'exemple pour le projet Generator (ZIP, 63 Mo)

Télécharger les fichiers Fichiers d'exemple pour le projet Edge Reflow (ZIP, 62 Mo)

Le nom des calques, un élément essentiel

Avec Adobe Generator, Photoshop produit automatiquement des images transparentes, optimisées et parfaitement cadrées à partir de fichiers PSD multicalques. Cette fonction intelligente intégrée vous permet de travailler normalement sur votre composition pendant que Generator crée les ressources graphiques en arrière-plan. Lorsque vous ajoutez l'extension .jpg au nom d'un calque, Generator enregistre automatiquement ce dernier au format JPEG (voir Figure 1). Et si vous modifiez ce calque — par exemple, la couleur — Photoshop actualise instantanément le fichier JPEG enregistré. 

Figure 1. Si vous modifiez le nom d'un calque dans un fichier PSD, le contenu de ce calque sera exporté sous la forme d'une ressource.

Generator étant un module externe JavaScript Open Source, vous pouvez le personnaliser en fonction de vos besoins.

Génération automatique de fichiers d'image

Pour vous aider à comprendre le fonctionnement de Generator, j'ai créé un fichier Photoshop multicalque nommé design_comp.psd, qui présente une composition web classique (voir Figure 2). Ce fichier contient des photographies, des éléments typographiques, des objets dynamiques et des masques d'écrêtage. Téléchargez le fichier d'exemple (voir le lien Télécharger les fichiers ci-dessus). Si vous n'avez pas installé la dernière version d'Adobe Photoshop CC, téléchargez la version d'essai.

  1. Lancez Photoshop CC et ouvrez le fichier design_comp.psd. Choisissez Fichier > Générer > Fichiers d'image pour activer le module externe. Son activation est signalée par une coche en regard de l'option Fichiers d'image.

  2. Dans le panneau Calques (Fenêtre > Calques), recherchez le calque nommé Barrels. Double-cliquez dessus, renommez-le Barrels.jpg et appuyez sur Entrée.

Et voilà ! Vous venez d'utiliser Generator.

La preuve : quand vous ouvrez le dossier dans lequel vous avez enregistré le fichier design_comp.psd, vous constatez qu'un dossier nommé design_comp-assets contenant le nouveau fichier Barrels.jpg a été créé.

Pour obtenir un aperçu de mon workflow Generator, visionnez la vidéo 1.

Vidéo 1. Cette vidéo vous montre comment utiliser le générateur de ressources dans Photoshop CC pour produire des images de différentes tailles et résolutions, et les exploiter dans d'autres projets.

Les noms de calque travaillent pour vous

Comme vous pouvez le constater, Generator est très simple à utiliser. Je vais toutefois vous donner quelques conseils pour optimiser son utilisation. N'hésitez pas à tester ces techniques avec le fichier PSD associé à ce tutoriel.

  • Description : attribuez à vos calques des noms plus parlants que Calque 1 et Calque 2.
  • Variété de formats : le format JPEG n'est pas votre seule option. Les processus de dénomination et d'enregistrement automatique s'appliquent également aux calques portant l'extension .gif et .png.
  • Rétrécissement : pour obtenir une ressource plus petite que le calque d'origine, ajoutez un chiffre, un pourcentage ou un espace devant le nom du calque concerné. Par exemple, si vous ajoutez 50% devant le nom du calque barrels.jpg, vous obtiendrez une image deux fois plus petite que l'original.
  • Agrandissement : la tâche s'avère plus délicate si vous souhaitez agrandir les ressources par rapport au calque d'origine, sans perdre en qualité. La première version de Generator ne permet d'agrandir que les calques de forme et de texte Photoshop.
  • Compression : pour générer des fichiers JPEG avec une certaine qualité de compression, ajoutez un chiffre compris entre un et dix (sans espace) après l'extension .jpg. Par exemple, si vous nommez un calque photo.jpg8, vous obtiendrez un fichier JPEG avec une qualité de compression de 80 %.
  • Transparence : vous pouvez créer des images web semi-transparentes en spécifiant le format PNG dans le nom du calque. Si l'illustration d'un calque contient des zones transparentes, celles-ci seront préservées dans l'image générée. Si vous ajoutez simplement l'extension .pgn, Generator saura s'il doit générer un fichier PNG-32, PNG-24 ou PNG-8, en fonction du type de l'illustration sur le calque. Si vous souhaitez obtenir un format précis, ajoutez l'extension .png32, .png24 ou .png8 au nom du calque. Pour les images simples qui ne sont pas des photos, le format PNG-8 permet de produire des fichiers de taille extrêmement réduite avec une légère perte de qualité, et prend en charge les pixels semi-transparents (ce qui n'est pas le cas de la fonction Enregistrer pour le Web).
  • Simulation de transparence : le format GIF gère également la transparence sur un bit. L'image contient une couleur de cache qui simule les pixels semi-transparents. Si l'illustration d'un calque contient des zones transparentes, il suffit d'utiliser l'extension .gif pour obtenir un fichier GIF transparent. Dans cette première version de Generator, un cache de couleur blanche est défini pour l'ensemble des fichiers GIF transparents.
  • Regroupement : pour générer une illustration à partir de plusieurs calques, créez un groupe de calques, puis renommez-le. Tous les calques seront assemblés dans une seule et même image web.
  • Génération de calques : vous pouvez également générer tous les calques d'un masque d'écrêtage en renommant le calque cible.
  • Nettoyage : pour supprimer une ressource du dossier généré automatiquement, il suffit de supprimer l'extension .jpg, .png ou .gif du nom du calque correspondant.

Génération de documents Edge Reflow

Bien que la génération d'images optimisées pour le web constitue une part importante de la préparation de mon site web, il me reste encore beaucoup à faire. Ayant déjà passé un temps fou à définir les styles et mises en forme dans Photoshop, j'espère pouvoir créer rapidement les ressources réactives et obtenir une première ébauche de site web.

Heureusement, Photoshop Generator peut m'aider dans cette tâche : il est en effet capable de convertir les mises en page Photoshop en projets Edge Reflow CC. Outre la création de fichiers d'image, le générateur convertit les calques de texte en contenu HTML, regroupe les éléments et sections dans des balises div, crée les feuilles de style CSS nécessaires et assemble le tout dans un projet Edge Reflow exploitable immédiatement.

Edge Reflow CC est un outil de conception graphique autorisant la mise en forme visuelle de pages web réactives. Une poignée au centre de l'interface permet de redimensionner la fenêtre du document et d'adapter le contenu à divers formats d'écran.

Remarque : pour accéder au module externe Generate Reflow Project dans Photoshop CC, vous devez disposer de la dernière mise à niveau de Photoshop CC accessible via Creative Cloud et de la version la plus récente d'Edge Reflow CC. Une fois l'installation d'Edge Reflow CC terminée, vous devrez fermer puis rouvrir Photoshop CC pour voir apparaître l'élément Projet Edge Reflow dans le menu Fichier > Générer de Photoshop.

Manipulation de compositions Photoshop dans Edge Reflow

Après avoir généré votre projet Edge Reflow à partir de Photoshop, vous pouvez manipuler les ressources pour créer des mises en forme adaptées aux formats des requêtes multimédias de votre projet (voir Figure 3). Structurez correctement vos ressources Edge Reflow pour garantir le bon déroulement des étapes suivantes de la conception de votre site réactif. 

Figure 3. En structurant correctement votre composition Photoshop dans Edge Reflow, vous pourrez plus facilement adapter votre contenu réactif à chacun des formats de requêtes multimédias ciblés.

Création d'une mise en forme réactive à partir des ressources générées

J'ai créé le fichier multicalque responsive_comp.psd, qui contient les ressources nécessaires pour vous aider à démarrer un projet Edge Reflow (voir Figure 4). Téléchargez le fichier d'exemple pour suivre (voir le lien Télécharger les fichiers ci-dessus).

Figure 4. Vous allez tout d'abord utiliser ce fichier d'exemple PSD pour créer une mise en forme réactive à partir des ressources Photoshop.
  1. Ouvrez Photoshop CC, puis le fichier responsive_comp.psd. Choisissez Fichier > Générer > Projet Edge Reflow. Le projet Edge Reflow et les fichiers d'image associés sont enregistrés dans le même dossier que votre fichier d'exemple PSD.
  2. Démarrez Edge Reflow CC et ouvrez le projet responsive_comp.rflw.
  3. Utilisez Edge Reflow CC pour structurer vos ressources et définir les mises en forme en fonction des requêtes multimédias de votre site.

Pour savoir comment utiliser les ressources générées à partir de Photoshop CC dans Edge Reflow CC, visionnez la vidéo 2. 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.

Amélioration de la mise en forme réactive

Une fois votre projet Edge Reflow créé dans Photoshop CC, il vous restera certains détails à corriger pour finaliser la mise en forme réactive. N'hésitez pas à tester ces techniques avec le fichier PSD associé à ce tutoriel :

  • Formats : générez des images adaptées au format des requêtes multimédias de votre mise en forme réactive. Déterminez les éléments de tailles fixe et relative.
  • Polices : éliminez les problèmes de polices manquantes grâce au service Edge Web Fonts, accessible directement dans Edge Reflow CC.
  • Prévisualisations fréquentes : utilisez le panneau Éléments pour vérifier la structure globale de votre contenu web réactif. Utilisez la poignée de redimensionnement pour prévisualiser différents formats de requêtes multimédias et déterminer le type de configuration nécessaire pour structurer les ressources en conséquence.
  • Optimisation : ajustez la position de chaque élément en fonction du format des différentes requêtes multimédias.
  • Couleurs précises : revenez dans Photoshop CC pour obtenir aisément les valeurs HEX des différentes couleurs de votre contenu.
  • Mobilité : utilisez des points d'arrêt pour adapter la mise en forme de votre site en fonction des équipements ciblés.

Pour aller plus loin

Pour en savoir plus, consultez l'article Introducing Adobe Generator for Photoshop CC (Présentation d'Adobe Generator pour Photoshop CC) de Stephen Nielson, chef de produit Photoshop. Vous y trouverez de précieuses informations.

Si vous connaissez JavaScript et souhaitez utiliser le module externe Photoshop Generator dans vos propres workflows, les ressources ne manquent pas. Vous trouverez le code source de Generator sur le site GitHub. Pour des tutoriels orientés personnalisation, consultez l'article intitulé Script your first Adobe Generator plug-in for Photoshop (Programmation du module externe Adobe Generator pour Photoshop) de Tom Krcha, et visionnez la vidéo de présentation de Photoshop Generator de Lee Brimelow.

Certains professionnels ont déjà personnalisé leurs modules externes. Vous pouvez par exemple visionner la vidéo intitulée Writing Generator plug-ins: Making Photoshop yours (Programmation des modules externes Generator : adaptez Photoshop à vos besoins) de Tim Riot.

Elle offre une vue d'ensemble d'Adobe Edge Reflow et explique comment certains professionnels du web utilisent cet outil pour créer des contenus web réactifs.

Vous pouvez enfin vous rapprocher de l'équipe Edge Reflow pour savoir comment créer des compositions de plusieurs pages dans Edge Reflow CC.

 

Donnez-nous votre avis.

Et voilà, vous avez terminé !

chris-converse_83x83

Chris Converse

Chris Converse est designer et développeur chez Codify Design Studio. Ses compétences lui permettent de créer des contenus s'exécutant de manière optimale sur une multitude de supports. Chris Converse est également présent sur les salons Adobe MAX et How Design, et propose des formations sur lynda.com, Udemy.com et AdobeKnowHow.com.