Créez deux boutons avec l’outil de forme vectorielle sur un document vierge de Photoshop. Personnalisez leur esthétique avec les effets de calque, ici une ombre portée et un estampage, puis une couleur de fond, ici, rose. Dupliquez chacun de ces calques afin de créer l’état activé.Pour le différencier de l’état normal, nous optons pour un changement de couleur de fond, ici un bleu violet. N’oubliez pas de titrer vos boutons à l’aide de l’outil Texte. Cliquez sur le bouton de bascule vers Image Ready située au bas de la palette d’outils de Photoshop.Sélectionnez l’outil Tranche de la palette d’outils d’Image Ready et découpez l’image de manière à encadrer au plus près les deux boutons. Le but : optimiser le poids de l’objet en prévision de son exportation vers un site Web. Maintenez le clic sur l’outil Tranche pour sélectionner l’outil Sélection de Tranche. Cliquez ensuite sur le premier bouton.Affichez la fenêtre Transformation par souris et choisissez Nouvel état. Un calque nommé État par?”dessus apparaît. Dans la palette des calques, masquez le calque de fond du bouton 1 et faites apparaître l’état activé de couleur bleue. Dans la fenêtre Tranche, indiquez dans le champ URL l’adresse de la page qui sera affichée sur clic du visiteur. Dans le champ cible, indiquez comment cette page sera affichée, dans notre exemple, _blank pour ouvrir cette page dans une nouvelle fenêtre.Répétez l’ensemble de ces opérations pour chaque bouton. Cliquez sur l’onglet Optimisée afin d’ajuster les options de compression des images. Au besoin, modifiez dans la palette Optimiser.Vous pouvez tester le fonctionnement de votre menu en cliquant sur l’icône de votre navigateur dans la palette doutils, Safari par exemple.Terminez en choisissant Enregistrer une copie optimisée sous… dans un nouveau dossier. Une page index.html et un sous-dossier images sont alors créés et prêts à être enrichis avant de les incorporer à un site Web Web.
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
