How to achieve pixel perfection in your designs with Adobe Fireworks

When it comes to user interface design, Adobe Fireworks is an excellent tool for laying out your ideas and also for creating cutting edge graphics for your App/Website. Like in any other graphic software, there are different ways to create one effect. However, the result doesn‘t always look the same for each method. In this article, I want to show you how to achieve real pixel perfection in your designs.

Warning: this article is about how to achieve the pure perfection of every single pixel. If you don‘t care for one or two misplaced pixels in your design, this might not be an interesting article for you. Otherwise, please enjoy the read.

Create smooth glow effects using feathered edge

When you have an object in your design that you want to emphasize for some reason, making it shine is a great way of grabbing the attention of your users, and also of keeping the interface eye-catchy. In Adobe Fireworks, there are three main ways how to create a glow/shadow, but the result is also different for each method.

Fireworks glow effect

This is the standard glow effect provided by Fireworks. The effect can be added to any object via adding the Filter, “Glow“.

In this example I’ve used a glow distance of 0 pixels and an opacity of 50% while I’ve set the blur to 14px. This should generate a wide glow without any distance to the light source.

A glow effect, achieved by the glow filter.

- a simple glow effect using Fireworks glow filter.

The problems can be seen in the image above; if you use this effect for a decent (around 0-30% opacity) glow, the glow won‘t be totally smooth and you can detect the corners in the glow – something that should never happen. The glow filter can be easily used for hard glows or glows with a very small blur (max. 6px), but you should avoid using this filter for a big glow with a low opacity.

Glow via Photoshop-Live Effect

Since Fireworks allows you to use Photoshop Layerstyles, you can also create a glow via the Photoshop-Live effect, “Outer Glow“.

The Photoshop-Live Effect offers a few more attributes then the Fireworks glow effect. In this example I’ve tried to achieve the same result like generated by the Fireworks effect.

A glow effect achieved with Photoshop-Live effects.

- simple glow effect achieved with the Photoshop-Live effect, “Outer Glow“.

The PS-Live effect works very similar to the Fireworks filter. The main difference between the Fireworks filter and the PS-Live effect is the blend mode of the applied glow. The PS-Live effect uses negative multiply as its default blend mode, which cannot be changed, while the Fireworks filter uses the normal blend mode as its default. The difference is minimal and, personally, I don‘t see any difference. The problem remains the same; you can also see the corners of the glow.

Glow using a second shape with feathered edge applied

This method requires a second shape, which is slightly bigger than the shape you want to apply the glow to. It should have the same attributes, like your original shape (e.g. color, other effects), and you have to place it behind the original shape. When you change the edge-mode to “Feather“ for this shape, you can achieve a very smooth glow effect.

The perfect glow effect.

- the result we want – a very smooth glow without any visible corners.

Since this method generates the smoothest result, I recommend always using this way for decent and extremely wide glows. You can only use this effect if you‘re working 100% with vector shapes. If you want to use this method for text, you have to convert your text to a path first, because text doesn‘t let you change the edge-mode.

Another way to generate a glow effect is using the Filter, “Gaussian Blur“. However, it seems like this filter is using the same algorithm to render blur, like the “Glow“ Filter. What this means is that you are confronted with the same problem described above, when choosing to use gaussian blur to create a glow.

When to dither your gradients

Since the Creative Suite 5 update, gradients can be “dithered“. Basically, this means that the colors of the gradient are mixed a little bit on a subpixel level. This results in a very decent grain, which blurs the color gradations.

A wide spreaded gradient, dithered with Fireworks

The Dither tool is a great feature, which allows you to create smooth gradients with a small amount of colors between the different color stops. While this is the main purpose, you shouldn‘t use dither for any gradient. On smaller gradients with enough colors between two stops (which means ideally one color per pixel), there is no need to dither. If dither is used on such gradients, it will interrupt the natural flow of the gradient because the position of the color stops will be manipulated.

Small gradients, dithered but not the result we are looking for.

Get the most out of your text

While font rendering isn‘t the thing Fireworks does best, you can do a lot with custom anti-aliasing settings, in order to get your text looking right. Of course, there isn‘t one rule you can apply to all your text but if you use standard sans-serif fonts, such as Helvetica, Arial or Verdana, these settings should work effectively:

Anti-Aliasing settings in Adobe Fireworks

For serif and script fonts, it can be a bit tricky producing decent results because the little serifs are often rendered too hard or too soft. Just try and find the middleway here, through dragging the sliders of sharpness and strength.

When you create very large headlines (around 56px or larger), for example, for a huge title in a website‘s header, which uses sans-serif or pixel fonts, I recommend to always convert the text into paths. If you can detect some half-transparent misplaced pixel then just use snap to pixel to achieve a sharp, yet smooth and anti-aliased text.

Big font size render modes

These were just a few tips I wanted to share with the pure pixel fetishists out there; I will share some more via Twitter or maybe on another blog post in the future. Please also let me know what you think about these little details and if you know any more tricks in getting the pixels right.

Open Comments and add your thoughts.

http://galengidman.com Galen Gidman

Great post, Ivo! I’ve often struggled with gradients that needed dithering but had no idea that feature existed. I’ve also had problems with glows and antialiasing — which you also covered.

Thanks again, you were so helpful.
M.

Thank you for posting this.

These are a few (of many) reasons for using FIREWORKS and not PHOTOSHOP when creating on-screen graphics:

FILTERS
PS: Adding a blur to a shape, you have to rasterize it.
FW: You can add any filter to any object

PS: Suddenly you can’t use a certain filter for a certain layer. There are no explanations on why this is the case and you can’t even see the fly-out menu with filters that “used to be there”.
FW: You can apply anything to anything at any time

VECTORS
PS: Shape layers are more confusing than they have to be. You can’t apply effects to vectors in Photoshop.
FW: You can interact with vectors directly in the artwork, just click on it and you can move it around without having to pay close attention to which layer the object is on.

OBJECT PROPERTIES
PS: Rounded rectangles: You can’t change the radius after drawing it. You can’t see the result of the radius until you have drawn it.
FW: Each object can be reviewed and analyzed quickly by looking at the property inspector when the object is selected. A rectangular shape has a “rounded corner” setting and when changing the value it updates in real time.

CONTROLLING & SELECTING
PS: You can select an object from the canvas by holding down ctrl (PC) but after adding a few objects to the artwork you basically have to work from the layers if you don’t want to interact with pop-up dialogues telling you layers are empty or locked etc. You basically have to name every object you create in order to find it again. Selecting something from the canvas when you get a complex document is just impossible. You end up “searching” for your objects for way to long. This makes it trickier to “sketch” or make something quickly in PS. Example: Draw ten lines on top of each other in random directions. Try moving or changing one of the lines without interacting with the layer panel. It’s pretty much impossible without naming every object. The objects you draw are “sinking into the artwork” and the more you create, the harder it will be to get hold of them.
FW: Every object lights up as soon as you hoover over it, letting you know you can select it by just clicking. If you need to select an object that lies below the highlighted one there is a “select behind” tool

PIXELS
PS: Nudging a pixel when zoomed in further than 100% or less than 100% and the object will move in half-pixels (etc). There isn’t even a setting to get the nudging to snap to pixels.
FW: One nudge click equals one pixel. You can set each object to be anti-aliased or not, there is even a “snap to pixel” fuction for objects that might be off-pixel, real simple (when using sub selection tool you can move anchor points to half-pixels)

LOCKING
PS: Even if a layer is locked you can accidentally select that layer.
FW: A locked layer is locked and you will not be bothered by it.

TRANSFORMATIONS
PS: When a transform is ongoing, or a text field is being altered, you can do nothing except work with the transformation. You can’t close a document, you can’t “unselect” by clicking on the outside, in other words you are locked until you press enter (or ctrl-enter when working with text). Because of this you have to let go of the mouse/pen and interrupt your workflow.
FW: You hold down ctrl and press outside of the object and you are ready to interact with other objects. A very quick way to work.

HIDING
PS: When you press ctrl-H it means you want to hide all the stuff around an object but when you do that for a text you still have the “transformation box” around the string.
FW: Ctrl-H hides everything and you can see the artwork clearly.

MULTIPLE OBJECTS
PS: If you want to apply a layer blend mode for more than one object you have to do it one object at a time. When selecting two at the same time, PS “forgets” what modes they have. Even if they have the same mode.
FW: You can select multiple objects on multiple layers and create the same blend modes for them. You can add the same effects to them etc. Even if they have different properties before.

COLORS
PS: When selecting a color for an object or a shape you might want to select other colors than the ones in the artwork, say for instance the color of a shape in the layer panel. You can’t.
FW: You can sample colors from anywhere on the screen, even from the FW GUI if you would like to.

GRADIENTS
PS: Handling gradients is cumbersome.
FW: Every vector object can be set to have “Gradient fill” instead of “Solid fill” in the property inspector. The gradient is then controlled from either the property inspector or the actual object. Like in Illustrator but in a more straight forward way.

- – -

Other benefits with FIREWORKS:
- PAGES. Great (and fast) way of organizing your work.
- QUICK PROTOTYPING with linking and toolboxes filled with functional UI elements
- SYMBOLS. Well developed in FW. Compared to PS and AI the handling of symbols (smart objects) is superior.
- PROPERTY INSPECTOR. Instead of showing effects etc in the layer panel you see and alter the effects by clicking on the object.

This list is just recently started will get longer with time.
http://twitter.com/philswan Phil Swan

Great post.

One of the issues I have with fireworks is blurry underlines, I don’t suppose you know of any way around these? See this example

Anonymous

Thanks Phil. For one lined underlines I generally just use a normal line which is possible to handle but very hard for multi lined text.

I’ve just tried to create the text in PS (which renders sharp underlines) and paste it to FW but it also didn’t worked (for some text styles this little trick works). I’ve also tried to adjust the anti-aliasing settings but no matter how I adjust them, FW will still render blurry underlines…

http://twitter.com/philswan Phil Swan

Yeah, I don’t think there’s an easy way around this issue. It’s a shame as blurry underlines weren’t a problem in Fireworks CS3 (also the text rendering was better)