5 Replies Latest reply on Apr 14, 2008 1:28 PM by abeall

    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.
        • 1. Re: Blurring edges of .JPG image ?
          abeall Level 3
          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!
          • 2. Re: Blurring edges of .JPG image ?
            abeall Level 3
            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.
            • 3. Re: Blurring edges of .JPG image ?
              FredZimmerman Level 1
              Thanks Aaron, that did the trick. Thanks for
              additional optimizing tips for my website.

              Fred Z.
              • 4. Re: Blurring edges of .JPG image ?
                FredZimmerman Level 1
                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.
                • 5. Re: Blurring edges of .JPG image ?
                  abeall Level 3
                  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"