7 Replies Latest reply on Oct 13, 2009 7:56 AM by Jim_Babbage

    "Controlled" Rounding of Vector Shape Corners

    Mr. Handley

      I know how to drag the corner box to vary the amount of curve in a rounded corner rectangle, but is there a way to set the value, similar to numeric transform?


      If you are making lots of rounded corner shapes... like for buttons throughout the site, and containers, say for content areas, it would be handy to be able to set the amount of roundness exactly, so all are pixel perfect the same.

        • 1. Re: "Controlled" Rounding of Vector Shape Corners

          I use this alot as I like rounded content areas on sites for nav buttons and images.

          The trick is to use the 'rectangle tool' rather than the 'rounded rectangle'.

          The reason being that when you use the 'rectangle tool', in the properties menu at the bottom of your screen you will see a 'roundness % box'

          where you can enter a value.
          One this I have noticed however is that if your images or buttons are different sizes you have to account for this to maintain the same look as bigger images will have bigger corners and vice versa.


          Hope this helps.

          • 2. Re: "Controlled" Rounding of Vector Shape Corners
            Mr. Handley Level 1

            Thanks a million Pete... That sounds like just the trick !

            • 3. Re: "Controlled" Rounding of Vector Shape Corners
              Dave Hogue Level 2

              If you use the Rounded Rectangle Auto Shape, you can also use the Auto Shape Properties Panel to individually control the roundedness of each corner - in fact, the Auto Shape Properties Panel gives you precise control over the properties of each of the Auto Shapes.


              Starting with Fireworks CS4 you can choose between pixel or percentage rounded corners for regular rectangle objects, too - the option is in the Property Inspector, simply choose between % or px and set the desired value.


              If you use pixel values for rounded corners on regular rectangle shapes, then you can easily create the same roundedness for any rectangle regardless of size (while the % option is always relative to the size of the rectangle.)

              • 4. Re: "Controlled" Rounding of Vector Shape Corners
                Paevo Kelley Level 2

                Wasn't 9 slice scaling invented for precisely this purpose? I have tried to use it a few times, but each time got frustrated and resorted to the good old crop tool, then combing the rounded corners with a plain old rectangle for each shape to ensure consistency...

                • 5. Re: "Controlled" Rounding of Vector Shape Corners
                  Mr. Handley Level 1

                  Starting from the rectangle "primitive" vector shape there is a box that appears at the bottom of the property inspector in the stroke section under texture labeled roundness that controls the radius of the curve as described by Pete-1967 above.


                  Starting from the auto vector shape. rounded rectangle, that roundness selector in the property inspector disappears.  It would seem only natural to include that control in that location for that shape.  It may have something to do with the difference between primitive shapes, those three that appear first in menu under the vector shapes tool  and auto shapes. As noted above, the auto shapes are controlled in the auto shape properties panel, which is not opened automatically in the expanded mode, but can be found unded Window --> Auto Shape Properties.


                  My initial confision over this stems from a couple of user interface issues inherant in Fireworks CS4.  Firstly, and Jim Babbage warns about this either in his greatClassroom In A Book, or his equally excellent videos located on Lynda.com.... I could just here his voice chiding me when realized my mistake after posting this thread... ( I can't remeber everthything!! )  the properties inspector has three states controlled by the little arrows next to " Properties".  The properties inspector can be completely rolled up with only the tab showing, halfway rolled up with only the top half of the properties inspector showing and all the way unfurled completely showing all the available controls.  There is NO indication to the user that there is more information hiding when it is half way open.  I had it in that state, and therefor could not find the controls pointed out in this thread by  Pete. Adobe should put a visual que, like one uses on a nested menu, for example, to que the user that there is more information hiding, and a click on the control is required to reveal it.


                  Thanks to Dave, I found the auto shapes properties panel.... should have looked harder I guess, but wouldn't it make more sense from a UI ease of use standpoint to put auto shape PROPERTIES in the PROPERTIES inspector?  Oh well, now I know where it is


                  These Adobe programs are great... they are also vast, so when I forget where something is, or can't find something, it's a pleasure to be able to come here get pointed in the right direction.  This post is intended clearify this thread to help others who may arrive here in the future.


                  The Properties Inspector Halfway Open:



                  Properties Inspector Half Open.png



                  The Properties Inspector All the way Open:



                  Properties Inspector All The Way Open.png


                  The Auto Shapes Properties Panel:  Window -->  Auto Shape Properties:

                  auto shape Properties Panel.png

                  • 6. Re: "Controlled" Rounding of Vector Shape Corners
                    Paevo Kelley Level 2

                    Thanks, Mr. Handley; I had neglected that panel as well; just another example of the indispensability of FW when designing for the web...

                    • 7. Re: "Controlled" Rounding of Vector Shape Corners
                      Jim_Babbage Level 4

                      Did I actually "chide"? LOL. MY apologies. But yes, it would be great 

                      if there was some kind of visual indicator on the PI for it's 

                      collapsed state. Dreamweaver's PI has a little expansion triangle in 

                      the bottom right corner.



                      Jim Babbage