6 Replies Latest reply on May 8, 2009 8:59 PM by heathrowe

    Round-cornered box with stroke - antialiasing?

    bunner bob

      I'm confused by the fill and stroke settings - I'm trying to create a round cornered box with a 1-pixel stroke. If I make the stroke "hard line" then the corners are jaggy. If I make it "soft" then the corners are soft but the straight parts are blurry. How can I get a stroke that antialiases where it needs to be (corners) and stays crisp in the straight parts?

       

      Seems to be possible for the Fill component - just use the "antialiased" option.

       

      Is this not possible for strokes?

        • 1. Re: Round-cornered box with stroke - antialiasing?
          Jim_Babbage Level 4

          It's an issue with the rounded rectangle, I believe (but I am not 

          positive)

           

          You can try using the Photoshop LIve Effect, Stroke.

           

           

          Jim Babbage

          NewMedia Services

          http://www.newmediaservices.ca

          Community MX Partner -

          http://www.communitymx.com/author.cfm?cid=1036

          Adobe Community Expert

          http://www.adobe.com/communities/experts/members/206.html

          Author - Lynda.com

          http://movielibrary.lynda.com/authors/author/?aid=188

          Author: Peachpit Press

          http://www.peachpit.com/store/product.aspx?isbn=0321562879

          • 2. Re: Round-cornered box with stroke - antialiasing?
            Panos Zygopoulos Level 3

            I think that's an issue too, but don't get dissapointed. I've been there too and i have an option that may be good for at least the purposes that fireworks is made. If you want you can do this:

             

            Draw the box and then you are going to draw a second box, slightly bigger, put it at the back, place it right behind the first box and fill it with the stroke color you wanted. Both boxes anti-aliased and with no stroke color.

             

            sample.jpg

             

            That's just a trick though, it doesn't solve the problem.

            The photoshop live effect works also.

            • 3. Re: Round-cornered box with stroke - antialiasing?
              Linda Nicholls Level 4

              An option:

               

              Make the stroke wider than you want. Around 3 pixels, for example. Use the Soft Rounded stroke style. Click in the stroke color box in the Properties panel to open the swatches pop-up. Check the "Fill Over Stroke" box at the bottom of the swatches pop-up. Adjust the edge setting of the stroke close to zero in the Properties panel.

              • 4. Re: Round-cornered box and stroke antialiasing, THE SOLUTION
                no nicknames left

                This can be done easily and has been for many versions but CS4 makes it better. [im not an adobe salesman, just a bit less grumpy about FWCS4 as update was launched yesterday!!!!]

                 

                Tip . If you want your box to have hard straight strokes and soft radiused corners, don't use the rounded box tool...it will give you soft lines as stroke seems to be centered in between pixels.

                 

                Use a normal box and then round the corners. This works a lot  better in CS4 as you can choose % OR pixels where previously it was in % only and when you resized the box the radius changed. Now you can select pixels for the radius size so the corners dont scale when you change the size of the box. YAY!

                 

                HOW TO FIX SOFT STRAIGHT EDGES WHILE KEEPING ANTIALIASED CORNERS

                 

                1. If you created by radiusing a std box and you have settled on the radius and dont need to edit them. Ungroup..which will break the shape into raw vector. Then if your strokes are slightly blurry [ this is because FW changed how the edges of shapes snap to pixels in CS3 or studio8]  press"Q" to select the scale tool an pull a corner slightly. This has the advantage of snapping ALL edges to the exact pixel and leaving you with hard edges. Yes this will changes some of the radiuses ever so slightly, particularly the bottom right as the top left of the box will usually be dead on the pixel edge, but if we are only scaling the box a small % of a pixel it may not be noticable.

                 

                2. If you did happen to use the rounded rectangle box, ungroup. This gets rid of the radius handles and creates raw vector. Then go to stroke properties > stroke options and select either "stroke inside" or "stroke outside". this will shift the strokes  by half a pixel and make them not blurry.

                 

                3. Yet another way to create a rounded box is to create a box and select all corners and then use "fillet points" from the "path" panel [only in CS4 and maybe CS3]

                 

                4.1. The above technique can also be used to create a box or any other shape with only some corners radiused. I noticed in FWCS4 beta there was the option th raduis each corner differently but this didn't make into final product.

                 

                4.2. Another cool tip especially if you use the above technique but wish to change the radius later is save the path state [maybe only in CS4] after you have a blank box to size. This remebers the state [shape] of this particular vector and you can restore the state later. Then radius the corner(s) with "fillet points". If you want to change the corners you can go back to the unradiused state and re-radius with a dfferent radius amount.

                 

                Hope that was usefull

                 

                Maak Bow
                Interaction Designer, UX, CD

                • 5. A SIMPLER AND MORE DIRECT ANSWER
                  no nicknames left Level 1

                  If you have made a rounded corner rectangle with the rounded rectangle tool and the straight sides are blurry.

                   

                  Firstly make sure you have the super nudge extension. It enables you to shift objects in less than pixels...any measurement you select and its great when things don't alias as they should.

                   

                  Select 0.5 in super nudge panel.

                  Move your rounded rectangle box by 0.5 pixels  along the x axis and by 0.5 pixels along the right axis..

                  Blurry straigh sided FIXED

                   

                  Cheers

                   

                  Maak Bow

                  • 6. Re: A SIMPLER AND MORE DIRECT ANSWER
                    heathrowe Most Valuable Participant

                    tons of nice alternatives, thanks Maak for sharing.

                     

                    I thought your Path 'fillet' option was interesting.

                     

                    h