Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

How to blur one edge of image?

0 views
Skip to first unread message

Brian_R...@adobeforums.com

unread,
Feb 9, 2009, 7:22:00 AM2/9/09
to
I want to blur just one edge of an image in my site header, so it fades into the white background rather than retaining a sharp edge. I googled and found about 8 different suggestions. After trying for three hours to do this one simple task, I had no luck. I could finally get the effect (using an alpha channel and Refine Edge) but couldn't get it to stick when saving.

I read that JPGs can't accommodate alpha channels but even a tif didn't work.

I tried different functions like Refine Edge, feather, etc - all to no avail. I was working in PSD.

Can anyone help with such a simple thing?

Thanks,
Brian

Denn...@adobeforums.com

unread,
Feb 9, 2009, 8:10:33 AM2/9/09
to
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.

Phosąfour dots

unread,
Feb 9, 2009, 8:50:41 AM2/9/09
to
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.

Ed Hannigan

unread,
Feb 9, 2009, 11:34:17 AM2/9/09
to
You probably don't need transparency at all. Just incorporate the white area in the final jpg.

Phosąfour dots

unread,
Feb 9, 2009, 11:41:46 AM2/9/09
to
So long as the whites match, that'll be great!

Brian_R...@adobeforums.com

unread,
Feb 9, 2009, 4:58:52 PM2/9/09
to
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?

John Joslin

unread,
Feb 9, 2009, 5:29:28 PM2/9/09
to
Does this help?

<http://imageshack.us>

jnta...@earthlink.net

unread,
Feb 9, 2009, 5:57:54 PM2/9/09
to
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, Brian_R...@adobeforums.com
wrote:

Brian_R...@adobeforums.com

unread,
Feb 10, 2009, 3:32:55 AM2/10/09
to
How did you get to that point?

John Joslin

unread,
Feb 10, 2009, 4:31:36 AM2/10/09
to
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.

Brian_R...@adobeforums.com

unread,
Feb 10, 2009, 8:23:53 AM2/10/09
to
Thank you, John. After another hour or so, I finally got this to work. Much appreciated.

John Joslin

unread,
Feb 10, 2009, 8:30:25 AM2/10/09
to
Glad you got there!

With practice it goes quicker!

Lawrenc...@adobeforums.com

unread,
Feb 10, 2009, 11:00:48 AM2/10/09
to
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?

John Joslin

unread,
Feb 10, 2009, 11:25:35 AM2/10/09
to

how do you fill the background directly?


Alt+Backspace will fill the background layer with the current background colour.

Ed Hannigan

unread,
Feb 10, 2009, 12:07:36 PM2/10/09
to
Thought it was Alt+Backspace (Alt-Delete). Have they changed it?

OOPS! That fills with Foreground color. Never Mind.

John Joslin

unread,
Feb 10, 2009, 1:02:59 PM2/10/09
to
Yes, but you can't modify it then.

Lawrenc...@adobeforums.com

unread,
Feb 10, 2009, 10:14:06 PM2/10/09
to
Ctrl+Backspace. I didn't know Backspace was used at all in hot keys.

Shows what I still have to learn.

John Joslin

unread,
Feb 11, 2009, 12:41:09 AM2/11/09
to
That's been around since the Dead Sea was just sick! :)

Ed Hannigan

unread,
Feb 11, 2009, 9:57:18 AM2/11/09
to
"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.

John Joslin

unread,
Feb 11, 2009, 10:02:53 AM2/11/09
to
I was thinking the method could be used with other page colours if desired.
0 new messages