9rules - The best content from the independent web.

Back To Blog

Subscribe To RSS Feed

Recent Blog Entries

A Gradient Tutorial

Written by Mike Rundle on August 29, 2006

(Posting this here instead of BusinessLogs.com because our server is currently being moved!)

If you add together all the “interface tricks” designers use on 1) websites, 2) blogs, and 3) web applications, the one common thread is the idea of manipulation. When we use gloss, gradients, or drop shadows it’s because we’re trying to manipulate your eye into thinking the 2D screen in front of you is a lush 3D landscape filled with volume, depth, and light sources. When you visit a site that looks really sleek and cool, it’s probably because they manipulated your eye correctly and the 3D effect looks “real”, and on sites that look odd or “not as real” it’s because the effects they used didn’t mimic what your eye believes as 3D. Your eyes have been looking at things in the world for a very long time and they’re used to what a shadow looks like, what a light source’s highlight on an object looks like, etc. If you don’t approximate what your eye “thinks” something should look like then your design won’t accomplish the 3D look you’re trying to emulate.

Here are three blocks with various gradients applied, check them out and I’ll go over the differences:

Gradients

1
Box 1 illustrates a classic problem I see a lot, and that’s the loss of saturation in the image. Saturation is how intense a specific color is, and a less saturated hue is muddy or grey. When light strikes an object it doesn’t make it less saturated, but simply lighter and possibly more saturated (more saturated because the added light counteracts the shadow mixed with the color) so keep that in mind. Note that the box doesn’t look very “rounded” or 3D at all, it just looks flat and uninteresting.

2
Box 2 shows another type of gradient some designers use, and although it looks better than Box 1 (doesn’t lose saturation) it’s off because it’s not subtle enough. Box 2 looks like a copper panel that has been hit with a flashlight at full blast — not the effect we’re looking for. Tricking eyes into seeing 3D when there’s only two dimensions means reproducing what they see normally, which would be common objects with inside lighting, or outdoor objects with subtle natural lighting. A flashlight or strobe light is not a common light source, so don’t use that metaphor when working with gradients.

3
Box 3 is the best out of all. The light source is subtle, the color of the highlight has more saturation than the other two, and the color change is gradual enough to trick your eye into thinking it’s a beveled, 3D panel. If you’re going for a beveled-out look, this is the type of gradient you should be trying to reproduce.

Creating A Gradient In Photoshop
There is a dedicated gradient tool in Photoshop, but just like with anything “obvious” it turns out to be anything but. There are multiple ways of producing a gradient in Photoshop, and I’m going to show you the way I always use because it’s pretty non-technical and produces reliable and reproducible results.

Step 1: Fill Your Base Layer
I like to use a Foreground->Transparent gradient, and to work with that you need a color to show through the bottom transparent area. To start, make a New Layer (Shift+Cmd+N, Mac) and fill it with a color a bit on the dark side. Here’s a screenshot of the color I picked, note how I’m trying to stay closer to the right side of the Hue color square so that my base isn’t muddy (moving farther to the left decreases the Saturation, making it muddy):

Dark Red

Step 2: Make Your Gradient Layer
Make a New Layer again, name it something different from your base layer, make sure it’s on top of the previous layer.

Step 3: Pick Your Lighter Color
Your foreground color should still be the dark red you selected in Step 1. Click on the foreground square to bring up your color palette, and then select a secondary color that is lighter and slightly less saturated. Keep your second color close to your first, just so your gradient is subtle and not as jarring:

Dark Red

Step 4: Make Your Gradient
You now have a solid color base layer, and a highlight color you’re about to use as your gradient. There are many ways to use the Gradient tool, however I highly suggest only using the Foreground->Transparent mode because you can control it the best, and we’ll be using that mode here. Select your Gradient tool (part of the Paint Bucket Fill tool if that’s already selected) and make sure the top toolbar looks like this:

Gradient Toolbar

These settings mean: 1) Foreground->Transparent gradient type, 2) Linear gradient orientation, 3) Normal mode, 4) Full opacity to start, 5) Transparency is turned On. The two most important are the first and the last: make sure that Foreground->Transparent is selected, and that your gradient is free to turn transparent at the end.

The gradient tool works by dragging a line across the area you want to apply the gradient. In a normal, linear, FG->TRANS gradient, your foreground color will start at your first point and will become transparent by the end point. The longer your line the smoother your gradient will be, but if it’s too long then it’s difficult to see the gradient at all. I normally make my gradient line about 10° past vertical, leaning towards the upper left, because you’re trying to emulate a top-left light source in all user interface design. Varying the length of your gradient, the degree tilt, and the placement of the start will allow you to tweak various parts in order to get it perfect. Here’s a screenshot of my gradient, with the start and end points indicated:

Start and End

And that’s it! Here are some review points:

  • Make it subtle, not drastic.
  • Keep your color intact, don’t lose saturation.
  • Use multiple layers for maximum flexibility, combine after you’re fully satisfied.

Happy gradienting!

  1. Mrad Says:

    NIce tut Mike! Creating quality gradients can be tricky.

  2. Chris Griffin Says:

    The most common mistake I see with gradients is over-doing it as with your example with box 2, but far more exaggerated than that. Designers that are just starting out like to exaggerrate everything (I know I did). I also think that’s the key to design, is learning to master the more subtle elements of design, gradients being one of many. Though, I think there’s a bigger problems with drop shadows than gradients when it comes to exaggeration.

    I think the Supreme Master of Gradients has to be Ryan Sims. He uses a lot of gradients in most of his designs and pulls it off perfectly. Just take a look at Pure Volume.

  3. Rick Says:

    As always, excellent work, Mike.

    Thank you so much for posting this tutorial. I really hope that the current glut of gradient abusers happen upon this thoughtful missive.

  4. Rosano Coutinho Says:

    The way you did it is so destructive, for lack of a better word.

    I would create a gradient adjustment layer and mask it with the box. That way, it’s more flexible and can be tweaked if needed.

  5. Konstantinos Says:

    Nice write-up, Mike — keep’em coming.

  6. Jesse C. Says:

    Just wanted to chirp in with a thank you. I’m one of the guilty parties that has been butchering gradients for some time – this tut is really great…

  7. Jonathan Snook Says:

    Everytime I used to do gradients, they used to feel ‘off’. I definitely noticed the need to be subtle.

  8. Justin Bell Says:

    Chris Griffin: It’s true about learning to be subtle. I use shadows/glows all the time, but most of the time I use them it’s to increase the contrast between elements and I often try to make it so that it isn’t obvious there is an effect at all, let along a subtle one. Of course, I’m a bit of a minimalist.

  9. Andre Says:

    Why not just pick the two colors and drag? Why bother with a base layer, and then making half the gradient invisible.. It seems like more work to me.

  10. Mike Rundle Says:

    Hey Andre, the problem with having two colors in your gradient is that you can’t easily pick the exact fading points between the two colors. Usually Photoshop will do a fade between two colors at their exact middle point, but if you’re trying to get a subtle fade that’s only a little lighter at the top, you’ll have to fiddle with fade points in the Gradient toolbox.

  11. Pig Pen - Web Standards Compliant Web Design Blog » Blog Archive » Gradient Tutorial Says:

    [...] Gradient Tutorial from 9 Rules. [...]

  12. Uber Geek Links 08-30-08 « UberTechnica Says:

    [...] 9rulers teach us less cool how to make a Gradient If you add together all the “interface tricks” designers use on 1) websites, 2) blogs, and 3) web applications, the one common thread is the idea of manipulation. When we use gloss, gradients, or drop shadows it’s because we’re trying to manipulate your eye into thinking the 2D screen in front of you is a lush 3D landscape filled with volume, depth, and light sources. [...]

  13. JBagley Says:

    I never even thought about gradients in this way before. I’ve always thought people just had a little luck and an eye for colour when they created gradients.

    I’m now looking at this Comment block, and its looking a little like box 2. :-)

  14. Jason Liebe Says:

    I’m guilty of bad gradienting. But I have seen the light. I’m going to read some more posts to see what else I’m screwing up :-)

  15. Ben Darlow Says:

    A far simpler way of creating a gradient with increasing saturation (in Photoshop) is to simply pick a single base colour and then overlay it with a gradient between 100% white, 100% opaque, and 100% white, 0% opaque, in a separate layer. Set this layer’s mode to either overlay or colour dodge and then fiddle with the layer fill transparency (particularly in colour dodge, which will likely lead to over-saturation artefacts with bright base colours).

  16. weno Says:

    i’m used to get the HSB color mode in the illustrator in creating gradients. it’s easier just modifying the brightness without changing the hue.

  17. trefeater Says:

    Interesting method to do gradients.
    I have been using this tool with his default config, but once I discovered the advanced properties of the gradients tool, i always tune it before applying. In fact, with the advanced config i think you can obtain similar or better results than with this technique.

  18. Stinkbug.net » Blog Archive » A Gradient Tutorial Says:

    [...] This may be a simple one for most experienced designers and Photoshop users, but it’s still a good one.  The 9Rules Network has a good tutorial on creating gradients.  Not only do they show you to create a gradient in Photoshop, but they also talk about what makes a good gradient and shows comparisons. [...]

  19. Mike Cherim Says:

    Good tutorial. In some cases, depending on the depth I’m tryig to achieve, I find it useful to add a darker third layer at the bottom.

  20. Savadeep Speaks! » A most excellent gradient tutorial! Says:

    [...] My readers, I have been the discoverer of a tutorial most useful. Myself, I am but not a graphics professional. In fact, my knowings about such things are almost zero! Almost zero! A most informative tutorial it is. But a problem with the tutorial I do have: I am not the owner of a Photoshop. [...]

  21. जुगाड़ी लिंक|Cool Links » Daily Links Says:

    [...] A Gradient Tutorial » 9rules Network Official Blog ग्राफिक्स सम्बंधी जरुरी ट्यूटोरियल (tags: aajkejugad) [...]

  22. Niklas Says:

    Nice round-up. I am a photographer and tend to use a lot of gradients when retouching my work. Normally I add them in a seperate layer blended in “soft light”, either from white to transparent or black to transparent. This renders the gradient soft and preserves saturation in the colours.

  23. Ed Kasovic Says:

    “moving farther to the left decreases the Hue, making it muddy”
    No it decreases the SATURATION.

  24. Mike Doza Says:

    The introduction to this tutorial sounds as if you’re about to provide some original information. Instead, this tutorial is only useful for absolute beginners.

  25. A Gradient Tutorial… » News around the World Says:

    [...] If you add together all the “interface tricks” designers use on 1) websites, 2) blogs, and 3) web applications, the one common thread is the idea of manipulation. When we use gloss, gradients, or drop shadows it’s because we’re trying to manipulate your eye into thinking the 2D screen in front of you is a lush 3D landscape filled with volume…read more | digg story [...]

  26. web design uk Says:

    That’s great ! Thanks for the great tips

  27. ALBERTA DESIGN » A Gradient Tutorial… Says:

    [...] http://9rules.com/blog/2006/08/a-gradient-tutorial/  August 31st, 2006 | Category: Video Lessons | [...]

  28. Mike Rundle Says:

    Hey Mike, gradients are a pretty simple thing to start out with so it’s tough to provide some advanced techniques. I’ve seen enough people do gradients incorrectly that I thought this post was warranted, sorry if it was below ya.

  29. Designs » A Gradient Tutorial… Says:

    [...] If you add together all the “interface tricks” designers use on 1) websites, 2) blogs, and 3) web applications, the one common thread is the idea of manipulation. When we use gloss, gradients, or drop shadows it’s because we’re trying to manipulate your eye into thinking the 2D screen in front of you is a lush 3D landscape filled with volume…read more | digg story [...]

  30. scorwitz Says:

    As a Photoshop beginner, I am always interested in how to make use of the tools better. The problem is, I barely see any gradient at all in your finished example. So much so, that I have to convince myself that it is there or I won’t see it.

    I certainly can’t detect any 3-d effect whatsoever. Was that your intent?

  31. Adam Plocher Says:

    I prefer to use the Gradient filter, instead. That way if I ever need to go back and tweak it, I can. By using the Gradient tool, you’re kinda locking yourself into that look. Still, interesting article.

  32. Throw the Mind [dot] Com » Best of the Interweb 8-31-06 Says:

    [...] This is a nice tutorial for doing some craziness in photoshop. I wish I could use photoshop better, but I guess thats why I have friends who are good with it. [...]

  33. Gidget Says:

    I think it’s great, and these tips are not just for beginners. I’ve been a designer for 10 years, and often discover things other people do that I’ve never thought to try, or a quicker method.

    If something is too simple, or below you, why even take the time to comment?

  34. EveryDigg » Blog Archive » A Gradient Tutorial… Says:

    [...] If you add together all the "interface tricks" designers use on 1) websites, 2) blogs, and 3) web applications, the one common thread is the idea of manipulation. When we use gloss, gradients, or drop shadows it’s because we’re trying to manipulate your eye into thinking the 2D screen in front of you is a lush 3D landscape filled with volume…read more | digg story [...]

  35. Patrick Fitzgerald Says:

    Nicely written tutorial. It would be great to see a followup using adjustment layers which makes it easier to swap out colors, add textures, etc.

  36. Desi Blah » A guide to gradients Says:

    [...] The tutorial walks you three three different examples of gradients, pointing out pitfalls and common mistakes, then describes how to create the best of the three in Photoshop. If you’re looking to add that extra little flair and polish to your web site or blog, the addition of a well-made gradient can go a long way. — Adam Pash A Gradient Tutorial [9rules] [...]

  37. seattleduck - » Learn how to create gradients Says:

    [...] A useful tutorial for all aspiring Web 2.0-ish site designers out there. A Gradient Tutorial by Mike Rundle over on the 9rules blog. [...]

  38. Making the grad(ient) at berchman.com Says:

    [...] This tutorial on 9rules network is decent. It does cover the issues of color saturation and places emphasis on the subtley and nuance of a properly done gradient. The only catch is that they show how to do it in Photoshop, so if you do not have Photoshop you are S.O.L. [...]

  39. fsbrainstorm v4.0» Blog Archive » A Gradient Tutorial: Now with Layer Styles! Says:

    [...] 9rules.com just featured A Gradient Tutorial. It’s a nice little tute, but I would have used a different approach. [...]

  40. Francis Wu Says:

    Good post, pretty straight forward. In response, I just posted my preferred method, using Layer Styles. Enjoy!

  41. Lance Fisher Says:

    Thanks for a great article. I found it on digg. I’ve been working through some tutorials to learn photoshop for website design and this will help.

    One question/comment though. On web pages you generally see completely vertical gradiants because the designer wanted to repeat a small background image. I notice that 9rules does this for every other comment and some other elements, but for the banner image they use the angled method. Do you think gradients with different lighting angles can work on a page together in general? They do here I think.

  42. Donovan Says:

    For maximum flexibility, why not use the Gradient Fill layer? You can then keep the exact same foreground colour, then adjust the style of the gradient with the Blending Mode and add further control by tweaking it’s opacity.

    The only reason to ever use the Gradient ‘Tool’ (G) is on a layer mask.

  43. jojo Says:

    This is some bull.

  44. Max Design » Some links for light reading (1/9/06) Says:

    [...] A Gradient Tutorial [...]

  45. Christian Montoya Says:

    This is really embarrassing to admit, but thanks. I really, really needed this.

  46. SinkRox Says:

    Anyone else notice the actual comment box at the bottom of this page has a bad gradient. lol.

  47. Nogz Blogz 3.3 » Useful Stuff Special Says:

    [...] Learn Gradients with the help of 9Rules. [...]

  48. Gab Says:

    extremely useful article!
    thanks!

  49. A Gradient Tutorial… at Goble Goble Says:

    [...] If you add together all the “interface tricks” designers use on 1) websites, 2) blogs, and 3) web applications, the one common thread is the idea of manipulation. When we use gloss, gradients, or drop shadows it’s because we’re trying to manipulate your eye into thinking the 2D screen in front of you is a lush 3D landscape filled with volume…read more | digg story » Filed under Uncategorized by melisa at 23:07. back to top [...]

  50. A Gradient Tutorial at Creative Toolbox Says:

    [...] A Gradient Tutorial. A great tutorial of how to create subtle gradients that appear more realistic in the 2D realm. (Via 9rules Network.) [...]

  51. Gradients at medina.ph Says:

    [...] 9Rules gives the lowdown on gradients. Also applies to powerpoint presentations. Filed under: Asides   |   [...]

  52. Frakety Frak Says:

    My problem with gradients has always been “banding.” How do you keep that from happening?

    Great post!

  53. WHOLLYDEV » Blog Archive » Photoshop Tutorials: Useful or not? Says:

    [...] Dramatic skies A Gradient Tutorial Correct Color and Tone Infrared Effect Color Replacement fixing over contrast images, contrast, images. over contrast images Optimizing Contrast Image Coloring Remove Blue Sky Color Cast tutorial [...]

  54. A gradient tutorial in Photoshop Screenflicker Developments Says:

    [...] In a recent article on 9rules.com, Mike Rundle lays out how to make a great looking gradient using Photoshop. As with all tools in the designers toolbox there is definitely more than one way to end up with the same effect. On that note, I’m going to lay out my method for creating subtle, realistic gradients using Photoshop. Before we get started, it’s important to know that while a lot of the so-called “Web 2.0” hype sites use a lot of gradients they can — and most often — are over used. At the same time, just putting a bunch of gradients on your website will not suddenly make your website “Web 2.0” and if you try to pass if off as such you’ll not be met with much kindness. [...]

  55. Robert Says:

    I saw a similar tutorial on making ‘shiny’ buttons, but this is by far the best (and clearest) guide to picking colours for gradients. For total beginners like me, really simple tutorials like this are a GODSEND!!! Thanks!

  56. Ron Pemberton - Personal Perspective/ Music Reviews/ Film Reviews/ Book Reviews/ Product Reviews/ WordPress/ Palm OS » links for 2006-09-12 Says:

    [...] A Gradient Tutorial » 9rules Network Official Blog (tags: photoshop graphics gradient how-to webdesign) [...]

  57. Michael Dayah Says:

    I implemented this on my periodic table for each element. However, rather than going from one solid color to another, I used white on top of a transparent background so that I could use the same alpha transparent PNG for all different colored elements.

  58. Photoshop Weblog » Blog Archiv » Subtile Verläufe Says:

    [...] Das man mit zu starken Verläufen und Farben ein ganzes Design vernichten kann, habe ich zuletzt an dieser Stelle gemerkt. Ein Tutorial, das sich auf das Thema Verläufe konzentriert, kommt da gerade recht. Jetzt sagt der ein oder andere Leser vielleicht: »Hat der Grafiker nichts drauf, macht er `nen Verlauf«. Und das stimmt auch. Doch das Verläufe auch einen ganzen Stil prägen können, zeigt das aktuelle Web 2.0-Design. Dieser Beitrag wurde am Dienstag, den 24. Oktober 2006 um 10:30 Uhr von Dirk Metzmacher veröffentlicht und in der Kategorie Workshops abgelegt. Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen, einen Kommentar schreiben oder einen Trackback auf deiner Seite einrichten. [...]

  59. 遺忘の空島 v2 » Blog Archive » [網摘]060714 ~ 060909 çš„ keep new Says:

    [...] A Gradient Tutorial 作漸變色用 [...]

  60. links for 2006-09-01 at willkoca Says:

    [...] A Gradient Tutorial » 9rules Network Official Blog (tags: photoshop graphics) [...]

  61. Yahoo! Publisher Network » Blog Archive » The Web 2.0 Style Says:

    [...] Gradients Gradients are another popular design element of Web 2.0. They’ve become a lynchpin of modern web design. The basic gradient is very versatile, and provides everything from depth and dimension to shine and polish. (Here’s a tutorial on how to create gradients in Photoshop.) [...]

  62. www.web-garden.be » Blog Archive » Gradient Says:

    [...] The tutorial walks you three three different examples of gradients, pointing out pitfalls and common mistakes, then describes how to create the best of the three in Photoshop. If you’re looking to add that extra little flair and polish to your web site or blog, the addition of a well-made gradient can go a long way. [...]

  63. WEB STUFF » A Gradient Tutorial Says:

    [...] December 23, 2006 at 1:35 am · Filed under CSS http://9rules.com/blog/2006/08/a-gradient-tutorial/ [...]

  64. ..: CRISTIAN ESLAVA | Diseño Gráfico / Web | Maquetación | Flash | Multimedia | 3D | Fotografía :.. » Plantillas web gratuitas | Free web templates Says:

    [...] 9rules has put out a tutorial on how to use different types of gradients. Simple advice, but still useful. skettino [...]

  65. Hand-Picked Photoshop Tutorials | Smashing Magazine Says:

    [...] A Gradient Tutorial Written by Mike Rundle [...]

  66. ..: CRISTIAN ESLAVA | Diseño Gráfico / Web | Maquetación | Flash | Multimedia | 3D | Fotografía :.. » Photoshop | Tutoriales | Trucos | Tips Says:

    [...] A Gradient Tutorial Written by Mike Rundle [...]

  67. MondoBlog » Blog » Photoshop Tutorials - Num 9 Says:

    [...] A Gradient Tutorial [...]

  68. Corax Says:

    Thought this tutorial would help me make great gradients for web pages without getting “stripy”, but it didn’t.

    Anyone who knows how to make a great gradient that looks perfect in Photoshop and also keeps looking perfect in wweb browser, without getting look like lot of “stripes”?

  69. Web 2.0 Webdesign-Tutorials | Dr. Web Weblog Says:

    [...] 49. A Gradient Tutorial [...]

  70. Whitesquid Says:

    [...] 49. A Gradient Tutorial [...]

  71. PsalmDesignArea » Blog Archive » Web 2.0 Webdesign-Tutorials Says:

    [...] 49. A Gradient Tutorial [...]

  72. Web 2.0 Logo Design Tip #3 « Eben Thurston’s Weblog : MicroSyndication Says:

    [...] Posted by ebenthurston on February 22nd, 2007 9rules Blog: The latest news, member announcements, and dance videos from the 9rules Team. [...]

  73. design 2.0 at comatags Says:

    [...] 49. A Gradient Tutorial [...]

  74. Web 2.0 Tutorials Round-Up | Smashing Magazine Says:

    [...] 50. A Gradient Tutorial [...]

  75. sohbet Says:

    The 9Rules Network has a good tutorial on creating gradients. thank you dudes

  76. .JPGblog » Tutorial Degradado Says:

    [...] A Gradient Tutorial [...]

  77. MerT UraL Blog » Web 2.0 Tasarım Tutorial’ları Says:

    [...] 49. A Gradient Tutorial [...]

  78. A guide to gradients at SoftSaurus Says:

    [...] The tutorial walks you through three different examples of gradients, pointing out pitfalls and common mistakes, then describes how to create the best of the three in Photoshop. If you’re looking to add that extra little flair and polish to your web site or blog, the addition of a well-made gradient can go a long way. — Adam Pash A Gradient Tutorial [9rules] [...]

  79. 68 Web 2.0 design tutorials » A blog you can use! Says:

    [...] 50. A Gradient Tutorial [...]

  80. Tim Zappe » Blog Archive » Del.icio.ump Says:

    [...] A Gradient Tutorial Great read. [...]

  81. air jordan Says:

    I think it’s great, and these tips are not just for beginners. I’ve been a designer for 10 years, and often discover things other people do that I’ve never thought to try, or a quicker method.

    If something is too simple, or below you, why even take the time to comment?

  82. PHOTOSHOP: A guide to gradients at SoftSaurus Says:

    [...] The tutorial walks you through three different examples of gradients, pointing out pitfalls and common mistakes, then describes how to create the best of the three in Photoshop. If you’re looking to add that extra little flair and polish to your web site or blog, the addition of a well-made gradient can go a long way. — Adam Pash A Gradient Tutorial [9rules] [...]

  83. Alan Marks Says:

    A very useful post. I am a designer by virtue of the fact that I learned how to use the image programs the quickest. I have an eye for design, but these very basic things which some people see as being obvious are very easy to miss out, particularly when you have had no formal education on the subject.

    Needless to say, I am bookmarking this blog.

    Cheers.

  84. The Web 2.0 Style | All about Google AdSense Says:

    [...] Gradients Gradients are another popular design element of Web 2.0. They’ve become a lynchpin of modern web design. The basic gradient is very versatile, and provides everything from depth and dimension to shine and polish. (Here’s a tutorial on how to create gradients in Photoshop.) [...]

  85. 9 Free Gradient Backgrounds that are Better than What You Can Make in PowerPoint Says:

    [...] *How are these better than what you can make in PowerPoint? Well, the main way is that the gradient is at about 15 degrees from the vertical and to the left. This is generally more pleasing to look at and it has the advantage of matching nicely with any drop shadows you may choose to add. It might seem like making sure the perceived light sources are consistent is a small thing, and in a way it is, but when small things like disparate light sources add up, it leaves the audience with a feeling of unease. There is more information about the advantages of using gradients such as these on the 9rules blog, whose tutorial I followed in making these. [...]

  86. Photoshop Tutoriales - Says:

    [...] A Gradient Tutorial Written by Mike Rundle [...]

  87. moocafe » Site Navigation Says:

    [...] One important thing to keep in mind when designing navigation bars (or pretty much any type of boxes) is to use only very subtle gradients, if any. I won’t go into detail about this, but if you want to learn more about gradients, the 9rules blog has a great tutoral you should check out. If you need help on how to use gradients, try to go for something like this. Maybe add some gloss? [...]

  88. Designing Your Website for Web 2.0 - Zonica Says:

    [...] http://9rules.com/blog/2006/08/a-gradient-tutorial/ http://www.ndesign-studio.com/resources/tutorials/abstract-background/ http://www.loriswebs.com/tutorials/gradientbackground.html [...]

  89. Membuat Gradient atau Gradasi di Photoshop | Rumahweb.NET Says:

    [...] Artikel ini di terjemahkan dan di edit dari artikel http://9rules.com/blog/2006/08/a-gradient-tutorial/ [...]

  90. bulacanforums - online community for bulakenyos Says:

    Very nice tutorial. “subtle not drastic” I’ll always keep that in mind.

  91. Recopilación variada de recursos Web | BetaElite Says:

    [...] A Gradient Tutorial [...]

  92. Recursos y utilidades para diseñar un blog al estilo web 2.0. « Studio Creative Weblog Says:

    [...] Gradientes. Si no tienes bastante aquí encontrarás unos cuantos más. [...]

  93. Photoshop Tutorials | SiNi Daily Says:

    [...] A Gradient Tutorial Written by Mike Rundle [...]

  94. Web 2.0 Tutorials Round-Up - Article Save Says:

    [...] 50. A Gradient Tutorial [...]

  95. Plantillas para Blogger, recursos y herramientas » Recursos y utilidades para diseñar un blog al estilo web 2.0. Says:

    [...] Gradientes. Si no tienes bastante aquí encontrarás unos cuantos más. [...]

  96. i say that | Hand-Picked Photoshop Tutorials Says:

    [...] A Gradient Tutorial Written by Mike Rundle [...]

  97. Web 2.0 Tutorials | Pxdev.com Says:

    [...] 50. A Gradient Tutorial [...]

  98. walgraphicsdotcom » Archive du blog » Gradient tutorial Says:

    [...] un petit tutorial pour mieux gérer les gradients, qui font toute la saveur du graphisme web 2.0, en attendant la prochaine tendance… [...]

  99. Clean Tm » Blog Archive » Web 2.0 Tutorials Round-Up Says:

    [...] 50. A Gradient Tutorial [...]

  100. Photoshop Gradients : WebPulse Design Says:

    [...] Links: http://9rules.com/blog/2006/08/a-gradient-tutorial http://www.showandtell-graphics.com/gradient.html http://www.photoshopsupport.com/tutorials/cian/gradient-styles-dashes.html http://tutorialblog.org/smooth-gradient-header [...]

  101. Adobe4U » Hand Colected Photoshop Tools Says:

    [...] Gradient Tutorial [...]

  102. Style tables with CSS - Friendly Bit Says:

    [...] easy way to make tables look better is to add a subtle gradient to the cells. That’s easy to do. But make sure you also set a background color with one of [...]

  103. Piratentunten Blog » Blog Archiv » Der perfekte Farbverlauf! Says:

    [...] clipped from 9rules.com [...]

  104. Piratentunte Says:

    Super Tutorial, hab es direkt in meinem Blog veröffentlicht, weiter so! :-)

  105. Where’s Marty? : barrelmaker.us Says:

    [...] found this site, The Big Noob, today reading the commentary on a clean and simple Photoshop gradient tutorial. The blog and company seem pretty cool and the site design is very pleasing and crisp with good use [...]

  106. Adobe4U » Blog Archive » Web 2.0 Tools/ Photoshop Tutorials Says:

    [...] Official Blog – Gradient tool [...]

  107. Nike Dunks Says:

    A very useful post. I am a designer by virtue of the fact that I learned how to use the image programs the quickest. I have an eye for design, but these very basic things which some people see as being obvious are very easy to miss out, particularly when you have had no formal education on the subject.

  108. Web 2.0 Design Tutorials « Hone Watson Bookmarks Says:

    [...] 9 rules gradient tutorial. [...]

  109. website design Says:

    A far simpler way of creating a gradient with increasing saturation (in Photoshop) is to simply pick a single base colour and then overlay it with a gradient between 100% white, 100% opaque, and 100% white, 0% opaque, in a separate layer. Set this layer’s mode to either overlay or colour dodge and then fiddle with the layer fill transparency (particularly in colour dodge, which will likely lead to over-saturation artefacts with bright base colours).

  110. Richard’s Blog » Blog Archive » Web 2.0 Generators & Resources Says:

    [...] 9 rules gradient tutorial. [...]

  111. 71 Gradient Resources for Web Design | Vandelay Website Design Says:

    [...] A Gradient Tutorial from 9rules. [...]

  112. Booto’Blog » Blog Archive » 71??????? Says:

    [...] A Gradient Tutorial [...]

  113. 18 Gradient Resources for Web Design | D-namic Says:

    [...] A Gradient Tutorial from 9rules. [...]

  114. Volkan Says:

    Very nice tutorial.

  115. Yonca E?itim Says:

    Thanks.

  116. Neue Website mit Konzertfotos - bandpics.ch - Musiker-Board Says:

    [...] Link Standardfarbe. F?r Verl?ufe schau’ mal hier vorbei, das ist ein gutes Tutorial (englisch) ? 9rules – A Gradient Tutorial 3. Nein, die Spalte nervt nicht. 4. Schicker als der Rest, schwarze Schrift auf blau geht aber [...]

  117. I dettagli che contanto: tecniche “pixel popping” per i vostri layout - Francesco Gavello Webdesign Portfolio Says:

    [...] A Gradient Tutorial [...]

  118. Plagi Says:

    I’m just started with design and gradients can be quite tricky when you loose saturation.

  119. jordan Says:

    I think its fantastic to use gradient. Great tutorial! I like to add a darker layer on top of that.

  120. Brainsick Patterns — No Code Relation » Article » The Science of Gradients Says:

    [...] “A Gradient Tutorial” on the 9rules site actually explains some finer points of gradients and it struck a chord with me.  I cannot tell you how many times I’ve made drastically contrasted gradients and been sorely disappointed with them — this article fills the gaps. [...]

  121. ADGA Intro to Web Design » Blog Archive » Tutorial: Making a gradient background Says:

    [...] Making an effective gradient background [...]

  122. marjet Says:

    Problem with gradients for big surfaces; close look shows stripy graduation

    As a public space designer I print big surfaces (100m2) with ‘shadow looks’.
    I noticed that when i look closely to gradients, even with the above tutorial, the gradient is not really gradually; its a bit stripy. I have no clue how to fix it.
    I prefer to use a layer mask with gradient to fade my shadows, but it could be also a direct layer. I hope somebody knows the trick!

  123. 9 Things You Can’t Forget When Designing a Blog - Barker Design | Graphic & Web Development Says:

    [...] A Gradient Tutorial [...]

  124. Tudo sobre wordpress Says:

    [...] A Gradient Tutorial [...]

  125. 9 Things You Can’t Forget When Designing a Blog « Tudo sobre wordpress Says:

    [...] A Gradient Tutorial [...]

  126. David Smith Says:

    Thanks for the great tutorial.

    Can you qualify/elaborate upon your comment:

    “…you’re trying to emulate a top-left light source in all user interface design.”

    I’m not sure why this should be so….

    Many thanks,

    Dave

  127. Johnny Says:

    Really simple and easy tutorial for beginners. I’ve seen the problems you’ve mentioned such as the unsaturated gradient, so hopefully this will help to abolish that.

  128. jordan Says:

    If you’re a basketball player or basketball fan, I think you must have a good jordan shoes(or called air jordan shoes). The reason is known to everybody, not only beacause jordands shoes is a famous brand all over the world, but also there are many kinds cheap air jordans at the shop. At the same time, the cheap jordans are all good quality and beautiful. Mainly because cheap jordan shoes are also popular around the youngers. So, do not hesitate go to buy cheap jordans for yourself.

  129. street lighting Says:

    Click on the foreground square to bring up your color palette, and then select a secondary color that is lighter and slightly less saturated. Keep your second color close to your first,Bing is a really overlord!! support Bing~~

  130. Julie Stoddard Says:

    Very nice! I just tried it using your techniques. It’s good to know how such a small change can have dramatic results.

  131. 9 Things You Can’t Forget When Designing a Blog | Tutorial9 Says:

    [...] Next Website Design PopLoads of great tips on those subtle visuals that will polish your design.A Gradient TutorialSome great tips on the proper use of gradients and some common problems new designers have.Texture [...]

  132. Max Howell Says:

    You say “don’t lose saturation” at the beginning and the end and then your example loses 6 or 7% saturation! I guess it should be “lose some saturation, but be very cautious as it can be detrimental.”

    Unless I’m missing something about the effect of applying the gradient as highlight->transparent.

  133. Tenny Says:

    Nice tutorial, really helpful points

  134. shoaib hussain Says:

    Even a novice like me can understand what you’re talking about ,I have been slicing pictures to get the gradients,now I know how exactly to make one .thnx a lot

  135. 78+ Awesome Gradient Resources for Web Design | Son Of Byte - Web Design & Development Says:

    [...] A Gradient Tutorial from 9rules. [...]

  136. Valentine Pierce Says:

    Liked your gradient tute and have published your link on my blog.
    Valentine

  137. How to tweak Says:

    I think its better to use gradient to make some nice effects. Great tutorial! thnx a lot

Leave a Reply