Comment fonctionne l’intégration de Photoshop sous Dreamweaver. Utilisez des objets dynamiques dans les workflows Photoshop et Dreamweaver.
Les workflows d’intégration de Photoshop ne sont plus disponibles à compter de la version 21.0 de Dreamweaver.
Vous pouvez insérer des fichiers d’image Photoshop (en format PSD) dans des pages web de Dreamweaver, puis les faire optimiser par Dreamweaver sous la forme d’images web (en formats GIF, JPEG et PNG). Dans ce cas, Dreamweaver insère l’image en tant qu’objet dynamique et conserve une connexion en direct avec le fichier PSD d’origine.
Vous pouvez également coller une image Photoshop à calques multiples ou tranches multiples, en tout ou en partie, dans une page Web de Dreamweaver. Toutefois, lorsque vous effectuez un copier-coller à partir de Photoshop, aucune connexion en direct avec le fichier d’origine n’est conservée. Pour mettre à jour l’image, apportez les modifications dans Photoshop, puis utilisez de nouveau la fonction copier-coller.
Si vous employez souvent cette fonctionna lité d’intégration, il peut être utile de stocker les fichiers Photoshop sur votre site Dreamweaver, de manière à y accéder plus aisément. Dans ce cas, veillez à les voiler, de façon à éviter toute publication des actifs d’origine et tout transfert superflu 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.
Il existe deux principaux flux de production pour traiter les fichiers Photoshop dans Dreamweaver : le flux de production copier/coller et celui des objets dynamiques.
Flux de production copier/coller
Le flux de production copier/coller vous permet de sélectionner des tranches ou des calques dans un fichier Photoshop, puis de passer dans Dreamweaver pour en faire des images compatibles avec une utilisation sur le Web. Toutefois, si vous voulez mettre à jour le contenu ultérieurement, vous devez ouvrir le fichier Photoshop d’origine, effectuer vos modifications, copier de nouveau votre tranche ou votre calque dans le Presse-papiers, puis coller la tranche ou le calque mis à jour sous Dreamweaver. Ce flux de production est recommandé uniquement lorsque vous voulez insérer une partie d’un fichier Photoshop (par exemple, une section d’une composition) en tant qu’image sur une page Web.
Flux de production d’objets dynamiques
Lorsque vous travaillez sur des fichiers Photoshop entiers, Adobe recommande l’utilisation de ce flux de production. Sous Dreamweaver, un objet dynamique désigne une image placée sur une page web avec une connexion en ligne vers un fichier Photoshop (PSD) d’origine. En mode Création dans Dreamweaver, un objet dynamique est signalé par une icône située dans le coin supérieur gauche de l’image.
Lorsque l’image web (c’est-à-dire l’image de la page Dreamweaver) n’est pas 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 en mode Création et que vous cliquez sur le bouton Mettre à jour depuis l’original dans l’inspecteur Propriétés, l’image se met à jour automatiquement avec tous les changements effectués dans le fichier Photoshop d’origine.
Lorsque vous utilisez le flux de production d’objets dynamiques, vous n’avez pas besoin d’ouvrir Photoshop pour mettre à jour une image Web. En outre, toute mise à jour d’objet dynamique sous Dreamweaver est non destructive. Cela signifie que vous pouvez modifier la version Web de l’image sur votre page tout en préservant l’intégrité de l’image Photoshop d’origine.
Vous pouvez également mettre à jour un objet dynamique sans sélectionner l’image Web en mode Création. Le panneau des actifs vous permet de mettre à jour tous les objets dynamiques, y compris les images susceptibles de ne pas pouvoir être sélectionnées dans la fenêtre de 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.
Lorsque vous insérez une image Photoshop (fichier PSD) dans votre page, Dreamweaver crée un objet dynamique. Un objet dynamique est une image web qui conserve une connexion en direct avec l’image Photoshop d’origine. Lorsque vous mettez à jour l’image d’origine dans Photoshop, Dreamweaver vous permet de mettre à jour l’image dans Dreamweaver par simple clic sur un bouton.
Choisissez Insertion > Image.
Vous pouvez également tirer le fichier PSD sur la page, à partir du panneau Fichiers, si vous stockez vos fichiers Photoshop sur 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.
Dreamweaver crée l’objet dynamique sur la base des réglages d’optimisation sélectionnés, puis place une version web de l’image sur votre page. L’objet dynamique conserve une connexion en direct à l’image d’origine et vous signale quand les deux versions ne sont plus synchronisées.
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.
Si vous modifiez le fichier Photoshop auquel votre objet dynamique est lié, Dreamweaver vous informe que l’image web n’est plus synchronisée avec l’original. Sous Dreamweaver, les objets dynamiques sont indiqués par la présence d’une icône dans le coin supérieur gauche de l’image. Lorsque l’image web sous Dreamweaver est synchronisée avec le fichier Photoshop d’origine, les deux flèches de l’icône sont vertes. Lorsque l’image Web n’est plus 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.
Il n’est pas nécessaire que Photoshop soit installé pour que vous puissiez procéder à la mise à jour à partir de Dreamweaver.
Vous pouvez mettre à jour plusieurs objets dynamiques simultanément à l’aide du panneau Actifs. Le panneau Actifs vous permet également de visualiser les objets dynamiques qu’il peut être impossible de sélectionner dans la fenêtre de document (par exemple une image d’arrière-plan CSS).
Assurez-vous que l’affichage Images est bien activé. S’il ne l’est pas, cliquez sur le bouton Images.
Il n’est pas nécessaire que Photoshop soit installé pour que vous puissiez procéder à la mise à jour à partir de Dreamweaver.
Vous pouvez redimensionner un objet dynamique dans la fenêtre de document comme vous le feriez pour n’importe quelle autre image.
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 est de nouveau rendue, de manière non destructive, sur la base du contenu actuel du fichier d’origine ainsi que des paramètres d’optimisation d’origine.
Lorsque vous avez créé un objet dynamique sur votre page Dreamweaver, vous pouvez modifier le fichier PSD d’origine dans Photoshop. Après avoir apporté des modifications dans Photoshop, vous pouvez aisément mettre à jour l’image web sous Dreamweaver.
Veillez à définir Photoshop comme éditeur d’images externe principal.
Cliquez sur le bouton Modifier dans l’inspecteur Propriétés.
Sous Dreamweaver, sélectionnez de nouveau l’objet dynamique, puis cliquez sur le bouton Mettre à jour depuis l’original.
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.
Le tableau suivant énumère 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. |
Vous pouvez copier une image Photoshop, ou une partie de celle-ci, et coller la sélection dans votre page Dreamweaver sous la forme d’une image web. Vous pouvez copier un calque ou un groupe de calques pour une partie sélectionnée de l’image, ou encore copier une tranche de l’image. Toutefois, lorsque vous effectuez cette opération, Dreamweaver ne crée pas d’objet dynamique.
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.
Vous pouvez choisir Sélection > Tout afin de sélectionner rapidement une image entière en vue de la copier.
Choisissez Edition > Coller.
Dans la boîte de dialogue Optimisation de l’image, ajustez les paramètres d’optimisation requis puis cliquez sur OK.
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.
Après avoir copié des images de Photoshop dans vos pages Dreamweaver, vous pouvez modifier le fichier PSD d’origine dans Photoshop. Lorsque vous utilisez le flux d’activités copier/coller, Adobe recommande de toujours apporter vos modifications au fichier PSD d’origine (et non à l’image web), puis à effectuer un nouveau copier/coller, de façon à conserver une source unique.
Assurez-vous que Photoshop est bien défini comme l’éditeur principal pour le type de fichier à modifier.
Ce principe suppose que Photoshop soit défini comme éditeur d’image externe principal pour les fichiers d’image PSD. Il peut également être utile de définir Photoshop comme éditeur par défaut pour les fichiers de type JPEG, GIF et PNG.
À 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.
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.
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 images d’arrière-plan (motifs) si vous insérez un motif qui fait office d’arrière-plan de 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.
Accéder à votre compte