Forum regroupant des designers passionnés de tout genre.
 
AccueilCalendrierFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 [Photoshop] Techniques de base de design d'un site Web 2.0

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
timscampi
Chef de Projet
Chef de Projet
avatar

Messages : 277
Date d'inscription : 08/08/2010
Age : 26
Localisation : Belgique

MessageSujet: [Photoshop] Techniques de base de design d'un site Web 2.0   Mar 10 Aoû - 13:59

Dans ce tutoriel, nous aborderons les quelques techniques de base pour la création d'un site Web 2.0, tels que les dégradés, les effets de réflection et les ombres.



Depuis quelque années, une nouvelle tendance a envahit le web. De novueaux types de design sont apparus sur les sites web, ainsi que de nouvelles techniques graphiques.
Le célébre éditeur anglophone O'Reilly a nommé cette tendance "Web 2.0", du fait de la différence stylistique notable entre ces nouveaux design et leurs ancêtres.

Les dégradés
Cet effet a été popularisé par la societé Apple il y a quelque années. Il consite à donner un effet de brillance à l'aide d'un dégradé de plusieurs couleurs.

Créez un nouveau document de la taille de votre choix.

Créez ensuite un nouveau calque de type "Gradient"


Dans l'éditeur de dégradés, sélectionnez Foreground to Background et cliquez à nouvveau sur le dégradé pour l'éditer.

Sélectionnez le premier marqueur et choisissez votre couleur de base à l'aide de la palette.
Placez ensuite un marqueur à 50% et sélectionnez une couleur un peu plus clair que votre couleur de base.
Placez ensuite un autre marqueur à 51% et sélectionnez encore une fois une couleur plus claire que la couleur rpécédente. Le but ici est de créer une transition nette entre la réflection et la couleur de base.
Sélectionnez finalement le marqueur de gauche et sélectionnez une couleur un peu plus claire que le marqueur placé à 51%.
Vous devirez arriver à un résultat similaire à celui-ci: (Le dégradfé présenté est gris, pour rendre l'illustration plus claire. Mais rien ne vous empéche de choisir une autre couleur.)


Appliquez ensuite le dégradé et votre image devrait ressembler à ceci, une fois vos couleurs choisies:


Voila, vous venez de créer un dégradé WEB 2.0 pour votre site Smile
Ce type de dégradé est généralement utilisé dans les banniéres, les en-têtes de menu et les boutons. Mais rien ne vous empêche de lui trouver d'autres utilisations !
Faites-nous partager vos créations et vos techniques dans ce topic Smile

Les réflections
<a venir>


Dernière édition par timscampi le Mar 10 Aoû - 14:19, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://timscampi.wordpress.com/
Sirhaian
Grand Concepteur
Grand Concepteur
avatar

Messages : 370
Date d'inscription : 08/08/2010
Age : 24
Localisation : Belgique

MessageSujet: Re: [Photoshop] Techniques de base de design d'un site Web 2.0   Mar 10 Aoû - 14:13

J'adore *_*
Super simple et super efficace Shocked

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://sirhaian-arts.tk/
 
[Photoshop] Techniques de base de design d'un site Web 2.0
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Comment faire une compensation design si le site affiche tro
» [TERMINE] Design Noël
» Challenge Architecture extérieure - Tony.3ds /// SketchUp - Artlantis - Photoshop
» [Résolu] Photoshop CS2 : tampon
» [Résolu] Photoshop problème format images

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Souan :: Autres Sujets :: Tutorials-
Sauter vers: