Didacticiel du Pôle de création
Créez un en-tête de page Web avec une barre de navigation à onglets
5. Créez une tranche d'après un calque
Ouvrez la palette Contenu Web. Organisez les palettes afin de visualiser la fenêtre de document ainsi que les palettes Calques et Contenu Web. Avec le calque de l'onglet sélectionné dans la palette Calques, choisissez Calque > Nouvelle tranche d’après un calque. Contrairement à une tranche que vous avez dessinée avec l'outil Tranche, une tranche d'après un calque se déplace et se redimensionne automatiquement lorsque vous modifiez ou que vous déplacez le calque sur lequel elle est basée. La palette Contenu Web affiche la nouvelle tranche d'après un calque. Cliquez deux fois sur le nom de la tranche et saisissez un nouveau nom afin de pouvoir facilement l'identifier ultérieurement. Notez qu'ImageReady ne crée pas uniquement la tranche pour l'onglet, il divise également le reste de la page en tranches.
A l'aide de l'outil Sélection de tranche, sélectionnez la tranche pour l'en-tête. Choisissez Tranches > Convertir en tranche utilisateur. Ensuite, renommez la tranche. Ainsi, il sera plus facile de la reconnaître après génération du fichier HTML qui contient l'en-tête.
Les tranches définissent la zone déclenchée par le passage de la souris sur les états et les liens. Elles vous permettent également d'optimiser les zones d'une page séparément de manière à ce que vous puissiez utiliser les paramètres de compression appropriés pour chaque zone. Il se peut qu'une page découpée en tranches se télécharge plus rapidement qu'une page qui n'est pas découpée. Du fait de son affichage tranche par tranche, elle donne aux utilisateurs des informations pendant qu'ils attendent l'affichage de toute la page.
6. Concevez les états de transformation par souris
Sélectionnez la tranche de l'onglet dans la palette Contenu Web et assurez-vous que les calques corrects sont visibles pour l'état normal, non sélectionné de l'onglet. Ensuite, cliquez sur le bouton Créer un état de transformation par souris en bas de la palette Contenu Web. ImageReady ajoute un état Survolé pour l'onglet. Avec ce nouvel état Survolé sélectionné dans la palette Contenu Web et le calque de l'onglet ou le calque de texte sélectionné dans la palette Calques, choisissez un style de calque dans le menu Style de calque. Ce style s'applique à l'onglet ou au texte uniquement lorsque l'utilisateur passe la souris sur l'onglet.
Définissez les attributs de style dans la boîte de dialogue Style de calque. Si vous souhaitez appliquer un autre style pour l'état Survolé, sélectionnez-le dans la liste de styles de la boîte de dialogue. Assurez-vous de cliquer sur son nom et pas uniquement sur la case à cocher pour faire apparaître ses options. Pour prévisualiser les états, cliquez sur le bouton Aperçu du document dans la palette d'outils et utilisez la souris pour tester l'état de transformation par souris.
Vous pouvez définir plusieurs états de transformation par souris pour les onglets dans la barre de navigation. Les états les plus couramment utilisés sont l'état Survolé qui apparaît lorsque l'utilisateur déplace la souris sur l'onglet et l'état Sélectionné qui apparaît lorsque l'utilisateur clique sur l'onglet. Pour ajouter d'autres états, reprenez l'étape du début. Vous pouvez sélectionner un état différent en sélectionnant Options d'état de transformation par souris dans le menu contextuel de la palette Contenu Web et en sélectionnant l'état de votre choix. Par exemple, vous pouvez passer du style Biseautage et estampage au mode Enfoncé pour l'état Survolé.
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.
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.
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.
10. Optimisez l'en-tête
A l'aide de l'outil Sélection de tranche, sélectionnez toutes les tranches contenant les onglets de navigation et les zones contenant des couleurs unies ou répétées telles que le dessin au trait et les logos. Cliquez sur l'onglet 4 vignettes dans la fenêtre de document, puis ouvrez la palette Optimiser. Cliquez sur l'une des prévisualisations dans la fenêtre de document, puis, dans la palette Optimiser, choisissez un format de fichier GIF prédéfini dans le menu Paramètres prédéfinis. Essayez différents paramètres prédéfinis sur chaque prévisualisation. Notez les estimations de taille du fichier et de temps de téléchargement sous les prévisualisations. Sélectionnez le fichier avec la plus petite taille qui satisfait toujours vos standards de qualité.
Pour les tranches qui contiennent des images de tons continus, recommencez la même procédure, mais prévisualisez les tranches à l'aide des paramètres prédéfinis JPEG. Une fois que vous avez sélectionné la prévisualisation de votre choix pour ces tranches, choisissez Fichier > Enregistrer une copie optimisée. Ensuite, enregistrez le fichier au format HTML et images.
Sans écrire une seule ligne de code, vous avez créé un en-tête Web !
