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 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?

share|improve this question
    
Are you trying to save a transparent background with the fade? –  Scott Aug 15 '12 at 23:49
    
If you are only wondering about how to save it, you should change the title to reflect that. –  Yisela Aug 16 '12 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 '12 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 '12 at 15:18

3 Answers 3

up vote 2 down vote accepted

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:

Flattening

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.

share|improve this answer

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.

share|improve this answer

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)

share|improve this answer

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.