Tutoriel FT : Webdesign simple
Dans ce tutoriel, vous allez apprendre à faire un autre exemple de webdesign, dans un style assez simple, mais plutôt agréable. Pour une meilleur compréhension du tutoriel, pensez bien à cliquer sur les miniatures ! J’ai réalisé ce tutoriel avec Photoshop CS. Bonne lecture !
¤ É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 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
Si ce tutoriel vous a plu, je vous invite a allez regarder les tutoriels Webdesign Business et Signature Space Art ainsi que notre Listing des tutoriels.
très chouette tuto félicitation.
Merci