interface design
Goals: This session will provide a basic understanding of how Fireworks can be used to design graphical interfaces for web sites. We will explore the basic tools used in interface design. We will also discuss how Fireworks fits into the overall web design workflow.
- Introduction to Fireworks
- Understanding Design Workflow
- Creating A New Document
- Exploring Vector / Bitmap Tool Features
- Using Vector Tools
- Using Fireworks Panels
- Exercise
introduction to fireworks
Fireworks is used to design graphical elements for web sites. Adding graphics to a page can help create a more appealing look and feel and help develop a personality for a site. Common graphical elements involved in interface design are: logos, headers, footers, photos and buttons.
In the image below, we have an example of a typical interface. It uses Fireworks drawing tools to design a test tube logo. This turns a boring text-only site into a more interesting graphical site. The Fireworks text tools are used to create a banner for the site. While the banner is mostly textual, using Fireworks to create a graphic allows for the use of interesting fonts, and control of formatting, color, size and spacing. While there are no photographs in the example below, photos are a very common element of interface design. Photos can be taken with a digital camera or scanned using a flatbed scanner. Photos can then be edited, cropped, and adjusted for color and brightness within Fireworks. The navigational elements of this site were also created using Fireworks button editor feature. Navigational elements are covered in the following lesson.
fireworks design workflow
Fireworks is used to design a site's graphical feel. Page layouts, navigation elements, and graphical elements are all created using different Fireworks tools and features. Elements of the page are usually sliced into sections. Each sliced region will be exported as a separate graphic. Each sliced region also has its own exporting options applied to it. During the exporting process, an html page will be created. This will include any scripting and table structures required to control button rollovers and maintain page layout. This process will be covered in the section called "Creating Graphical Content."
In addition to export content into web-ready formats, Fireworks saves this work in a non-optimizes native format called a .png format. This file is always available for future editing and design changes. Fireworks and Dreamweaver work closely together in this process. Inside Dreamweaver, Fireworks .png files can be called to make design changes. Fireworks opens the .png file, changes are made, saved, and files are automatically updated back in Dreamweaver.
Fireworks is very good at graphical design elements and web page layouts. What it is not meant for, however, is developing web pages with actual content. While Fireworks does export HTML pages, the content is all graphical. Textual content placed in a page can be inaccessible to users accessing content on a cell phone or text-only browser. Fireworks is meant to create a graphical framework. Content creation is meant to take place in Dreamweaver.
creating a new document
When a new document is created, several pieces of information need to be provided.
- Width - Provide in pixel width for web graphics
- Height - Provide in pixel height for web graphics
- Resolution - 72 pixels per inch for web graphics
- Canvas Color - Determines the color of the background of the document.
Vector / Bitmap Features
Fireworks has two types of tools it uses to create web content -- vector tools and bitmap tools.
Vector Tools: Vector tools are used to draw objects and text. Common tools are: rectangle, ellipse, line and text.
Bitmap Tools: Bitmap tools are used to edit photographic content. Common tools are: crop, magic wand, marquee, and pencil.
Both types of tools are accessed through the Tools Panel. Each tool has properties associated with it. These properties are found in the Properties window. Selecting a tool in the Tools Panel will cause the Properties window to present the associated properties for that tool.
Tools Panel
Vector Tools
We will experiment with the vector tools before the class exercise. Below is a description of each vector tool and the associated properties.
Line
Creates horizontal, vertical and diagonal lines. Using the Shift key will constrain the tool to create perfectly straight lines.
Pen / vector path
Draws line objects as editable paths. Objects have both line and fill colors. Most people find the Vector Path Tool easier to use.
Rectangle, Ellipse
Creates rectangular and circular objects. Objects have both a lines and fill colors. Using the Shift key will constrain the tool to create perfect squares and circles. Notice the ability to control the size (W and H) and placement of the object (X and Y) being drawn. We will use this feature extensively in the exercise.
Text
Creates and edits text blocks. Text Objects have font, font color, alignment, and font styles associated with them.
Knife
Cuts a selected object or path into separate objects. For example, a circle can be sliced into to half circles. Often, it is easier to use the knife tool to create shapes than it would be to try to draw it.
fireworks panels
Panels are floating controls to edit aspects of a selected object or elements of the document. We will explore the most useful panels.
optimize and align panels
The Optimize and Align Panels are used to manage objects in the document. The Optimize panel contains the settings that control the format in which objects will be exported.
pages, frames, history, and layers panels
The Layers and Frames Panels organizes a document’s structure and contain options for creating, deleting, and manipulating layers and frames. The Frames Panel includes options for creating animations. The History Panel lists recently used commands to quickly undo and redo them. The number of steps recorded can be set in the Fireworks Preferences section.
assets
The Assets panel contains three palettes: Styles, URLs and Library. The Styles palette can be used to apply combinations of characteristics to an object. The URL palette lets you create libraries containing frequently used URLs. The Library palette contains graphic symbols, button symbols, and animation symbols. Symbols can be dragged from the Library panel onto a document. Global changes can be made to all instances by modifying only the symbol.