IDUX

Yet another grid system has been published to help designers create consistent layouts. The Square Grid offers templates for Illustrator, Photoshop, and InDesign, a PDF to print for sketching, and an HTML and CSS framework for coding with the grid.

However, they do not offer a template for designers who use Fireworks, so I created one using their 28 pixel square grid (35 columns at 980 pixels wide.)

Download the Square Grid Template for Fireworks Here

There are many grid systems out there, but I like how the creator of this grid took the time to identify a few golden ratio column widths. Nice touch.

I was recently asked about techniques for creating images for button states and how to keep the button shape and text properly aligned (i.e., maintain consistent registration points) across the states to avoid any pixel shifts when the images change.

There are a few different techniques for creating button images, and the method you use depends on how you are using the button images. The traditional JavaScript method (and even some CSS-based methods) use separate images for each button state, and the CSS Sprite method uses one larger image as a background image with all of the button states in that single image then changing the position of the background image to show the different button states. You can use Adobe Fireworks to create button state images for either of these methods.

Read the rest of this entry »

Recently a Fireworks user asked, “I know how to attach text to a path, but how do I make it look like the text is on the rings of Saturn and orbiting a planet?”

With just a few tweaks to text attached to a path and a little bit of skewing, we can create this look in only a few steps.

Read the rest of this entry »

One of the best features of Adobe Fireworks is the ability to extend its functionality with custom commands and command panels. However, most third-party command panels do not have their own icons for the workspace, and when you install them they are assigned the default command panel icons.

Unfortunately, these icons do not represent the actual functionality of the command panel, and with several custom command panels installed you might see this same icons several times in your workspace.

Fortunately, the Fireworks software team thought ahead and made it very easy to use custom icons for command panels installed as extensions. (Note: the native command panels have their icons built-in, so you cannot change them.)

Read the rest of this entry »