IDUX

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.

(more…)

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.

(more…)

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.)

(more…)

Custom-designed buttons have come a long way. We’re no longer tied to the standard HTML buttons dropped into our designs by the browsers, and there are many, many button styles out there.  We see quick tutorials on how to create more complex button designs with gloss, shine, depth, shadow, texture, and general “make you want to touch it-ness”, and most of those how-to guides involve creating more refined buttons using several objects, vectors, layers, blend modes, etc.

I prefer to work with vectors and editable filters and effects whenever possible, because it makes it much easier to edit a design later when the size or color needs to be changed. I wanted to see if it is possible to create a more complex and detailed button with nothing but two vector objects: a button and a text label. Here’s how I did it.

(more…)