Découvrez comment convertir rapidement vos fichiers PSD en conceptions web HTML pour une utilisation sur appareils mobiles ou postes de travail. Extrayez des feuilles CSS, images, mesures, polices, couleurs, dégradés, et bien plus, de Photoshop directement dans Dreamweaver.

Remarque :

  Typekit s’appelle désormais Adobe Fonts et est inclus avec Creative Cloud et d’autres abonnements. En savoir plus.

L’intégration d’Extract avec Dreamweaver permet aux designers et développeurs web d’appliquer les informations sur la conception et d’extraire des actifs optimisés pour le web au sein de l’environnement de codage. Extract fournit une solution complète et indépendante pour l’extraction d’informations sur le style d’actifs de compositions PSD, réduisant ainsi les besoins d’aller-retour entre Photoshop et Dreamweaver.

Avec le panneau Extract de Dreamweaver, vous pouvez extraire des CSS, des images, des polices, des couleurs, des dégradés et des mesures directement dans votre page web. Outre ces fonctions principales d’Extract, Dreamweaver fournit également les fonctions uniques suivantes :

extract_logo
  • Accès direct aux fichiers PSD sur Creative Cloud et à tous les fichiers PSD partagés avec vous dans un dossier de collaboration
  • Conseils de code contextuels pour définir facilement des polices, des couleurs et des dégradés dans votre code CSS
  • Prise en charge de la fonction glisser-déposer pour créer des balises d’image à partir de calques PSD
  • Possibilité de coller directement des styles en mode En direct (par exemple, CSS Designer et Affichage d’élément)

Prise en main d’Extract

Extract dans Dreamweaver vous permet d’accéder à vos fichiers PSD directement depuis le panneau Extract de Dreamweaver. Pour plus d’informations sur le panneau et l’espace de travail Extract et sur le chargement de vos fichiers PSD dans le panneau Extract, consultez les rubriques suivantes :

Panneau et espace de travail Extract

L’espace de travail Extract est conçu pour vous aider à utiliser Extract avec Dreamweaver de manière efficace. Dans cet espace de travail, le panneau Extract apparaît sur la gauche et votre page web s’affiche sur la droite dans l’affichage à deux volets (modes En direct et Code). Vous pouvez personnaliser l’espace de travail en faisant glisser, en ancrant ou en réduisant les panneaux selon vos besoins. Vous pouvez également enregistrer un espace de travail personnalisé pour une utilisation ultérieure.

Remarque :

Si vous devez fermer le panneau Extract, utilisez les touches de raccourci clavier - Ctrl + K (Win), Cmd + K (Mac) - ou sélectionnez Fenêtre > Extract pour rouvrir le panneau.

Lors du premier lancement de Dreamweaver, le panneau Extract affiche un tutoriel interactif pour vous aider à découvrir les différents workflows. Vous pouvez utiliser la liste déroulante en haut du panneau pour passer d’un tutoriel à l’autre.

Après avoir utilisé le tutoriel, vous pouvez cliquer sur Mise en route pour commencer à utiliser Extract sous Dreamweaver. Le panneau Extract affiche des vignettes des dossiers et des fichiers PSD dans votre compte Creative Cloud. Ces fichiers ont été téléchargés ou synchronisés depuis votre bureau, ou sont les fichiers partagés avec vous par l’intermédiaire d’un dossier de collaboration sur Creative Cloud.

Panneau Extract affichant les fichiers PSD enregistrés sur Creative Cloud
Panneau Extract affichant les fichiers PSD enregistrés sur Creative Cloud

Remarque :

Pour relancer le tutoriel, cliquez sur le menu déroulant dans l’angle supérieur droit du panneau et sélectionnez Lancer le tutoriel.

Chargement de fichiers PSD dans Creative Cloud

Vous pouvez charger un fichier PSD de Creative Cloud en cliquant sur l’icône Charger un PSD dans le panneau Extract. Si les compositions PSD sont développées par une personne ou une équipe différente, vous pouvez faire qu’elles soient partagées sur Creative Cloud. Vous pouvez ensuite télécharger les fichiers, et les charger directement sur votre compte en vous connectant à Creative Cloud ou via le panneau Extract sous Dreamweaver.

Ouverture de fichiers PSD dans le panneau Extract

Cliquez sur la vignette du fichier PSD requis dans le panneau Extract. Si une version mise à jour du fichier PSD devient disponible sur Creative Cloud après que vous l’ayez ouvert, rechargez le fichier PSD dans le panneau Extract. Pour ce faire, cliquez sur le nom du fichier PSD ou cliquez sur Recharger PSD dans le menu déroulant dans l’angle supérieur droit. Pour revenir sur la vignette et sélectionner un autre fichier, cliquez sur l’icône Creative Cloud dans l’angle supérieur gauche du panneau.

Pour agrandir l’affichage et observer de plus près la conception, modifiez l’échelle en haut du panneau Extract ou utilisez la touche Alt +/-. Utilisez l’onglet Calques ou la liste déroulante Composition de calques pour afficher ou masquer les éléments du fichier PSD.

Vous êtes maintenant prêt à convertir la composition PSD en site web. 

Définition des préférences Extract

À l’aide des préférences d’Extract, vous pouvez spécifier le format de fichier par défaut dans lequel les images doivent être extraites, ainsi que l’unité par défaut des polices à afficher dans le panneau Extract.

  1. Cliquez sur Édition > Préférences (Win) ou Dreamweaver > Préférences (Mac).

  2. Sélectionnez Extract dans la liste Catégorie.

  3. (Facultatif) Modifiez le format par défaut dans lequel les images doivent être extraites.

    Format d’image extrait dans Dreamweaver CC
    Format de l’image extraite
  4. (Facultatif) Dans la section Extract pour les périphériques, sélectionnez les résolutions requises. Ces paramètres sont utilisés lorsque vous choisissez d’enregistrer plusieurs versions d’une image dans différentes résolutions.

    • Pour enregistrer ces versions en y ajoutant des suffixes, cliquez sur la ligne correspondante de la colonne Suffixe, puis saisissez le texte de votre choix. 
    • Pour enregistrer les différentes versions dans des dossiers de sortie distincts, cliquez sur la ligne correspondante de la colonne Dossier, puis indiquez chaque chemin d’accès relatif.
    Extract pour les périphériques
    Extract pour les périphériques
  5. (Facultatif) Cliquez sur Vider la mémoire cache pour supprimer les données mises en mémoire cache concernant l’utilisation d’Extract.

  6. Cliquez sur Appliquer, puis fermez la boîte de dialogue Préférences.

  7. Pour afficher les modifications dans le panneau Extract, rechargez le PSD (menu déroulant > Recharger PSD).

    Option Recharger PSD dans le panneau Extract
    Option Recharger PSD dans le panneau Extract

Extraction de code CSS de fichiers PSD

Vous pouvez copier toutes ou certaines propriétés CSS des éléments dans une composition PSD et coller directement les styles dans CSS Designer, dans l’Affichage d’élément en mode En direct ou dans votre code (source CSS ou document HTML).

En outre, des conseils de code sont automatiquement renseignés avec les propriétés CSS de l’élément que vous sélectionnez dans la composition PSD. Si vous préférez coder, vous pouvez utiliser ces conseils de code pour extraire les propriétés CSS dans le code.

  1. Dans le panneau Extract (Fenêtre > Extract), cliquez sur le fichier PSD requis. La vignette du PSD s’agrandit, ce qui permet de voir clairement la composition.

  2. Dans le fichier PSD, cliquez sur l’élément ou l’actif requis. Une fenêtre contextuelle contenant la liste des propriétés CSS de l’élément apparaît et vous offre la possibilité de les sélectionner et de les copier. La largeur et la hauteur de l’élément sélectionné peuvent être exprimées en pixels ou en pourcentages.

    Remarque : Si vous optez pour les pourcentages, les mesures seront également indiquées sous forme de pourcentages.

    Option Copier le CSS dans le panneau Extract
    Option Copier le CSS dans le panneau Extract

    Pour copier le CSS, sélectionnez les propriétés à copier, puis cliquez sur Copier CSS. 

  3. Collez le CSS dans votre document en utilisant l’une des méthodes suivantes :

    • Pour coller le CSS dans CSS Designer, cliquez sur le sélecteur requis, puis cliquez sur Coller les styles.
    • Pour coller le CSS à l’aide de l’Affichage d’élément, cliquez sur un sélecteur avec le bouton droit, puis cliquez sur Coller les styles.
    • Pour coller le CSS dans le code, placez le point d’insertion à l’endroit requis, cliquez avec le bouton droit, puis cliquez sur Coller.

Pour utiliser des conseils de code pour extraire le CSS, procédez comme suit :

  1. Ouvrez une source CSS associée à votre document ou passez en mode Code pour un document HTML.

  2. Dans le panneau Extract, cliquez sur le fichier PSD requis, puis sur l’élément requis dans la composition.

  3. Dans le document, placez le point d’insertion à l’emplacement requis dans le code. 

  4. Commencez à saisir le nom d’une propriété CSS pour afficher les conseils de code contenant les propriétés CSS de l’élément sélectionné dans la composition PSD. Cliquez sur la propriété CSS requise pour l’insérer dans le code.

    Conseils de code avec une propriété CSS d’un élément dans un fichier PSD
    Conseils de code avec une propriété CSS d’un élément dans un fichier PSD
  5. Pour extraire plusieurs propriétés CSS, sélectionnez les propriétés requises dans le panneau contextuel Extract. Cliquez ensuite sur Insérer la sélection dans les conseils de code.

    Insertion par lots de propriétés CSS dans Dreamweaver CC
    Insertion par lots de propriétés CSS

Copie de texte depuis des fichiers PSD

Le texte ou le contenu dans vos compositions PSD peuvent être insérés dans votre page web en un simple clic. Pour copier le texte de votre composition PSD dans le panneau Extract, sélectionnez un élément de texte, puis cliquez sur Copier le texte. Le texte est copié dans le presse-papiers. Vous pouvez ensuite coller le texte où requis.

Option Copier le texte dans le panneau Extract
Option Copier le texte dans le panneau Extract

Remarque :

Après avoir extrait le texte, vous pouvez extraire des propriétés, telles que la police et les couleurs associés au texte. Pour plus d’informations, consultez la section Extraction de polices, couleurs et dégradés à partir des fichiers PSD.

Extraction d’images depuis des fichiers PSD

Vous pouvez simplement faire glisser un calque de vos compositions PSD, depuis le panneau Extract vers un endroit précis dans la vue En direct de votre page web. Les aides visuelles du mode En direct, telles que les icônes Guides en direct et DOM, vous aident à positionner les éléments de votre choix. Quand vous marquez une pause de quelques instants avant de déposer un élément, l’icône DOM (</>) apparaît. Lorsque vous passez la souris sur cette icône, la structure DOM s’affiche et vous pouvez y déposer l’élément. Si vous préférez passer par du code, vous pouvez utiliser les conseils de code contextuels et extraire des images. Les conseils de code permettent d’extraire les couleurs et les dégradés en tant qu’images.

Remarque :

Si votre fichier PSD contient plusieurs plans de travail, chacun d’entre eux est représenté par un dossier dans le volet Calques. Vous pouvez développer ou réduire chaque dossier pour afficher ou masquer son contenu. Pour zoomer sur un plan de travail donné, cliquez simplement sur son nom. Pour dézoomer, cliquez n’importe où en dehors du plan de travail, puis cliquez sur AJUSTER.

Avant d’insérer l’image extraite, Dreamweaver affiche le nom de l’image, nom que vous pouvez modifier. Par défaut, l’image est enregistrée dans le dossier racine du site. Si vous souhaitez enregistrer l’image dans un emplacement personnalisé, vous pouvez inclure le chemin d’accès complet au répertoire avec le nom.

Remarque : Si vous extrayez une image dans un document qui ne fait partie d’aucun site défini, l’image est extraite dans le répertoire dans lequel se trouve le document. Pour les documents non enregistrés, vous êtes invité à d’abord enregistrer le document.

Vous pouvez également enregistrer l’image en local et y refaire appel plus tard pour l’intégrer à votre page web. En outre, si vous créez un site web réactif, vous pouvez enregistrer plusieurs versions d’une image, avec différentes résolutions, d’un simple clic.

  1. Dans le panneau Extract, cliquez sur le fichier PSD à partir duquel télécharger les images.

  2. Cliquez sur l’image appropriée dans le fichier PSD.

    Remarque :

    Utilisez l’onglet Calques et la liste déroulante Composition de calques du panneau Extract pour afficher ou masquer les images dans la composition PSD. Si une image comprend plusieurs calques, vous pouvez choisir le calque de l’image à extraire.

    Notez que les conseils de code s’affichent en mode Code sur la droite de l’espace de travail. 

  3. Pour importer plusieurs images, maintenez enfoncée la Maj ou la touche Commande, puis cliquez sur les images concernées. Les images sélectionnées sont extraites comme une seule image.

  4. Effectuez l’une des actions suivantes :

    • Dans la fenêtre contextuelle qui s’affiche lorsque vous cliquez sur l’image, cliquez sur . Indiquez le chemin, le nom et le format du fichier, ainsi que le facteur d’échelle (si nécessaire). Ensuite, effectuez l’une des actions suivantes :
      • Cliquez sur Enregistrer pour enregistrer l’image à la résolution 1x. Pour redimensionner l’image, sélectionnez l’option Echelle et indiquez le facteur d’échelle.
      • Cliquez sur Enregistrer plusieurs éléments pour enregistrer plusieurs versions de l’image, dans différentes résolutions. Il n’est pas impératif que le fichier PSD contienne ces versions : Dreamweaver peut enregistrer l’image dans différentes résolutions au moment de l’extraction.

    Vous pouvez indiquer les résolutions requises et le dossier de sortie correspondant dans les Préférences.

    Extraction de l’image à l’aide de l’icône Extraire l’actif
    Extraction de l’image à l’aide de l’icône Extraire l’actif
    • Faites glisser l’image de votre document en mode En direct. En mode En direct, les Guides en direct s’affichent pour vous aider à positionner l’image.

    Lorsque vous déposez l’image, Dreamweaver affiche le nom de l’image. Vous pouvez non seulement modifier le nom de l’image, mais aussi son extension ; appuyez ensuite sur Entrée pour enregistrer l’image. Par défaut, l’image est enregistrée dans le dossier racine du site. Pour enregistrer l’image dans un emplacement personnalisé, entrez le chemin avec le nom.

    Option de modification du nom et de l’extension du fichier lorsque vous faites glisser une image depuis le panneau Extract
    Option de modification du nom et de l’extension du fichier lorsque vous faites glisser une image depuis le panneau Extract
    • Lorsque vous cliquez sur l’image, les conseils de code contextuels sous Dreamweaver sont renseignés. Dans le mode Code de votre document HTML ou dans le document CSS, placez le curseur au point d’insertion. Après avoir saisi le nom de l’image d’arrière-plan ou la balise <img>, le nom de l’image sélectionnée apparaît dans les conseils de code. Sélectionnez l’image, modifiez le nom et l’extension si nécessaire, puis appuyez sur Entrée.

    Par défaut, l’image est enregistrée dans le dossier racine du site. Pour enregistrer l’image dans un emplacement personnalisé, entrez le chemin de fichier personnalisé avec le nom.

    Extraction d’images à l’aide des conseils de code
    Extraction d’images à l’aide des conseils de code

Extraction de mesures des fichiers PSD

À l’aide du panneau Extract, vous pouvez facilement afficher et extraire la valeur de la mesure entre deux éléments dans la composition PSD. 

  1. Dans le fichier PSD dans le panneau Extract, cliquez sur les éléments requis en maintenant la touche Maj ou la touche Commande enfoncée.

    Le panneau Extract affiche les distances horizontale et verticale entre les deux éléments.

    Mesures dans le panneau Extract
    Mesures dans le panneau Extract

    Remarque :

    Pour afficher les mesures sous la forme de pourcentages, cliquez sur un élément et choisissez Pourcentage.

  2. Cliquez sur la valeur requise pour la copier dans le Presse-papiers.

  3. Collez cette valeur où requis, par exemple, dans les propriétés CSS de CSS Designer ou dans votre code.

Extraction de polices, couleurs et dégradés à partir des fichiers PSD

À l’aide du panneau Extract, vous pouvez extraire des propriétés CSS des polices, couleurs ou dégradés utilisés dans votre composition PSD.

  1. Dans le panneau Extract, cliquez sur Styles.

  2. Pour extraire des polices, procédez comme suit dans la section Polices.

    1. Développez le type de la police requise.

      Pour afficher plus d’informations sur la police, cliquez sur l’icône Adobe Fonts ().

    2. Cliquez sur le format et la taille à copier puis, dans la fenêtre contextuelle qui s’affiche, cliquez sur Copier CSS. Extrayez les balises des éléments de texte qui utilisent la police, le format et la taille sur lesquels vous avez cliqué.

      Remarque :

      Vous pouvez modifier l’unité de la police en « em » ou « rem » dans les préférences Extract (Préférences > Extract). Cliquez sur Recharger PSD dans le menu déroulant situé dans l’angle supérieur droit du panneau Extract pour voir les modifications.

      Extraction de polices
      Extraction de polices
    3. Collez le CSS à l’endroit requis, par exemple, dans le code ou dans CSS Designer.

    Pour extraire des couleurs, procédez comme suit dans la section Couleurs :

    1. Cliquez sur la nuance de couleur requise. Extrayez les balises les éléments qui utilisent la couleur sélectionnée.

      Remarque : vous pouvez également sélectionner une autre couleur de la composition PSD à l’aide du sélecteur de couleurs.

    2. Dans la fenêtre contextuelle qui s’affiche lorsque vous cliquez sur la nuance de couleur, sélectionnez le modèle de couleur requis (RVB, hexadécimal ou TSI), puis copiez (Ctrl+c ; Cmd+c) la valeur chromatique.

      Extraction de couleurs
      Extraction de couleurs
    3. Collez la valeur chromatique où requis, par exemple, dans le code ou dans CSS Designer.

  3. Pour extraire les dégradés, cliquez sur une nuance de dégradé dans la section Dégradés. Dans la fenêtre contextuelle qui s’affiche, cliquez sur Copier CSS. Collez le CSS où requis, par exemple, dans le code ou dans CSS Designer.

    Les préfixes fournisseur sélectionnés dans les préférences (Préférences > Styles CSS) sont également collés avec les dégradés. Si vous extrayez un dégradé radial, le CSS correspondant est inséré sans préfixe fournisseur, les dégradés radiaux n’étant pas pris en charge.

    Extraction de dégradé
    Extraction de dégradé

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