Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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?
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.
