Cet article prend comme exemple la version chinoise de Photoshop CS2. Les étapes pour les autres versions de Photoshop peuvent être légèrement différentes. Jetons d’abord un coup d’œil à l’effet final.
Les étapes spécifiques pour
l’effet final
sont les suivantes.1. Démarrez la version chinoise de Photoshop CS2, appuyez sur Ctrl+N pour ouvrir la boîte de dialogue « Nouveau », effectuez quelques réglages si nécessaire (la taille doit pouvoir s'adapter au futur menu de navigation) et cliquez sur le bouton « OK » pour créer un nouveau document.
2. Cliquez sur le bouton "Créer un nouveau calque" sous le panneau des calques pour créer un nouveau calque. Sélectionnez l'outil "Rectangle arrondi" dans la boîte à outils, définissez son rayon sur 15 px dans la barre d'options, puis dessinez un rectangle arrondi comme indiqué dans la figure 1 sur le nouveau calque.
Figure 1
3. Appliquez maintenant le style de calque suivant à la forme ci-dessus.
projection:
de la figure 2
:
Figure 3
Lueur intérieure :
de la figure 4
:
de la figure 5
:
sur la figure 6
, l'effet de bouton illustré sur la figure 7 est obtenu.
Figure 7
4. Utilisez maintenant à nouveau l'outil "Rectangle arrondi", cette fois-ci, dessinez un petit rectangle arrondi blanc au-dessus du bouton, comme indiqué dans la figure 8.
Figure 8
5. Définissez le mode de fusion de ce calque sur "Superposition" et définissez l'opacité sur 30 %, vous pouvez obtenir l'effet de bouton comme indiqué dans la figure 9.
Figure 9
6. Copiez ensuite ces boutons, disposez-les dans un menu de navigation et ajoutez le texte, comme indiqué dans la figure 10.
Figure 10
7. Sélectionnez « Outil Tranche » dans la boîte à outils, ouvrez le menu « Affichage » et confirmez qu'il y a une coche à gauche de « Aligner ». Cela alignera automatiquement les tranches sur les bords et créera une image plus précise. tranches. Utilisez l'outil "Slice" pour couper bouton par bouton, et chaque tranche contient un bouton. Le résultat est présenté dans la figure 11.
Figure 11
8. Maintenant que le découpage a été effectué, vous pouvez maintenant le générer sous forme de fichier HTML pour préparer la conception Web ultérieure. Sélectionnez la commande de menu "Fichier | Enregistrer pour le Web". Afin d'obtenir le meilleur effet d'image, utilisez les paramètres indiqués dans la figure 12. Après le réglage, cliquez sur le bouton "Enregistrer".
Figure 12
9. Dans la boîte de dialogue « Enregistrer les résultats de l'optimisation sous », sélectionnez l'emplacement où le fichier de page Web doit être enregistré, entrez le nom du fichier comme indiqué dans la figure 13, sélectionnez le type d'enregistrement comme « HTML et images (*. html)", puis cliquez sur Cliquez sur le bouton "Enregistrer".
Figure 13
: Cela se traduira par une page HTML et un dossier images, qui contient des images de boutons.
Il vous suffit désormais de copier le code HTML sur d'autres pages Web pour l'utiliser, mais ne copiez pas les balises d'en-tête/corps générées par Photoshop lors de la copie.