Didacticiel du Pôle de création
Exploitez au mieux les objets dynamiques
Par Chris Converse pour le magazine Layers
Le logiciel Adobe® GoLive® CS2 n’est pas seulement un outil de pointe pour la conception de sites Web, la définition de leur architecture, leur développement et leur gestion. Il s’agit également d’un outil qui vous assiste dans la création et la gestion des illustrations de votre site Web, grâce aux objets dynamiques, l’une des fonctions de flux de production les plus puissantes offertes par GoLive. Cette nouvelle fonction vous permet d’importer des fichiers générés dans Adobe Photoshop® et d’inclure le texte au moyen de calques de texte, d’importer des fichiers générés dans Adobe Illustrator® et de créer une animation SWF ou SVG, d’importer des fichiers Adobe PDF vers les pages desquels vous pouvez créer des renvois ou encore d’importer une multitude de fichiers dans des formats d’impression standard, notamment TIF, EPS et PICT.
Lorsque vous importez dans un document GoLive un fichier de format non standard pour le Web, GoLive ouvre la boîte de dialogue Enregistrer pour le Web, qui vous offre un choix de formats Web, et génère un objet graphique utilisable sur votre site Web. L’objet doit son aspect dynamique au fait que GoLive conserve le lien entre le fichier d’origine et l’objet graphique correspondant. C’est-à-dire que, si vous modifiez le fichier d’origine (PSD, PDF, EPS, etc.), GoLive regénère automatiquement l’objet graphique pour refléter les modifications apportées. Penchons-nous sur l’exemple d’un objet dynamique créé à partir d’un fichier Photoshop.
1. Créez dans Photoshop un objet graphique destiné à servir de titre
L’image ci-dessous montre notre page Web. (Vous pouvez suivre cet exemple sur votre propre site Web ou sur l’un des sites d’exemple proposés par GoLive CS2.) Dans la zone située au-dessus du texte (encadrée en rouge), nous avons laissé un espace suffisant pour inclure notre objet graphique de titre. L’espace que nous avons réservé est de 400 x 40 pixels. Afin de réaliser notre objet graphique de titre, basculons dans Photoshop pour créer un document (sélectionnez Fichier > Nouveau). Définissez la taille 400 x 40 et une résolution de 72, puis cliquez sur OK.
Créez un document de 400 x40 pixels à l’aide de Photoshop.
2. Définissez le texte et ajoutez des styles de calque
Sélectionnez l’outil Texte (T), puis faites glisser un nouveau calque de texte pour y saisir du texte. En général, je saisis les informations relatives à la police que je vais utiliser. Ensuite, appliquez une ombre portée au texte (sélectionnez Calque > Style de calque > Ombre portée). Utilisez librement tous les effets offerts par Photoshop ; GoLive les reconnaît tous.
Sélectionnez l’outil Texte, saisissez un texte, puis ajoutez une ombre portée au calque de texte.
3. Masquez le calque d’arrière-plan et enregistrez le document
Avant d’enregistrer le document, il est préférable de masquer le calque d’arrière-plan (cliquez sur l’icône représentant un œil dans la palette Calques). Cette opération nous permet de rendre l’objet dynamique transparent dans GoLive. Si vous avez construit un site Web à l’aide de GoLive, enregistrez le fichier Photoshop dans votre dossier Objets dynamiques. Si ce n’est pas le cas, inutile de créer un site Web de toutes pièces pour utiliser cette fonction ; enregistrez le fichier dans un dossier situé sur votre bureau. Baptisons le fichier « titres.psd »
Cliquez sur l’icône Indique la visibilité du calque pour masquer le calque d’arrière-plan.
4. Faites glisser le fichier PSD dans GoLive
Basculez dans GoLive CS2. Faites glisser le fichier PSD vers le document GoLive à partir du dossier Objets dynamiques dans la fenêtre de votre site Web ou directement à partir de votre bureau.
Faites glisser le fichier PSD que vous avez créé à l’étape 3 vers le document GoLive.
5. Modifiez le texte dans la boîte de dialogue Configuration des variables
La boîte de dialogue Configuration des variables est la première à s’afficher. GoLive reconnaît le calque de texte actif comme variable et vous permet de modifier le texte que vous avez saisi dans le document Photoshop. Si vous sélectionnez Annuler, GoLive utilise le texte présent dans le fichier PSD d’origine. Nous nous trouvons maintenant sur la page Qui sommes-nous ? de notre site Web, nous entrons donc le texte « Qui sommes-nous ? ». Cochez la case Utiliser, puis saisissez le texte dans la zone de texte au-dessous. Cliquez sur OK.
Saisissez le nouveau texte dans la boîte de dialogue Configuration des variables.
