Photoshop, faire un dégradé web 2.0 très simplement

Ha ha ! Celà faisait longtemps que je n'avais plus sorti un petit tutoriel photoshop ! Je vais donc essayer d'essuyer la honte et le déshonneur de cet affront en vous proposant un tuto très basique qui va vous permettre de faire un joli dégradé en partant d'une couleur unique !

Et oui, tout le monde sait que l'univers du web 2.0 est rempli de dégradés et autres effets de volume. Seulement il n'est pas aisé de réussir un dégradé à chaque coup ! Avec ma petite astuce, vous allez pouvoir créer un dégradé avec une seul couleur de départ, comme ça, plus de mauvaises surprises !

Voici donc comment donner du volume a votre webdesign !

tutoriel-degrade-simple.png

Je récapitule donc les étapes pour ceux qui n'auraient pas suivis:

  1. On crée donc un nouveau document ...
  2. On dessine une forme avec l'outil de sélection (rectangulaire dans l'exemple)
  3. On remplit la sélection avec la couleur de notre choix (ici c'est le vert du site)
  4. On crée un nouveau calque, sans desélectionner notre rectangle !
  5. On choisit l'outil de dégradé, du noir vers le blanc (ou l'inverse)
  6. On part du bas jusqu'en haut de la forme, en dépassant volontairement (pour ne pas que l'effet soit trop marqué)
  7. On sélectionne l'option "Lumière tamisée" dans le menu déroulant des calques

Simple non ? Evidement vous pouvez jouer sur le dégradé pour accentuer l'effet (en faisant un dégradé plus court).

[Réalisé avec photoshop CS3]

-----

Articles relatifs

  • Ce truc ne me sert à rien …parceque j’ai déjà galéré toute une journée pour y arriver !
    Dommage pour moi et merci quand même ; ça parait simple mais quand on ne connait pas la manip ça ne s’invente pas.

  • JFMichaud

    J’arrive à grands pas, lorsque j’ai vu tuto photoshop 🙂 Simple et pratique. J’aimerais avoir le tuto du comment tu as fait le montage des images…image copier/coller sur calque avec effet d’ombrage, je suppose…Et l’écriture? Une font particulière?

  • k-ny

    Ah ça c’est pas de chance Domi ^^

    Surtout que ça fait des jours (semaines ?) que j’avais l’idée de le faire ce tuto ! Je vais finir par afficher une liste des tuto prévu à l’avance 😀

  • k-ny

    Hello J-F !

    Alors oui c’est des screenshots, superposé avec une lueur externe noir (fusion: normal, opacité: 60%, taille: 13px).
    La font c’est Avant que …

    Voilou 😉

  • Zozo LaFritte

    Euh… pourquoi ne pas prendre un degradé de vert à vert directement ?

  • k-ny

    Hello Zozo !

    Et bien parce que faire un dégradé qui soit agréable à l’oeil n’est pas toujours évidant, il faut bien choisir les 2 nuances de vert, faire divers essais pour ne pas que ça contraste de trop …

    Alors que là, pas besoin de choisir 2 couleurs, on part de la couleur dominante de base, et on obtient un dégradé qui sera presque systématiquement réussi 🙂

  • spawnrider

    Merci beaucoup 😉 C’est simple mais je ne connaissais pas ^^

  • Mickaël

    Bonjour,

    Est-il possible d’obtenir le même effet, de façon à ce que l’une des extrémités du dégradé soit la couleur de départ ?

    Mon but est d’utiliser cette image comme fond, à l’extrémité d’un bloc redimensionnable, dont la couleur de fond est celle évoquée ci-dessus.

    Merci. 🙂

  • k-ny

    @Mickaël

    Si ta couleur de départ est clair, essais de remplacer le blanc par du transparent dans les couleurs de l’outil de dégradé. Si ta couleur est est sombre, fait l’inverse, remplace le noir par du transparent.

    Pas testé mais ça devrait fonctionner pas trop mal je pense 🙂

  • John

    c’est vraiment très simple mais je n’y avait pas pensé

    bonne astuce, merci beaucoup car ca va me servir

  • Hasan

    Moi qui suis vraiment une bille en Photoshop, j’ai réussi cette manip en 3min.

    J’ai un très beau rendu en quelques clics, super manip’

    Merci

  • Joli, merci !

  • Cath

    génial…lement simple, je vais en user et en abuser, merci!

  • Yohann

    Ton site est une vraie mine d’or !
    Encore merci pour ces astuces très bien faites et écrites avec beaucoup d’humour.

    Yohann

  • Neth

    Merci beaucoup pour ce tutoriel, il est simple est pratique : ))

  • Pel

    Super tuto mais j’ai un problème, je n’arrive pas à sélectionner « Lumière tamisée » je vois où il se situe mais il n’est pas sélectionnable donc si quelqu’un savait m’aider??? Merci d’avance

  • Brice

    Euh moi aussi, pareil que Pel –‘ SVP aidez nous ! 🙁

  • Boby

    Cela a l’air super simple… mais cela ne fonctionne pas chez moi. Je reste avec le dégradé de l’outil dégradé….

  • Boby

    Honte à moi, je cherchais lumière tamisée dans le menu de l’outil… Super cela fonctionne nickel. MERCI -)

  • Steph

    Bonjour,

    Merci pour ce tuto, super simple et tres efficace.

  • Juan

    Salut

    Je ne bosse pas avec Photoshop mais le principe est excellent pour obtenir un dégradé des plus propres… ( je galerais car j’avais des dégradés degradés 🙂 )
    Moi je dis félicitations

  • Pascal

    Je trouve le rendu super, merci pour le tuto.

  • Je t’aime mec yeah sa rend trop bien je crée un jeu et pour le nom de mon écran titre en dégrade bleu et noir sa donne 🙂 si par contre tu sais comment mettre un contour au texte Ben te gêne pas ^^ encore une fois merci

  • essila

    Merci beaucoup!!!

  • Aubens

    salut les gars je cherche à faire un dégradé ne qui laissera pas de petit traits surtout le dégradé du noir vers le blanc. Comment faire????

  • Emma

    Un tuto qui m’a été d’une grande aide et facilement compréhensible ! Merci !

  • Yass

    merci , joli tuto