Gradient tool

maan07 — Thu, 15 Apr 2010 05:58:50 +0000

we use style like background-image, background-repeat, background-position – 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.

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!

Let’s try this one:

Version without gradient

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.

Near-by colors gradient

Far-away colors gradient

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:

Polished version

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.