13 Replies Latest reply on Sep 21, 2006 5:31 PM by Newsgroup_User

    Softened edge?

    Level 7
      I'm sorry if this is a frequently asked question, but I searched the
      archives, but didn't find instructions I could understand!

      I'm using Fireworks MX 2004, and my client wants a "softened edge" around a
      graphic. Can someone point me to a tutorial or give me the steps to do
      that??

      Much appreciated,


      --
      Patty Ayers | www.WebDevBiz.com
      Free Articles on the Business of Web Development
      Web Design Contract, Estimate Request Form, Estimate Worksheet
      --


        • 1. Re: Softened edge?
          Level 7
          Hi Patty:

          If you want the edge of the photo to be softened, draw a vector shape
          and feather the edge. Fill the shape with white, then select both
          objects and go to Modify > Mask > Group as Mask.

          --
          Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
          Extending Knowledge, Daily
          http://www.communityMX.com/
          CommunityMX - Free Resources:
          http://www.communitymx.com/free.cfm
          ---
          .:Adobe Community Expert for Fireworks:.
          news://forums.macromedia.com/macromedia.fireworks
          news://forums.macromedia.com/macromedia.dreamweaver

          P@tty Ayers wrote:
          > I'm sorry if this is a frequently asked question, but I searched the
          > archives, but didn't find instructions I could understand!
          >
          > I'm using Fireworks MX 2004, and my client wants a "softened edge" around a
          > graphic. Can someone point me to a tutorial or give me the steps to do
          > that??
          >
          > Much appreciated,
          >
          >
          • 2. Re: Softened edge?
            Level 7
            Thank you, Jim. I tried that technique, and I'm confused by the result on
            the screen in Fireworks. When I follow those steps exactly, I end up with a
            rectangle filled with the checkerboard pattern that Fireworks uses on
            transparent parts of a canvas. Shouldn't the result I see in FW be the
            original photo with a feathered edge, or does it have to be exported before
            that can be seen?


            --
            Patty Ayers | www.WebDevBiz.com
            Free Articles on the Business of Web Development
            Web Design Contract, Estimate Request Form, Estimate Worksheet
            --




            "Jim Babbage" <jbabbage@newmediaservices.ca> wrote in message
            news:eeunsu$r2r$1@forums.macromedia.com...
            > Hi Patty:
            >
            > If you want the edge of the photo to be softened, draw a vector shape and
            > feather the edge. Fill the shape with white, then select both objects and
            > go to Modify > Mask > Group as Mask.
            >
            > --
            > Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
            > Extending Knowledge, Daily
            > http://www.communityMX.com/
            > CommunityMX - Free Resources:
            > http://www.communitymx.com/free.cfm
            > ---
            > .:Adobe Community Expert for Fireworks:.
            > news://forums.macromedia.com/macromedia.fireworks
            > news://forums.macromedia.com/macromedia.dreamweaver
            >
            > P@tty Ayers wrote:
            >> I'm sorry if this is a frequently asked question, but I searched the
            >> archives, but didn't find instructions I could understand!
            >>
            >> I'm using Fireworks MX 2004, and my client wants a "softened edge" around
            >> a graphic. Can someone point me to a tutorial or give me the steps to do
            >> that??
            >>
            >> Much appreciated,
            >>

            • 3. Re: Softened edge?
              Level 7
              P@tty Ayers wrote:
              > Thank you, Jim. I tried that technique, and I'm confused by the result on
              > the screen in Fireworks. When I follow those steps exactly, I end up with a
              > rectangle filled with the checkerboard pattern that Fireworks uses on
              > transparent parts of a canvas. Shouldn't the result I see in FW be the
              > original photo with a feathered edge, or does it have to be exported before
              > that can be seen?

              Change the canvas color to the one that matches the color of your HTML page.


              --
              Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
              --------------------------------------------------------------
              http://www.projectseven.com
              Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
              CSS Newsgroup: news://forums.projectseven.com/css/
              Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
              --------------------------------------------------------------
              • 4. Re: Softened edge?
                Level 7

                "Linda Rathgeber **Adobe Community Expert**" <lightly@sc.rr.com> wrote in
                message news:eeuq3u$b0$1@forums.macromedia.com...
                > P@tty Ayers wrote:
                >> Thank you, Jim. I tried that technique, and I'm confused by the result on
                >> the screen in Fireworks. When I follow those steps exactly, I end up with
                >> a rectangle filled with the checkerboard pattern that Fireworks uses on
                >> transparent parts of a canvas. Shouldn't the result I see in FW be the
                >> original photo with a feathered edge, or does it have to be exported
                >> before that can be seen?
                >
                > Change the canvas color to the one that matches the color of your HTML
                > page.

                Thanks, Linda - ok.. that's done, and I followed Jim's steps, above. Now I
                see the original image, with no evidence of a feathered edge. ???


                --
                Patty Ayers | www.WebDevBiz.com
                Free Articles on the Business of Web Development
                Web Design Contract, Estimate Request Form, Estimate Worksheet
                --


                • 5. Re: Softened edge?
                  Level 7

                  "P@tty Ayers" <pattyayersTAKETHISOUT@REMOVEcarolinawebsolutions.com> wrote
                  in message news:eeuqg0$ta$1@forums.macromedia.com...
                  >
                  > "Linda Rathgeber **Adobe Community Expert**" <lightly@sc.rr.com> wrote in
                  > message news:eeuq3u$b0$1@forums.macromedia.com...
                  >> P@tty Ayers wrote:
                  >>> Thank you, Jim. I tried that technique, and I'm confused by the result
                  >>> on the screen in Fireworks. When I follow those steps exactly, I end up
                  >>> with a rectangle filled with the checkerboard pattern that Fireworks
                  >>> uses on transparent parts of a canvas. Shouldn't the result I see in FW
                  >>> be the original photo with a feathered edge, or does it have to be
                  >>> exported before that can be seen?
                  >>
                  >> Change the canvas color to the one that matches the color of your HTML
                  >> page.
                  >
                  > Thanks, Linda - ok.. that's done, and I followed Jim's steps, above. Now I
                  > see the original image, with no evidence of a feathered edge. ???

                  Wait, ok, I think it's working... :-)


                  --
                  Patty Ayers | www.WebDevBiz.com
                  Free Articles on the Business of Web Development
                  Web Design Contract, Estimate Request Form, Estimate Worksheet
                  --


                  • 6. Re: Softened edge?
                    Level 7

                    "P@tty Ayers" <pattyayersTAKETHISOUT@REMOVEcarolinawebsolutions.com> wrote
                    in message news:eeuqmf$14h$1@forums.macromedia.com...
                    >
                    > "P@tty Ayers" <pattyayersTAKETHISOUT@REMOVEcarolinawebsolutions.com> wrote
                    > in message news:eeuqg0$ta$1@forums.macromedia.com...
                    >>
                    >> "Linda Rathgeber **Adobe Community Expert**" <lightly@sc.rr.com> wrote in
                    >> message news:eeuq3u$b0$1@forums.macromedia.com...
                    >>> P@tty Ayers wrote:
                    >>>> Thank you, Jim. I tried that technique, and I'm confused by the result
                    >>>> on the screen in Fireworks. When I follow those steps exactly, I end up
                    >>>> with a rectangle filled with the checkerboard pattern that Fireworks
                    >>>> uses on transparent parts of a canvas. Shouldn't the result I see in FW
                    >>>> be the original photo with a feathered edge, or does it have to be
                    >>>> exported before that can be seen?
                    >>>
                    >>> Change the canvas color to the one that matches the color of your HTML
                    >>> page.
                    >>
                    >> Thanks, Linda - ok.. that's done, and I followed Jim's steps, above. Now
                    >> I see the original image, with no evidence of a feathered edge. ???
                    >
                    > Wait, ok, I think it's working... :-)

                    No, afraid it's not yet. Here's what I'm doing.

                    1. Open image. Make background same as my HTML page (it's brown).
                    2. Draw a rectangle filled with white over the image, same size. Feather the
                    edges of the white rectangle (a lot, to make it obvious for right now).
                    3. Select both the image and the white rectangle, and go to Modify > Mask
                    and choose Group As Mask.

                    The result looks exactly like the original image.

                    ???


                    --
                    Patty Ayers | www.WebDevBiz.com
                    Free Articles on the Business of Web Development
                    Web Design Contract, Estimate Request Form, Estimate Worksheet
                    --


                    • 7. Re: Softened edge?
                      Level 7
                      P@tty Ayers wrote:

                      > No, afraid it's not yet. Here's what I'm doing.
                      >
                      > 1. Open image. Make background same as my HTML page (it's brown).
                      > 2. Draw a rectangle filled with white over the image, same size. Feather the
                      > edges of the white rectangle (a lot, to make it obvious for right now).

                      Try this instead. Draw a white rectangle over the image (same size) and
                      add a black Inner Glow ( [+] > Shadow and Glow > Inner Glow). Adjust the
                      Glow width to 10, the Opacity to 100%, the Softness to 12, and the
                      offset to 0. Then...

                      > 3. Select both the image and the white rectangle, and go to Modify > Mask
                      > and choose Group As Mask.


                      --
                      Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
                      --------------------------------------------------------------
                      http://www.projectseven.com
                      Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                      CSS Newsgroup: news://forums.projectseven.com/css/
                      Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
                      --------------------------------------------------------------
                      • 8. Re: Softened edge?
                        Level 7
                        P@tty Ayers wrote:
                        > No, afraid it's not yet. Here's what I'm doing.
                        >
                        > 1. Open image. Make background same as my HTML page (it's brown).
                        > 2. Draw a rectangle filled with white over the image, same size. Feather the
                        > edges of the white rectangle (a lot, to make it obvious for right now).
                        > 3. Select both the image and the white rectangle, and go to Modify > Mask
                        > and choose Group As Mask.
                        >
                        > The result looks exactly like the original image.

                        2 things:

                        1- In the layers panel, select the vector part of your mask object (the
                        thumbnail on the right) and in the Property Inspector, make sure that
                        "Grayscale Appearance" is selected under Mask.

                        2- When using a feathered shape, the feathering "extends" beyond the
                        actual path of the shape so you usually have to start with a shape that
                        is smaller than the image you're trying to mask. You'll have to
                        experiment with the size of the rectangle vs the amount of feathering to
                        get the best result. The good thing is that you can do so live with the
                        mask applied.

                        Linda's Inner Glow method works very well too but you'll have to
                        experiment for the best settings too. Personally I prefer the feathered
                        shape method simply because I see my image under the shape's feathered
                        edges and I prefer to work with object properties (Fill's Feather
                        setting) than with effects for this kind of thing. But whatever works
                        best for you.

                        The great thing about Fireworks is that there's almost always several
                        ways to get what you want and everything remains editable at all times :-)

                        --
                        Stéphane Bergeron
                        reach : connect : communicate
                        http://www.webfocusdesign.com
                        blog : tutorials : articles : gallery
                        http://www.pixelyzed.com
                        • 9. Re: Softened edge?
                          Level 7

                          "Linda Rathgeber **Adobe Community Expert**" <lightly@sc.rr.com> wrote in
                          message news:eeusij$3fu$1@forums.macromedia.com...
                          > P@tty Ayers wrote:
                          >
                          >> No, afraid it's not yet. Here's what I'm doing.
                          >>
                          >> 1. Open image. Make background same as my HTML page (it's brown).
                          >> 2. Draw a rectangle filled with white over the image, same size. Feather
                          >> the edges of the white rectangle (a lot, to make it obvious for right
                          >> now).
                          >
                          > Try this instead. Draw a white rectangle over the image (same size) and
                          > add a black Inner Glow ( [+] > Shadow and Glow > Inner Glow). Adjust the
                          > Glow width to 10, the Opacity to 100%, the Softness to 12, and the offset
                          > to 0. Then...
                          >
                          >> 3. Select both the image and the white rectangle, and go to Modify > Mask
                          >> and choose Group As Mask.

                          Excellent - I will try it. Thanks a bunch, Linda.


                          --
                          Patty Ayers | www.WebDevBiz.com
                          Free Articles on the Business of Web Development
                          Web Design Contract, Estimate Request Form, Estimate Worksheet
                          --


                          • 10. Re: Softened edge?
                            Level 7

                            "Stéphane Bergeron" <news@webfocusdesign.com> wrote in message
                            news:eeuten$4g5$1@forums.macromedia.com...
                            > P@tty Ayers wrote:
                            >> No, afraid it's not yet. Here's what I'm doing.
                            >>
                            >> 1. Open image. Make background same as my HTML page (it's brown).
                            >> 2. Draw a rectangle filled with white over the image, same size. Feather
                            >> the edges of the white rectangle (a lot, to make it obvious for right
                            >> now).
                            >> 3. Select both the image and the white rectangle, and go to Modify > Mask
                            >> and choose Group As Mask.
                            >>
                            >> The result looks exactly like the original image.
                            >
                            > 2 things:
                            >
                            > 1- In the layers panel, select the vector part of your mask object (the
                            > thumbnail on the right) and in the Property Inspector, make sure that
                            > "Grayscale Appearance" is selected under Mask.
                            >
                            > 2- When using a feathered shape, the feathering "extends" beyond the
                            > actual path of the shape so you usually have to start with a shape that is
                            > smaller than the image you're trying to mask. You'll have to experiment
                            > with the size of the rectangle vs the amount of feathering to get the best
                            > result. The good thing is that you can do so live with the mask applied.
                            >
                            > Linda's Inner Glow method works very well too but you'll have to
                            > experiment for the best settings too. Personally I prefer the feathered
                            > shape method simply because I see my image under the shape's feathered
                            > edges and I prefer to work with object properties (Fill's Feather setting)
                            > than with effects for this kind of thing. But whatever works best for you.
                            >
                            > The great thing about Fireworks is that there's almost always several ways
                            > to get what you want and everything remains editable at all times :-)

                            Thanks very much, Stéphane. I'm going to try both of these. The client is
                            busy changing the specifications right now, so I'm on hold with this until
                            tomorrow, but I'm saving these posts!


                            --
                            Patty Ayers | www.WebDevBiz.com
                            Free Articles on the Business of Web Development
                            Web Design Contract, Estimate Request Form, Estimate Worksheet
                            --


                            • 11. Re: Softened edge?
                              Level 7
                              Stéphane Bergeron wrote:
                              > Linda's Inner Glow method works very well too but you'll have to
                              > experiment for the best settings too. Personally I prefer the feathered
                              > shape method simply because I see my image under the shape's feathered
                              > edges and I prefer to work with object properties (Fill's Feather
                              > setting) than with effects for this kind of thing.

                              While experimenting, I just remembered why I never use the Inner Glow
                              method. When the rectangle is (mask) grouped to the image, the effects
                              settings are not accessible when you select the rectangle/vector shape
                              thumbnail in the layers panel. You have to unmask and remask to tweak
                              the settings. With a feathered shape, you can tweak the size and
                              settings while the mask remains applied.

                              --
                              Stéphane Bergeron
                              reach : connect : communicate
                              http://www.webfocusdesign.com
                              blog : tutorials : articles : gallery
                              http://www.pixelyzed.com
                              • 12. Re: Softened edge?
                                Level 7
                                Stéphane Bergeron wrote:

                                > While experimenting, I just remembered why I never use the Inner Glow
                                > method. When the rectangle is (mask) grouped to the image, the effects
                                > settings are not accessible when you select the rectangle/vector shape
                                > thumbnail in the layers panel. You have to unmask and remask to tweak
                                > the settings. With a feathered shape, you can tweak the size and
                                > settings while the mask remains applied.

                                Of course, the easiest method is to simply apply the innerglow to the
                                image itself in the same color as the page background. :-)



                                --
                                Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
                                --------------------------------------------------------------
                                http://www.projectseven.com
                                Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                                CSS Newsgroup: news://forums.projectseven.com/css/
                                Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
                                --------------------------------------------------------------
                                • 13. Re: Softened edge?
                                  Level 7
                                  Stéphane Bergeron wrote:
                                  > P@tty Ayers wrote:
                                  >> No, afraid it's not yet. Here's what I'm doing.
                                  >>
                                  >> 1. Open image. Make background same as my HTML page (it's brown).
                                  >> 2. Draw a rectangle filled with white over the image, same size.
                                  >> Feather the edges of the white rectangle (a lot, to make it obvious
                                  >> for right now).
                                  >> 3. Select both the image and the white rectangle, and go to Modify >
                                  >> Mask and choose Group As Mask.
                                  >>
                                  >> The result looks exactly like the original image.
                                  >
                                  > 2 things:
                                  >
                                  > 1- In the layers panel, select the vector part of your mask object (the
                                  > thumbnail on the right) and in the Property Inspector, make sure that
                                  > "Grayscale Appearance" is selected under Mask.
                                  >
                                  > 2- When using a feathered shape, the feathering "extends" beyond the
                                  > actual path of the shape so you usually have to start with a shape that
                                  > is smaller than the image you're trying to mask. You'll have to
                                  > experiment with the size of the rectangle vs the amount of feathering to
                                  > get the best result. The good thing is that you can do so live with the
                                  > mask applied.
                                  >
                                  > Linda's Inner Glow method works very well too but you'll have to
                                  > experiment for the best settings too. Personally I prefer the feathered
                                  > shape method simply because I see my image under the shape's feathered
                                  > edges and I prefer to work with object properties (Fill's Feather
                                  > setting) than with effects for this kind of thing. But whatever works
                                  > best for you.
                                  >
                                  > The great thing about Fireworks is that there's almost always several
                                  > ways to get what you want and everything remains editable at all times :-)
                                  >

                                  My bad. I forgot to mention that the shape should be smaller than the
                                  object to be masked. I'd recommend a feathering of at least 20, applied
                                  to the vector.

                                  And as you can see, there's more than one way to tackle this. By the
                                  time you're done, you'll have a bunch of techniques! :-)

                                  --
                                  Jim Babbage - .:CMX:. & .:Adobe Community Expert:.

                                  Community MX
                                  Extending Knowledge, Daily
                                  http://www.communityMX.com/
                                  ---
                                  .:Adobe Community Expert for Fireworks:.
                                  news://forums.macromedia.com/macromedia.fireworks
                                  news://forums.macromedia.com/macromedia.dreamweaver