|
foryum-toshop
: 810
| Inscrit le: 25 Nov 2005 |
| Messages: 7409 |
| Localisation: Sur FT |
Groupes d'utilisateurs:
|
|
|
|
|
Webdesign Bannière
Bonjour à tous, je vais vous montrer dans ce tuto comment réaliser un webdesign avec un header de type bannière. Comme souvent avec les webdesigns, les images sont sous forme de miniatures, et j'ai réalisé ce tuto avec Photoshop CS !
¤ ÉTAPE 1 :
Ouvrez un nouveau document et remplissez-le de #012c3e. Allez ensuite dans Filtre / rendu / Eclairage ... et rentrez cette forme et ces paramètres :
Vous obtiendrez un fond comme celui-ci :
¤ ÉTAPE 2 :
Prenez l'Outil Rectangle arrondi avec un rayon de 6px et faites une bande vers le haut (voir ci-dessous). Récupérez la sélection ⇒A et remplissez d'une couleur.
¤ ÉTAPE 3 :
Ajoutez ces Options de fusion ⇒A au calque de la forme :
Et vous obtiendrez ceci :
¤ ÉTAPE 4 :
Maintenant, cherchez une bannière à insérer dans votre header. Moi, j'en est pris une sur designus.com qui est disponible ICI.
Importez ⇒A l'image de la bannière et transformez-la pour la disposer comme ceci :
¤ ÉTAPE 5 :
Prenez l'Outil Plume, et repasser les contours superposés de la bannière, c'est à dire dans les zones roses de l'image ci dessous :
Pour cela, choisissez la forme de 1px du pinceau et la couleur #637E09. Créez ensuite vos traits un à un à la plume sur une nouveau calque et faites pour chaque partie : Clique droit sur le trait / Contour du tracé ... / Forme.
Pensez à dupliquer le calque une fois qu'un côté est terminé, et à faire Edition / transformation / Symétrie Horizontale et à positionner le calque de l'autre côté de la bannière.
¤ ÉTAPE 6 :
Ajoutez à la bannière (pas aux calques avec les contours) ces Options de fusion :
Avant de valider, sauvegardez ce style ⇒A.
Et votre bannière ressemblera à :
¤ ÉTAPE 7 :
Prenez l'Outil forme personnalisée et la forme nommez "Bannière 3" et faites une forme comme celle-ci (récupérez ensuite la sélection en remplissez la de n'importe quelle couleur) :
Et ajoutez le Style de calque préalablement sauvegardé via la fenêtre des styles. Vous pouvez éclaircir un peu la couleur la plus sombre du dégradé.
¤ ÉTAPE 7 :
Ajoutez ensuite votre titre et un slogan.
¤ ÉTAPE 8 :
Puis importez votre logo et ajoutez lui le style sauvegardé en augmentant un peu l'incrustation couleur
¤ ÉTAPE 9 :
Créez maintenant un grand rectangle en #022B3D avec l'outil rectangle de sélection.
¤ ÉTAPE 10 :- NOUVEAU CALQUE TEXTE & IMAGE
Ajoutez ensuite tout votre contenu :
Et pour finir, ajoutez des barres de séparation : une au milieu pour séparer :p et une en bas pour décorer.
Pour l'horizontale, j'ai fais 2px en #85C12B, 2px vide puis 4px en #85C12B.
Pour la vertical, j'ai fais 2px en #85C12B, 2px de vide et enfin 1px en #85C12B !
Et voilà le résultat final :
Tuto traduit & modifié, puis proposé sur Forum-Toshop par Ryu.
Source : www.talk-mania.com |
|
Dernière édition par Ryu le 14 Sep 2008 19:55; édité 2 fois
|
.gif)
