Gradients are one of those things that can take a design from good to great. Sometimes it’s hard to get the values just perfect though!
No problem. We can check out what other people have done in the past. Below I’ve shown the original piece and then I took it into Photoshop and sampled a spot from the center of the gradient and also from the darkest area of the gradient. Just use those values to create a cool gradient for yourself.
In the second part of this post, I’ll show you a little experiment I created with the gradients and some “glowing” splatters.
.jpg)
And yes, I’ve even seen some really nice gradients from those template websites. Here are a few particularly nice ones.
Check out 25 Great Examples of Using Gradient Effects in Web Designs from Six Revisions for more inspiration (I found some of the examples here).
Of course, a lot more goes into creating these finished pieces than just spiffy gradients. This delve into the details of specific gradients was to give you ideas for how the gradients are constructed and how to put the finishing touches on your designs. Notice, for example, in that the last one with the apples, the center of the gradient was actually more yellow than green, but when put together with the green in a gradient, your eye doesn’t register that.
Practical Experiment
I worked up a quick experiment myself, using the colors from the Buddha Wallpaper. I’ll also show you a really easy way to make your piece look like it’s glowing.
I started off with the radial gradient background. #3a565b for the center, fading out to #1f282c at the edges (grab the image and sample the squares in the corner).
Then, using a splatter brush from Bittbox, I clicked on a new layer using the color #77e5e4.
I duplicated that layer and then selected the bottom one. With my favorite filter, Gaussian Blur, I blurred the bottom splat layer about 3px (at 72 dpi, blur radius will be higher for higher res images) and set the layer mode to Color Dodge.
Then set the top splat layer (NO blur) to the Linear Dodge layer mode.
You can try different colors for the splats and other little details and do the same blur and layer modes as above to achieve this glowing effect. The pink I used here, for example, is #e577d2. The gradient fade to dark in the background helps to create the illusion that these pieces really are glowing.
More Resources
1stWebDesigner recently published two great articles on gradients:
36 Color Gradient Sets For Photoshop and Resource Sites: Part 1 has a list of sites with free gradient downloads for use with Photoshop.
Beautiful Gradient Effects On Web design – Research: Part 2 is similar to the first part of my article here and details some sites that use gradients in their design and how to achieve those effects.
Great examples, Lauren. I particularly like how you show the two distinct colours separately. That’s a nice touch.
David Airey´s last blog post: Northern Ireland’s designer twits
very nice breakdown on gradients, Lauren. My favourite one on the list is Cirque du Soleil’s. I took my daughter to their show Corteo last year, and their site does a great job promoting the magical image of the show.
inspirationbit´s last blog post: Striking Web Sites with Font Stacks that Inspire
Some great examples Lauren and love the mini tutorial at the end.
Patternhead´s last blog post: Free Vector and Pixel Pattern – Hand-Drawn Scrolls
nice tutorial! (and article)
Alec´s last blog post: I Am a Bird
Thank-you, thank-you, thank-you.. it’s so nice to see someone write an article like this.. i get bothered when I hear people bad mouth gradients, when they’re just like any other design element — easy to use like an axe, hard to use like a sword.. all it takes is a little grace
and the examples are thoughtful, thanks for the effort
Alex Charchar´s last blog post: Valuable Ideas and TED
David,
Thanks! This post was inspired from all the posts that show cool gradients but never explain HOW to get them!
Vivien,
Cirque is a ton of fun. We always go when they are in town and just bought tickets for KOOZA in January 2010. Can’t wait! I always love the art styles for the various shows; gorgeous!
John,
Thanks! You know, I almost wasn’t going to include the tut, but I’m glad I did since everyone seems to like it!
Alec,
Thanks! Hehe, the tut was the best part in your opinion, then? That’s cool!
Alex,
Well thank you for gracing my pages with your beautiful prose (and in praise of my article… even better!)
I have to commend your for this. They are fantastic.
That icebrrg thing has got to be the cutest website ever.
Nate Berkopce´s last blog post: Blog Roundup
I have to agree with some of the other commenters, it’s a nice touch adding the two colors used in the gradients. Nice.
Brad C´s last blog post: The Brads – Early Morning
Nate,
Isn’t it?? I liked it too.
Brad,
Thanks! Glad you liked it.
I personally don’t like gradients when designing mainly for the reason that so many “non-designers” use it. (like drop shadows, outer glows, etc.) But of course, there are ways to use things correct and incorrectly.
In this case, appropriate use of gradients really do help furthering the design goals.
Dwight Co´s last blog post: The Secret of Selling Design: The Puppy Dog Face
Great article/tutorial. I’m a big fan of gradients when used well. Nice one and good examples! Thx.
Interesting article! It seems like gradients have become increasingly popular with the rise of the Web 2.0 style. They are so easy to implement and can make a huge difference. Gradients within text are another cool effect to freshen up your website.
Loved this technique! Thanks for sharing!
Dwight,
I think experienced designers can make almost anything work, no matter who uses them! Gradients are a great way to add depth and interest to a piece.
Sean,
Thanks for stopping by! Glad you enjoyed it.
Media,
Eeek! Web 2.0! Noooo. They may be easy to implement, but as in the article, I think picking the perfect colors is the part that requires a good eye that most don’t have.
Brandi,
You’re welcome.
Good post and nice touch showing the two colours used in each gradient.
Jennifer Farley´s last blog post: Recent Work: Dalai Lama Poster
Jennifer,
Thank you! I’m always tickled when other great designers find my posts useful.
Great post, Gradients defintley add depth to your work when used correctly. I love the glow effect.
Funny how things go full circle, I was always told that gradients were a NO NO in print 10 years ago, now look at us with web 2.0 style grads all over the place. Thanks for the tutorial. Matt.
Another great use for gradients (especially subtle ones) is in logos, they can really add a nice touch of depth and interest, and just give a logo that extra lift. But I think there is a danger if not careful of gradient overload so treat with care
Look a madmediamonkey.com
^___^ It’s awesome.
Great post and tutorial. Thanks a lot!
Its amazing to see how something like a simple gradient can add so much depth to a site. I love using graidents in photoshop when designing a site.
7 Trackbacks
[...] בלוג העיצוב האינטראקטיבי "creative curio" הוציא פוסט קטן וחמוד על השימוש בגרדיאנטים (מעברי צבע) ואיך הם הופכים עיצוב טוב לעיצוב מצויין. שווה בדיקה בעיקר בשביל כמה דוגמאות חמודות. [...]
[...] Gradients By dlb ⋅ June 17, 2009 ⋅ Post a comment Filed Under color, Design Taking Design from Good to Great with Gradients From Creative Curio No TweetBacks yet. (Be the first to Tweet this [...]
[...] Taking Design from Good to Great with Gradients June 29th, 2009 / Digg / Del.icio.us / Stumble / Reddit / Float! [...]
[...] Visit Article [...]
[...] Read More [...]
[...] Taking Design from Good to Great with Gradients – Creative Curio – Jun ‘09 [...]
[...] Curio → Taking Design from Good to Great with Gradients Design Meltdown → Gradient Madness Iit.Bloomu → Lesson in Gradients Wipeout 44 → Gradient [...]