Bienvenue sur le blog Webdesign d'anonymation !
Graphisme, ergonomie, communication, design, etc..

Effet web 2.0 : Eclairez vos backgrounds

montage

J’ai décidé de me lancer dans une série de billets sur les techniques permettant d’obtenir certains effets web 2.0 qui agrémenteront vos créations.

Voici donc le premier !

Préparation d’un fichier de gabarit

Lorsque je commence une maquette je pars toujours d’un document de 2000px de large par 1500px de haut. Pourquoi ? Bah pourquoi pas !

Non plus sérieusement, je fais en sorte que le fond de mon site occupe le maximum d’espace pour des résolutions d’écran HD.

CTRL + N pour créer un nouveau fichier.

Je définis toujours 2 règles verticales avant de commencer à travailler. Ces limites me permettent de définir une “zône sûr” que je choisis large de 990px.

Gardez et améliorez ce gabarit en fonction de vos habitudes de travail pour vos futures créations.

Ajoutez une lumière

Je remplis le calque de fond avec la couleur #000e15. Puis j’ajoute un calque par dessus que je nomme “light”.

Je trace ensuite un dégradé radial blanc au centre en prenant soin de ne pas dépasser de la zone de travail. (Raccourci “G”)

Je convertis le calque contenant ce dégradé en Objet dynamique.

En savoir plus sur les objets dynamiques

Je le transforme et le positionne dans le header.

Je lui applique ensuite une “Incrustation de motif”

Et j’ajoute également une ombre interne avec 10% de bruit pour réduire l’effet de strates généré par le dégradé.

Le résultat :

A vous de jouer en ajoutant votre style ;) ! Cet effet peut-être décliné de mille façons différentes.

1 commentaire :

  1. ça rend bien cet effet !