Fireworks Essential Tips: Part 1

Tip 1: The Grass Roots of Interface Design

-

When creating interfaces elements that will eventually end up on show for public consumption consider each individual element within the design and ask yourself the following questions.

  1. Does the element play a functional part in the interface?
  2. Will the element work in the medium it is intended?
  3. If the element is an animation, video or auditory narrative, does it add to the overall aesthetics of the design?

If you answered ‘No’ to any of these three questions, revisit the element, and either improve it or ditch it, then ask yourself the same questions again.

Tip 2: Use Colour Sensibly Within Your Designs

-

Gosh, I could write a book on this one! When you are designing any elements that sit together as part of a design or interface and if you have no solid design brief experiment with what colours work together and on their own. You may have the world’s best design for a section of a website, but when it is brought together with other sections, it looks like a mish-mash of colour enough to burn holes through your retina.

Within Fireworks, create simple colour chips from simple rectangles that you can carry with you throughout a specific design. When you need a specific colour for the design, simply use the Eyedropper tool from the Tools Panel and select the colour from the colour chips.

If you are designing for a website not only consider colours to be used in the interface but colours that will be used in the CSS for the site as well.

-

For some colour inspiration try some of the ‘Designer’s Guide to Color’ series available from Amazon as they contain hundreds upon hundreds of color combinations for any project.

Tip 3: Creating Interfaces with Path Tools

-

Create your basic interface shapes from the shapes within the Vector Panel of the toolbar such as the rectangle tool. Make a copy of the basic shape and hack into them with the Pen Tool adding control points and reshape the copied object using the Bezier control handles of the individual vector points.

-

Changing the shape, fill type, opacity and texture of the copied object allows you to quickly build up subtle highlights, shadows and midtones that really bring your designs to life. By adding more subtle copies of the original object and altering its shape and other attributes, your designs will remain scalable, manageable and best of all they will look great!

-

Tip 4: Wireframe your Designs

-

Do what to my designs? I moved from Adobe PhotoShop to Fireworks for rapid interface development many versions back and haven’t looked back since. Fireworks vector objects such as the rectangle, circle and polygon tools as well as the new Auto-Shapes allow you to quickly sketch out the main components of interfaces and web sites in minutes.

By creating wireframe diagrams for site concept ideas within Fireworks you can quickly decide where best to place the content for your sites. From there you can quickly move onto testing colour schemes for the site and seeing what combinations work best (note the colour chips mentioned in an earlier tip!).

-

Once you have decided upon a particular layout, you can then begin the design process moving onto a fully fledged design. Don’t underestimate the power of Fireworks, it’s a heavyweight application for creating designs of all types.

-

Tip 5: An Alternate to the Drop Shadow Live Effect

-

There are times when there are sometimes better methods for carrying out a process than the shortcuts that are provided. Creating drop shadows is one of those examples within Fireworks.

By creating a vector object either with the pen tool or by creating a copy of an existing vector object within your design and modifying the shape using the SubSelectionTool from the Tools Panel you have the basics for a more editable and scalable shadow effect.

-

Changing the ‘Edge’ type from Anti-Alias or Hard to Feather and playing around with the Feather amount and the opacity can create some very realistic shadow effects, which when placed behind the object you are wishing to create the shadow