Adobe
Trucs et astuces
Liaisons de fichiers Photoshop à l'aide d'objets dynamiques
Les objets dynamiques d'Adobe® GoLive® permettent d'établir une connexion bidirectionnelle vers les fichiers image Adobe Photoshop®. Vous pouvez ainsi créer des images optimisées pour le Web à partir d'une image Photoshop et ouvrir cette dernière afin de la modifier en cliquant deux fois sur l'objet dynamique correspondant de votre page. Les fichiers image Web sont automatiquement mis à jour en fonction des modifications apportées aux objets dynamiques de la page Web ou aux fichiers source Photoshop qui y sont liés. A partir d'une image Photoshop unique, vous pouvez créer plusieurs images pour votre page Web.
main_int
1. Préparer la page web et ajouter des conteneurs pour les images.
Dans GoLive, ajoutez à votre page Web des boîtes flottantes à partir du panneau Standard de la palette Objets. Ces boîtes flottantes sont destinées à contenir les images Web. Les images peuvent également être placées dans une grille de mise en page ou des cellules de tableau. Cet exemple utilise quatre boîtes flottantes afin de superposer des images.
   
 
step01_int
2. Ajouter des objets Photoshop à la page.
Sélectionnez chaque boîte flottante et faites glisser une icône d'objet Photoshop du panneau SmartObjects de la palette Objets vers le conteneur. Une balise d'emplacement d'objet Photoshop est créée.
   
 
step02_int
3. Lier et optimiser les images Web.
Sélectionnez une balise d'emplacement d'objet Photoshop dans la page. Dans l'inspecteur de l'image Photoshop, liez l'objet dynamique au fichier Photoshop à l'aide du bouton d'affectation Source. Si la boîte de dialogue de configuration des variables s'affiche, cliquez sur OK pour la fermer. GoLive ouvre cette boîte de dialogue lorsque le calque supérieur du fichier Photoshop est un calque de texte. La boîte de dialogue Enregistrer pour le Web s'ouvre et vous permet d'optimiser et d'enregistrer l'image Web. Dans cette boîte de dialogue, choisissez un format et des paramètres d'optimisation, par exemple GIF 32 sans tramage. La boîte de dialogue Enregistrer pour le Web peut être ouverte à tout moment afin de modifier les paramètres. Vous pouvez donc la fermer temporairement en cliquant sur OK. Dans la boîte de dialogue d'enregistrement, localisez le dossier de votre site, attribuez un nom au fichier image Web, puis cliquez sur Enregistrer. Liez chaque balise d'emplacement au fichier Photoshop et enregistrez chaque image optimisée sous un nom différent.
   
 
step03_int
4. Redimensionner les images dans la page.
Sélectionnez une image dans la page, puis faites-en glisser le coin inférieur droit en maintenant la touche Maj enfoncée jusqu'à obtenir la taille souhaitée. Lorsque vous redimensionnez une image, GoLive met à jour le fichier image Web en fonction des données du fichier Photoshop d'origine. Cependant, la taille de ce dernier reste inchangée. Il est également possible de redimensionner des images en les sélectionnant et en modifiant les valeurs de largeur et de hauteur dans les zones correspondantes de l'inspecteur de l'image Photoshop. Une autre méthode consiste à cliquer sur le bouton Configuration de l'inspecteur, puis à modifier ces valeurs dans le panneau Taille de l'image de la boîte de dialogue Enregistrer pour le Web.
   
 
step04_int
5. Modifier l'image source dans Photoshop.
GoLive maintient le lien d'objet dynamique entre le fichier Photoshop d'origine et le fichier image Web, ce qui vous permet de modifier l'un des fichiers et de mettre automatiquement à jour le second. Cliquez deux fois sur l'une des images de la page afin d'ouvrir le fichier source dans Photoshop. Ajoutez du texte au fichier Photoshop et enregistrez les modifications. Retournez ensuite dans GoLive ; les changements sont immédiatement appliqués à l'image Web.
   
6. Modifier la variable de texte.
Le calque de texte que vous avez ajouté constitue le calque supérieur du fichier Photoshop. Vous pouvez donc utiliser des variables afin de modifier le texte dans chaque image Web sans altérer le texte de l'image source. Sélectionnez une image de la page et cliquez sur le bouton Variables de l'inspecteur de l'image Photoshop. Dans la boîte de dialogue de configuration des variables, sélectionnez Utiliser et saisissez le nouveau texte dans la zone de texte appropriée. Cliquez sur OK pour fermer la boîte de dialogue de configuration des variables.
   
7. Modifier la table des couleurs.
Vous pouvez créer à partir d'une même image Photoshop plusieurs images Web à l'aspect très différent en modifiant simplement les couleurs de chacune d'elles. Sélectionnez une autre image de la page et cliquez sur le bouton Configuration de l'inspecteur de l'image Photoshop. Effectuez plusieurs essais de modification des couleurs et visualisez les résultats dans la boîte de dialogue Enregistrer pour le Web. Vous pouvez par exemple réduire le nombre de couleurs de la table des couleurs en saisissant une valeur dans la zone de texte Couleurs. Une des images de cet exemple n'utilise que 2 couleurs. Il est possible de modifier une couleur en cliquant deux fois dessus dans la table des couleurs et en sélectionnant une couleur différente à l'aide du sélecteur. Pour supprimer une couleur, sélectionnez-la dans la table des couleurs et cliquez sur le bouton Supprimer. Si vous voulez rétablir le nombre de couleurs d'origine, choisissez le format original dans le menu déroulant, par exemple GIF 32 sans tramage. Lorsque vous êtes satisfait des changements, cliquez sur Enregistrer pour fermer la boîte de dialogue.
   
 
step07a_int
8. Réorganiser les images et apporter la touche finale.
Terminez la mise en page en positionnant les images et en y ajoutant des bords, selon vos besoins. Pour modifier l'ordre de superposition des boîtes flottantes, changez la valeur d'index-Z de chacune d'elles dans l'inspecteur de boîtes flottantes. Une boîte flottante dotée de la valeur 1 est affichée derrière une boîte flottante dotée de la valeur 2. Pour ajouter des bords à une image, sélectionnez celle-ci et saisissez une valeur dans la zone de texte Bords de l'inspecteur de l'image Photoshop.
   
 
step08_int
 
2002 Adobe Systems Incorporated. Tous droits réservés.