Dans Dreamweaver (vue Design ou Code), placez le point d'insertion sur votre page à l'endroit où vous voulez insérer l'image.
Dernière mise à jour le
27 avr. 2021
Comment fonctionne l’intégration de Photoshop sous Dreamweaver. Utilisez des objets dynamiques dans les workflows Photoshop et Dreamweaver.
À propos de l’intégration de Photoshop
Annotation
Les processus d'intégration Photoshop ne sont plus disponibles dans Dreamweaver 21.0 et les versions ultérieures.
Vous pouvez insérer des fichiers image Photoshop (format PSD) dans des pages web dans Dreamweaver et laisser Dreamweaver les optimiser en tant qu'images prêtes pour le web (formats GIF, JPEG et PNG). Lorsque vous procédez ainsi, Dreamweaver insère l'image en tant qu'objet dynamique et maintient une connexion active avec le fichier PSD d'origine.
Vous pouvez également coller tout ou partie d'une image Photoshop multicouche ou multi-tranche dans une page web dans Dreamweaver. Toutefois, lorsque vous copiez et collez depuis Photoshop, aucune connexion active avec le fichier d'origine n'est maintenue.Pour mettre à jour l'image, apportez vos modifications dans Photoshop, puis copiez et collez à nouveau.
Annotation
Si vous utilisez souvent cette fonction d'intégration, vous pouvez stocker vos fichiers Photoshop dans votre site Dreamweaver pour un accès plus facile. Dans ce cas, veillez à les masquer pour éviter l'exposition des ressources d'origine, ainsi que les transferts inutiles entre le site local et le serveur distant.
Pour suivre un tutoriel consacré à l’intégration de Photoshop avec Dreamweaver, reportez-vous à la page Intégration de Dreamweaver avec Photoshop.
À propos des objets dynamiques et des flux de production entre Photoshop et Dreamweaver
Il existe deux processus principaux pour travailler avec les fichiers Photoshop dans Dreamweaver : le processus de copier/coller et le processus des objets dynamiques.
Flux de production copier/coller
Le processus de copier/coller vous permet de sélectionner des tranches ou des calques dans un fichier Photoshop, puis d'utiliser Dreamweaver pour les insérer en tant qu'images prêtes pour le web. Cependant, si vous souhaitez mettre à jour le contenu ultérieurement, vous devez ouvrir le fichier Photoshop d'origine, apporter vos modifications, copier votre tranche ou calque dans le presse-papiers à nouveau, puis coller la tranche ou le calque mis à jour dans Dreamweaver.Ce processus n'est recommandé que lorsque vous souhaitez insérer une partie d'un fichier Photoshop (par exemple, une section d'une maquette de conception) en tant qu'image sur une page web.
Flux de production d'objets dynamiques
Lorsque vous travaillez avec des fichiers Photoshop complets, Adobe recommande le processus des objets dynamiques. Un objet dynamique dans Dreamweaver est un fichier image placé sur une page web qui possède une connexion active avec un fichier Photoshop (PSD) d'origine. Dans la vue Création de Dreamweaver, un objet dynamique est signalé par une icône dans le coin supérieur gauche de l'image.
Lorsque l'image web (c'est-à-dire l'image sur la page Dreamweaver) n'est plus synchronisée avec le fichier Photoshop d'origine, Dreamweaver détecte que le fichier d'origine a été mis à jour et affiche l'une des flèches de l'icône d'objet dynamique en rouge. Lorsque vous sélectionnez l'image web dans la vue Création et cliquez sur le bouton Mettre à jour depuis l'original dans l'inspecteur Propriétés, l'image se met à jour automatiquement, reflétant toutes les modifications que vous avez apportées au fichier Photoshop d'origine.
Lorsque vous utilisez le processus des objets dynamiques, vous n'avez pas besoin d'ouvrir Photoshop pour mettre à jour une image web. De plus, toutes les mises à jour que vous apportez à un objet dynamique dans Dreamweaver sont non destructives. Autrement dit, vous pouvez modifier la version web de l'image sur votre page tout en gardant l'image Photoshop d'origine intacte.
Vous pouvez également mettre à jour un objet dynamique sans sélectionner l'image web dans la vue Création. Le panneau Fichiers vous permet de mettre à jour tous les objets dynamiques, y compris les images qui ne peuvent pas être sélectionnées dans la fenêtre Document (par exemple, les images d'arrière-plan CSS).
Paramètres d'optimisation d'image
Pour les flux de production copier/coller et d’objets dynamiques, vous pouvez spécifier des paramètres d’optimisation dans la boîte de dialogue Optimisation de l’image. Cette boîte de dialogue vous permet de spécifier le format de fichier et la qualité de l’image. Si vous copiez une tranche ou un calque ou que vous insérez un fichier Photoshop en tant qu’objet dynamique pour la première fois, Dreamweaver affiche cette boîte de dialogue pour vous aider à créer l’image Web.
Si vous copiez une mise à jour dans une tranche ou un calque, Dreamweaver se souvient des paramètres d’origine et recrée l’image Web avec ces paramètres. De même, lorsque vous mettez à jour un objet dynamique à l’aide de l’inspecteur Propriétés, Dreamweaver reprend les paramètres que vous avez utilisés lorsque vous avez inséré l’image pour la première fois. Vous pouvez à tout moment modifier les paramètres d’une image : il vous suffit de sélectionner l’image Web en mode Création, puis de cliquer sur le bouton Modifier les paramètres de l’image dans l’inspecteur Propriétés.
Stockage des fichiers Photoshop
Si vous avez inséré une image Web et que vous n'avez pas enregistré le fichier Photoshop d'origine sur votre site Dreamweaver, Dreamweaver reconnaît le chemin vers le fichier d'origine comme chemin de fichier local absolu (c’est le cas pour les flux de production copier/coller et d’objets dynamiques). Par exemple, si le chemin vers votre site Dreamweaver est C:\Sites\monSite et que votre fichier Photoshop se trouve sous C:\Images\Photoshop, Dreamweaver ne reconnaît pas le fichier d’origine comme faisant partie du site intitulé monSite. Cela pose des problèmes si vous voulez partager ce fichier Photoshop avec d’autres personnes, car Dreamweaver considère uniquement le fichier comme disponible sur un disque dur local spécifique.
Toutefois, si vous stockez le fichier Photoshop sur votre site, Dreamweaver établit un chemin lié au site vers le fichier. Les utilisateurs ayant accès au site pourront également établir le bon chemin vers le fichier, sous réserve que vous leur ayez aussi fourni le fichier d’origine à télécharger.
Pour suivre un tutoriel vidéo consacré à l’édition Roundtrip avec Photoshop, consultez la page Édition Roundtrip avec Photoshop.
Création d’un objet dynamique
Lorsque vous insérez une image Photoshop (fichier PSD) dans votre page, Dreamweaver crée un objet dynamique. Un objet dynamique est une image prête pour le web qui maintient une connexion active avec l'image Photoshop d'origine. Chaque fois que vous mettez à jour l'image d'origine dans Photoshop, Dreamweaver vous donne la possibilité de mettre à jour l'image dans Dreamweaver d'un simple clic sur un bouton.
Choisissez Insertion > Image.
Annotation
Vous pouvez également faire glisser le fichier PSD vers la page depuis le panneau Fichiers si vous stockez vos fichiers Photoshop dans votre site web. Dans ce cas, vous passerez l’étape suivante.
Dans la boîte de dialogue Sélectionner la source de l’image, recherchez votre fichier d’image PSD Photoshop en cliquant sur le bouton Parcourir et en accédant à ce fichier.
Dans la boîte de dialogue Optimisation de l’image qui s’affiche, ajustez les paramètres d’optimisation requis puis cliquez sur OK.
Enregistrez le fichier image prêt pour le web à un emplacement dans le
dossier racine de votre site web.
Dreamweaver crée l'objet dynamique en fonction des paramètres d'optimisation sélectionnés et place une version prête pour le web de l'image sur votre page. L'objet dynamique maintient une connexion active avec l'image d'origine et vous indique quand les deux ne sont pas synchronisés.
Annotation
si vous décidez, par la suite, de modifier les réglages d’optimisation d’une image placée sur vos pages, vous pouvez sélectionner cette image, cliquer sur le bouton Modifier les paramètres de l’image dans l’inspecteur Propriétés, puis apporter les modifications désirées dans la boîte de dialogue Optimisation de l’image. Les modifications apportées dans la boîte de dialogue Optimisation de l’image sont appliquées de façon non destructrice. Dreamweaver ne modifie jamais le fichier Photoshop d’origine et recrée toujours l’image web sur la base des données d’origine.
Pour suivre un tutoriel vidéo consacré à l’édition Roundtrip avec Photoshop, consultez la page Édition Roundtrip avec Photoshop.
Mise à jour d’un objet dynamique
Si vous modifiez le fichier Photoshop auquel votre objet dynamique est lié, Dreamweaver vous informe que l'image prête pour le web n'est pas synchronisée avec l'original. Dans Dreamweaver, les objets dynamiques sont signalés par une icône dans le coin supérieur gauche de l'image. Lorsque l'image prête pour le web dans Dreamweaver est synchronisée avec le fichier Photoshop d'origine, les deux flèches de l'icône sont vertes. Lorsque l'image prête pour le web n'est pas synchronisée avec le fichier Photoshop d'origine, l'une des flèches de l'icône devient rouge.
Pour mettre à jour un objet dynamique à l’aide du contenu actuel du fichier Photoshop d’origine, sélectionnez cet objet dans la fenêtre de document, puis cliquez sur le bouton Mettre à jour depuis l’original de l’inspecteur Propriétés.
Annotation
Vous n'avez pas besoin d'avoir Photoshop installé pour effectuer la mise à jour depuis Dreamweaver.
Mise à jour de plusieurs objets dynamiques
Vous pouvez mettre à jour plusieurs objets dynamiques à la fois en utilisant le panneau Ressources. Le panneau Ressources vous permet également de voir les objets dynamiques qui pourraient ne pas être sélectionnables dans la fenêtre de document (par exemple, les images d'arrière-plan CSS).
Dans le panneau Fichiers, cliquez sur l'onglet Ressources pour afficher
les ressources du site.
Assurez-vous que l’affichage Images est bien activé. S’il ne l’est pas, cliquez sur le bouton Images.
Sélectionnez chaque actif d’image dans le panneau Actifs. Lorsque vous
sélectionnez un objet dynamique, vous verrez l'icône d'objet dynamique dans le coin
supérieur gauche de l'image. Les images ordinaires ne comportent pas cette icône.
Pour chaque objet dynamique que vous souhaitez mettre à jour, cliquez avec le bouton droit
sur le nom du fichier et sélectionnez Mettre à jour depuis l'original. Vous pouvez également maintenir la touche Contrôle enfoncée
pour sélectionner plusieurs noms de fichiers et les mettre à jour tous en même temps.
Annotation
Vous n'avez pas besoin d'avoir Photoshop installé pour effectuer la mise à jour depuis Dreamweaver.
Redimensionnement d’un objet dynamique
Vous pouvez redimensionner un objet dynamique dans la fenêtre de document comme vous le feriez avec n'importe quelle autre image.
Sélectionnez l'objet dynamique dans la fenêtre de document
et faites glisser les poignées de redimensionnement pour redimensionner l'image. Vous pouvez maintenir
les proportions de largeur et de hauteur en maintenant la touche Maj enfoncée pendant
que vous faites glisser.
Cliquez sur le bouton Mettre à jour depuis l’original de l’inspecteur Propriétés.
Lorsque vous mettez à jour l'objet dynamique, l'image web se génère à nouveau de manière non destructive à la nouvelle taille, en fonction du contenu actuel du fichier d'origine et des paramètres d'optimisation d'origine.
Modification du fichier Photoshop d'origine d'un objet dynamique
Après avoir créé un objet dynamique sur votre page Dreamweaver, vous pouvez modifier le fichier PSD d'origine dans Photoshop. Après avoir effectué vos modifications dans Photoshop, vous pouvez ensuite facilement mettre à jour l'image web dans Dreamweaver.
Annotation
Assurez-vous d'avoir défini Photoshop comme éditeur d'images externe principal.
Sélectionnez l’objet dynamique dans la fenêtre de document.
Cliquez sur le bouton Modifier dans l’inspecteur Propriétés.
Apportez les modifications requises dans Photoshop puis enregistrez le nouveau fichier PSD.
Sous Dreamweaver, sélectionnez de nouveau l’objet dynamique, puis cliquez sur le bouton Mettre à jour depuis l’original.
Annotation
si vous avez modifié la taille de l’image dans Photoshop, vous devez réinitialiser la taille de l’image web sous Dreamweaver. Dreamweaver met uniquement à jour l’objet dynamique sur la base du contenu du fichier Photoshop, et pas de sa taille. Pour synchroniser la taille d’une image web avec celle du fichier Photoshop d’origine, cliquez dessus à l’aide du bouton droit, puis choisissez Rétablir la taille selon original.
État des objets dynamiques
Le tableau suivant répertorie les différents états des objets dynamiques.
|
Etat de l’objet dynamique |
Description |
Action conseillée |
|
Images synchronisées. |
L’image Web est synchronisée avec le contenu actuel du fichier Photoshop d’origine. Les attributs de largeur et de hauteur dans le code HTML correspondent aux dimensions de l’image Web. |
Aucun |
|
Actif d’origine modifié. |
Le fichier Photoshop d’origine a été modifié après la création de l’image Web dans Dreamweaver. |
Utilisez le bouton Mettre à jour depuis l’original de l’inspecteur Propriétés pour synchroniser les deux images. |
|
Les dimensions de l’image Web diffèrent de la largeur et de la hauteur HTML sélectionnées. |
Les attributs de largeur et de hauteur dans le code HTML sont différents des dimensions de l’image Web que Dreamweaver a créée lors de l’insertion. Si les dimensions de l’image Web sont plus petites que les valeurs de largeur et de hauteur HTML sélectionnées, l’image peut sembler pixellisée. |
Utilisez le bouton Mettre à jour depuis l’original de l’inspecteur Propriétés pour recréer l’image Web à partir du fichier Photoshop d’origine. Dreamweaver utilise les valeurs de largeur et de hauteur HTML spécifiées pour recréer l’image. |
|
Les dimensions de l’actif d’origine sont trop petites pour les valeurs de largeur et de hauteur HTML sélectionnées. |
Les valeurs de largeur et de hauteur dans le code HTML sont supérieures aux dimensions du fichier Photoshop d’origine. Il se peut que l’image semble pixellisée. |
Ne créez pas d’image Web dont les dimensions sont supérieures aux dimensions du fichier Photoshop d’origine. |
|
Actif d’origine introuvable. |
Dreamweaver ne trouve pas le fichier Photoshop d’origine spécifié dans la zone Original de l’inspecteur Propriétés. |
Corrigez le chemin d’accès au fichier dans la zone Original de l’inspecteur Propriétés, ou déplacez le fichier Photoshop à l’emplacement spécifié actuellement. |
Copier et coller une sélection à partir de Photoshop
Vous pouvez copier tout ou partie d'une image Photoshop et coller la sélection dans votre page Dreamweaver sous forme d'image optimisée pour le web. Vous pouvez copier un seul calque ou un ensemble de calques pour une zone sélectionnée de l'image ou vous pouvez copier une tranche de l'image. Toutefois, lorsque vous procédez ainsi, Dreamweaver ne crée pas d'objet dynamique.
Annotation
Bien que la fonctionnalité Mettre à jour depuis l’original ne soit pas disponible pour les images collées, vous pouvez ouvrir le fichier Photoshop d’origine et le modifier en sélectionnant l’image collée, puis en cliquant sur le bouton Modifier de l’inspecteur Propriétés.
Dans Photoshop, effectuez l’une des opérations suivantes :
- Copiez la totalité ou une partie d’un calque. Pour ce faire, utilisez l’outil Rectangle de sélection pour sélectionner la partie à copier, puis choisissez Édition > Copier. Cette opération ne copie que le calque actif correspondant à la zone sélectionnée dans le presse-papiers. Si vous avez défini des effets basés sur des calques, ils ne sont pas copiés.
- Copiez et fusionnez plusieurs calques. Pour ce faire, employez l’outil Rectangle de sélection pour sélectionner la partie à copier, puis choisissez Edition > Copier avec fusion. Cette opération aplatit et copie tous les calques actifs et inférieurs de la zone sélectionnée dans le presse-papiers. Si des effets basés sur des calques sont associés à l’un de ces calques, ils sont copiés.
- Copiez une tranche. Pour ce faire, sélectionnez la tranche à l’aide de l’outil Sélection de tranche, puis choisissez Edition > Copier. Cette opération aplatit et copie tous les calques actifs et inférieurs de la tranche dans le presse-papiers.
Annotation
Vous pouvez choisir Sélection > Tout afin de sélectionner rapidement une image entière en vue de la copier.
Dans Dreamweaver (mode Création ou Code), placez le point d'insertion
sur votre page à l'endroit où vous souhaitez insérer l'image.
Choisissez Edition > Coller.
Dans la boîte de dialogue Optimisation de l’image, ajustez les paramètres d’optimisation requis puis cliquez sur OK.
Enregistrez le fichier image optimisé pour le web dans un emplacement situé dans le
dossier racine de votre site web.
Dreamweaver définit l’image conformément aux paramètres d’optimisation et en place une version web sur votre page. Les informations relatives à l’image, comme l’emplacement du fichier PSD d’origine, sont enregistrées dans une Design Note, que vous ayez ou non activé les Design Notes pour votre site. La Design Note vous permet de revenir au fichier Photoshop d’origine, afin d’y apporter des modifications, à partir de Dreamweaver.
Modification d’images collées
Après avoir collé des images Photoshop dans vos pages Dreamweaver, vous pouvez modifier le fichier PSD d'origine dans Photoshop. Lors de l'utilisation du processus de copier/coller, Adobe recommande de toujours effectuer vos modifications sur le fichier PSD d'origine (plutôt que sur l'image optimisée pour le web elle-même), puis de recoller pour maintenir la source unique.
Annotation
Assurez-vous que Photoshop est défini comme éditeur d'image externe principal pour le type de fichier que vous souhaitez modifier.
Dans Dreamweaver, sélectionnez
une image optimisée pour le web qui a été créée à l'origine dans Photoshop et effectuez
l'une des opérations suivantes :
- Cliquez sur le bouton Modifier dans l’inspecteur Propriétés de l’image.
- Appuyez sur Contrôle (Windows) ou Commande (Macintosh) tout en double-cliquant sur le fichier.
- Cliquez avec le bouton droit de la souris (Windows) ou cliquez en maintenant la touche Contrôle enfoncée (Macintosh) sur une image, choisissez Modifier l'original avec dans le menu contextuel, puis choisissez Photoshop.
Annotation
Cela suppose que Photoshop est défini comme éditeur d'images externe principal pour les fichiers PSD.Vous pouvez également souhaiter définir Photoshop comme éditeur par défaut pour les types de fichiers JPEG, GIF et PNG.
Modifiez le fichier dans Photoshop.
Revenez à Dreamweaver et collez l'image ou la
sélection mise à jour dans votre page.
À tout moment, si vous souhaitez optimiser à nouveau l’image, vous pouvez la sélectionner, puis cliquer sur le bouton Modifier les paramètres de l’image.
Définition des options de la boîte de dialogue Optimisation de l’image
Lorsque vous créez un objet dynamique ou que vous collez une sélection depuis Photoshop, Dreamweaver affiche la boîte de dialogue Optimisation de l’image. Cette boîte de dialogue s’affiche également pour tout autre type d’image si vous la sélectionnez, puis que vous cliquez sur le bouton Modifier les paramètres de l’image de l’inspecteur Propriétés. Cette boîte de dialogue permet de définir les paramètres d’images Web et d’en afficher un aperçu, de façon à déterminer la combinaison optimale de couleurs, de compression et de qualité.
Une image Web est une image qui peut être affichée par tous les navigateurs Web modernes et qui possède la même apparence, quel que soit le système ou le navigateur utilisé. En règle générale, ces paramètres permettent de parvenir à un compromis entre qualité et taille de fichier.
Annotation
les paramètres que vous sélectionnez n’influent que sur la version importée du fichier d’image. Le fichier PSD (Photoshop) ou PNG (Fireworks) d’origine reste toujours inchangé.
Paramètre prédéfini
Choisissez le paramètre prédéfini qui répond le mieux à vos besoins. La taille de fichier de l’image change en fonction du paramètre prédéfini choisi. Un aperçu instantané de l'image avec le paramètre appliqué s'affiche en arrière-plan.
Par exemple, pour les images qui doivent être affichées avec un haut degré de clarté, choisissez PNG24 pour photos (détails nets).Sélectionnez GIF pour les images d'arrière-plan (motifs) si vous insérez un motif qui servira d'arrière-plan à la page.
Lorsque vous sélectionnez un paramètre prédéfini, ses options configurables sont affichées. Si vous souhaitez personnaliser davantage les paramètres d'optimisation, modifiez les valeurs de ces options.
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
