Macromedia Fireworks - 8 Getting Started
Getting Started with Fireworks
Trademarks
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML,
RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev,
and WebHelp are either registered trademarks or trademarks of Macromedia, Inc. and may be registered in the United States or
in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases mentioned within
this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and may be registered in
certain jurisdictions including internationally.
Third-Party Information
This guide contains links to third-party websites that are not under the control of Macromedia, and Macromedia is not
responsible for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your
own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia
endorses or accepts any responsibility for the content on those third-party sites.
Copyright © 2005 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced,
translated, or converted to any electronic or machine-readable form in whole or in part without written approval from
Macromedia, Inc. Notwithstanding the foregoing, the owner or authorized user of a valid copy of the software with which
this manual was provided may print out one copy of this manual from an electronic version of this manual for the sole
purpose of such owner or authorized user learning to use such software, provided that no part of this manual may be
printed out, reproduced, distributed, resold, or transmitted for any other purposes, including, without limitation,
commercial purposes, such as selling copies of this documentation or providing paid-for support services.
Part number ZFW80M100
Acknowledgments
Project Management: Charles Nadeau, Debi Robson
Writing: David Sullivan, Rosanne Conroy, Charles Nadeau
Editing: Melba Lancaster, Shawn Jackson, Linda Adler
Production Management: Patrice O’Neill
Media Design and Production: Adam Barnett, Aaron Begley, John Francis, Paul Rangel, Arena Reed, Mario Reynoso
Localization Project Management: Luciano Arruda
Special thanks to Jon Varese, Jennifer Rowe, Jay Armstrong, Alan Musselman, Maureen Keating, Matt Hoffberg, David Spells,
Sheila McGinn, Andrew Wilson, Rosana Francescato, Kristin Conradi, and the entire Fireworks engineering and QA teams.
First Edition: August 2005
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
Contents
Chapter 1: Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
What you can do with Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5
What's new in Fireworks 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
Installing Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Chapter 2: Learning Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Where to start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Getting the most from the Fireworks documentation. . . . . . . . . . . . . . . .11
Using the Fireworks help system . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Chapter 3: Fireworks Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Getting to know the Fireworks workspace . . . . . . . . . . . . . . . . . . . . . . . . 15
Accomplishing basic tasks in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . 25
Chapter 4: Tutorial: Creating Page Mock-ups. . . . . . . . . . . . . . . 29
Create a working folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Review your task. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Create and save a new document. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Import and place images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Create a composite of the content area . . . . . . . . . . . . . . . . . . . . . . . . . 35
Place text and images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Export the image for the web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47
Chapter 5: Tutorial: Handling Photographs. . . . . . . . . . . . . . . . . 49
Review your task. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Batch process large image files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Compose the images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Preview and export the images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
View the final optimized images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
3
Chapter 6: Tutorial: Creating a Page Banner . . . . . . . . . . . . . . . . 61
Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Add a background and place the logo . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Organize your objects with layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Create a contrasting background for the logo. . . . . . . . . . . . . . . . . . . . . 68
Create an outline around the banner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Create a slanted edge effect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Add a tag line to the banner. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Export an optimized image file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Chapter 7: Tutorial: Creating a Web Page. . . . . . . . . . . . . . . . . . . 81
View the completed web page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Open the source file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Import an image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Slice the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Create a rollover. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Create buttons for a navigation bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Create and edit a pop-up menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99
Optimize the document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Export HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Test the completed file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115
4Contents
CHAPTER 1
Introduction
Macromedia Fireworks 8 is the definitive solution for professional web
graphics design and production. It is the first production environment to
address and solve the special challenges facing web graphics designers and
developers.
This chapter covers the following topics:
What you can do with Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
What's new in Fireworks 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Installing Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
What you can do with Fireworks
You can use Fireworks to create, edit, and animate web graphics, add
advanced interactivity, and optimize images in a professional environment.
In Fireworks, you can create and edit bitmap and vector graphics in a single
application. Everything is editable, all the time. And you can automate the
workflow to meet the demands of time-consuming updates and changes.
Fireworks integrates with other Macromedia products such as
Dreamweaver, Flash, FreeHand, and Director, as well as your other favorite
graphics applications and HTML editors, to provide a truly integrated web
solution. You can easily export Fireworks graphics with HTML and
JavaScript code customized for the HTML editor you’re using.
1
5
What's new in Fireworks 8
Create and optimize images for the web with precise control in an
intuitive, customizable environment. New support for ActionScript and
CSS (Cascading Style Sheet) formats allow Fireworks to work even more
efficiently with Dreamweaver and Flash. New file formats supported, new
panels and dramatically streamlined workflow optimize both your time
and your images.
Optimization
Image Editing panel This new panel is a central location where you can
access commonly used image editing tools, filters,
and menu commands.
More import file
formats
Batch processing
workflow optimized
Take advantage of the integrated workflow in Fireworks to create and
optimize images for Dreamweaver 8 and Flash Professional 8 without
losing information or time with roundtrip editing. Use improved support
for CSS and ActionScript, as well as feature alignment with the other
Studio products.
Fireworks 8 now supports import of QuickTime
Image, MacPaint, SGI & JPEG 2000 file formats
(QuickTime plug-in required for QuickTime support).
Streamlined file renaming, the ability to check file
dimensions when scaling during a batch process
and the addition of a status bar and log file are just a
few of the optimizations to this workflow.
6Introduction
Integrated workflow
CSS (Cascading
Style Sheet) pop-up
menus
Vector compatibility Vector attributes (fills, strokes, filters and blend
More slicing options Polygon slices are inserted automatically when a
Recognize
ActionScript color
values
Fireworks 8 uses CSS (Cascading Style Sheet)
format to create interactive Pop-up Menus. The
result is clean and easy to customize code that
integrates well with sites built in Dreamweaver.
modes) are preserved when moving objects
between Flash and Fireworks.
selected object is a polygon path.
Fireworks recognizes ActionScript color values
when copied from Flash and pasted into Fireworks
color value fields.
Integrated workflow
Use the "Save as"
command to save
bitmaps into
different file types
Evolved Open, Save
and Export logic
Less intrusive grids Like Flash, grids now use a dotted line and a lighter
Choose single-file output formats such as gif, jpg,
tiff, in the "Save As" dialog.
The logic used to determine the default folders in the
Open, Save, Save As, Save a Copy, and Export
dialogs is enhanced by reducing the amount of
navigation required.
default grid color.
Use Fireworks for visual tools to create professional quality web graphics
and animations such as rollovers and pop-ups without the need to
program. Exercise precise control over your images with many new creative
options.
Create without complexity
25 new blend
modes
Perspective shadow Add a perspective shadow to open paths and text
Solid Shadow A new live filter that stamps the object it is applied to
Mobile interface
components
Sample buttons,
animations themes
and bullets
Auto Shape
Properties panel
Live Marquee &
Convert Selections
(Marquee to Path
and Path to
Marquee)
Autoname text Layers are automatically named by the text you type
25 new choices to alter the look of your colors and
objects.
objects.
several times.
Mock up your mobile interface quickly with bitmap
interface components.
Get started quickly with cool new assets like
buttons, animations, themes and bullets.
This new panel is used to modify the properties of
auto shape properties such as the Star Auto Shape,
Arrow Auto Shape or Smart Polygon Auto Shape.
Turn active selections into editable vector paths and
the reverse. Get instant feedback on filters and
settings applied to selections.
in them.
What's new in Fireworks 8 7
Create without complexity
Special Characters
panel
Reshape text on a
path
Use this new panel to insert special characters
directly into text blocks.
Edit path points when text is attached
.
Save time and effort with the many refinements made to common tasks.
Workflow Improvements
Recent Fonts &
Optimization
remember last
settings used
Save multiple
selections
Select objects that
share an edge in the
Layers panel
Autosave
preferences
Group consecutive
nudges
Improved tablet
support
Lock objects Lock on a per-object basis in the Layers panel.
Recently used fonts now appear at the top of font
menus. Optimization now defaults to the last
settings used.
Save, restore, name and delete multiple marquee
selections within PNG files.
Shift-click to select objects that share an edge or
boundary in the layers panel.
Fireworks 8 preferences are automatically saved
more frequently.
Consecutive nudges are treated as one move.
Tablet support is improved for Path Scrubber tools
and stroke pressure sensitivity.
8Introduction
For more information on the new features, see the Fireworks page on the
Macromedia website at www.macromedia.com/go/fireworks.
Installing Fireworks
This section explains how to install Fireworks.
Be sure to read the release notes on the Macromedia website at
www.macromedia.com/go/fireworks_documentation for late-breaking
information or instructions.
To install Fireworks:
1.
Insert the Fireworks CD into your computer’s CD-ROM drive.
2.
Do one of the following:
■ In Windows, the Fireworks installation program starts
automatically.
■ In Macintosh, double-click the Fireworks installer icon that appears
on the desktop.
3.
Follow the onscreen instructions.
The installation program prompts you to enter the required
information.
4.
If prompted to do so, restart your computer.
Installing Fireworks 9
10 Introduction
CHAPTER 2
Learning Fireworks
Macromedia Fireworks 8 includes a variety of resources to help you learn
the program quickly and become proficient in creating your own web
graphics.
This chapter contains the following topics:
Where to start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Getting the most from the Fireworks documentation . . . . . . . . . . . 11
Using the Fireworks help system . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Where to start
If you are completely new to Fireworks, begin by reading Chapter 3,
“Fireworks Basics,” on page 15, and then do the tutorials.
If you have experience creating web graphics, begin by doing the tutorials
in this guide, and then read “Fireworks Basics” in Using Fireworks.
Getting the most from the
2
Fireworks documentation
Fireworks includes a variety of media to help you learn the program
quickly and become proficient in creating your own images.
Using Fireworks is the Fireworks user manual. You can access it at any
time in Fireworks help (Help > Using Fireworks). The manual is also
available in PDF format on the Macromedia website at
www.macromedia.com/go/fireworks_documentation.
11
Getting Started with Fireworks provides an interactive introduction to
the key features of Fireworks. You can complete tutorials covering common
Fireworks tasks, such as using the drawing and editing tools, optimizing
images, and creating rollovers, navigation bars, and other interactive
elements. You can access the guide at any time in Fireworks help (Help >
Getting Started with Fireworks). The guide is also available in PDF format
on the Macromedia website at www.macromedia.com/go/
fireworks_documentation.
The Fireworks application contains many dialog boxes and tooltips that
help you use the program. Tooltips appear when you move the pointer over
a user interface element.
The Fireworks Support Center at www.macromedia.com/go/
fireworks_support offers support and problem-solving information.
The Fireworks Developer Center at www.macromedia.com/go/
fireworks_devnet presents information to help you improve your skills and
learn new ones.
The Fireworks discussion group provides a lively exchange for Fireworks
users, technical support representatives, and the Fireworks development
team. Use a newsgroup reader to go to news://forums.macromedia.com/
macromedia.fireworks.
Extending Fireworks includes information about writing JavaScript to
automate Fireworks tasks. You can control every Fireworks command or
setting using special JavaScript commands that Fireworks can interpret.
The manual is available both in help and on the Macromedia website as a
downloadable PDF.
12 Learning Fireworks
Using the Fireworks help system
The online help system available in the Help menu provides detailed
information on all tasks you can perform with Fireworks.
Accessing help
You can access online help while you work in Fireworks.
To open Fireworks Help:
■ Select Help > Fireworks Help.
Searching help
You can do a full text search of Fireworks Help.
To search online help (Windows):
1.
In Fireworks Help, click the Search tab.
2.
Type a word or phrase in the text box, and then click List Topics.
3.
Double-click a topic in the list of results to display it.
To search online help (Macintosh):
1.
In Fireworks Help, type a word or phrase in the Ask a Question text
box, and then press Enter.
2.
Double-click a topic in the list of results to display it.
Using the index
You can find information quickly with the index.
To use the index (Windows):
1.
In Fireworks Help, click the Index tab.
2.
Scroll to an index entry in the alphabetized list and double-click it to
display the indexed information.
TIP
To search for a
specific phrase,
enclose it in double
quotes.
To use the index (Macintosh):
1.
In Fireworks Help, click the Index link in the table of contents.
2.
Click a letter and scroll to an index entry in the list.
3.
Click a number beside the entry to display the indexed information.
Using the Start Page
When you start Fireworks without opening a document, the Fireworks
Start page appears in the work environment. The Start page gives you
quick access to Fireworks tutorials, recent files, and Fireworks Exchange,
where you can add new capabilities to some Fireworks features. Use the
Start page much like a web page. Click any of the features you see to use
them.
TIP
You can start typing
a keyword in the text
box to quickly scroll
to an index entry.
Using the Fireworks help system 13
To disable the Start page:
1.
Run Fireworks without opening a document.
The Start page is displayed.
2.
Click Don’t Show Again.
Printing the Fireworks Documentation
The following books are available in PDF format on the Macromedia
website at www.macromedia.com/go/fireworks_documentation:
■ Using Fireworks
■ Getting Started with Fireworks
■ Extending Fireworks
You can print all or part of the PDF on your own printer or you can bring
the PDF to a copy shop.
14 Learning Fireworks
CHAPTER 3
Fireworks Basics
Macromedia Fireworks 8 is a versatile application for designing graphics
for use on the web. You can create and edit both bitmap and vector images,
design web effects such as rollovers and pop-up menus, crop and optimize
graphics to reduce their file size, and save time by automating repetitive
tasks. Its innovative solutions tackle the major problems facing graphic
designers and webmasters.
This chapter covers the following tpics:
Getting to know the Fireworks workspace. . . . . . . . . . . . . . . . . . . . 15
Accomplishing basic tasks in Fireworks . . . . . . . . . . . . . . . . . . . . . . 25
Getting to know the Fireworks workspace
When you open a document in Fireworks for the first time, Fireworks
activates the work environment, including the Tools panel, Property
inspector, menus, and other panels.
3
15
The Tools panel, on the left of the screen, contains labeled categories,
including bitmap, vector, and web tool groups. The Property inspector
appears along the bottom of the document and initially displays document
properties; the properties change when you choose a new tool or an object
in the document. The panels are initially docked in groups along the right
side of the screen.
16 Fireworks Basics
Using the Tools panel
The Tools panel is organized into six categories: Select, Bitmap, Vector,
Web, Colors, and View.
About bitmap and vector graphics
Computers display graphics in either vector or bitmap format.
Understanding the difference between the two formats helps you
understand Fireworks, which contains both vector and bitmap tools and is
capable of opening or importing both formats.
Getting to know the Fireworks workspace 17
Bitmap graphics are composed of dots, called pixels, arranged in a grid.
When you edit a bitmap graphic, you modify pixels rather than lines and
curves. Bitmap graphics are resolution-dependent, which means that the
data describing the image is fixed to a grid of a particular size. Enlarging a
bitmap graphic redistributes the pixels in the grid, often making the edges
of the image appear ragged.
Vector graphics render images using lines and curves, called vectors, that
include color and position information. When you edit a vector graphic,
you modify the properties of the lines and curves that describe its shape.
Vector graphics are resolution-independent, which means you can move,
resize, reshape, or change the color of a vector graphic, as well as display it
on output devices of varying resolutions, without changing the quality of
its appearance.
You can experiment with the bitmap and vector tools on a blank canvas in
Fireworks to see the difference between the two formats.
Changing tool options
When you select a tool, the Property inspector displays tool options. Some
options remain displayed as you work with the tool. For other tools, such
as the basic shape, Pen, and Line tools, the Property inspector displays the
properties of selected objects. For more information about the Property
inspector, see “Using the Property inspector” in Fireworks Help.
18 Fireworks Basics
To display tool options in the Property inspector for a tool that
you’re already using:
■ Choose Select > Deselect to deselect all objects.
For information about specific tool options, see the sections that introduce
the various tools in Using Fireworks.
Selecting a tool from a tool group
A small triangle in the lower right corner of a tool in the Tools panel
indicates that it is part of a tool group. For example, the Rectangle tool is
part of the basic shape tool group, which also includes the Rounded
Rectangle, Ellipse, and Polygon basic tools, as well as all of the Smart Shape
tools, which appear below the divider line.
To select an alternative tool from a tool group:
1.
Click the tool icon and hold down the mouse button.
A pop-up menu appears with tool icons, tool names, and shortcut keys.
The currently selected tool has a check mark to the left of the tool
name.
2.
Drag the pointer to highlight the tool you want, and release the mouse
button.
The tool appears in the Tools panel, and the tool options appear in the
Property inspector.
Using the Property inspector
The Property inspector lets you edit the properties of the current selection,
tool, or document. By default, the Property inspector is docked at the
bottom of the workspace.
Getting to know the Fireworks workspace 19
The Property inspector can be open at half height, displaying two rows of
properties, or at full height, displaying four rows. You can also fully
collapse the Property inspector while leaving it in the workspace.
NOTE
Most procedures in Using Fireworks assume that the Property inspector is
displayed at full height.
To undock the Property inspector:
■ Drag the gripper at the upper left corner to another part of the
workspace.
To dock the Property inspector at the bottom of the workspace
(Windows only):
■ Drag the side bar on the Property inspector to the bottom of the
screen.
To expand a half-height Property inspector to full height,
revealing additional options:
■ Click the expander arrow in the lower right corner of the Property
inspector.
■ Click the icon in the upper right of the Property inspector and select
Full Height from the Property inspector Options menu.
NOTE
In Windows, the Options menu is available only when the Property
inspector is docked.
20 Fireworks Basics
To reduce the Property inspector to half height:
■ Click the expander arrow in the lower right corner of the Property
inspector.
■ Select Half Height from the Property inspector Options menu.
To collapse the Property inspector when it is docked:
■ Click the expander arrow or the title of the Property inspector.
■ Select Collapse Panel Group from the docked Property inspector’s
Options menu.
For more information about specific Property inspector options, see the
appropriate sections in Using Fireworks.
Using panels
Panels help you edit aspects of a selected object or elements of the
document. Panels let you work on frames, layers, symbols, and more. Each
panel is draggable, so you can group panels together in custom
arrangements.
Some panels are not displayed by default, but you can display them if you
want. Some panels are not grouped with other panels by default, but you
can group them if you want. When you group panels together, all panel
group names appear in the panel group title bar. You can, however, assign
any name you like to panel groups.
The Optimize panel lets you manage the settings that control a file’s size
and file type and work with the color palette of the file or slice to be
exported.
The Layers panel organizes a document’s structure and contain options
for creating, deleting, and manipulating layers.
The Frames panel includes options for creating animations.
The History panel lists commands you recently used so that you can
quickly undo and redo them. In addition, you can select multiple actions,
and then save and reuse them as commands. For more information, see
“Using the History panel to undo and repeat multiple actions” in Using
Fireworks.
The Shapes panel contains Auto Shapes that are not displayed in the
Tools panel.
The Styles panel lets you store and reuse combinations of object
characteristics or choose a stock style.
The Library panel contains graphic symbols, button symbols, and
animation symbols. You can easily drag instances of these symbols from the
Library panel to your document. You can make global changes to all
instances by modifying only the symbol.
The URL panel lets you create libraries containing frequently used URLs.
The Color Mixer panel (Window > Color Mixer) lets you create new
colors to add to the current document’s color palette or to apply to selected
objects.
The Swatches panel (Window > Swatches) manages the current
document’s color palette.
Getting to know the Fireworks workspace 21
The Info panel (Window > Info) provides information about the
dimensions of selected objects and the exact coordinates of the pointer as
you move it across the canvas.
The Behaviors panel (Window > Behaviors) manages behaviors, which
determine what hotspots and slices do in response to mouse movement.
The Find panel (Window > Find) lets you search for and replace elements
such as text, URLs, fonts, and colors in a document or multiple
documents.
The Align panel (Window > Align) contains controls for aligning and
distributing objects on the canvas.
The Auto Shape Properties panel (Window > Auto Shape Properties) lets
you set the properties of Auto Shapes.
The Image Editing panel (Window > Image Editing) assembles the most
commonly used tools for photo editing in one place.
The Special Characters panel (Window > Special Character) lets you
insert special characters into your text directly from within Fireworks,
rather than having to copy and paste the characters from another source.
Organizing panels and panel groups
By default, some Fireworks panels are docked on the right side of the
workspace. Some panels are organized in panel groups. Other panels are
not displayed initially but can be opened from the Window menu. You can
undock panel groups, add panels to a group, undock individual panels,
rearrange the order of docked panel groups, and collapse and close panel
groups. You can also open and close individual panels.
TIP
A check mark next to
a panel name in the
Window menu
indicates that the
panel is open.
22 Fireworks Basics
To open a closed panel:
■ Select the panel from the Window menu.
To close a panel, do one of the following:
■ Select the panel name from the Window menu.
■ Click the Close button in the panel title bar when the panel is
undocked.
To undock or move a panel group:
■ Drag the panel gripper on the upper left corner away from the panel
docking area on the right side of the screen.
To dock a panel group:
■ Drag the panel gripper onto the panel docking area.
As you drag a panel or panel group over the panel docking area, a
placement preview line or rectangle shows where it would be placed
among the groups.
To collapse or expand a panel group or panel, do one of the
following:
■ Click the title of the panel group or panel.
NOTE
The title bar is still visible when the panel group or panel is collapsed.
■ Click the expander arrow in the upper left corner of the panel group or
panel.
To undock a panel from a panel group:
■ Select Group With > New Panel Group from the Options menu in the
panel group’s title bar. (The Group With command’s name changes
depending on the name of the active panel.) The panel appears in a
new panel group of its own.
To dock a panel in a panel group:
■ Select the name of a panel group from the Group With submenu of the
panel group’s Options menu. (The Group With command’s name
changes depending on the name of the active panel.)
To rename a panel group:
1.
Click the icon in the upper right of the panel group and select Rename
Panel Group from the Options menu.
2.
Enter the new name.
To return panels to their default positions for your screen
resolution, do one of the following:
■ Select Window > Workspace Layouts > 1024 x 768.
■ Select Window > Workspace Layouts > 1280 x 1024.
Getting to know the Fireworks workspace 23
To hide all panels and the Property inspector:
■ Select Window > Hide Panels. To view hidden panels, select Window >
Hide Panels again.
NOTE
Panels that are hidden when you select Hide Panels remain hidden when
you deselect this command.
About the Quick Export button
The Quick Export button lets you export your Fireworks files to a number
of Macromedia applications, including Dreamweaver, Flash, Director, and
Macromedia FreeHand MX. In addition, you can export your files to
Photoshop, FrontPage, Adobe
your files in the browser of your choice.
GoLive, and Illustrator, or you can preview
24 Fireworks Basics
Navigating and viewing a document
You can control your document’s magnification, its number of views, and
its display mode. In addition, you can easily pan the view of a document,
which is helpful if you zoom in and can no longer see the entire canvas.
When your document is maximized in Windows, you can easily choose
among multiple open documents by using the document tabs that appear
at the top of the document window. Each open document displays its
filename on a tab.
Accomplishing basic tasks in Fireworks
Fireworks is a versatile application for creating, editing, and optimizing
web graphics. This section describes how to accomplish basic tasks such as
creating, opening, and saving files. It also describes how to convert files to
other file formats. For more detailed information, see “Fireworks Basics” in
Using Fireworks.
Accomplishing basic tasks in Fireworks 25
About graphic files
You can work with a variety of file types in Fireworks. For example, you
can start with a PNG file and save it as a JPEG file or GIF file. You can
create HTML files that contain JavaScript code. You can also export or save
an image as a file type specific to another application, such as Photoshop or
Macromedia Flash, if you want to continue working in the other
application.
The following are the most common file types in Fireworks:
PNG, or Portable Network Graphic, is the native file format for Fireworks.
PNG is a versatile web graphic format that can support up to 32-bit color,
contain transparency or an alpha channel, and be progressive.
GIF, or Graphics Interchange Format, is a popular web graphic format for
cartoons, logos, graphics with transparent areas, and animations. GIFs
contain a maximum of 256 colors.
JPEG was developed by the Joint Photographic Experts Group specifically
for photographic or high-color images. The JPEG format is best for digital
or scanned photographs, images using textures, images with gradient color
transitions, and any images that require more than 256 colors.
For information on other file types in Fireworks, see “Choosing a file type”
in Using Fireworks.
26 Fireworks Basics
Creating new files in Fireworks
When you create a new file in Fireworks, you create a Portable Network
Graphic, or PNG file. PNG is the native file format for Fireworks. You can
easily convert the file to other web graphic formats, such as JPEG or GIF.
For more information, see “Converting files to other formats” on page 28.
To create a new file:
1.
Select File > New.
The New Document dialog box opens.
2.
Enter the canvas width and height measurements in pixels, inches, or
centimeters.
3.
Enter a resolution in pixels per inch or pixels per centimeter.
4.
Select white, transparent, or a custom color for the canvas.
NOTE
Use the Custom color box pop-up window to select a custom canvas
color.
5.
Click OK to create the new document.
Fireworks creates a PNG file. Using a PNG file as your source file has the
following advantages:
■ The source PNG file is always editable. You can go back and make
additional changes even after you export the file for use on the web.
■ You can slice complex graphics into pieces in the PNG file and export
them as multiple files with different file formats and various
optimization settings.
Accomplishing basic tasks in Fireworks 27
Opening files in Fireworks
In Fireworks, you can easily open and edit both vector and bitmap
graphics.
TIP
To open a file
without overwriting
the previous version,
select Open as
Untitled, and then
save the file using a
different name.
To open a file:
1.
Select File > Open.
2.
In the Open dialog box, select the file and click Open.
Saving files in Fireworks
After you create graphic files in Fireworks, you can save them to a new
location or rename them.
To save a file:
■ Select File > Save.
To save a file to a new location or to rename the file:
1.
Select File > Save As.
2.
In the Save As dialog box, browse to the desired location or type the new
filename.
3.
Click Save.
Converting files to other formats
You can easily convert files to other web graphic formats, such as JPEG or
GIF.
28 Fireworks Basics
To convert a file to a new file format:
1.
Select File > Save As.
2.
In the Save As dialog box, select a new file type from the Save As Type
pop-up menu.
3.
Click Save.
CHAPTER 4
Tutorial: Creating Page Mock-ups
This tutorial will guide you through the basic tasks of creating a mock-up
of a web page with Macromedia Fireworks 8. Page mock-ups are typically
used to show proposed page designs to colleagues or clients. Once a design
is approved, the mock-up is used by web designers as a blueprint to create
the page.
In this tutorial, you’ll complete the following tasks:
Create a working folder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
Review your task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
Create and save a new document . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Import and place images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Create a composite of the content area . . . . . . . . . . . . . . . . . . . . . . 35
Place text and images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Export the image for the web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4
29
Create a working folder
Before you begin, create a working folder that includes the sample files
used in the tutorials in Getting Started. This task consists of creating the
working folder on your hard disk and copying the sample files from the
Fireworks application folder to the working folder.
1.
Create a new folder called local_sites somewhere on your hard disk. For
example, create a folder called local_sites in either of the following
locations:
■ (Windows) C:\Documents and Settings\your_user_name\
My Documents\local_sites
■ (Macintosh) /Users/your_user_name/Documents/local_sites
On the Macintosh, there’s a folder called Sites already in your user
folder. Don’t use that Sites folder as your local folder; the Sites folder is
where you place your pages to make them publicly accessible when
you’re using the Macintosh as a web server.
2.
Locate the cafe_townsend and global folders in the Fireworks
application folder on your hard disk. If you installed Fireworks to its
default location, the path to the folders is as follows:
■ (Windows) C:\Program Files\Macromedia\
Fireworks 8\Tutorial_assets\
■ (Macintosh) /Applications/Macromedia Fireworks 8/
Tutorial_assets/
3.
Copy the cafe_townsend and global folders to your local_sites folder.
Review your task
Café Townsend, a fictional restaurant, hired your team to design and build
their website. During the early planning stages of the project, members of
your team met with Cafe Townsend representatives to brainstorm ideas for
the website. During the meeting, your team sketched several possible
designs on napkins (the meeting was held in a Cafe Townsend restaurant).
30 Tutorial: Creating Page Mock-ups
Loading...