4 Replies Latest reply on Jun 18, 2009 2:48 PM by Eric Lopatin (Adobe)

    irregular shaped buttons...

    Colin Holgate MVP & Adobe Community Professional

      In Catalyst, how would I select say a horseshoe shaped Photoshop layer and make that into a button, that has a hit area the shape of the graphic? As it stands it seems like the button is the bounding box of the graphic, and rollover happens if the mouse is within that rectangle, and not over part of the graphic itself.

        • 1. Re: irregular shaped buttons...
          Mark E. Shepherd Adobe Employee

          If you're using vector artwork, created in Illustrator, then I believe it will work the way you want. For bitmap artwork, I don't know if its possible, or how to do it, but I'll investigate and post what I find out.

          1 person found this helpful
          • 2. Re: irregular shaped buttons...
            Eric Lopatin (Adobe) Level 2

            There are a couple of options with Photoshop files that will enable you to restrict the hit area of the button to a horseshoe/irregular shape.


            1) If the shape is an actual Photoshop Shape layer with the horseshoe defined via a vector mask: when you import that layer of the file into Catalyst, choose to preserve rather than flatten it. By default in the basic Photoshop import dialog, Shape Layers are set to be flattened. Instead, click the Advanced button in that dialog, highlight the horseshoe layer and choose the "Editable paths and layer styles" option. Then click import.


            What happens is: Catalyst imports the bitmap and generates a mask in place of the original PS Vector Mask (you can see this if you look for <s:mask> in Code view). Only the masked area becomes clickable if you convert this layer into a button.


            2) If the horseshoe is simply an image layer in Photoshop – add a Vector mask to that layer which will in turn define the shape of the button in Catalyst. Again import the layer and choose to preserve "Editable paths and layer styles."


            On a related note, in Beta 1 we automatically flatten Photoshop Shape layers for performance reasons. In the future we should be able to clip the layer's content to the boundaries of the mask while still including the mask for purposes such as this one.



            Catalyst QE

            • 3. Re: irregular shaped buttons...
              Colin Holgate MVP & Adobe Community Professional

              Thanks for the pointers.

              • 4. Re: irregular shaped buttons...
                Eric Lopatin (Adobe) Level 2

                Sure, you're welcome.