: How do I make an image fade on the right+left side in Photoshop? I recently launched radiolivechicago.com and my background image looks weird when it is all of the sudden cut off. I've been

@Sarah814

Personally I would the Gradient tool and layers masks in order to achieve this effect, but that's not what's important. You already have an image in Photoshop that looks like what you want, but it's not saving how you want it.

JPEG file format doesn't support transparency. In order to maintain transparency you need to save as a PNG file. Since you've already ruled out that option because of filesize, your other option would be to make the background black (or whatever color) instead of transparent.

To do that, create a new background layer, fill it with black, and then save the JPEG (you may need to flatten layers first; go to the Layers menu and choose Flatten)

Vote Up Vote Down

@Deb5748823

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.

Vote Up Vote Down

@Gonzalez368

If you are trying to have transparency, you will need to save the image as a .PNG. If you want to make it "appear" as though it's fading, pick the color you'd like to fade the edges to and just add a slight gradient to it.

Vote Up Vote Down