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.
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 ?
Switch le 26/09/2007 à 00h37 (10/10) : Salut tout le monde
je suis à l'étape 2 mais je n'obtiens pas le même résultat ... en fait je voie même plus la barre pourtant j'ai suivis le tuto à la lettre ...
J'ai déjà utilisé photoshop en cour, mais je reste quand même un débutant sur ce logiciel
J'utilise PSCS1, si quelqu'un peut m'expliquer ce qui ne va pas je le remercie d'avance
Bonne continuation
15000 le 24/09/2007 à 10h53 (9/10) : j ss etudient en art graphique et pour mon projet de fin d'étude je v concevoir un site web pour le compte d'une boite de télécom et réseaux donc se tutorial ma etait tres utile merci.
crackers-belin le 07/09/2007 à 18h48 (10/10) : Sachez, que tout les tutoriaux on été rediger pour être effectuer par tout les niveaux de " graphiste " que ça soit graphiste en herbes ou graphistes comfirmé .
Toutefois si un point de n'importe quel tutoriel reste flou, toute l'equipe est à votre disposition sur le forum, nous répondrons à vos questions ...
Cordialement .
Dr. Psykopath le 30/08/2007 à 22h29 (9/10) : Moi je suis débutant sur toshop et j'ai parfaitement compris le tutos et il ma même fait découvrire des options, mais il faut de la patience
.Je te mets 9/10 j'hésitais entre le 10/10 et 9/10 mais rien n'est jamais parfait
thops le 29/08/2007 à 17h15 (10/10) : bonjour iimax.be, à pars toi, personne ne c'est plein, que ce soit débutants, ou confirmés. Peut être n'as-tu pas compris une étape ? ou un problème de compréhension.. ?
peut-être que le tutorial est plus compliqué pour les débutants.. tu peux allez voir vers la fin de la liste des tutoriaux, il y a des tutoriaux plus approprié aux débutants Cordialement
Thops
iimax.be le 28/08/2007 à 21h13 (1/10) : slt lè tuto son pa clair du tt il son mm incompréessible pour ceu qi débute ds le graphisme et sur toshop, faut pa fr dè tuto si tu c pa expliqé mets toi a la place du ga qi ft sa pour la premiere foi et plu détaillé lè suivant
