Nous allons voir à travers ce tutorial photoshop comment créer un menu de navigation pour votre site internet
1° Ouvrez un nouveau document Ctrl+n
2° Sélectionnez l'outil "Pot de peinture" et remplissez votre calque de blanc ou bien de la couleur correspondant à votre site
3° Appliquez des repéres à votre calque.
Voici les dimensions: Vertical:0, 25, 50
Horizontal:0, 25, 50, 720, 745, 770
Si vous souhaitez vous simplifier la vie vous pouvez télécharger la source http://www.photoshop-creation.com/tuto_CS2/tuto_menu/exemple.psd
4° Sélectionnez l'outil ]Rectangle de sélection
5° Tracez un rectangle de sélection comme ci-dessous
7° Sélectionnez l'outil élipse de sélection
8° A partir de l'intersection de vos repères et en tenant la touche Shift enfoncée commencez à tracer votre élipse (vous avez certainement remarqué que le symbole + est apparu sous votre curseur. cela veut dire que vous allez ajouter votre élipse à votre sélection précedente).
ATTENTION Dés que vous commencez à tracer votre élipse relachez la touche Shift puis appuyez sur la touche Alt et tout en tenant la touche Alt enfoncée, appuyez de nouveau sur la touche Shift.
En appuyant sur la touche Alt votre élipse va se centrer à lintersection de vos repères et la touche Shift servira à créer une elipse parfaite.
9° Répétez l'étape N° 8
10° Sélectionnez l'outil Dégradé puis dans la barre d'options sélectionnez Dégradé réfléchi.
Pour personnaliser votre couleur selectionnez l'éditeur de dégradé.
11° Appliquez votre dégradé en partant du haut vers le bas
12° maintenant faites Sélection-->Déselectionner ou Ctrl+d
Voila la première étape de notre travail
13° Maintenant nous allons créer les séparations de votre menu
Dans votre onglet calque créez un nouveau calque et nommez le séparation
14° Sélectionnez l'outil trait avec une épaisseur de 2px et de couleur noir.
Appliquez aussi de nouveaux repères verticaux en: 110, 220, 330, 440, 550, 660.
15° Tracez maintenant vos séparations en vous servant de vos repéres.
!!! Attention !!! de bien avoir activé la fonction magnétisme.
Pour cela faites Affichage-->Magnétisme
16° Nous n'avons plus besoin des repéres pour les retirer décochez l'option extras Affichage-->Extras
17° Faites ensuite Calque-->Pixeliseation-->Forme
Faites attention à bien être sur le calque séparation.
18° Puis dupliquez le calque séparation en faisant Calque-->Dupliquer le calque ou bien avec le raccourci clavier Ctrl+j
19° Faites le glisser sous le calque séparation puis masquez le calque du haut
20° Cliquez sur Ajouter un style de calque-->Incrustation couleur
21° Une nouvelle fenêtre va alors s'ouvrir.
Dans l'éditeur de couleur, sélectionnez le blanc.
22° Sélectionnez maintenant l'outil Déplacement , et cliquez sur le calque séparations copie.
Décalez le d'un pixel vers la droite en appuyant une fois sur la touche directionnelle droite de votre clavier.
Vous pouvez maintenant réactiver votre calque separation
Voila la deuxième étape de notre travail terminée
23° Maintenant nous allons créer le texte de nos liens.
Pour cela cliquez sur Commencer un nouveau groupe que nous allons nommer LIENS.
Dans ce mème groupe créez un nouveau calque LIENS_1.
24° Sélectionnez l'outil Texte et appliquez les réglages ci-dessous.
25° Tapez ensuite les textes que vous souhaitez, dans notre exemple nous avons tapé accueil, contact, forum ...
ATENTION
Il n'est pas nécessaire de créer un nouveau calque pour chaque onglet, photoshop le fera lui-même, de plus il nommera chaque calque par le texte que vous avez choisi comme dans l'exemple ci-dessous.
Par contre l'erreur à ne pas faire est de taper la totalité de votre texte dans un seul calque.
Ceci en effet, vous empécherait de créer des effets de rollover sur vos liens.
Mais ceci sera le prochain sujet traité dans un nouveau tutorial ;-)
26° Maintenant nous allons voir comment faire pour aligner tous nos calques de texte
Sélectionnez le calque LIENS_1 puis liez tous les calques en cliquant dessus à coté de l'oeil afin de les lier comme sur notre exemple. Une chaine devrait apparaitre.
27° Cliquez ensuite sur les deux icones désignés sur notre exemple.
Ainsi vos calques s'alignent parfaitement.
Voila la troisième étape de notre travail terminée
28° Maintenant il va falloir découper nos boutons.
Faites Affichage-->Extras afin d'activer vos repères et au passage vérifiez que la fonction Magnétisme soit activée.
29° Dans votre barre d'outils, sélectionnez l'outil Tranche puis découpez votre image en vous basant à vos repères.
30° Il vous suffit maintenant d'enregistrer votre menu pour le web en faisant Fichier-->Enregistrer pour le Web
31° Appliquez les réglages ci-dessous puis cliquez sur enregistrer.
32° Dans la nouvelle fenêtre active sélectionnez HTML et images, cela permettra à photoshop de générer un dossier images et un fichier html de votre travail.
Dans le menu paramètre sélectionnez autres
Je ne vais pas détailler toutes les options de l'enregistrement pour le web, je le ferai dans un prochain tutorial
33° Cliquez sur l'onglet Précédent
34° Définissez le nom du dossier oû vous souhaitez que vos tranches soient affichées.
Dans notre exemple nous l'avons nommé images_menu.
Cliquez sur OK puis sur Enregitrer
Voila il vous suffit maintenant d'inclure le fichier html généré dans toutes les pages de votre site soit en ouvrant votre fichier et en copiant le tableau généré, soit en faisant directement un include.
Pour exemple:
Voila ce tutorial photoshop est terminé, j'espère que vous l'aurez compris.
Si vous avez du mal ou que quelque chose vous échappe laissez-moi un message à la suite de ce post et je vous répondrai le plus rapidement possible.
Amicalement
Tutorial proposé par : photoshop-création
