Apprenez à extraire d’un document Photoshop des lots d’images de résolutions différentes et optimisées pour le web, notamment des images pour les écrans HiDPI.

À compter du 1er juillet 2022, les fonctionnalités du panneau Extract ne seront plus disponibles dans Dreamweaver 21.2 et les versions antérieures. Pour extraire des informations de style et des ressources à partir de composants PSD, et réutiliser le tout dans Dreamweaver, vous pouvez utiliser Adobe Photoshop.

Illustration d’un plongeur sautant dans une piscine

Utilisez la nouvelle fonction d’extraction par lots pour extraire des images de résolutions différentes en ouvrant un document Photoshop depuis le panneau Extract de Dreamweaver. Vous pourrez ainsi optimiser votre site web et afficher l’image la mieux adaptée à la résolution de l’équipement utilisé.

Site web Queen of Flora affiché sur un ordinateur, une tablette et un téléphone

Chargement d’un fichier PSD dans le panneau Extract de Dreamweaver

Téléchargez et décompressez les fichiers de projet batch-extract-assets.zip. Ouvrez la page index.html dans Dreamweaver, et choisissez l’espace de travail Extract.

Dans le panneau Extract, cliquez sur Charger un PSD et ouvrez le fichier de projet vermilion-design.psd.

Chargez un PSD dans le panneau Extract afin d’afficher les ressources du site dans la vue En direct.

Dans le panneau Extract, sélectionnez l’image d’en-tête et cliquez sur l’icône d’extraction pour accéder aux options associées.

Avant d’extraire les images, vérifiez que l’emplacement et le nom des fichiers sont adaptés à la structure de votre site. Pour ce faire, cliquez sur l’icône Modifier les préférences.

L’image d’en-tête étant sélectionnée, paramétrez les options d’extraction de la ressource.

Définition des préférences du panneau Extract

Par défaut, Dreamweaver extrait votre image dans trois résolutions différentes : MDPI (résolution moyenne), XHDPI (résolution élevée) et XXHDPI (résolution optimale). Dans la boîte de dialogue des préférences :

  1. Spécifiez les résolutions à extraire.

  2. Personnalisez les suffixes que Dreamweaver ajoute au nom du fichier.

  3. Choisissez les dossiers d’enregistrement des images.

Dans la section Dossier, ajoutez la mention images/ au début du chemin d’accès au fichier pour chacune des trois résolutions. Cliquez sur Appliquer. Pour finir, cliquez sur Fermer.

Ajoutez le sous-dossier images/ au début du chemin dans les préférences d’extraction.

Extraction des images

Dans les options d’extraction des ressources, vous pouvez définir d’autres détails, comme le nom de l’élément et le type de fichier.

Cliquez sur Enregistrer plusieurs éléments.

Une fois l’extraction terminée, ouvrez le panneau Fichiers pour voir le résultat du processus d’extraction par lots. Selon les préférences définies dans le panneau Extract, Dreamweaver extrait l’image d’en-tête dans trois résolutions différentes et les ajoute dans des dossiers personnalisés au sein de la structure du site. Un simple clic, et le tour est joué.

Cliquez sur Enregistrer plusieurs éléments dans les options d’extraction.

Ajout d’images dans des requêtes multimédias individuelles

Ouvrez la feuille de style DeviceAware.css qui contient trois requêtes multimédias pour trois résolutions d’écran différentes (petit écran non Retina, écran moyen Retina et écran grand format Retina). Chaque requête multimédia inclut une classe CSS. Dans chaque classe, définissez la propriété background-image et ajoutez l’image extraite qui convient le mieux à chaque requête.

L’exemple ci-contre montre la requête multimédia pour un écran moyen Retina, ainsi que la classe CSS correspondante. Pour cette résolution, il convient de choisir la version XHDPI de notre image.

L’image d’arrière-plan de chaque requête multimédia est définie dans la feuille de style CSS.

Utilisation de pourcentages pour définir la taille des images

Pour les sites web réactifs, utilisez des pourcentages plutôt que des pixels pour définir la largeur, la hauteur et autres propriétés de positionnement.

Pour afficher des pourcentages dans le panneau Extract, sélectionnez l’image d’en-tête et choisissez le symbole %.

Les propriétés de largeur et de hauteur sont à présent affichées en pourcentage. Si vous sélectionnez deux éléments, leur distance sera elle aussi exprimée dans cette unité de mesure. Comme toujours, vous pouvez sélectionner et copier du contenu CSS directement dans le panneau Extract et le coller dans votre code.

Choisissez le pourcentage comme unité de mesure afin de définir des tailles d’image proportionnelles dans le panneau Extract.
02/01/2022

Contributeur : Sergiy Maidukov

Cette page vous a-t-elle été utile ?