Retour à l'index des tutoriaux.
.01 Rendu
Ce tutoriel, ne sera pas forcément compliqué, mais assez long, donc usez de persévérance, et vous arriverez facilement au bout
.02 Commençons par le commençement
Ouvrez Photoshop, faites Fichier->Nouveau, puis mettez 800 pixels de largeur pour 200 pixels de hauteur .
Ensuite, remplissez le calque avec le pot de peinture (touche G), avec cette couleur #474747.
Le nom du calque devant être arrière plan, ne touchez plus a rien .
Créer un nouveau calque ( Ctrl+shift+N ) appelez le " barre des taches ", ça sera la base de votre composition .
Prenez l'outil rectange ( touche M ), puis créez votre barre des tâches comme ci-dessous :
La couleur importe peu, maintenant nous allons configurer les options de fusion, Clique droit sur le calque->Options de fusions .
Configurez comme ceci :
Contour : taille 1 px <> Couleur : #20282a
Incrustation en degradé, Reglez comme ci dessous :
Faites, appliquer, ok .
Vous devriez avoir ceci :
Vous venez de finir avec succès la première partie de ce tuto !
.03 Et si on faisait les séparateur ??
Et hop, on est parti !
Créez un nouveau calque ( Ctrl+shift+N ) Appelez le Separateur.
Zoomer sur votre composition, a peu prés a un tiers de la barre des tâches, et faites une selection de 3 pixels de largeur, comme ceci :
Une fois que c'est fait,Gardez votre selection active, prenez l'outil crayon, et tracez trois traits :
Le premier de couleur : #141516
Le second de couleur : #525455
et le troisieme de couleur : #1a1c1e
Comme ci dessous :
Ajoutons ensuite un masque de fusion a notre calque :
Toujours garder la selection active .Appuyez sur D pour réinitialiser les couleurs par default, nous allons ensuite appliquer un degradé en mode radial à notre sélection, comme ci-dessous :
Ensuite appliquez le dégradé dans votre sélection en partant du milieu comme ici :
Si vous avez tout fait correctement, vous devriez obtenir ceci :
Dupliquer le calque Séparateur ( clique droit dupliquer ), Puis a l'aide de l'outil déplacement ( Touche V ) Déplacer votre second séparateur au 2/3 du calque, comme ci-dessous :
Vous pouvez le voir, votre barre commence sérieusement a prendre forme, alors n'hésitons pas un instant, passons a la suite .
.04 Un petit peu d'effet
Allez on est parti, créez un nouveau calque ( Ctrl+Shift+N ) appellez le " effet ", faites une sélection de la moitié de notre barre, comme ci-dessous:
Appuyez simultanément sur " Ctrl+Alt+Shift " Tout en restant appuyez, cliquez sur le calque barre des taches, vous devriez obtenir ceci :
Faites édition->remplir, selectionnez couleur, puis la couleur blanche, sachant que la couleur importe peu .
Mettez l'opacité a 100% et faite ok .
Passons maintenant aux options de fusion, clique droit sur votre calque effet->Options de fusion, aller dans incrustation en dégradé, puis configurez votre dégradé comme ci-dessous :
Faite ok,ok enfin baisser l'opacité du calque a 20% :
Vous devriez obtenir ceci :
Comme vous pouvez le voir, nous touchons au but .
.05 Le sprint Final
Créez un nouveau calque, appelez le " Changement "
Prenez l'outil rectangle arrondi, puis tracez un rectange arrondi ( de rayon 2 pixels (le rayon ce règle une fois l'outil selectionné, dans le menu en haut de votre écran), au milieu entre les 2 séparateurs, comme ci-dessous :
Nous allons maintenant Appliquez 3 effets a ce calque, allez dans option de fusion, dans contour, sélectionnez comme taille 1 px, et comme couleur : #131315
Sélectionnez ensuite lueur interne puis configurez comme ci dessous :
Enfin, sélectionnez incrustation en dégradé, et configurez votre dégradé comme ci-dessous :
.06 La touche finale
Créez un nouveau calque ( Ctrl+Shift+N ), puis faites une sélection comme ceci :
Apuyez sur " Ctrl+Alt+Shift " puis tout en restant appuyé sur ces trois touches cliquez sur le calque changement .
Une fois cette étape fini, cliquez sur edition->remplir, et choisissez couleur selectionnez un blanc, faites ok mettez l'opacité a 100% et faites ok, votre sélection devrait être rempli comme ci-dessous :
Il ne nous reste plus qu'à régler les options de fusions, faites clique droit sur votre calque, option de fusion, et cliquez sur incrustation en degradé, réglez votre degradé comme ci-dessous :
Puis baissez l'opacité du calque a 20 %
Voilà votre travail terminé, et oui enfin, ce fut long et fastidieux, mais si vous lisez ceci c'est que vous y êtes arrivé !
A bientôt pour de nouvelles aventures !
Tutorial rédigé par crackers-belin.
je vais l'essayer tout de suite
kenjygasy le 06/09/2008 à 16h55 (8/10) : cool mais comme tu dis long et fastidieux!!
mais bon au moins j'ai réussi!lionhell le 31/08/2008 à 21h41 (7/10) : cool tut.
Merci Crackers-belin!
pamdawa le 01/07/2008 à 12h47 (10/10) : Merci super tuto
darki le 26/06/2008 à 21h42 (10/10) : le résultat est parfait 10.
mourabite le 26/05/2008 à 11h25 (8/10) : c bien et merci
YaSu le 03/05/2008 à 11h27 (9/10) : bravo !! merci pour ce tuto. Très bien expliquer dans les détails et le résultat est super.Je mets 9/10
Ike le 29/04/2008 à 15h36 (9/10) : Bien ! Et ferme ta grande gueule KIKOO_MERDE
KIKOO_LOL le 08/04/2008 à 16h08 (1/10) : NUL ><
AaA le 03/04/2008 à 12h04 (10/10) : Merci beaucoup pour ce tuto!
Il marche a merveille!!
3otim le 30/03/2008 à 09h55 (10/10) : tres joli!!
!!Boyz' le 24/02/2008 à 16h05 (10/10) : Tuto parfait pour site parfait
Merci à vous pour ces beaux tutos!
NGP le 09/02/2008 à 21h31 (10/10) : Sympathique tout ça!
Eclair le 05/01/2008 à 02h17 (10/10) : Super tuto bravo
newbielou le 30/12/2007 à 11h39 (10/10) : quel question!tu peux l adapter n importe ou .
hphp le 21/12/2007 à 17h36 (10/10) : bon tuto , je vien de le réaliser mais j'aimerai savoir si on pourrait rendre utile cette barre en la mettant dans un site ? en mettant des titres dans les sections pour pouvoir naviguer à travers les differentes pages? merci de répondre
@lig@t0r le 30/10/2007 à 11h11 (10/10) : @iimax.be : cet homme se plaint de ton tuto qui est trés bien expliqué alors qu'il ne parle pas un mot de français ....
Pauvre gars j'ai de la pitié pour toi.
Le seul truc qui n'a pas été facile c'est au niveau de "l'outil rectangle arrondi" mais quand on a un cerveau, une petite recherche sur notre ami commum google et c'est bon.
Trés bon tuto
H4O le 28/10/2007 à 20h45 (6/10) : c'est bien mais le reflet n'est pas assez intence.
Gohan188 le 21/10/2007 à 13h35 (9/10) : Vraiment super !
crackers-belin le 26/09/2007 à 19h53 (10/10) : Switch -> Screeshot ?
