¤ ÉTAPE 1 :

  • NOUVEAU CALQUE


Ouvrez un nouveau document 1000 X 1000 pixels et remplissez le fond de #23589E.

Prenez l'Outil Rectangle arrondi avec un rayon de 5px et faites une forme vers le haut (il s'agira du header). Récupérez la sélection ⇒A et remplissez-la de #FFFFFF :



¤ ÉTAPE 2 :

  • NOUVEAU CALQUE


Prenez l'Outil Rectangle de sélection et faites une barre (de navigation) sous le header en prenant soin de cacher les arrondis de celui-ci (en mettant la barre au dessus). Remplissez ensuite cette sélection d'une couleur.



¤ ÉTAPE 3 :

Ajoutez ces Options de fusion au calque :







Et vous devriez avoir une barre de navigation comme celle-ci :



¤ ÉTAPE 4 :

  • NOUVEAU CALQUE & CALQUE TEXTE


Maintenant, ajoutez votre texte dans la barre. Pour la séparation, j'ai utilisé le tuto de Psyko (Voir) et j'ai gommé les extrémités puis baissé l'opacité.



¤ ÉTAPE 5 :

  • NOUVEAU CALQUE & CALQUE TEXTE


Ajoutez votre logo (de préférence en bleu) et votre nom avec éventuellement un reflet (Voir).



¤ ÉTAPE 6 :

  • NOUVEAU CALQUE


Créez ensuite un rectangle blanc à l'aide de l'un des outils utilisé précédemment :



¤ ÉTAPE 7 :

Ajoutez ce dégradé à ce rectangle (via les Options de fusion) :



Voilà ce que vous avez à cette étape du tutoriel :



¤ ÉTAPE 8 :

  • NOUVEAU CALQUE & CALQUE TEXTE


Ensuite, ajoutez du texte sur la partie gauche. Vous pouvez lui mettre un cadre (mon cadre est une lueur externe noir gommée certains bords).



¤ ÉTAPE 9 :

  • NOUVEAU CALQUE


Insérez ensuite un élément sur la partie droite. J'ai choisi un screenshot avec un contour blanc et une perspective.



¤ ÉTAPE 10 :

  • NOUVEAUX CALQUES


De nouveau, créez un rectangle blanc.



Avec l'Outil dégradé, faites un petit dégradé noir sur le haut et baissez l'opacité du calque. Prenez ensuite le Crayon et faites une séparation entre les deux rectangles de 1 ou 2px blanc.



¤ ÉTAPE 11 :

  • NOUVEAU CALQUE


Créez un petit rectangle arrondi à l'intérieur de ce rectangle, et après avoir récupérer la sélection et l'avoir rempli de blanc (ou autre), ajoutez-y ces Options de fusion :







Dupliquez ensuite 3 fois ce rectangle et disposez les de cette manière :



¤ ÉTAPE 12 :

  • NOUVEAU CALQUE TEXTE


Ajoutez du texte dans ces cadres et des détails (par exemple, un rectangle blanc de faible opacité autour du GO) :



Et créez des reflets (Voir).



¤ ÉTAPE 13 :

  • NOUVEAU CALQUE


Pour la dernière fois, créez un rectangle en #F4F2F3 et une séparation de la même façon que la précédente mais dans un gris plus foncé.



¤ ÉTAPE 14 :

  • NOUVEAU CALQUE TEXTE


Ajoutez du texte dans cette partie :



¤ ÉTAPE 15 :

  • NOUVEAU CALQUE TEXTE


Puis un footer en créant plusieurs séparations grises (au dessus et entre les liens).



¤ ÉTAPE 16 :

  • NOUVEAU CALQUE


Pour finir, ajoutez divers détails comme un logo RSS par exemple ...






Tuto traduit et proposé sur Forum-Toshop par Ryu.
Source : http://photoshopandyou.com