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:
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):
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:
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:
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:
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!
August 29th, 2006 at 11:51 am
NIce tut Mike! Creating quality gradients can be tricky.
August 29th, 2006 at 12:29 pm
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.
August 29th, 2006 at 3:40 pm
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.
August 29th, 2006 at 3:58 pm
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.
August 29th, 2006 at 6:16 pm
Nice write-up, Mike — keep’em coming.
August 29th, 2006 at 6:56 pm
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…
August 29th, 2006 at 7:24 pm
Everytime I used to do gradients, they used to feel ‘off’. I definitely noticed the need to be subtle.
August 29th, 2006 at 7:31 pm
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.
August 29th, 2006 at 7:50 pm
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.
August 29th, 2006 at 7:52 pm
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.
August 29th, 2006 at 10:38 pm
[...] Gradient Tutorial from 9 Rules. [...]
August 30th, 2006 at 1:24 am
[...] 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. [...]
August 30th, 2006 at 2:20 am
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.
August 30th, 2006 at 3:29 am
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
August 30th, 2006 at 6:01 am
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).
August 30th, 2006 at 9:33 am
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.
August 30th, 2006 at 10:31 am
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.
August 30th, 2006 at 3:17 pm
[...] 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. [...]
August 30th, 2006 at 4:50 pm
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.
August 30th, 2006 at 8:06 pm
[...] 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. [...]
August 30th, 2006 at 10:20 pm
[...] A Gradient Tutorial » 9rules Network Official Blog गà¥à¤°à¤¾à¤«à¤¿à¤•à¥à¤¸ समà¥à¤¬à¤‚धी जरà¥à¤°à¥€ टà¥à¤¯à¥‚टोरियल (tags: aajkejugad) [...]
August 31st, 2006 at 2:01 am
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.
August 31st, 2006 at 2:23 am
“moving farther to the left decreases the Hue, making it muddy”
No it decreases the SATURATION.
August 31st, 2006 at 2:39 am
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.
August 31st, 2006 at 2:55 am
[...] 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 [...]
August 31st, 2006 at 3:40 am
That’s great ! Thanks for the great tips
August 31st, 2006 at 7:12 am
[...] http://9rules.com/blog/2006/08/a-gradient-tutorial/Â August 31st, 2006 | Category: Video Lessons | [...]
August 31st, 2006 at 9:07 am
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.
August 31st, 2006 at 9:42 am
[...] 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 [...]
August 31st, 2006 at 10:12 am
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?
August 31st, 2006 at 10:44 am
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.
August 31st, 2006 at 10:59 am
[...] 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. [...]
August 31st, 2006 at 11:02 am
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?
August 31st, 2006 at 11:30 am
[...] 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 [...]
August 31st, 2006 at 1:15 pm
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.
August 31st, 2006 at 2:18 pm
[...] 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] [...]
August 31st, 2006 at 3:43 pm
[...] 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. [...]
August 31st, 2006 at 3:59 pm
[...] 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. [...]
August 31st, 2006 at 5:43 pm
[...] 9rules.com just featured A Gradient Tutorial. It’s a nice little tute, but I would have used a different approach. [...]
August 31st, 2006 at 5:49 pm
Good post, pretty straight forward. In response, I just posted my preferred method, using Layer Styles. Enjoy!
August 31st, 2006 at 8:19 pm
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.
August 31st, 2006 at 9:58 pm
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.
August 31st, 2006 at 10:10 pm
This is some bull.
August 31st, 2006 at 10:20 pm
[...] A Gradient Tutorial [...]
August 31st, 2006 at 10:38 pm
This is really embarrassing to admit, but thanks. I really, really needed this.
September 1st, 2006 at 6:49 am
Anyone else notice the actual comment box at the bottom of this page has a bad gradient. lol.
September 1st, 2006 at 9:41 am
[...] Learn Gradients with the help of 9Rules. [...]
September 2nd, 2006 at 4:06 pm
extremely useful article!
thanks!
September 2nd, 2006 at 10:07 pm
[...] 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 [...]
September 3rd, 2006 at 1:17 pm
[...] A Gradient Tutorial. A great tutorial of how to create subtle gradients that appear more realistic in the 2D realm. (Via 9rules Network.) [...]
September 4th, 2006 at 8:51 am
[...] 9Rules gives the lowdown on gradients. Also applies to powerpoint presentations. Filed under: Asides | [...]
September 6th, 2006 at 12:19 am
My problem with gradients has always been “banding.” How do you keep that from happening?
Great post!
September 6th, 2006 at 5:23 pm
[...] 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 [...]
September 7th, 2006 at 8:32 am
[...] 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. [...]
September 11th, 2006 at 2:00 pm
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!
September 12th, 2006 at 6:26 pm
[...] A Gradient Tutorial » 9rules Network Official Blog (tags: photoshop graphics gradient how-to webdesign) [...]
September 27th, 2006 at 8:07 pm
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.
October 26th, 2006 at 8:52 am
[...] 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. [...]
October 29th, 2006 at 9:47 pm
[...] A Gradient Tutorial 作漸變色用 [...]
October 31st, 2006 at 5:29 pm
[...] A Gradient Tutorial » 9rules Network Official Blog (tags: photoshop graphics) [...]
November 13th, 2006 at 7:39 pm
[...] 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.) [...]
December 10th, 2006 at 3:58 pm
[...] 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. [...]
December 23rd, 2006 at 1:35 am
[...] December 23, 2006 at 1:35 am · Filed under CSS http://9rules.com/blog/2006/08/a-gradient-tutorial/ [...]
January 8th, 2007 at 4:13 pm
[...] 9rules has put out a tutorial on how to use different types of gradients. Simple advice, but still useful. skettino [...]
January 12th, 2007 at 8:25 am
[...] A Gradient Tutorial Written by Mike Rundle [...]
January 16th, 2007 at 6:59 am
[...] A Gradient Tutorial Written by Mike Rundle [...]
January 27th, 2007 at 6:38 am
[...] A Gradient Tutorial [...]
February 11th, 2007 at 9:12 pm
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”?
February 19th, 2007 at 2:54 am
[...] 49. A Gradient Tutorial [...]
February 19th, 2007 at 1:45 pm
[...] 49. A Gradient Tutorial [...]
February 20th, 2007 at 11:05 am
[...] 49. A Gradient Tutorial [...]
February 22nd, 2007 at 10:55 am
[...] Posted by ebenthurston on February 22nd, 2007 9rules Blog: The latest news, member announcements, and dance videos from the 9rules Team. [...]
February 24th, 2007 at 3:58 am
[...] 49. A Gradient Tutorial [...]
March 9th, 2007 at 11:46 am
[...] 50. A Gradient Tutorial [...]
March 12th, 2007 at 8:30 pm
The 9Rules Network has a good tutorial on creating gradients. thank you dudes
March 13th, 2007 at 10:13 pm
[...] A Gradient Tutorial [...]
March 20th, 2007 at 2:57 pm
[...] 49. A Gradient Tutorial [...]
April 18th, 2007 at 5:53 am
[...] 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] [...]
April 21st, 2007 at 5:39 pm
[...] 50. A Gradient Tutorial [...]
April 25th, 2007 at 10:24 pm
[...] A Gradient Tutorial Great read. [...]
April 26th, 2007 at 7:09 am
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?
April 26th, 2007 at 4:06 pm
[...] 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] [...]
May 18th, 2007 at 9:55 am
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.
June 17th, 2007 at 5:27 am
[...] 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.) [...]
June 22nd, 2007 at 9:18 pm
[...] *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. [...]
July 4th, 2007 at 12:20 pm
[...] A Gradient Tutorial Written by Mike Rundle [...]
September 27th, 2007 at 3:43 pm
[...] 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? [...]
October 1st, 2007 at 8:39 am
[...] 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 [...]
October 6th, 2007 at 8:26 am
[...] Artikel ini di terjemahkan dan di edit dari artikel http://9rules.com/blog/2006/08/a-gradient-tutorial/ [...]
October 12th, 2007 at 4:08 am
Very nice tutorial. “subtle not drastic” I’ll always keep that in mind.
October 15th, 2007 at 12:56 am
[...] A Gradient Tutorial [...]
October 23rd, 2007 at 12:02 am
[...] Gradientes. Si no tienes bastante aquà encontrarás unos cuantos más. [...]
November 1st, 2007 at 9:11 pm
[...] A Gradient Tutorial Written by Mike Rundle [...]
November 12th, 2007 at 3:51 pm
[...] 50. A Gradient Tutorial [...]
November 18th, 2007 at 1:24 pm
[...] Gradientes. Si no tienes bastante aquà encontrarás unos cuantos más. [...]
December 14th, 2007 at 10:45 am
[...] A Gradient Tutorial Written by Mike Rundle [...]
January 28th, 2008 at 6:31 pm
[...] 50. A Gradient Tutorial [...]
February 1st, 2008 at 3:26 am
[...] un petit tutorial pour mieux gérer les gradients, qui font toute la saveur du graphisme web 2.0, en attendant la prochaine tendance… [...]
February 15th, 2008 at 11:33 pm
[...] 50. A Gradient Tutorial [...]
February 17th, 2008 at 6:37 pm
[...] 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 [...]
February 25th, 2008 at 10:42 am
[...] Gradient Tutorial [...]
March 13th, 2008 at 7:10 pm
[...] 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 [...]
March 19th, 2008 at 7:14 pm
[...] clipped from 9rules.com [...]
March 19th, 2008 at 7:17 pm
Super Tutorial, hab es direkt in meinem Blog veröffentlicht, weiter so!
April 2nd, 2008 at 5:02 pm
[...] 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 [...]
April 6th, 2008 at 1:22 pm
[...] Official Blog - Gradient tool [...]
April 20th, 2008 at 10:59 am
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.
May 10th, 2008 at 7:07 pm
[...] 9 rules gradient tutorial. [...]
May 12th, 2008 at 5:42 am
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).
May 16th, 2008 at 12:07 pm
[...] 9 rules gradient tutorial. [...]
June 16th, 2008 at 7:33 pm
[...] A Gradient Tutorial from 9rules. [...]
June 18th, 2008 at 4:41 am
[...] A Gradient Tutorial [...]
June 18th, 2008 at 7:14 am
[...] A Gradient Tutorial from 9rules. [...]
July 19th, 2008 at 7:40 pm
Very nice tutorial.
August 5th, 2008 at 8:13 pm
Thanks.
August 6th, 2008 at 10:37 am
[...] 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 [...]
September 8th, 2008 at 3:29 am
[...] A Gradient Tutorial [...]
September 25th, 2008 at 3:17 am
I’m just started with design and gradients can be quite tricky when you loose saturation.
November 3rd, 2008 at 9:22 am
I think its fantastic to use gradient. Great tutorial! I like to add a darker layer on top of that.
February 15th, 2009 at 11:17 pm
[...] “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. [...]
March 21st, 2009 at 9:11 am
[...] Making an effective gradient background [...]