Fireworks Strokes Rendering Issues

I’ve been want­ing to address this issue here for a while now and this morn­ing I got an email from one of my long time read­ers ask­ing about it. So I decided to write a quick post to illus­trate the issue and offer a solution.

The prob­lem: how Fireworks ren­ders cer­tain 1 pixel strokes as a blurred 2 pix­els stroke depend­ing on what tool is used to cre­ate the shape or path the stroke is applied to or if the shape or path is cut after it has been cre­ated. Rotating an object even by 90 degrees can also affect the ren­der­ing of the object’s stroke or its fill’s edge if the object has no stroke. Look at the fol­low­ing image I cre­ated a while ago that illus­trates the issue.

The grid in the back­ground of that image is a 1px X 1px grid. It looks very large there because I took that screen­shot from within Fireworks at 3200% zoom level. What this illus­trates is that the actual nodes or anchors on paths can be posi­tioned either exactly at grid lines inter­sec­tion points or exactly in the mid­dle of a “pixel block”. In real­ity, Fireworks is not lim­ited to those two posi­tions as it can posi­tion objects in much finer incre­ments than half pix­els on the can­vas. The two posi­tions above are the auto­matic defaults when cre­at­ing or edit­ing objects with Fireworks’ native tools.

The result of the above is that, when a path’s anchors or nodes are posi­tionned in the mid­dle of a pixel, then a 1px soft stroke will ren­der nor­mally as a 1 pixel stroke. If you want to see how this works, open Fireworks now and fol­low these steps:

• Select the reg­u­lar rec­tan­gle tool.
• Set the stroke to black and use the Pencil-​Pixel Soft troke type and a size of 1.
• Draw a rec­tan­gle on the can­vas. The stroke should look likea 1 pixel stroke that is sharp, clean and uniform.
• Switch to the Rounded Rectangle tool and draw another rec­tan­gle using the same stroke set­tings. The stroke will now look like a grey 2 pix­els stroke instead of the sharp 1 pixel stroke of the first rectangle.
• Switch back to the black arrow tool and select your first rectangle.
• Swicth to the kife tool and cut its path any­where. The stroke ren­der­ing will instantly change to look like a 2 pixel grey stroke (or a blurry 1px black stroke depend­ing how you look at it…). In any case, it doesn’t look like what you set. Notice that the stroke set­ting is still at 1px Pencil-​Pixel Soft so the look of the stroke shouldn’t have changed.

According to Adobe, this is nor­mal behav­ior yet, to me, this is a seri­ous bug. They cre­ated a tech­note you can find here address­ing the issue in more detail than I do here but I really believe that Fireworks should be smart enough to do what it needs to do to com­ply with the stroke set­tings applied by the user, even when a path is being edited. But as you can see, it doesn’t always do so.

There is a solu­tion though but you need to use a third party exten­sion to fix this. Go to this page then down­load and install Senocular’s Transform Panel exten­sion. With it, you’ll be able to do what you still can­not do with Fireworks’ native tools: size and posi­tion objects by sub-​pixel incre­ments. Using the Transform Panel.s X and & flields, select the object with the stroke ren­der­ing issue and “move” it by a half pixel in one or both­di­rec­tion depend­ing on the object (you can enter dec­i­mals in those fields which is some­thing you still can­not do in Fireworks’ own Property Inspector).

Using the Transform Panel, you can now take con­trol of how Fireworks anti-​aliases strokes, fills and even text. Once you start using it you’ll never go back to the PI, espe­cially if you start using the included 9 Points Proxy below the x and y fields to size and posi­tion objects from ref­er­ence points other than the default (and only) top and left. I’ll write another post specif­i­cally about the Transform Panel soon because it has become one of the tools aI used most in Fireworks, sup­ple­ment­ing and replac­ing a native toolset that should have gained sim­i­lar func­tion­al­ity years ago (IMO). It’s a truly fan­tas­tic exten­sion that will save you count­less time and headaches…