09-01-2010, 07:20 PM
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 !
Voilà ce que nous allons apprendre à réaliser sous Photoshop:
![[Image: tuto_110.png]](http://i14.servimg.com/u/f14/09/04/38/98/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
.
Allez c'est parti !
Etape 1:
Commencez par créer un nouveau document 500*80.
![[Image: etape_10.png]](http://i14.servimg.com/u/f14/09/04/38/98/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.
![[Image: etape_11.png]](http://i14.servimg.com/u/f14/09/04/38/98/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]](http://i14.servimg.com/u/f14/09/04/38/98/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.
![[Image: etape_13.png]](http://i14.servimg.com/u/f14/09/04/38/98/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]](http://i14.servimg.com/u/f14/09/04/38/98/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]](http://i14.servimg.com/u/f14/09/04/38/98/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.
Fusionnez ensuite tous les séparateurs.
![[Image: etape_16.png]](http://i14.servimg.com/u/f14/09/04/38/98/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]](http://i14.servimg.com/u/f14/09/04/38/98/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]](http://i14.servimg.com/u/f14/09/04/38/98/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]](http://i14.servimg.com/u/f14/09/04/38/98/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]](http://i14.servimg.com/u/f14/09/04/38/98/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]](http://i14.servimg.com/u/f14/09/04/38/98/etape_21.png)
C'EST FINI :good: !!!
Vous pouvez désormais poster vos rendus ci-dessous ou tout simplement commenter ce tutoriel.
Cordialement,
VoxDeis
Infographiste amateur
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 !
Voilà ce que nous allons apprendre à réaliser sous Photoshop:
Rien de bien exceptionnel en effet pour ce premier tuto, mais il peut être utile pour se familiariser avec certains outils de Photoshop
.Allez c'est parti !
Etape 1:
Commencez par créer un nouveau document 500*80.
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
.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).
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
.Faites CTRL/CMD+D pour déselectionner.
Etape 3:
Prenez l'outil texte et écrivez l'intitulé de vos menus en blanc.
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.
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
.Fusionnez ensuite tous les séparateurs.
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.
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.
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.
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.
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.
C'EST FINI :good: !!!
Vous pouvez désormais poster vos rendus ci-dessous ou tout simplement commenter ce tutoriel
.Cordialement,
VoxDeis
Infographiste amateur
![[Image: 1253914666_userbar2.png]](http://pics.imagup.com/member/1253914666_userbar2.png)
![[Image: 1253913459_userbar1.png]](http://pics.imagup.com/member/1253913459_userbar1.png)
