|
foryum-toshop
: 830
| Inscrit le: 25 Nov 2005 |
| Messages: 7422 |
| Localisation: Sur FT |
Groupes d'utilisateurs:
|
|
|
|
|
Webdesign simple V2
Bonjour à tous, dans ce nouveau tutoriel, vous allez apprendre à faire un autre exemple de webdesign, mais sans "genre" particulier.
Pour une meilleur compréhension du tuto, pensez bien à cliquer sur les miniatures !
PS : Je l'ai fait avec Photoshop CS
¤ ÉTAPE 1 :
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 :
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 :
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 :
Insérez ensuite un élément sur la partie droite. J'ai choisi un screenshot avec un contour blanc et une perspective.
¤ ÉTAPE 10 :
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 :
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 :
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 :
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 :
Ajoutez du texte dans cette partie :
¤ ÉTAPE 15 :
Puis un footer en créant plusieurs séparations grises (au dessus et entre les liens).
¤ ÉTAPE 16 :
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 |
|
|
.gif)
