Accessibilité

Didacticiel du Pôle de création

Créez un en-tête de page Web avec une barre de navigation à onglets


Table des matières

  1. 7. Dupliquez et organisez les onglets

    Une fois que l'apparence de l'onglet et les états de transformation par souris vous conviennent, sélectionnez tous les calques de l'onglet dans la palette Calques et groupez-les en sélectionnant Calque > Associer des calques. Cliquez deux fois sur le nom de groupe et renommez-le pour vous aider à le distinguer parmi les autres onglets. Dupliquez le groupe en sélectionnant Calque > Dupliquer le groupe de calques. ImageReady duplique chaque calque dans le groupe y compris la tranche d'après un calque, les états de transformation par souris et les styles de calque.

    A l'aide de l'outil Déplacement, faites glisser l'onglet dupliqué à son nouvel emplacement. Laissez les guides optimisés vous aider à aligner les onglets et les bords inférieurs. Utilisez l'outil Texte pour modifier le calque de texte pour le nouvel onglet. Pour identifier plus facilement le nouvel onglet et la nouvelle tranche, renommez le nouveau groupe et ses calques dans la palette Calques ainsi que la tranche nouvellement créée dans la palette Contenu Web.

    Dupliquez, déplacez et renommez l'onglet jusqu'à ce que votre barre de navigation soit complète. Rappelez-vous de renommer également chaque nouvelle tranche dans la palette Contenu Web. Le fait de renommer les calques, les groupes de calques et les tranches facilite l'identification des onglets dans ImageReady, mais des tranches clairement désignées vous aident également par la suite, au moment où vous convertissez l'en-tête au format HTML.

    step07_int

  2. 8. Groupez les onglets dans un tableau

    Dans la palette Contenu Web, sélectionnez toutes les tranches d'onglets. Ensuite, cliquez sur le bouton Associer la tranche dans le tableau en bas de la palette Contenu Web. ImageReady ajoute un tableau à la palette Contenu Web avec les tranches d'onglets en retrait. Cliquez deux fois sur le nom du tableau et saisissez une étiquette descriptive.

    Lorsque vous convertissez l'en-tête au format HTML, la barre de navigation se transforme en tableau imbriqué dans le tableau contenant l'en-tête.

    step08_int

  3. 9. Finalisez l'en-tête

    Réglez le placement de tous les éléments dans votre en-tête. Pour déplacer la barre de navigation en tant qu'unité, maintenez la touche Maj enfoncée tout en cliquant sur chaque groupe dans la palette Calques, puis utilisez l'outil Déplacement ou les touches fléchées pour régler leur position. Utilisez les boutons d'alignement de l'outil Déplacement situés sur la barre d'options pour aligner les onglets, si nécessaire. Lorsque votre création est complète, utilisez l'outil Recadrage pour supprimer la portion inutilisée de l'image. Ensuite, enregistrez l'en-tête comme fichier standard Photoshop PSD. Ainsi, vous pouvez le retravailler plus tard si nécessaire.

    Si vous prévoyez de placer cet en-tête dans Adobe GoLive, il est prêt à l'emploi. Vous pouvez passer à l'étape 10. GoLive n'importe pas uniquement les fichiers PSD, il vous permet d'importer les fichiers de type Smart Object pour que les modifications effectuées dans le fichier d'origine soient mises à jour automatiquement.

    Vous pouvez également optimiser l'en-tête et l'enregistrer au format HTML (opération décrite à l'étape 10). Son optimisation dépend de son contenu. Son découpage en tranches vous permet d'optimiser différentes zones à l'aide de paramètres différents. Par exemple, si l'en-tête contient une image de tons continus, telle qu'une photo, optimisez cette zone à l'aide de la compression JPEG et optimisez la barre de navigation au format GIF.

    step09