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

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

  1. 06/11/2007 à 20:21 | #1

    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.

  2. k-ny
    06/11/2007 à 21:31 | #2

    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 :D

  3. 06/11/2007 à 22:21 | #3

    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?

  4. k-ny
    06/11/2007 à 22:57 | #4

    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 ;)

  5. Zozo LaFritte
    07/11/2007 à 10:51 | #5

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

  6. k-ny
    07/11/2007 à 11:30 | #6

    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 :)

  7. 07/11/2007 à 21:49 | #7

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

  8. Mickaël
    12/11/2007 à 23:40 | #8

    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. :)

  9. k-ny
    13/11/2007 à 10:50 | #9

    @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 :)

  10. John
    03/12/2007 à 15:31 | #10

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

    bonne astuce, merci beaucoup car ca va me servir

  11. Hasan
    18/01/2008 à 03:18 | #11

    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

  12. 02/02/2008 à 23:39 | #12

    Joli, merci !

  13. 22/02/2008 à 15:29 | #13

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

  14. Yohann
    05/06/2008 à 16:48 | #14

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

    Yohann

  15. 13/06/2008 à 17:43 | #15

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

  16. Pel
    23/01/2009 à 13:55 | #16

    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

  17. Brice
    03/02/2009 à 18:11 | #17

    Euh moi aussi, pareil que Pel –’ SVP aidez nous ! :(

  18. Boby
    29/05/2009 à 18:02 | #18

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

  19. Boby
    29/05/2009 à 18:11 | #19

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

  20. 19/08/2009 à 17:11 | #20

    Bonjour,

    Merci pour ce tuto, super simple et tres efficace.

  21. Juan
    30/11/2009 à 19:23 | #21

    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

  22. Pascal
    11/12/2009 à 13:11 | #22

    Je trouve le rendu super, merci pour le tuto.

  23. 23/03/2010 à 21:55 | #23

    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

  24. essila
    24/06/2011 à 02:08 | #24

    Merci beaucoup!!!

  25. Aubens
    11/07/2011 à 15:55 | #25

    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????

  26. Emma
    06/12/2011 à 16:39 | #26

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

  27. 17/12/2011 à 16:13 | #27

    merci , joli tuto

  1. Pas encore de trackbacks