Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have finished the development of an app. Now I have to worry about the icon ;-)

To align with the built-in app, I want the gradient of the my icon background looks like the built-in Camera app, i.e. a light source form the top.

   enter image description here

How can I clone the gradient in Photoshop? For example, can I take RGB values from a few reference points (top, middle, button) of the Camera icon to deine the gradient of my icon?

share|improve this question
up vote 3 down vote accepted

Well, you essentially answered the question yourself.

can I take RGB values from a few reference points (top, middle, button) of the Camera icon to deine the gradient of my icon?

That's exactly what you do, but for this one you don't need a middle value for this gradient.

You can make your life easier by first finding a higher resolution version of the icon. I did so by running a reverse image search with Google Images (click the camera icon in the search box).

The RGB value for the top of the gradient is #F8F8F8, the bottom is #919095. Set those as your foreground/background, apply a gradient overlay to your layer, and select the Foreground to Background gradient preset. If it comes out upside down, tick the Reverse checkbox.

If you want to re-color the gradient but have it look similar, add a Color Overlay layer effect and set the Blend Mode to something like Overlay (I usually just cycle through them to see which one looks nice)

Here's what I was able to come up with:

Camera Icon

share|improve this answer
Thanks @John, any chance you can share the PSD? I am not sure I understand where there is one layer or two (one for gradient, one for the background)? What I means is, what if I want to clone gradient but not the color, say, a yellowish icon with similar light source and gradient? – ohho Jan 24 '13 at 11:13
@ohho, the end result should be at least two layers: 1 for the gradient, and 1 or more for whatever you're putting on top of the gradient (the lens in this case). The gradient is a Shape object with a Gradient Overlay effect applied. I have edited my answer to include a screenshot of Photoshop for (hopefully) some clarity. Here are the colored version's layer effects: – JohnB Jan 24 '13 at 11:41
Thanks for the detail instruction! – ohho Jan 24 '13 at 12:23

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.