This gradient effect is harder than it looks

August 9, 2012 11:36 AM

I'm a coder and a total neophyte regarding graphics and design. I see this kind of single-color gradient everywhere, but simply cannot manage to make one myself.

What I mean is something like the upper part of this.

Its a barely perceptible (radial?) single-color gradient that's great at giving a subtle impression of depth, especially when offset against a darker bottom or side panel.

Seems simple enough but obviously it isn't for graphically challenged me. A radial gradient between a green and a darker green isn't really doing it. Is there some theory that I'm missing, or is this a "keep doing it until it looks right" kind of effect?

I'd like to figure this out in html, svg, or code (for Android or XAML) - I think if I can pull it off in inkscape or something similar I'll be able to do it anywhere.

posted by tempythethird to Computers & Internet (12 answers total)

If you're attempting to make the gradient in something like Photoshop, using the gradient tool...where you click-and-drag from a centerpoint outward...quite often, to get the right effect, your centerpoint needs to be far off the actual image area. Same thing in Illustrator.

The effect can be achieved lots of different ways, though. Like, a flat green with lighting effects added, for instance. Or, using the gradient mesh in Illustrator.
posted by Thorzdad at 11:47 AM on August 9, 2012 [1 favorite]

There are a couple ways to do it. The easiest is to make it straight up and down- make a gradiant in photoshop, cut it so it's one pixel wide and code it to streach across the window as a background image. If you want it to be sidways, you need to cut the image exactly the size you want to gradiant to be on the page and then match the hex number of the background to the end of the gradient so it looks seamless when you lay the image on top.
posted by Blisterlips at 11:55 AM on August 9, 2012

In web design, this effect is often accomplished by overlaying a transparency gradient on an existing color field.
posted by Aquaman at 11:56 AM on August 9, 2012 [1 favorite]

1) yes, you want a radial gradient.

2) this can be done with CSS wizardry. See Aquaman's link and this. And maybe other things, but my expertise is CSS wizardry, but you don't say much about how you're using this effect, or the technical constraints you're working in.

3) When you're testing it out, are you picking colors "randomly" or sampling based on examples you like? There are a lot of subtle choices when picking colors to make them seem more natural, like adding more yellow to the lighter side.
posted by itesser at 12:10 PM on August 9, 2012

Looking at it closely I see 2 gradients... roughly #75d367 to #28ab14 radial from top center to bottom center (you actually have to start outside the frame of the image and end below it to get the exact match in photoshop) and then #a5d675 radial coming in from the top right corner at a roughly 45 degree angle. There are lots of good links above on how to do gradients in various kind of code(ish) ways but that's why a simple light to dark green radial isn't cutting it
posted by missmagenta at 12:14 PM on August 9, 2012

Best answer: Yeah, throw a threshold filter or play with the levels and it becomes more obvious that it's got to radial gradients, one top centre, one top right. The one in the top right has a bit of yellow to it while the centre one is green. Of course you weren't able to pull it off with a single gradient.
posted by RobotHero at 12:52 PM on August 9, 2012

TWO radial gradients, even.
posted by RobotHero at 12:52 PM on August 9, 2012

background-image: -webkit-radial-gradient(top right, rgb(65%, 84%, 46%), rgb(15%, 67%, 7%));
posted by tylerkaraszewski at 1:35 PM on August 9, 2012

Best answer: To reverse engineer - you can see the gradients more clearly if you adjust curves in Photoshop:

http://cl.ly/image/2z2o1t062c1K
posted by wolfr at 2:03 PM on August 9, 2012 [2 favorites]

Response by poster: Thanks everyone for all the answers, I have a lot to work with over the next few days. Sadly I can't deal with the complexity or price of Adobe products but I can translate most of this to the OSS equivalents.

wolfr, RobotHero
Thanks so much for that hint! It really helps, I'd never before considered that its possible to "reverse engineer" an image, but now that I can really see the gradients I have a pretty good idea of how this was done. I think you guys just let me in on a pretty important secret.
posted by tempythethird at 3:21 PM on August 9, 2012

Response by poster: but you don't say much about how you're using this effect, or the technical constraints you're working in.

I need something like this both on a website and Android and Win8 apps - so a few different technical environments, but they can all handle the concept similarly.

When you're testing it out, are you picking colors "randomly" or sampling based on examples you like? There are a lot of subtle choices when picking colors to make them seem more natural, like adding more yellow to the lighter side.

I'm working off an existing color scheme that I can't really deviate from, so I start with one of the colors in the scheme and then use that same color but a smidge darker.
posted by tempythethird at 3:43 PM on August 9, 2012

tempy, i'm one of the creators of the visual design tool for win8 and can answer any questions you have about getting this effect on that platform if you can't figure it out.
posted by sciurine at 10:08 PM on August 11, 2012