2 Replies Latest reply on Sep 21, 2011 4:34 AM by smartwebby

    How can I make this shape?

    jdldn Level 1

      How can I make this shape in fireworks:


      I want some images in my website to have rounded corners. Im doing this by adding 4 divs with background images and absolutely positioning them, one over each corner of the image. The background images are PNGs with transparent areas. This works as the site's background is a solid color, so the rounded corners dont need to actually be transparent.


      The issue im having is that the pixels on the curve need to be semi transparent. Id love to make this shape as a vector but I dont know how.


        • 1. Re: How can I make this shape?
          Linda Nicholls Level 4

          You can make a vector shape like that by punching a circle through a square. Draw a square, Draw a circle on top of it. Select both objects and choose Modify > Combine Paths > Punch. It would be a lot easier to export your images with rounded corners from Fireworks rather than masking the corners with absoultely positioned divs, however. To do this, draw a white, rounded rectangle over the image. Choose Select > Select All, and then Modify > Mask > Group as mask. Change the color of the canvas to the color of your HTML page.

          • 2. Re: How can I make this shape?
            smartwebby Level 1



            There is another simple way to get the shape desired. Create a rounded rectangle that is twice your corner size - both width and height wise. Now adjust the rounded corners to almost make a circle (pull the yellow corner handle towards the center of the side). Now click the corner and you will be able to toggle between the different corner types. You can now either use the shape as it is (if you need it for corners of a sprite rounded rectangle) or you can cut it up to get the desired wedge.


            - Anita