|
foryum-toshop
: 810
| Inscrit le: 25 Nov 2005 |
| Messages: 7409 |
| Localisation: Sur FT |
Groupes d'utilisateurs:
|
|
|
|
|
Webdesign Portfolio
Bonjour à tous ! Aujourd'hui je vous présente un tutoriel qui va vous apprendre à réaliser un webdesign complet de type Portfolio.
A noter que les images sont sous forme de miniatures.
Et petite nouveauté, vous pourrez voir a chaque étape si il faut ou non créez un nouveau calque.
Le tuto est bien sur réalisé avec Photoshop CS. Bonne lecture !
¤ ÉTAPE 1 :
Ouvrez un document (par exemple : 766 X 750 pixels) et remplissez l'arrière-plan de #0F1715 .
Cherchez ensuite un motif qui vous convient (le mien est : motif.jpg) et ouvrez-le dans Photoshop. Faites Edition / Utiliser comme motif.... Puis Faites Edition / Remplir...
Prenez l'Outil Pinceau avec une dureté de 0%, une opacité réduite et une taille grande, et faites une bande tout en haut sur le calque de texture. Pour finir, passez ce même calque en mode Lumière Tamisée.
¤ ÉTAPE 2 :
Prenez l'Outil Rectangle de sélection et créez une bande vers le bas et sur toute la largeur que vous remplirez de #0F1715.
Créez un autre calque, et de la même façon, faites une bande vers le haut sur pratiquement toute la largeur, puis remplissez la de blanc.
¤ ÉTAPE 3 :
Ajoutez cette Option de fusion sur la calque de la bande blanche :
Et vous obtiendrez :
¤ ÉTAPE 4 :
Prenez ensuite l'Outil Rectangle arrondi, et faites une forme sur la gauche de la barre jaune. Puis prenez l'Outil Rectangle, et en maintenant ALT (en tenant appuyée cette touche, vous supprimer ce qui est en trop), faites une forme comme ceci :
Récupérez la sélection de ce tracé : Tracés / Ctrl + Clic sur le tracé et remplissez-la de blanc.
¤ ÉTAPE 5 :
Ajoutez à ce même calque ce dégradé via les Options de fusion :
Résultat :
¤ ÉTAPE 6 :
Prenez maintenant l'Outil Trait avec une épaisseur de 2px et faites un trait à partir du bouton vert et vers la droite. Récupérez la sélection et remplissez-la de blanc. Puis avec l'Outil Rectangle de sélection supprimez des espaces verticaux réguliers de 2px (voir ci-dessous).
¤ ÉTAPE 7 :
Encore une fois, ajoutez une Option de fusion au calque :
Et vous aurez ceci :
¤ ÉTAPE 8 :
Ajoutez ensuite des traits verticaux blancs, soit avec l'Outil Rectangle de sélection ou une nouvelle fois l'Outil Trait. Passez le calque à 30% d'opacité.
¤ ÉTAPE 9 :
Maintenant, ajoutez votre texte dans les menus : "HOME PAGE" a une petite ombre porté et le reste est écrit en #945B26.
Ainsi que le titre du site :
¤ ÉTAPE 10 :
Créez ensuite un grand rectangle blanc grâce à l'Outil Rectangle de sélection sous la barre de menu :
¤ ÉTAPE 11 :
Ouvrez les Options de fusion de ce calque et rentrez ces réglages :
Vous obtiendrez ce cadre :
¤ ÉTAPE 12 :
Importez une belle photo dans les tons jaunes, placez la juste au dessus du calque avec le rectangle blanc et faites Calque / Créez un masque d'ecrêtage et centrez votre photo dans le rectangle :
¤ ÉTAPE 13 :
Ajoutez votre texte de contenu dans la partie restante :
¤ ÉTAPE 14 :
Pour finir, vous pouvez améliorer votre rendu en ajoutant le réglages Courbes, par exemple : Entrée : 52 ; Sortie : 52.
Et c'est fini !
Tuto traduit et proposé sur Forum-Toshop par Ryu.
Source : http://www.webdesign.org |
|
|
.gif)
