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

Partagez
 

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

Aller en bas 
AuteurMessage
timscampi
Chef de Projet
Chef de Projet
timscampi

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

[Photoshop] Techniques de base de design d'un site Web 2.0 Empty
MessageSujet: [Photoshop] Techniques de base de design d'un site Web 2.0   [Photoshop] Techniques de base de design d'un site Web 2.0 I_icon_minitimeMar 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"
[Photoshop] Techniques de base de design d'un site Web 2.0 Web20etape1

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.)
[Photoshop] Techniques de base de design d'un site Web 2.0 Web20etape2

Appliquez ensuite le dégradé et votre image devrait ressembler à ceci, une fois vos couleurs choisies:
[Photoshop] Techniques de base de design d'un site Web 2.0 Web20etape3

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
Sirhaian

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

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

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

_________________
[Photoshop] Techniques de base de design d'un site Web 2.0 Bansirhaian001001
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
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Cinéma : la fin des industries techniques françaises ?
» Examen Drusilla [Photoshop] - ANNULÉ
» Itinéraire google maps vers base camp.
» Le Flat Design
» Plagiat intégrale de mon design

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