How do I make an image fade on the right+left side in Photoshop?


I recently launched and my background image looks weird when it is all of the sudden cut off.

I've been hacking around in PS and followed this tutorial to create my faded image.

However, I can't figure out how to save it like previously (64KB jpeg) with a black background and a nice fade?

When I save it as a PNG then the file size is 600KB versus a 60KB jpeg. Any recommendations on what I should do?

10/15/2012 12:49:00 PM

Accepted Answer

Instead of using a blur to create a transition between your image and the background color, use a layer mask. To do this in Photoshop, you need 2 layers - one with your image, and one with the color. Create a layer mask on the upper layer and fade out to reveal the lower layer.

Here is a rough visualization of how it works:


With CSS3, you can use multiple backgrounds to achieve this effect by creating 1 background with your image, and another background with a transparent-to-black fade.

8/16/2012 5:12:00 AM