Tip: Finer Vector Strokes in Fireworks for UI Design

I was working on the updated design1 for this site and wanted to create a visual timeline on the about page. For each item in the timeline I wanted a gradient box with a slight tooltip arrow on the top pointing up at the timeline. As this site is responsive I wanted to keep the amount (and size of all assets to a minimum) so was looking to create this in HTML/CSS as much of possible.

When it comes to creating a rounded gradient rectangle, this is fairly easily achieved with CSS3 definitions. The small point / tip however isn’t. There are solutions that can be used, using a small rotated square for example, but I couldn’t get satisfactory results so opted to use a graphic image for this.

I use Fireworks for all my user interface design2, one of it’s biggest failings is how it renders a thin stroke that is also anti-aliased. For some reason Firework’s 1px soft stroke is rendered 2 pixels wide and not 1 pixel as the name suggests. The only stroke in Fireworks that appears to be truly 1 pixel wide is the 1px hard stroke but as that has no anti-aliasing, the corners become jaggies. This is frustrating if you want to generate or simulate how a browser (or how an operating system) will render a border, especially if you want to combine the graphic with some code generated borders.

Example of two vectors one with Fireworks 1px soft stroke the other using Photoshop Live Effects
The vector on the left uses Fireworks built in 1px soft stroke. As you can see the border is thicker than the one on the left, where the border has been created using Fireworks builtin Photoshop Live Effects.

The solution: As Fireworks supports Photoshop effects, rather than use Fireworks to add a stroke to the object, you can use Photoshop’s effects directly within Fireworks. Just click on the + icon next to the “Filters:” label, in the properties pallet to add an effect and choose “Photoshop Live Effects” from the drop down menu. This will pop up Photoshop’s effect window where you can click on Stroke and then set the size, colour and position. You can’t do more complex strokes such as dashes and dots unfortunately but you can set opacity and add a gradient or pattern.


Notes & References

  1. For those that have visited the site before you may be wondering about the drastic change in design. I wanted to make this site more focussed on my writing and make the design a lot simpler. For those that are interested I have based the design on bootstrap with an inspirational dusting of ideas from Craig Mod’s website and a light sprinkling of inspiration from the new 37 Signals SVN. []
  2. I know everyone else seems to prefer Photoshop, I love photoshop but I don’t personally understand how anyone can use Photoshop for UI design, Icons or even web design work. For me Fireworks rules supreme here as everything is easier to position, non destructive and editable (but that is another article). Best tool for the job, and for me it is a combination of Fireworks, Illustrator for creating more complex shapes and Photoshop for creating textures. []