To preserve transparency for a web page, your best bets are saving as GIF (most common) or PNG (less common). The transparent parts of your image should be showing the checkerboard.
PNG will probably give you the highest quality/best transition of the blur. Googling either "photoshop transparency PNG" or "photoshop transparency GIF" should give you several tutorials.
The pixels in a GIF image are either 100% opaque or 100% transparent. The GIF format will provide NO smooth transition from opaque to transparent without some tricky workarounds.
PNG is what you want to use.
You probably don’t need transparency at all. Just incorporate the white area in the final jpg.
So long as the whites match, that’ll be great!
Sorry folks – I’m just more confused. This is what I found when I googled. So many different suggestions for doing what I thought would be a very simple task. I also can’t follow the instructions, as to exactly what to do with what layers etc.
That’s why when I got into alpha channels etc, I got hopelessly lost as a newcomer to Photoshop.
Is there perhaps an online utility for this, like I’ve seen with rounding corners, for example?
Haven’t really followed the thread but try this: open image. duplicate image. blur the duplicate. add a layer mask to the blurred image. choose the gradient tool with a gradient of black to white. play with the amount of white. with mask active draw across the duplicate image with the gradient tool. The black part of the mask will let the layer below show through and the white will let the blur on the top layer show.
On Mon, 9 Feb 2009 13:58:52 -0800,
wrote:
Sorry folks – I’m just more confused. This is what I found when I googled. So many different suggestions for doing what I thought would be a very simple task. I also can’t follow the instructions, as to exactly what to do with what layers etc.
That’s why when I got into alpha channels etc, I got hopelessly lost as a newcomer to Photoshop.
Is there perhaps an online utility for this, like I’ve seen with rounding corners, for example?
How did you get to that point?
Opened the Lemon image file.
Copied the background layer by dragging it to the little folder icon at the bottom of the layers palette. (I then double-clicked on the name and called it "Image layer" you don’t have to, but I like to name layers as a matter of course.)
Selected the Background layer and filled it with white*.
Selected the Image layer and added a layer mask by clicking on the little mask icon at the bottom of the layers palette (3rd from left).
Took the gradient tool and chose black to white (should be the default). Drew the tool across the image to fill the mask (making sure the mask is selected in the layers palette.)
Voilá!
You can keep the layered image by doing a "Save for Web" which will prepare the file for the web page.
*If your web page had a different colour you could use that here.
Thank you, John. After another hour or so, I finally got this to work. Much appreciated.
Glad you got there!
With practice it goes quicker!
Nice trick JJ, but I cannot simply fill the background with white I had to select a new fill layer between the background and the copy first and fill it with white.
The only other option is to use the Paint bucket tool, but that did nothing. So, I have three layers, not two. No matter I suppose. I’ve used the fill layer in such circumstances before, but how do you fill the background directly?
how do you fill the background directly?
Alt+Backspace will fill the background layer with the current background colour.
Thought it was Alt+Backspace (Alt-Delete). Have they changed it?
OOPS! That fills with Foreground color. Never Mind.
Yes, but you can’t modify it then.
Ctrl+Backspace. I didn’t know Backspace was used at all in hot keys.
Shows what I still have to learn.
That’s been around since the Dead Sea was just sick! 🙂
"Yes, but you can’t modify it then."
Well, you don’t really need a Background at all. It will flatten when Saved as jpg.
I was thinking the method could be used with other page colours if desired.
