Forum: Photoshop


Subject: changing gradient colors

ninhalo5 opened this issue on Jun 03, 2010 · 9 posts


ninhalo5 posted Thu, 03 June 2010 at 11:11 AM

Hi, I'm trying to figure out how to change the colors of an image that has a gradient to match a color I have set aside, sort of like when you take a image of a car and you change the color of the car to whatever you want, except this is using gradients. I've attached an image I'm working on its a basic circle with a gradient, some shadows etc. to the right is the colors I want to use. I need to make 4 images each using only one of those colors one the right for each gradient. I've tried adding color balance and hue/saturation to the image, But its ending up getting pixilated and not an exact color match. Does anyone have an idea on how I can make exact duplicates of this image using the colors to the right of the image?

Thank you


dreamer101 posted Thu, 03 June 2010 at 12:18 PM

It couldn't be done in one shot. You would have to apply the different color gradients to 2 of the 5 layers of the image ... the outside ring with drop shadow and the background within the ring. Did you make this image and have it in layers or is it an image you found?


ninhalo5 posted Thu, 03 June 2010 at 2:08 PM

It's an image that I have on a web course I'm rebuilding, unfortunatly all I have is the stock image, I'm changing the borders of the web pages to match the colors added to the image, which using the origonal image will not match the other colors and look well pretty bad.

I'll probably have to somehow make an exact copy and build it in flash which would seem the best option, though my client does not want the image to change at all just the colors :(


dreamer101 posted Thu, 03 June 2010 at 4:49 PM

You can do it in Photoshop with no problem.
Create the different layers.
Make 2 gradients or each of your 4 colors for Layer 1 & 3.

Layer 5: SAMPLE - Probably not needed
Layer 4: the number 1 - white with a slight drop shadow and maybe a bit of bevel
Layer 3: Ring with drop shadow. Gradient #2  blue to light blue
Layer 2: semi circle inside ring. Colored solid white with a 20-25% transparency
Layer 1: background within ring. Gradient #1 light blue to white

Duplicate all your layers onto new documents before applying the gradients. Image will be exactly the same. Only the color will change when you apply gradients.


ninhalo5 posted Thu, 03 June 2010 at 8:46 PM

Thanks Dreamer, I went ahead and remade them in flash and photoshop, I couldn't quite get the smoothness/clarity I wanted in photoshop alone. I might try to remake them in illustrator.


dreamer101 posted Fri, 04 June 2010 at 10:03 AM

That turned out pretty good. Only thing I notice missing is the drop shadow on the top left falling inside the ring. The 1 is a different font but that wouldn't matter as long as all the 1's were the same.


ninhalo5 posted Fri, 04 June 2010 at 11:01 AM

Yeah, I couldn't figure out what the font was. I found one somewhat close. the drop shadow could stand to be more noticeable. the one thing I am really having trouble with is getting the gradient on the outside ring to match up correctly, I can get it to go from white to brown but not brown to white, Hmm perhaps I should try reversing the colors.


dreamer101 posted Fri, 04 June 2010 at 1:10 PM

You can do a white ring. On top put a gradient of brown to brown (exact same color) but lowering opacity at one end. Once you get the proper opacity for the gradient end stop you can use that same opacity when doing the other colors.


ninhalo5 posted Fri, 04 June 2010 at 2:53 PM

good idea, I'll give it a try, thanks