I recently launched radiolivechicago.com 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?

  • Are you trying to save a transparent background with the fade?
    – Scott
    Aug 15, 2012 at 23:49
  • If you are only wondering about how to save it, you should change the title to reflect that.
    – Yisela
    Aug 16, 2012 at 0:05
  • Well, I'm just not sure if I'm doing it correctly to begin with, I have a Gaussian Blur.
    – Kamilski81
    Aug 16, 2012 at 1:13
  • possible duplicate of How to make a image fade out to both sides - although again it's not entirely clear what the real question is
    – e100
    Aug 16, 2012 at 15:18

3 Answers 3


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.


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)


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.