Liaisons de fichiers Illustrator à l'aide d'objets dynamiques: Tutorial

Trucs et astuces

Liaisons de fichiers Illustrator à l'aide d'objets dynamiques

Utilisez les objets dynamiques d'Adobe® GoLive® pour lier votre page Web au fichier image Adobe Illustrator® correspondant. GoLive vous permet d'exporter un fichier Illustrator dans un format de fichier image destiné au Web en utilisant les paramètres de conversion d'Illustrator. Outre les images bitmap, vous pouvez enregistrer vos images au format SVG, SVG compressé ou SWF, si Illustrator est installé sur votre ordinateur. Lorsque vous cliquez deux fois sur un objet dynamique Illustrator placé dans une page, GoLive ouvre le fichier image d'origine dans Illustrator. L'image Web de votre page est automatiquement mise à jour en fonction des modifications apportées au fichier d'origine dans Illustrator.

1. Préparer le fichier image.
Créez votre fichier image dans Illustrator. Il est recommandé de lui attribuer une taille proche de celle de l'image de votre page Web afin d'en faciliter la manipulation au sein de GoLive. Placez ensuite le fichier image dans le dossier du site.

2. Ajouter un objet dynamique Illustrator à votre page Web.
Dans GoLive, faites glisser l'icône Illustrator du panneau SmartObjects de la palette Objets vers votre page Web. Une balise d'emplacement d'objet dynamique Illustrator est créée.

3. Lier l'objet dynamique au fichier Illustrator et choisir des paramètres de conversion.
Dans l'inspecteur correspondant, liez l'objet dynamique au fichier Illustrator à l'aide du bouton d'affectation Source. Si Illustrator n'est pas installé sur votre ordinateur, la boîte de dialogue Enregistrer pour le Web s'affiche. Si vous disposez d'Illustrator, la boîte de dialogue Configuration de la conversion s'ouvre. Choisissez le format d'image Web souhaité, puis cliquez sur OK. Cet exemple utilise le format SVG (Scalable Vector Graphics).

4. Optimiser l'image Web.
La boîte de dialogue Options ou Enregistrer pour le Web vous permet d'optimiser votre image Web. (La boîte de dialogue affichée dépend de la disponibilité d'Illustrator et des options de conversion choisies.) Sélectionnez les options d'optimisation qui vous intéressent, cliquez sur OK, puis enregistrez l'image dans le dossier du site. Cet exemple utilise le format SVG et les paramètres par défaut de la boîte de dialogue Options SVG. Pour plus de détails sur ces options, voir l'aide en ligne d'Illustrator.

5. Prévisualiser l'image Web.
Dans GoLive, les images GIF, JPEG et PNG sont affichées dans les panneaux Mise en page et Aperçu. Les images Macromedia® Flash™ (SWF) peuvent être prévisualisées uniquement dans un navigateur Web doté du module externe approprié. Dans GoLive, l'image s'affiche dans le panneau Mise en page (dans l'objet Illustrator) mais pas dans le panneau Aperçu. Les images SVG et SVGZ (SVG compressé) peuvent être prévisualisées dans GoLive si SVG Viewer et le module externe SVG sont installés dans le sous-dossier Plugins du dossier de l'application. Ces éléments sont disponibles sur le CD-Rom de GoLive et sur le site Web www.adobe.com. Pour prévisualiser une image SVG ou SVGZ dans le panneau Mise en page, sélectionnez l'objet dynamique qui vous intéresse dans la page, puis cliquez sur le bouton représentant un triangle situé dans la partie inférieure gauche de l'inspecteur du module externe Illustrator.

6. Redimensionner l'image Web.
Sélectionnez l'objet Illustrator 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 un objet Illustrator, l'image GIF, JPEG ou PNG est automatiquement optimisée en fonction du fichier Illustrator d'origine. Les images aux formats SVG et SVGZ étant vectorielles, GoLive ne procède pas à l'optimisation du fichier. Copiez et collez un objet Illustrator au format SVG dans votre page Web, puis modifiez la taille de la copie. En prévisualisant ces deux images côte à côte, vous remarquerez que la netteté et la qualité sont identiques.

7. Modifier les options d'optimisation.
Pour modifier les options d'optimisation d'une image Web, sélectionnez l'objet Illustrator correspondant dans la page, puis cliquez sur le bouton Configuration de l'inspecteur de l'image ou du module externe Illustrator. La boîte de dialogue Configuration de la conversion ou Enregistrer pour le Web s'affiche. Choisissez le format adapté à vos besoins. GoLive met à jour l'image Web en fonction des modifications apportées et des données du fichier Illustrator d'origine. Ce dernier reste cependant inchangé. Si vous enregistrez vos fichiers au format SVG dans Illustrator, vous pouvez les importer dans GoLive et utiliser les variables afin de modifier des éléments de chaque image Web, par exemple du texte, sans altérer les images source. Pour plus de détails, voir l'aide en ligne de GoLive.