Tell me more ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.
up vote 1 down vote favorite

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:

Fade

share|improve this question
Don't have photoshop so I can't test this: mediacollege.com/adobe/photoshop/transparent/gradient.html – hyperslug Dec 21 '09 at 4:59

migrated from stackoverflow.com Dec 13 '09 at 12:35

3 Answers

up vote 1 down vote

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
up vote 0 down vote

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
up vote 0 down vote

javascript + http://www.w3schools.com/Css/css%5Fimage%5Ftransparency.asp

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

Your Answer

 
discard

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