Blurring edges of .JPG image ?

[FredZimmerman]

How do I take .JPG photo image mask it, and blur the edges?

It is a rectangular photographic image that I want to create a central oval in
focus, and "ovalize" the
rest of the rectangle outside central focused picture, and blur the outer band
of the rectangle.

I'm a newbie if you couldn't tell.

Fred Z.

[abeall]

There are a bunch of ways you could do this in Fireworks, but I think the
easiest and most flexible would be to use a vector ellipse, with a feathered
edge, as a mask on the bitmap.

1) Open the JPG in Fireworks
2) Use the Ellipse tool to draw an ellipse inside your image. Keep ellipse
small enough so that the edge of the ellipse is far enough away from the edge
of the image for the feathering.
3) In the properties panel, make sure the ellipse is white
4) In the properties panel, look for the "Edge" dropdown and change it to
"Feather"
5) You can set the Feather amount.
6) Select both objects (the original bitmap image, and the vector ellipse) and
choose Modify > Mask > Group as Mask

At this point you should have a nice feathered, elliptical mask to your
original image. You can change the background color to match your website
background color (select nothing, then look in the Properties panel to choose
background color).

If you find that the ellipse is not quite the right size, position, or
feather, you can continue to edit it. Look in the Layers panel, and click on
the mask thumbnail (it will be the thumbnail on the right of the two thumbnails
which appear "linked" together). Once selected, you can change the feather. If
you want to move or scale the ellipse without moving/scaling the image, you
must "unlink" the mask -- simply click that little chain link icon between the
mask thumbnail and the image thumbnail in the layers panel. Once unlinked, you
can click on the mask thumbnail and move/scale without moving/scaling the image.

Hope that does the trick!

[abeall]

Since you mention you're new to this, I should also explain: after you've made
the edits, you can save the file (as a JPG), or you can save the file as a
Fireworks PNG (different than a web 8bit/24bit/32bit PNG), which you can later
open in Fireworks and still be able to edit the ellipse mask.

On the website, you should use a JPG, though, not a Fireworks PNG. Usually I
have a Fireworks PNG on my computer, and a JPG version on my computer which I
upload and use on the website.

[FredZimmerman]

Thanks Aaron, that did the trick. Thanks for
additional optimizing tips for my website.

Fred Z.:grin;

[FredZimmerman]

Aaron,

I had to use .PNG in web page as there was a white background outside the oval
(mask) but inside the x, y dimensions of the .JPG that was the image source I
used in HTML tag. The .PNG did not show the white background the way the .JPG
did, and it worked without too slow a load time.

Fred Z.

[abeall]

That's fine, just make sure that rather than using a Fireworks PNG for the web
you use a 32bit PNG, or "PNG 32" as found in the Optimize panel, and exported
with File > Export.

One thing to note, Internet Exporer 6 and below do not show the transparency
without using some crazy hacks (that you can find on google by seraching for
"IE PNG transparency hack"