13 Replies Latest reply on Jan 19, 2009 1:38 PM by CoryPatrick

    Clipping Mask Effects in Fireworks CS4?

    CoryPatrick
      Hello everyone,

      I was initially trained on Adobe Illustrator, and over time have gotten very pretty comfortable with it. Not too long ago I started making mock ups in Illustrator, and would use the crop tool to export particular pieces (buttons and banners) of my mock up into Dreamweaver tables.

      But I recently got CS4, and now I'm all screwed up!

      Unlike CS3, CS4 Illustrator does not appear to have the crop area function. I can no longer export select pieces of my artwork.

      I recently found out that this 'crop area' feature exists in Fireworks CS4, so lately I've been trying to learn fireworks.

      The problem I have with fireworks though, is that there doesn't seem to be a clipping mask feature. I did stumble upon something called 'group as mask' under the modify menu. But I don't understand it's function, as it works nothing at all like Illustrators clipping mask.

      Clipping mask is such a useful design feature, and I can't bear the thought of doing without it.

      I'm relatively new to graphic and web design, so here's to hoping some experienced users can help me out with this!

      Cheers,

      Cory

      PS: Please don't tell me the solution to all this is photoshop! So tired of switching applications :)
        • 1. Re: Clipping Mask Effects in Fireworks CS4?
          Level 7
          CoryPatrick wrote:

          At the bottom of this page you'll find tutorials for masking in FW.

          http://www.projectseven.com/tutorials/images/photo_magic/index.htm

          --
          Linda Rathgeber - Adobe Community Expert
          http://www.adobe.com/communities/experts/members/8.html
          --------------------------------------------------------------
          • 2. Re: Clipping Mask Effects in Fireworks CS4?
            Level 7
            CoryPatrick wrote:
            > Hello everyone,
            >
            > I was initially trained on Adobe Illustrator, and over time have gotten very
            > pretty comfortable with it. Not too long ago I started making mock ups in
            > Illustrator, and would use the crop tool to export particular pieces (buttons
            > and banners) of my mock up into Dreamweaver tables.
            >
            > But I recently got CS4, and now I'm all screwed up!
            >
            > Unlike CS3, CS4 Illustrator does not appear to have the crop area function. I
            > can no longer export select pieces of my artwork.
            >
            > I recently found out that this 'crop area' feature exists in Fireworks CS4, so
            > lately I've been trying to learn fireworks.
            >
            > The problem I have with fireworks though, is that there doesn't seem to be a
            > clipping mask feature. I did stumble upon something called 'group as mask'
            > under the modify menu. But I don't understand it's function, as it works
            > nothing at all like Illustrators clipping mask.
            >
            > Clipping mask is such a useful design feature, and I can bear the thought of
            > doing without it.
            >
            > I'm relatively new to graphic and web design, so here's to hoping some
            > experienced users can help me out with this!
            >
            > Cheers,
            >
            > Cory
            >
            > PS: Please don't tell me the solution to all this is photoshop! So tired of
            > switching applications :)
            >

            I doubt you'll find many - if any - telling you the answer is Photoshop
            in this forum. ;-)

            The term clipping mask isn't really part of the FW vocabulary, but FW
            works very well with vectors and that is pretty much what a clipping
            mask is - a path used to mask part of an image.

            FW can mask objects using vectors or bitmaps. Here's some instructions
            to create a simple vector mask.

            Open an image in FW.
            Select the Rectangle tool from the Vector tool area of the Tools panel.
            Draw a rectangle.
            position it where you want the mask to be.
            Cut the rectangle (Ctrl+X or Command+X for Mac)
            Select the image using the Pointer tool.
            Go to Edit > Paste as Mask.
            Your image is now masked by a vector. Both objects remain editable.

            There is much more you can do; this is just a simple example.

            --
            Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
            http://www.communityMX.com/
            CommunityMX - Free Resources:
            http://www.communitymx.com/free.cfm
            ---
            .:Adobe Community Expert for Fireworks:.
            Adobe Community Expert
            http://tinyurl.com/2a7dyp
            ---
            .:Author:.
            Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
            Peachpit Press -
            http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
            Layers Magazine - http://www.layersmagazine.com/author/jim-babbage
            • 3. Re: Clipping Mask Effects in Fireworks CS4?
              CoryPatrick Level 1
              Jim and Linda, thanks for the leads. I had success with your suggestions.

              (I could be wrong, but) Where you lead me seemed to only address bitmap on vector masks.

              But I'm still having difficulty with vector on vector masks.

              My situation is that I have a vector rectangle with a gradient fill. I want to use this vector gradient fill as a mask over top of my vector text.

              Any idea how to do this? Is it possible?
              • 4. Re: Clipping Mask Effects in Fireworks CS4?
                Level 7
                CoryPatrick wrote:
                > Jim and Linda, thanks for the leads. I had success with your suggestions.
                >
                > (I could be wrong, but) Where you lead me seemed to only address bitmap on
                > vector masks.
                >
                > But I'm still having difficulty with vector on vector masks.
                >
                > My situation is that I have a vector rectangle with a gradient fill. I want
                > to use this vector gradient fill as a mask over top of my vector text.
                >
                > Any idea how to do this? Is it possible?

                What is the effect you want to achieve?

                --
                Linda Rathgeber - Adobe Community Expert
                http://www.adobe.com/communities/experts/members/8.html
                --------------------------------------------------------------
                • 5. Re: Clipping Mask Effects in Fireworks CS4?
                  CoryPatrick Level 1
                  I wanted to apply a gradient fill to my text.

                  um....wait a sec......*tries filling text with gradient in the most obvious way possible*

                  geese, that was easy. I was so used to Illustrator, that I become blinded to the obvious!

                  Thanks for asking though, it helped get me thinking.

                  If you don't mind, I'd like to ask you another question. Is it possible to save unique gradients as a swatch? Or can i somehow drag the gradient I created onto the swatches panel?
                  • 6. Clipping Mask Effects in Fireworks CS4?
                    SiamJai Level 2
                    quote:

                    Originally posted by: CoryPatrick
                    My situation is that I have a vector rectangle with a gradient fill. I want to use this vector gradient fill as a mask over top of my vector text.

                    Any idea how to do this? Is it possible?



                    Cory, you could try auto vector masking, see if that does the job. It's accessible through Commands >> Creative >> Auto Vector Mask.


                    Edit: Nevermind, I just saw your reply. Glad it works! :)

                    quote:

                    Originally posted by: CoryPatrick
                    If you don't mind, I'd like to ask you another question. Is it possible to save unique gradients as a swatch? Or can i somehow drag the gradient I created onto the swatches panel?

                    You can save it as a new style, in the Styles panel.


                    SiamJai
                    ~~~~
                    http://design.thaiwonders.com - Innovative Fireworks Tutorials
                    • 7. Re: Clipping Mask Effects in Fireworks CS4?
                      Level 7
                      CoryPatrick wrote:
                      > I wanted to apply a gradient fill to my text.
                      >
                      > um....wait a sec......*tries filling text with gradient in the most obvious
                      > way possible*
                      >
                      > geese, that was easy. I was so used to Illustrator, that I become blinded
                      > to the obvious!
                      >
                      > Thanks for asking though, it helped get me thinking.
                      >
                      > If you don't mind, I'd like to ask you another question. Is it possible to
                      > save unique gradients as a swatch? Or can i somehow drag the gradient I
                      > created onto the swatches panel?
                      >

                      You can save unique gradients as custom styles.

                      --
                      Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                      http://www.communityMX.com/
                      CommunityMX - Free Resources:
                      http://www.communitymx.com/free.cfm
                      ---
                      .:Adobe Community Expert for Fireworks:.
                      Adobe Community Expert
                      http://tinyurl.com/2a7dyp
                      ---
                      .:Author:.
                      Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
                      Peachpit Press -
                      http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
                      Layers Magazine - http://www.layersmagazine.com/author/jim-babbage
                      • 8. Re: Clipping Mask Effects in Fireworks CS4?
                        Level 7
                        CoryPatrick wrote:
                        > Jim and Linda, thanks for the leads. I had success with your suggestions.
                        >
                        > (I could be wrong, but) Where you lead me seemed to only address bitmap on
                        > vector masks.
                        >
                        > But I'm still having difficulty with vector on vector masks.
                        >
                        > My situation is that I have a vector rectangle with a gradient fill. I want
                        > to use this vector gradient fill as a mask over top of my vector text.
                        >
                        > Any idea how to do this? Is it possible?
                        >
                        >
                        OK another option:

                        Select the gradient-filled text object using the Pointer tool.

                        Ctrl+X to cut the text

                        Select the object

                        Choose Edit > Paste as Mask

                        In the Property inspector, set the mask to Grayscale appearance.

                        Your text remains as editable text even when used as a mask.

                        HTH

                        --
                        Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                        • 9. Re: Clipping Mask Effects in Fireworks CS4?
                          Level 7
                          Just to clarify a bit further, note I said "object", not photo. You can
                          mask a vector using text just as described here.


                          --
                          Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                          • 10. Re: Clipping Mask Effects in Fireworks CS4?
                            Level 7
                            CoryPatrick wrote:

                            > If you don't mind, I'd like to ask you another question. Is it possible to
                            > save unique gradients as a swatch? Or can i somehow drag the gradient I
                            > created onto the swatches panel?

                            Save it as a style in the Styles panel.

                            --
                            Linda Rathgeber - Adobe Community Expert
                            http://www.adobe.com/communities/experts/members/8.html
                            --------------------------------------------------------------
                            • 11. Re: Clipping Mask Effects in Fireworks CS4?
                              CoryPatrick Level 1
                              quote:

                              Originally posted by: Newsgroup User
                              CoryPatrick wrote:
                              > Jim and Linda, thanks for the leads. I had success with your suggestions.
                              >
                              > (I could be wrong, but) Where you lead me seemed to only address bitmap on
                              > vector masks.
                              >
                              > But I'm still having difficulty with vector on vector masks.
                              >
                              > My situation is that I have a vector rectangle with a gradient fill. I want
                              > to use this vector gradient fill as a mask over top of my vector text.
                              >
                              > Any idea how to do this? Is it possible?
                              >
                              >
                              OK another option:

                              Select the gradient-filled text object using the Pointer tool.

                              Ctrl+X to cut the text

                              Select the object

                              Choose Edit > Paste as Mask

                              In the Property inspector, set the mask to Grayscale appearance.

                              Your text remains as editable text even when used as a mask.

                              HTH

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



                              Jim, I think we're misunderstanding each other here. Or maybe it's just me misunderstanding you.

                              Do you use illustrator at all?
                              • 12. Re: Clipping Mask Effects in Fireworks CS4?
                                Level 7
                                > Jim, I think we're misunderstanding each other here. Or maybe
                                it's just me
                                > misunderstanding you.
                                >
                                > Do you use illustrator at all?
                                >
                                Hi Cory:

                                It's safe to say I use Illustrator less than you use Fireworks ;-)
                                However, between these posts and your posts on CMX, I think I now
                                understand what you're talking about. The process for creating a text
                                filled with a gradient in FW is so easy (once you know it, that is) that
                                I got hung up on the whole "masking" concept, rather than the text fill.

                                Sorry for the confusion. I hope you're all sorted now.

                                --
                                Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                                • 13. Clipping Mask Effects in Fireworks CS4?
                                  CoryPatrick Level 1
                                  No problem!

                                  Creating a gradient fill inside text in illustrator is a little more complicated. Fireworks makes it so easy.

                                  Thanks for teaching me how to mask in fireworks. It will be useful in the near future.