Souan
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.


Forum regroupant des designers passionnés de tout genre.
 
AccueilDernières imagesRechercherS'enregistrerConnexion
Le deal à ne pas rater :
Jeux, jouets et Lego : le deuxième à -50% (large sélection)
Voir le deal

 

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

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


Messages : 277
Date d'inscription : 08/08/2010
Age : 32
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
http://timscampi.wordpress.com/
Sirhaian
Grand Concepteur
Grand Concepteur
Sirhaian


Messages : 370
Date d'inscription : 08/08/2010
Age : 31
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
Revenir en haut Aller en bas
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
-
» [Photoshop] Créer un texte en Or
» [Photoshop] Créer un Wallpaper Moderne
» [Photoshop] Créer un effet Aqua
» [Photoshop] Créer un reflet de texte

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