JeuWeb - Crée ton jeu par navigateur
[Tutoriel PS]Barre de navigation Classe - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Art, graphisme, audio (https://jeuweb.org/forumdisplay.php?fid=50)
+--- Sujet : [Tutoriel PS]Barre de navigation Classe (/showthread.php?tid=4364)

[Tutoriel PS]Barre de navigation Classe - Reaven - 09-01-2010

Bonjour,

Pour mon premier tutoriel sur ce forum, j'ai décidé de commencer par quelque chose de simple à expliquer.
Soyez tout de même indulgents hein ! Smile

Voilà ce que nous allons apprendre à réaliser sous Photoshop:

[Image: tuto_110.png]

Rien de bien exceptionnel en effet pour ce premier tuto, mais il peut être utile pour se familiariser avec certains outils de Photoshop Wink.

Allez c'est parti !

Etape 1:

Commencez par créer un nouveau document 500*80.

[Image: etape_10.png]

Prenez ensuite l'outil de sélection rectangulaire et tracer la forme de votre barre de navigation.
Remplissez la selection de noir et gardez la sélection Wink.

[Image: etape_11.png]

Etape 2:

Nouveau calque.

Prenez maintenant l'outil dégradé linéaire et choisissez comme première couleur un noir et comme seconde un rouge très foncé (#330f04).

[Image: etape_12.png]

Appliquez ensuite ce dégradé dans la sélection du haut vers le bas en maintenant la touche SHIFT enfoncée pour avoir une ligne parfaitement droite Smile.

[Image: etape_13.png]

Faites CTRL/CMD+D pour déselectionner.

Etape 3:

Prenez l'outil texte et écrivez l'intitulé de vos menus en blanc.

[Image: etape_14.png]

Etape 4:

Nouveau calque.

Prenez l'outil rectangle de sélection 1 colonne et fait un premier tracé.
Allez ensuite dans Edition -> Remplir et remplissez de noir.

[Image: etape_15.png]

Créez un nouveau calque et refaite la même manipulation mais cette fois en remplissant de blanc.
Placez cette ligne blanche juste à droite de la ligne noire.

Fusionnez ensuite les deux calques.
Nous venons de créer notre premier séparateur.

Placez ce séparateur entre le premier et le second lien.
Duppliquez le calque autant de fois que nécessaire de sorte à placer un séparateur entre chaque lien de votre menu Smile.

Fusionnez ensuite tous les séparateurs.

[Image: etape_16.png]

Etape 5:

Ensuite, avec CTRL/CMD enfoncé, cliquez sur la vignette du calque contenant la forme de votre barre afin d'en récupérer la sélection.

Faites SHIFT CTRL/CMD+I pour inverser la sélection.
Vérifiez que le calque des séparateurs est bien sélectionné et appuyez sur DEL/SUPPR. pour effacer ce qui dépasse des séparateurs.

[Image: etape_17.png]

Etape 6:

Récupérez à nouveau la sélection de votre barre et appliquez un masque de fusion à votre calque des séparateurs.

Prenez ensuite l'outil dégradé linéaire avec une première couleur noire et une seconde transparente.

[Image: etape_18.png]

Vérifiez ensuite que le masque est bien sélectionné et appliquez le dégradé, en maintenant la touche SHIFT enfoncée, du haut vers le milieu de votre et barre et du bas vers le milieu.
Ceci permet d'estomper les extrémités des séparateurs.

[Image: etape_19.png]

Baissez ensuite l'opacité du calque des séparateurs à 40% et le fond à 70%.

Etape 7:

Nouveau calque.

Prenez l'outil rectangle de sélection et faite une sélection allant du haut vers le milieu de votre création.

Faites ensuite Edition -> Remplir et remplissez de blanc.

[Image: etape_20.png]

Récupérez à nouveau la sélection de la barre, faites SHIFT CTRL/CMD+I et en vérifiant que ce nouveau calque est sélectionné, appuyé sur DEL/SUPPR. pour effacer ce qui dépasse.

Diminuez ensuite l'opacité de ce calque à 30% et le fond à 70%.

Appliquez lui enfin un léger flou gaussien de 1px en faisant Filtre -> Atténuation -> Flou gaussien.

[Image: etape_21.png]

C'EST FINI :good: !!!

Vous pouvez désormais poster vos rendus ci-dessous ou tout simplement commenter ce tutoriel Wink.

Cordialement,

VoxDeis
Infographiste amateur

RE: [Tutoriel PS]Barre de navigation Classe - My Hotel - 09-01-2010

Bon tuto, même si un peu simpliste quand même. Le rendu est pas mal non plus, faut juste aimer les couleurs.

Mais bon début, et merci du tuto! On voit que tu l'as pas fait à l'arrache : bien présenté, des screens et toussa quoi...

P.S : accueil pas "acceuil"!!!!!! Smile

RE: [Tutoriel PS]Barre de navigation Classe - Reaven - 09-01-2010

XD J'arrive jamais à l'écrire correctement ^^

RE: [Tutoriel PS]Barre de navigation Classe - Gabriel - 10-01-2010

Joli !
Mais niveau optimisation, ne vaut-il pas mieux faire 5 images vierges de texte et le rajouter après en Html ?

Après je sais pas si 5 fois la meme petite image c'est plus long à charger qu'une fois la grosse ?

RE: [Tutoriel PS]Barre de navigation Classe - Reaven - 10-01-2010

Je ne comprend pas le problème ...

RE: [Tutoriel PS]Barre de navigation Classe - Sloop - 10-01-2010

Euh ... n'y a-t-il pas une grosse faute d'orthographe dans ton tutoriel ? Big Grin

RE: [Tutoriel PS]Barre de navigation Classe - Reaven - 10-01-2010

Si tu parles de "Acceuil" au lieu de "Accueil" ??? OUI ! XD

RE: [Tutoriel PS]Barre de navigation Classe - Gabriel - 10-01-2010

(10-01-2010, 01:53 PM)Reaven a écrit : Je ne comprend pas le problème ...

Je me demandais si c'étais pas mieux pour l'optimisation bande passante de faire 1 image sans texte avec juste le fond et de l'utiliser 5 fois (pour chacun des liens du menu) c'étais pas mieux ?

RE: [Tutoriel PS]Barre de navigation Classe - Zamentur - 10-01-2010

Si si c'est mieux.
Mais au moins là on a une idée de ce que çà donne à la fin car sinon il aurait pas pu le montrer sur le tuto...

RE: [Tutoriel PS]Barre de navigation Classe - Reaven - 10-01-2010

Oui, évidemment que ce serait plus optimale comme principe, mais pour un tuto, je me doit de rajouter du texte afin de donner une idée au lecteur de ce qu'il obtiendra une fois le texte intégré Wink.