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.
Ce qu'il vous faut
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é.
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.
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.
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 :
- Spécifiez les résolutions à extraire.
- Personnalisez les suffixes que Dreamweaver ajoute au nom du fichier.
- 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.
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é.
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.
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.
