Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,
Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage
Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio,
Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer,
FreeHand, FreeHand Graphics Studio, Generator, Generator Developer’s Studio, Generator Dynamic Graphics Server, Knowledge
Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash,
Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip
HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools
to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind and Xtra are 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, servicemarks, or tradenames of Macromedia, Inc. or other entities and
may be registered in certain jurisdictions including internationally.
This guide contains links to third-party Web sites 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 Web site 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.
Apple Disclaimer
APPLE COMPUTER, INC. MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED, REGARDING THE ENCLOSED
COMPUTER SOFTWARE PACKAGE, ITS MERCHANTABILITY OR ITS FITNESS FOR ANY PARTICULAR PURPOSE.
THE EXCLUSION OF IMPLIED WARRANTIES IS NOT PERMITTED BY SOME STATES. THE ABOVE EXCLUSION MAY
NOT APPLY TO YOU. THIS WARRANTY PROVIDES YOU WITH SPECIFIC LEGAL RIGHTS. THERE MAY BE OTHER
RIGHTS THAT YOU MAY HAVE WHICH VARY FROM STATE TO STATE.
Macromedia Fireworks MX is the 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.
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 both 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
true integrated web solution. You can easily export Fireworks graphics with HTML and
JavaScript code customized for the HTML editor you’re using.
System requirements
Before installing Fireworks, make sure your computer is equipped with the following hardware
and software.
Microsoft Windows™
• 300MHz Intel
• Windows 98 SE, ME, NT
• 64 MB of available RAM (128 MB recommended) plus 80 MB of available disk space
• 800-by-600-pixel resolution, 256-color display or better
• Adobe Type Manager
• CD-ROM drive
®
Pentium® II Processor
®
4 (Service Pack 6), 2000, or XP
®
Version 4 or later for use with Type 1 fonts
Macintosh
®
• Power Macintosh G3 Processor, running OS 9.1 or later, or OS X version 10.1 or later
• 64 MB of available RAM (128 MB recommended) plus 80 MB of available disk space
• 800-by-600-pixel resolution, 256-color display or better
• Adobe Type Manager Version 4 or later for use with Type 1 fonts (OS 9.x only)
• CD-ROM drive
7
Installing Fireworks
Be sure to read the ReadMe document on the Fireworks CD-ROM 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. If it doesn’t start, choose
Start > Run. Click Browse and choose the Setup.exe file on the Fireworks CD. Click OK in the
Run dialog box.
• On the Macintosh, double-click the Fireworks Installer icon.
3 Follow the onscreen instructions.
The installation program prompts you to enter required information.
4 If prompted, restart your computer.
Running Fireworks on systems connected by a network
Macromedia uses network license detection to prevent copies of Fireworks with the same serial
number from running on multiple systems that are connected by a local area network.
If you attempt to launch Fireworks and more than the allowed number of users defined by the
license are also running Fireworks on the same network, you will be alerted of the license restriction.
If you believe you’ve received this message in error, or you would like to obtain additional licenses
for the product, contact Macromedia Technical Support at http://www.macromedia.com/
support/email/.
Viewing the files installed with Fireworks
At some point you may need to view or access the files installed with Fireworks. During
installation, Fireworks places files in various locations on your system. It’s important to
understand where these files reside and why. For more information, see “Working with
configuration files” on page 423.
Macintosh users should pay special attention to the new format Fireworks uses to store the
application and its default configuration files. For more information, see “Viewing package
contents (Macintosh only)” on page 427.
Learning Fireworks
A variety of resources are available for learning Fireworks, including a printed quick-start manual
(Getting Started with Fireworks MX), a help system you can launch from the application, a PDF
version of the complete Fireworks documentation, and several web-based information sources.
Fireworks Help is available whenever the Fireworks application is active, and contains the
complete Fireworks documentation. Choose Help > Using Fireworks to open Fireworks Help.
Mac OS X users choose Help > Fireworks Help.
Introduction8
Fireworks tutorials
provide an interactive introduction to the key features in Fireworks that you
can complete in about an hour each. They include common Fireworks tasks such as using the
drawing and editing tools, optimizing images, and creating interactive elements such as rollovers
and navigation bars.
The Answers panel is a central location where you can find tutorials, TechNotes, and the most
up-to-date information about Fireworks, all in one place. The Answers panel is dynamic; with
just the click of a button you can get the latest updates and information about Fireworks directly
from Macromedia.
The Fireworks application itself contains many dialog boxes and tooltips designed to assist you in
using the program. Tooltips appear when your pointer pauses over a user interface element.
Getting Started with Fireworks MX includes overview information about basic Fireworks features.
The Using Fireworks MX PDF is a searchable, printable document containing the complete
Fireworks documentation. The PDF is available on the installation CD and on the Macromedia
website at http://www.macromedia.com.
Macromedia’s website is updated regularly with the latest information on Fireworks in addition
to advice from expert users, advanced topics, examples, tips, and updates. Check Macromedia’s
website for news on Fireworks and how to get the most out of the program at http://
www.macromedia.com/support/fireworks.
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 MX includes information about writing JavaScript to automate Fireworks
tasks. Every command or setting in Fireworks can be controlled using special JavaScript
commands that Fireworks can interpret. A PDF version of Extending Fireworks MX is available on
the CD and on the Macromedia website at http://www.macromedia.com/support/fireworks/
extend.html.
Registering Fireworks
To get additional Macromedia support, it’s a good idea to register your copy of Macromedia
Fireworks, electronically or by mail.
When you register, you will be put on the priority list to receive up-to-the-minute notices
about upgrades and new Macromedia products. You will receive timely e-mail notices about
product updates and new content appearing on both the www.macromedia.com and the
www-euro.macromedia.com websites.
To register your copy of Fireworks, do one of the following:
• Choose Help > Online Registration and fill out the electronic form.
• Choose Help > Mail Registration, print the form, and mail it to the address shown on the form.
Getting Started9
What’s new in Fireworks
New features in Fireworks MX make it an increasingly approachable application with enhanced
power to create graphics and interactivity for websites. Fireworks MX maximizes productivity for
seasoned veteran web designers, HTML developers who also work with graphics, and emerging
web developers who need to develop graphics-rich, interactive web pages with little or no coding
or JavaScript knowledge.
Fireworks MX has undergone a major refinement, with a streamlined user interface, more
powerful button and pop-up menu capabilities, and intuitive bitmap and vector tools. Integration
with other Macromedia applications—as well as third-party applications—makes it easy to bring
various file formats into Fireworks and send them to other applications smoothly as you work.
Also new to Fireworks is the ability to create JavaScript commands with Macromedia Flash that
appear in Fireworks MX as panels or dialog boxes.
Ease-of-use features
A comfortable, intuitive work environment—including a Property inspector and tools that work
the way professionals would expect—make Fireworks MX an easy application to learn and get to
work quickly. Fireworks MX has a new look that is better organized and more consistent with
other applications in the Macromedia MX Studio.
Panel management enhancements include the ability to place panels in groups, then collapse the
groups so that only the panel group title bar is visible until you need to use the panels. You can
dock the panel groups in a panel docking area to organize your workspace or drag groups or
individual panels anywhere in the workspace. For more information, see “Organizing panel
groups and panels” on page 85.
The Property inspector is a dynamic panel full of options that change as you do your work. Open
a document, and the Property inspector displays document properties such as canvas color and
size. Choose a tool from the Tools panel, and the Property inspector displays tool options. Select a
vector object, and it displays stroke and fill information.
You can change these and other options—including Live Effects, blending modes, and opacity—
directly from the Property inspector, instead of having to click to open or activate panel after panel.
The Property inspector—familiar to Macromedia Dreamweaver and Flash users—reduces the number
of panels in the workspace. For more information, see “Using the Property inspector” on page 83.
Modeless bitmap and vector editing eliminates the need to constantly keep up with vector and
bitmap modes. Choosing a tool or selecting an object type automatically determines whether you
will be creating and editing bitmaps, vectors, or text.
Bitmap-editing enhancements give you intuitive capabilities to create bitmaps by cutting or
copying and pasting, to move marquee selections among bitmaps, and to fine-tune images with a
new group of image-retouching tools. Also, common selection commands are organized in a new
Selection menu.
Tools panel sections that separate the tools used for creating and editing bitmaps, vectors, and
web objects offer cues for intuitively choosing the proper tool and achieving predictable creative
results. Other tools and tool features are separated into Select, Colors, and View categories. For
more information, see “Using the Tools panel” on page 82.
The Quick Export button displays convenient options for exporting a variety of file formats or
HTML styles, or launching other Macromedia products from the document window,
eliminating setup time and streamlining the workflow. For more information, see “Using the
Quick Export button” on page 359.
Introduction10
Onscreen text
allows you to visually integrate text and graphics without having to use the Text
Editor. Simply choose the Text tool, click on the canvas, and start typing. In the Property
inspector, you can either set text attributes for the Text tool before you begin typing or highlight
existing text and format it. Fireworks MX has a range of new text and paragraph controls to
format text. For more information, see “Using Text” on page 171.
Variable zooming lets you drag the Magnify tool to determine the precise magnification amount.
After you drag to magnify your document, the magnification amount is displayed in the Set
Magnification text box at the bottom of the document.
Windows XP and Macintosh OS X compatibility takes advantage of the latest operating systems.
Fireworks MX is fully carbonized to support all the OS X user-interface improvements.
XHTML exporting allows you to export, update, and roundtrip XHTML in all the same styles
Fireworks offers for HTML. You can roundtrip legacy documents that have been converted to
XHTML in Dreamweaver MX.
The Answers panel, a new feature in Fireworks MX, Dreamweaver MX, and Flash MX, is an
updatable link to web content, conveniently located in the Fireworks workspace. When you are
online, you can click the Update button and download fresh reference information from
Macromedia, or search online databases for documentation such as TechNotes.
The spell-checker searches every text block in your document for misspelled words. When it
finds a word it doesn’t recognize, it offers suggestions for correcting it or allows you to add it to
your dictionary.
Cross-platform font caching makes it easy to share files among work groups and clients without
worrying about cross-platform font issues. Fireworks maintains the appearance of all text in a
document on systems that do not have the fonts in the document.
Power enhancement features
Fireworks MX has a series of powerful new creativity and automation features that emerging web
designers will find easy to use and experienced developers will appreciate. These features make
Fireworks an essential part of the web designer and developer process from concept to integration.
The Data-driven Graphics Wizard allows you to assign variables to text, images, hotspots, and
slices, and then generate multiple documents based on the original, each with unique information
taken from a comma-delimited or XML database file.
The Nav Bar Builder on the Commands menu automates the process of quickly creating
navigation bars using convenient Fireworks MX button symbols. You can select an instance of a
button symbol, and then choose the number of copies to make, choose vertical or horizontal
orientation and spacing, and assign button labels and URLs in an integrated dialog box.
Pop-up Menu Editor enhancements have added creative control to the most popular new feature
in Fireworks 4. Now you can create a horizontal or vertical pop-up menu, and determine border
characteristics, cell spacing, and cell size independently from text size. You can also set placement
of menus relative to the trigger object as well as placement of submenus relative to the trigger
menu item or main pop-up menu. Fireworks automatically generates JavaScript code for you;
exported menus are fully compatible with Dreamweaver MX. For more information, see
“Creating pop-up menus” on page 299.
Getting Started11
Instance-level button symbol editing
lets you create a button symbol and then easily differentiate
individual buttons with unique text, URLs, and targets using the Property inspector. Meanwhile,
you can edit other graphical characteristics at the symbol level, and have the edits update across all
button instances without affecting the instance-level properties. For more information, see
“Creating button symbols” on page 289.
Open workflow features
You need not be confined by someone else’s workflow. Using Fireworks MX, you can integrate
graphic production into your development process with an open, efficient workflow that
recognizes and supports the file formats, applications, and standards you use.
JavaScript commands with SWF interface take JavaScript command creation to a higher level.
Developers can create and execute complex commands to extend and automate Fireworks MX by
combining Fireworks JavaScript extensibility API with interfaces developed in Flash MX using
components and ActionScript. For more information, see Extending Fireworks MX, available as a
PDF on the installation CD and at http://www.macromedia.com/support/fireworks/extend.html.
Macromedia Exchange support means that users—even those who are not interested in creating
JavaScript commands—can download user-created commands from the Exchange. The
commands appear in the Fireworks MX workspace as easy-to-use panels or dialog boxes.
Fireworks MX ships with several user-created commands in the Commands menu, as well as a
user-created Align panel in the Window menu.
Slice table layout controls let you define and optimize slice table layouts by dragging slice guides.
Fireworks automatically resizes attached slices, adding and deleting slices as needed. For more
information, see “Moving slice guides to edit slices” on page 271.
The Reconstitute Tables feature instantly builds a new Fireworks PNG source file when you
point to any HTML file containing tables with image slices. Macromedia Fireworks and
Dreamweaver behaviors such as image rollovers and pop-up menus are imported and attached to
the appropriate slices.
This comes in handy when you are working on existing website projects and the only available
files are the posted HTML pages. You can bring the HTML files into Fireworks and create PNG
source files from them. For more information, see “Creating Fireworks PNG files from HTML
files” on page 76.
Roundtrip Photoshop 6 text allows you to open a Photoshop 6 or 7 file with editable text intact,
so the graphic can be edited and then exported back to the Photoshop format, while maintaining
the correct text appearance and editability. For more information, see “About importing text from
Photoshop” on page 393.
Roundtrip with Microsoft FrontPage is available with a click of the Quick Export button. Launch
and Edit tables work on the original file in Fireworks; the tables are updated in FrontPage without
losing code changes that have been made in FrontPage. For more information, see “Exporting
Fireworks HTML to FrontPage” on page 390.
Macromedia Sitespring integration puts best practices in production and client management in
the Fireworks MX workspace. Simply choose Window > Sitespring to open the Sitespring
window. For more information, consult the Sitespring documentation.
Introduction12
CHAPTER 1
Graphic Design Basics Tutorial
This tutorial will guide you through the basic tasks of designing graphics with Macromedia
Fireworks MX. You’ll get hands-on experience using the industry’s leading web graphics
application and learn basic graphic design concepts along the way.
If you are already familiar with designing graphics in Fireworks, you may want to proceed to
the “Web Design Basics Tutorial” on page 41, where you’ll learn about designing web pages
with Fireworks.
What you’ll learn
By taking this tutorial, in less than an hour you’ll accomplish the tasks required to create an ad for
classic rental cars using Fireworks. You will learn to do the following:
• Copy the Tutorials folder
• View the completed file
• Create and save a new document
• Explore the Fireworks work environment
• Create and edit vector objects
• Import a bitmap and select pixels
• Add and edit Live Effects
• Work with layers and objects
• Create and edit a mask
• Create and edit text
• Export the document
What you should know
Although this tutorial is designed for beginning Fireworks users, it covers many new features in
Fireworks, so experienced Fireworks users can benefit from it too. You don’t need to be a graphic
designer to perform this tutorial, but you should possess basic computer skills and be able to use
common desktop applications. This includes knowing how to browse for files and folders on
your hard disk.
13
Copy the Tutorials folder
Before you begin, you’ll make a copy of the Tutorials folder, so that you can save the results of
your work while allowing you or another user to complete the tutorial at a later time using the
original files.
1 Navigate to the Fireworks application folder on your hard disk.
Note: If you are unable to view your Fireworks application folder, you may have limited access to files on your
system. You can download the files you need for this tutorial from the Fireworks Support Center on the web at
http://www.macromedia.com/support/fireworks/.
2 Drag a copy of the Tutorials folder to your desktop.
View the completed file
View the completed tutorial file to see what your finished project will look like.
1 Launch your web browser.
2 On your hard disk, navigate to the Tutorials folder you copied to your desktop, and browse to
Tutorial1/Complete.
Note: Some versions of Microsoft Windows hide extensions for known file types by default. If you have not
changed this setting, the files in the Complete folder won’t display extensions. When dealing with web
graphics, it’s best to be able to see file extensions. See Windows Help for information about how to turn file
extensions back on.
3 Select the final.jpg file and drag it to the open browser window.
For this tutorial, you will use Fireworks to design and export a copy of this ad for classic rental cars.
Note: The Complete folder also includes the Fireworks document from which this JPEG file was generated. To
view the document, double-click final.png.
Create and save a new document
Now that you’ve viewed the final.jpg file, you’re ready to begin your project.
1 In Fireworks, choose File > New.
The New Document dialog box opens.
Chapter 114
2 Enter 480 for the width and 214 for the height. Ensure that both measurements are in pixels
and that the canvas color is white, and click OK.
A document window opens, with a title bar that reads Untitled-1.png (Windows) or
Untitled-1 (Macintosh).
3 If the document window isn’t maximized, that is, if it doesn’t fill the center of the screen,
maximize it by clicking the maximize button (Windows) or the zoom box (Macintosh) at the
top of the document window. This will give you plenty of room to work.
4 Choose File > Save As.
The Save As (Windows) or Save (Macintosh) dialog box opens.
5 Browse to the Tutorials/Tutorial1 folder on your desktop.
6 Name the file vintage.
7 Choose the Add Filename Extension option if it’s not already selected (Macintosh only).
8 Click Save.
The title bar displays the new filename with a PNG extension. PNG is the native file format
for Fireworks. The PNG file is your source file; it is where you’ll do all of your work in
Fireworks. At the end of this tutorial, you’ll learn how to export your document to another
format for use on the web.
As you complete the tutorial, remember to save your work frequently by choosing File > Save.
Note: While completing the tutorial, you may find it useful to undo a change you’ve made. Fireworks can undo
several of your recent changes, depending on the number of undo steps you have set in Preferences. To undo the
most recent change, choose Edit > Undo.
Graphic Design Basics Tutorial15
Explore the Fireworks work environment
Before you continue, examine the elements that make up the Fireworks work environment:
• In the center of the screen is the document window. In the center of the document window is
the canvas. This is where the Fireworks document and any graphics you create are displayed.
• At the top of the screen is a menu bar. Most Fireworks commands are accessible from the
menu bar.
• On the left side of the screen is the Tools panel. If the Tools panel isn’t visible, choose Window
> Tools. The Tools panel is where you’ll find tools for selecting, creating, and editing a variety
of graphic items and web objects.
• At the bottom of the screen is the Property inspector. If the Property inspector isn’t visible,
choose Window > Properties. The Property inspector displays properties for a selected object
or tool. You can change these properties. If no objects or tools are selected, the Property
inspector displays document properties.
The Property inspector displays either two or four rows of properties. If the Property inspector
is at half height, that is, displaying only two rows, you can click the expander arrow in the
lower right corner to see all properties.
Expander arrow at half height state
Chapter 116
• On the right side of the screen are a variety of panels, such as the Layers panel and Optimize
panel. You can open these and other panels from the Window menu.
• Move your pointer over the various interface elements. If you hold the pointer over an item on
the interface long enough, a tooltip appears. Tooltips identify tools, menus, buttons, and other
interface features throughout Fireworks. Tooltips disappear when you move the pointer away
from the interface elements they identify.
You’ll learn more about each of these elements as you progress through the tutorial.
Create and edit vector objects
With Fireworks, you can create and edit two kinds of graphics: vector objects and bitmap images.
A vector object is a mathematical description of a geometric form. Vector paths are defined by
points. Vector paths do not show a degradation in quality when you zoom in on them or scale
them larger or smaller. The leaf in the illustration below is a collection of vector objects. Notice
how smooth the leaf’s edges appear even when you zoom in.
In contrast, a bitmap image is made up of a grid of colored pixels. Images with complex color
variations, such as photographs, are most often bitmap images.
While many applications offer tools to edit either vector shapes or bitmap images, Fireworks lets
you work with both types of graphics. You will work with vector graphics in this section.
Graphic Design Basics Tutorial17
Create vector objects
Now you’ll create two of the graphical elements for your document. First you’ll create a blue
rectangle that will be positioned at the bottom of the document. Then you will create a rectangle
that will act as a border for the contents of the canvas.
1 Choose the Rectangle tool in the Vector section of the Tools panel.
2 In the Property inspector, click the Fill Color box.
The Fill Color pop-up window opens.
3 Ty p e 333366 in the text box at the top of the window, then press Enter.
The Fill Color box changes to a dark blue color to reflect your color choice.
4 In the document window, position the cross-hair pointer over the canvas, and drag downward
and to the right to create a rectangle. You can draw the rectangle anywhere on the canvas.
You’ll resize and position it later in this procedure.
5 When you release the mouse button, a dark blue rectangle appears, selected, in the area
you defined.
You can tell when an object is selected because it displays blue corner points. Most objects also
have a blue highlight around their outer edges, but rectangles are an exception.
Chapter 118
6 In the lower left corner of the Property inspector, enter 480 in the width box and 15 in the
height box, then press Enter.
The rectangle is resized to fit the specified dimensions.
7 Choose the Pointer tool in the Select section of the Tools panel.
8 Drag the rectangle so that it is positioned at the bottom of the canvas, as shown below. Use the
arrow keys for exact placement.
9 Choose the Rectangle tool again, and draw a second rectangle. Draw it anywhere on the canvas,
and make it any size you want. You’ll change its properties and position in the next section.
Set object properties
Here, you’ll edit the second rectangle you created by changing its size, position, and color in the
Property inspector.
1 With the rectangle still selected, click the Stroke Color box in the Property inspector and enter
CCCCCC as the color value. Press Enter to apply the change.
2 Set the Tip Size to 1 by dragging the pop-up slider or typing in the text box.
3 Click the Fill Color box in the Property inspector and click the Transparent button.
Graphic Design Basics Tutorial19
4 In the Property inspector, enter the following values in the width, height, and coordinate
boxes. Then click outside the Property inspector to apply your changes.
• Width: 480
• Height: 215
• X: 0
• Y: 0
The rectangle becomes a gray border around the edge of the canvas.
If your system uses gray as the color for the window background, it may be difficult for you to
see the rectangle at this point. But don’t worry, it’s still there.
5 Choose the Pointer tool and click anywhere away from the rectangle to deselect it.
The properties change in the Property inspector. Because no objects are selected, you now see
document properties instead of object properties.
Import a bitmap and select pixels
Next you will import a bitmap image and create a floating selection from its pixels.
Import an image
You will modify an image of a classic automobile. First you need to import the image.
1 Choose File > Import and navigate to the Tutorials folder on your desktop. Browse to the
Tutorial1/Assets folder.
2 Select car.jpg and click Open.
Chapter 120
3 Align the insertion pointer with the upper left corner of the canvas and click, as shown in the
following illustration.
The image appears, selected, on the canvas.
4 Click anywhere outside the selected image to deselect it.
Create a pixel selection
Next you’ll select the pixels that make up the car in the image you imported, and copy and paste
the pixels as a new object.
1 Choose the Zoom tool in the View section of the Tools panel.
Zoom tool
2 Click once on the image.
The view is magnified to 150%. Zooming in allows you to better see what you are selecting
and gives you finer control over your selection.
3 Click and hold down the mouse button on the Lasso tool in the Bitmap section of the Tools
panel. Choose the Polygon Lasso tool from the pop-up menu that appears.
The Polygon Lasso tool allows you to draw a selection around pixels using a series of straight
lines. You’ll use the Polygon Lasso tool to select the pixels that make up the car image.
4 In the Property inspector, set the Edge option to Anti-alias.
Graphic Design Basics Tutorial21
5 Click with the Polygon Lasso tool pointer on the top edge of the car, then click repeatedly
around the edge of the car to continue the selection.
6 Complete the selection by moving the pointer over the spot where you started the selection. A
small gray square appears beside the Polygon Lasso pointer to indicate you are about to
complete the selection. Click to complete the selection.
A marquee border appears around the pixels you selected.
7 Choose Edit > Copy.
The selection is copied to the Clipboard.
8 Choose Edit > Paste.
The car image is pasted into the document as a new bitmap object.
9 Choose the Pointer tool and double-click anywhere outside the bitmap to deselect it.
10 Click the Set Magnification pop-up menu at the bottom of the document window and return
the view to 100%.
Chapter 122
Add and edit Live Effects
Next you’ll apply Live Effects to the original bitmap image. You’ll change the image’s hue and
saturation and apply a blur.
1 Click anywhere on the desert image. (Be careful not to click on the car, however.)
2 In the Property inspector, click the Add Effects button (the button with the plus (+) sign).
Delete Effects button
Add Effects button
3 Choose Adjust Color > Hue/Saturation from the Effects pop-up menu.
The Hue/Saturation dialog box opens.
Graphic Design Basics Tutorial 23
4 Choose the Colorize option and click OK.
The image becomes colorized on the canvas, and the effect is added to the Live Effects list in
the Property inspector. Live Effects are editable; you can always add to this list, delete the
effect, or edit the effect.
5 Double-click the Hue/Saturation effect to edit it.
Tip: Alternatively, you can click the info button beside the effect.
The Hue/Saturation dialog box opens again.
6 Change the Hue to 25 and the Saturation to 20, and click OK.
The image’s hue and saturation levels change to display a sepia appearance, as in an
old photograph.
7 Click the Add Effects button again to add another Live Effect.
8 Choose Blur > Blur More from the Effects pop-up menu.
The pixels of the selected bitmap become blurred, and the new effect is added to the Live
Effects list in the Property inspector.
Work with layers and objects
Layers divide a Fireworks document into discrete planes. A document can be made up of many
layers, and each layer can contain many objects. In Fireworks, the Layers panel lists layers and the
objects contained in each layer.
Using the Layers panel, you can name, hide, show, and change the stacking order of layers and
objects, as well as merge bitmaps and apply bitmap masks. You can also add and delete layers
using the Layers panel.
In this part of the tutorial, you’ll use the Layers panel to merge the two bitmap images. Then
you’ll name the objects in your document. You’ll also use the Layers panel to change the stacking
order of objects.
Later in the tutorial you’ll use the Layers panel to apply a mask to the merged image.
Chapter 124
Merge bitmaps
Now that you’ve applied Live Effects to the background image, you will merge it with the
grayscale car image to create a single bitmap.
1 If the Layers panel is minimized or isn’t visible, click its expander arrow or choose
Window > Layers.
Expander arrow
2 Click the thumbnail of the grayscale car image in the Layers panel.
3 With the car image selected, click the Options pop-up menu icon at the upper right of the
Layers panel.
Options pop-up
menu icon
Graphic Design Basics Tutorial 25
4 Choose Merge Down.
In the Layers panel, the two bitmap objects merge into one bitmap.
In the Property inspector there are no longer any effects in the Live Effects list. This is because
merging down combines the pixels of each bitmap and renders them uneditable as separate
images. The Live Effects you apply to an object or bitmap are no longer editable after you
perform a merge down with another bitmap.
Name objects
It’s always a good idea to name your objects so you can easily identify them later. When a
document gets large and contains many objects, it can be difficult to manage if your objects don’t
have unique names.
Here you’ll name the objects in your document using both the Layers panel and the
Property inspector.
1 Double-click the word Bitmap beside the image thumbnail in the Layers panel.
A text box appears.
2 Ty p e ClassicCar in the text box and press Enter.
The new name is applied to the bitmap object.
3 In the document window, select the gray rectangle that borders the document. If it’s too hard
to see on the canvas, select it in the Layers panel.
This time you’ll name an object using the Property inspector.
4 Ty pe Border in the Object Name box of the Property inspector, and press Enter.
The name you enter is also displayed beside the object thumbnail in the Layers panel.
Chapter 126
5 Enter a name for the remaining rectangle object using either the Layers panel or the Property
inspector. Use any name you like, but be sure to choose a name that is meaningful so you can
easily identify and manage objects in the document later.
Change the object stacking order
The merged bitmap image overlaps the border object and the blue rectangle. The border and blue
rectangle need to rest on top, so you’ll use the Layers panel to change the stacking order of objects
in the document.
1 Click the thumbnail of the blue rectangle in the Layers panel to select it.
2 Drag it to the top of Layer 1, above the Classic Car thumbnail.
Note: The topmost layer in the Layers panel is always the Web Layer. You’ll learn more about the Web Layer in
“Web Design Basics Tutorial” on page 41.
As you drag, the pointer changes to reflect that you are dragging an object (Windows only). A
dark line in the Layers panel indicates where the object will be dropped if you release the
mouse button at that time.
3 Release the mouse button.
The blue rectangle is dropped just above the bitmap object in the Layers panel. The stacking
order of objects also changes on the canvas. The blue rectangle now overlaps the bitmap object
and the border object.
4 You want the border object to be the topmost object, so select its thumbnail and drag it to the
top of the Layers panel, above the blue rectangle.
Graphic Design Basics Tutorial 27
Create and edit a mask
Now that you’ve made various modifications to the classic car image, you’ll perform one last
procedure to give it the appearance of becoming gradually transparent.
In Fireworks you can apply two kinds of masks: vector masks and bitmap masks. For this tutorial,
you’ll apply a simple bitmap mask to the car image. You’ll then modify it by giving it a gradient fill.
The pixels in the mask will either display or hide the car image, depending on their grayscale value.
Apply a mask
First you will apply an empty, white bitmap mask to the car image. A white mask shows a selected
object or image, whereas black pixels in a mask hide a selected object or image.
You’ll also paint on the mask to make the car image appear to be fading into the background.
1 With the Pointer tool, select the bitmap image.
2 Click the Add Mask button at the bottom of the Layers panel.
An empty, transparent mask is added to the selected image. You can see the mask has been
added by looking at the mask thumbnail in the Layers panel. The yellow highlight around the
mask thumbnail indicates it is selected.
Mask thumbnail
Mask object
Edit the mask
Now you will give the bitmap image a transparent appearance by adding a gradient fill to the mask.
1 With the mask thumbnail selected in the Layers panel, click and hold down the mouse button
on the Paint Bucket tool in the Bitmap section of the Tools panel. Choose the Gradient tool
from the pop-up menu that appears.
2 Click the Fill Color box in the Property inspector.
The Edit Gradient pop-up window opens.
Chapter 128
3 Choose White, Black from the bottom of the Preset pop-up menu.
The color ramp and swatches change to reflect the new setting. The color swatches located just
beneath the color ramp allow you to modify the colors in the gradient.
Color ramp
Color swatches
4 Drag the left (white) color swatch about 1/4 of the way to the right to adjust the gradient.
5 Click outside the Edit Gradient pop-up window to close it.
6 On the canvas, drag the Gradient pointer across the bitmap image, as shown in the following
illustration. Visual feedback appears onscreen as you drag, allowing you to define the angle and
distance in which the gradient will be applied.
7 Release the mouse button.
The mask is modified with the gradient fill you created. The mask affects the car image by
giving it a gradiated transparent appearance.The mask thumbnail in the Layers panel displays
the gradient fill you applied.
Graphic Design Basics Tutorial 29
Loading...
+ 417 hidden pages
You need points to download manuals.
1 point = 1 manual.
You can buy points or you can get point for every manual you upload.