Utilisation de fichiers Photoshop dans 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.

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 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.

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 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.

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.

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 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.

Mise à jour de plusieurs objets dynamiques

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).

Redimensionnement d’un objet dynamique

Vous pouvez redimensionner un objet dynamique dans la fenêtre de document comme vous le feriez pour n’importe quelle autre image.

Modification du fichier Photoshop d’origine d’un objet dynamique

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.

État des objets dynamiques

Le tableau suivant énumère les différents états des objets dynamiques.

Copier-coller d’une sélection à partir de Photoshop

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.

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 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.

À 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.

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.