Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I want to use an image in different screen resolutions with fading and the same background color. In a website, the image will not scale, but the background will. Something like this:

enter image description here

share|improve this question
add comment

1 Answer 1

up vote 1 down vote accepted

You can do this by using a transparent gradient mask.

This tutorial is quite similar, just use your background color in a separate layer underneath: http://www.mediacollege.com/adobe/photoshop/transparent/gradient.html

More details on masks: http://www.creativemac.com/2003/07_jul/tutorials/psgradient030723.htm and http://wegraphics.net/blog/tutorials/photoshop/photoshop-for-beginners-understanding-layer-mask/

share|improve this answer
    
The question is about web graphics with a variable width. If the OP takes the concepts in this answer (transparency and layers) and then outputs each layer with alpha channel (PNG format) and then layers them in place on the web page, perhaps the OP will have the desired result. –  horatio Aug 14 '12 at 15:21
add comment

Your Answer

 
discard

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.