Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote -4 down vote favorite

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
1  
@lovespring Please do not cross-post the same question on multiple SE sites. – Farray Aug 13 '12 at 15:23

1 Answer

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

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.