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.
Remarque :
si vous utilisez souvent cette fonctionnalité 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 sous Dreamweaver : le flux de production copier/coller et celui des objets dynamiques.
Le flux de production copier/coller permet de sélectionner des tranches ou des calques dans un fichier Photoshop, puis de passer sous Dreamweaver pour en faire des images compatibles avec une utilisation sur Internet. 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.
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 sous 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 Actifs 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).
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.
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 sous Dreamweaver par simple clic sur un bouton.
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.
Remarque :
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.
Remarque :
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).
-
Pour chaque objet dynamique à mettre à jour, cliquez sur le nom de fichier à l’aide du bouton droit, puis choisissez Mettre à jour depuis l’original. Vous pouvez également sélectionner plusieurs noms de fichier en cliquant dessus tout en maintenant la touche Ctrl enfoncée, de manière à les mettre à jour ensemble.
Remarque :
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.
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.
Remarque :
veillez à définir Photoshop comme éditeur d’images externe principal.
Remarque :
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 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 sous 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.
Remarque :
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.
-
- 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, utilisez l’outil Rectangle de sélection pour sélectionner la partie à copier, puis choisissez Édition > 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 Édition > Copier. Cette opération aplatit et copie tous les calques actifs et inférieurs de la tranche dans le presse-papiers.
Remarque :
Vous pouvez choisir Sélection > Tout afin de sélectionner rapidement une image entière en vue de la copier.
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.
Remarque :
assurez-vous que Photoshop est bien défini comme l’éditeur principal pour le type de fichier à modifier.
-
Sous Dreamweaver, sélectionnez une image web créée à l’origine dans Photoshop, puis effectuez l’une des actions suivantes :
- Cliquez sur l’image avec le bouton droit (Windows) ou maintenez la touche Ctrl enfoncée et cliquez sur l’image (Mac), choisissez Modifier l’original avec dans le menu contextuel, puis choisissez Photoshop.
Remarque :
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.
Remarque :
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.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.