Super User is a question and answer site for computer enthusiasts and power users. 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 want to make a transparent fade for the underneath color so that it could be possible to change the color dynamically (through JS) without losing the effect of the fading. How would I go about doing that in Photoshop?

See the following picture:


share|improve this question

migrated from Dec 13 '09 at 12:35

This question came from our site for professional and enthusiast programmers.

Don't have photoshop so I can't test this: – hyperslug Dec 21 '09 at 4:59

Like this:

  1. Create a new image.
  2. Create a new gradient layer: Layer > New Fill Layer > Gradient
  3. Click OK.
  4. Set the style to linear and the angle to 90.
  5. Double click the gradient
  6. Set the opacity for the leftmost stop to 0% and the opacity for the rightmost stop to 100%.
  7. Set the color for both stops to the same gray shade that you want for the solid color.
  8. Click OK.
  9. Use Save For Web to save the image as PNG.
share|improve this answer
@Guffa, if you don't select a color for both stops, will the image have a gradient alpha transparency? – hyperslug Dec 13 '09 at 16:12
@hyperslug: Both stops will always have a color, you can't not select a color. If you don't use the same color for both you will also get a color gradient along with the fade out. It's the opacity gradient that makes the fade out effect that you are interrested in. – Guffa Dec 14 '09 at 8:25

Generally, this questions belong to superuser. But I can tell one things. You need to use transparency in image, as far as I remember IE does not support transparency of PNG or at least "fine" transparency (depends on version you need to support). AFAIK IE supports only transparent or not and starting with IE7.

You may want to use some JS image processing library.

share|improve this answer
Yes, but how to make up such kind of transparency in image? – Alex Cage Dec 13 '09 at 7:58

javascript +

share|improve this answer
Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. – Tom Wijsman Mar 29 '11 at 12:43

You must log in to answer this question.