Web Design & Print Design Team - Array Studio

Control your color gradient tool!

Posted By Predrag on June 12, 2006

There is one thing you should know about gradients no matter what application you use – it is a tricky business. You can create nice color harmony or ruin your layout in 3 mouse clicks.

Back in 2002 I was avoiding it wherever possible from various reasons:

• Page load was longer
• It looked unprofessional and lame
• 2 of 3 gradients throughout the Web were followed with some horror looking headline, 3D rotating logo and/or heavy JPEG compression

Of course, those days CSS was used for changing colors in anchor tags - rarely for something more. Now it’s different – we use style like background-image, background-repeat, background-position and whoohoo – with a 0.1KB GIF image of 50×1 pixels in gradient, we have a cool looking header background. If we use some cool font, sometimes it’s more than enough for good start in our design.

So, now we know what we need and I am more than sure you know how to create gradient in your favorite application. You pick two colors, you draw a direction line and that’s it! Gradient is here. We just need to learn how to control it.

Here are some ideas how to refresh your current web sites…

Use close-by colors

Don’t pick red and green colors to create your gradient. Use shades of same color! More importantly – use close-by shades! Here is what I’m talking about:

I don’t want to waste my words nor my eyes on this one. You’ve seen a lot of these around the web. Perhaps with all the colors of the rainbow…

Let’s try this one:

OK, you must admit this one looks better than the top one. It’s clean and simple. If you can’t manage the shades, please use simple fill without gradient.

Now, the magic. I used 2 close colors (in this example I used #b91716 and #990709). Below is the version with 2 far-away colors.

Argh. This looks ugly and far from acceptable.

So, that is what I am babbling about for all this time – use close by shades of the same color for best effect. This way, you can cut 1px wide image and through CSS you can place it in your website header without any hassle.

If we go back to winner, gradient #3, we can further polish it. We can add some pattern over it, border around it and that is basically it. (This is not necessary at all; I just thought I could make you think and experiment further). This is what I created in less than a minute:

Conclusion: use near by shades of one color for best achievements.

Use top-to-bottom gradient direction

If you are Photoshop user, you have access to a lot of possible variations of a gradient. If you use GIMP, you have a bit less, but that is not an issue. If you are working for print, spend all day creating your gradient – only limit you have is your printer, Pantone colors match in your printing company and your imagination.

However, if you are creating for the Web, than you need to sing another song. Use top-to-bottom gradient direction! Why? It’s easier to code it. Effect you’ll achieve with some other directions won’t look much better, but the pain in your head will grow when the coding type comes.

That’s more than enough to give you a head-start. Web 2.0 environment and XHTML Strict DTD are forcing us (bless them, BTW) to separate code and design – minor gradients and simple-as-possible code is what we need for the upcoming time.

Category: Web Design |
Tags: