Back to Home Page

GIZMO Interface Index

This tutorial will guide you through the process of using Fireworks to create an interactive web interface. You will learn how to use vector shapes and paths, modify and combine these and how to slice an image and export it for use in Dreamweaver.

Below is a list of pages in this tutorial. You can go directly to the page by clicking on the title.

• What you will learn
• View an example of the completed image in use
• Create a new document
• Creating vector shapes
• Aligning the shapes
• Rulers and Guides
• Modifying a path
• Modifying a curve using point handles
• Creating shapes by joining others
• Applying Live Effects
• Modifying a gradients direction
• Adding Live Effects
• Adding a drop shadow Live Effect
• Cutting a shape to create another shape
• Cutting a path
• Closing a path
• Adding a curve point
• Adjusting the shape of a curved path segment
• Moving Point Handles
• Creating the Grip Texture
• Adjusting a Gradient Fill
• Outlining the Grip
• Grouping Layers
• Flipping shapes
• Subselecting from a group
• Creating the GIZMO screen
• Recessing the Screen
• Drawing a curve with the Pen tool
• Copy, Paste, Flip and Move the Button Line
• Adding highlights to the Button Lines
• Using text to create button images
• Applying Styles
• Creating a Button Symbol
• Drawing the Button
• Adding Button text
• Defining Button states
• Creating an Instance of the Menu Button
• Slicing the image
• Naming your Slices
• Optimizing your image
• Exporting to HTML
• Next steps

©Andrew Craigie 2002