 |
|
|
Macromedia
Fireworks 4
"A
Powerful Web Graphic Creation Program!"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
Macromedia's
Fireworks 4, the newest version of their vector
Web application, is a powerful tool for creating Web graphics. It excels
in letting you: create image maps; slice graphics and create an HTML table;
mix file formats and compression schemes in one sliced graphic; create
JavaScript rollovers and their associated code; and optimize images in
a WYSIWYG environment and compare as many as four different optimization
schemes at one time. In 1998, Macromedia built Fireworks from the ground
up specifically to address the needs of the Web graphic designer. Fireworks
1 gave users the choice of working with vectors, as opposed to bitmaps.
Working with vector graphics solved many problems of creating graphics
for the Web, which included the desire to have compact file sizes, while
giving designers the ability to create and modify common Web effects,
such as bevels, glows, drop shadows, and textures, with minimal fuss or
experience. Using vector drawing tools also enabled users to export, and
adapt, and reuse the graphics for multiple purposes, including both Web
and print output. Fireworks also could be used to import and manipulate
bitmaps. Macromedia also included intuitive yet powerful optimization
tools that converted the composite vector/bitmap graphics to standard
bitmaps (including GIF and JPG). Later versions enhanced the ease and
power with which users could add interactivity, and improved both Fireworks'
vector and bitmap handling capabilities. Fireworks 4 offers further improvements
such as better Photoshop integration, an improved interface, and a host
of other features that will speed up your workflow and get your creative
juices flowing.
Fireworks
4 is available for Macintosh and Windows. Price: $299; Upgrade $149. Macromedia
has an excellent site to visit, with all sorts of information, freebies,
tips, examples, and tutorials: http://www.macromedia.com
|
| |
|
|
|
|
|
|
Advanced Beginners, intermediate, and advanced
computer users. You should have a working knowledge of your computer
and Web design before you tackle the program. Yet it is easy enough to use
for novice Web designers who need to create professional-looking Web sites
with a minimum of advanced knowledge or experience. Plus, it is powerful
enough for professional designers, multimedia developers, and HTML coders. |
| |
|
|
|
|
|
|
New
and enhanced features includes the following:
- Updated
User Interface--Familiar
user interface enables designers to work smoothly with Macromedia Web
design applications such as Dreamweaver, Fireworks and Flash.
- Dreamweaver
Compatibility--Fireworks
and Dreamweaver work together better than ever.
- Drag-and-Drop
Behaviors--Create complex rollovers quickly
and easily by dragging and dropping from one slice to another.
- Pop-Up
Menus--Develop sophisticated navigation effects
with multilevel pop-up menus in a step-by-step visual environment.
- Masking,
Layers Panel, and Frames Panel Enhancements--The
program has advanced masking capabilities, and an expanded thumbnail
view of layer objects.
- Reorganized
and Expanded Export and Import Options--Import
and export Photoshop files with improved fidelity, smoothing workflow
among teams.
- Selective
JPEG Compression--Selectively
compress portions of an image.
- Pen
Tool Improvements--The
Pen tool has been enhanced for greater control when drawing and editing
vector graphics.
- Rectangles
with Rounded Corners--Work
with the new Rounded Rectangle tool to set a corner radius for rectangles.
- Live
Animation Controls in the Workspace--Accessible
controls within the workspace allow the user to reposition, redirect
and reanimate simple animations across multiple frames.
- Batch
Processing--Quickly
set up and execute batch processes, including commands, with the step-by-step
Batch Processing Wizard.
- Reorganized
HTML Setup Dialog Box--HTML
options are easy to find and choose with the new HTML Setup dialog box.
- Text
Improvements--Fireworks
keeps track of text color and fill color independently.
- User
Experience Enhancements--Fireworks has improved
the way many features work to create a better user experience.
|
| |
|
|
|
|
|
Installation,
User Guide, and Help |
|
|
|
|
|
|
Installation
is easy. Macromedia always provides excellent help features for its products.
There is an extensive 423 page User Guide, with a tutorial in Chapter 1
for creating a Web page. Users that are not familiar with the program can
use this as a starting point. The program also has lessons that introduce
you to the main features of Fireworks, letting you practice on examples.
Click on the image to the left to see the finished project from the tutorial
in Chapter 1. |
|
|
|
Updated
User Interface |
|
|
|
|
|
|
The
Fireworks 4 interface conforms to the common Macromedia User Interface
so that it now resembles the look and feel of Flash and Dreamweaver. So
whichever Macromedia Web design product you are using, you'll see the
same icons, tools, toolbars, and terms wherever possible. This makes it
easier to learn and master all the products in the Macromedia software
line and reduces the learning curve. The program has customizable keyboard
shortcuts, and you can install keyboard shortcuts that you use in other
Macromedia or non-Macromedia graphics applications, or set up your own
favorites. There is a Mini-Launcher along the bottom of the document window
that gives you quick access to common Fireworks panels, such as the Stroke,
Mixer, Optimize, and Layers panel sets. See top image to the left for
a view of the interface and see bottom image for a view of the Keyboard
Shortcut dialog box.
|
|
|
|
Dreamweaver
Compatibility |
|
|
|
|
|
|
|
|
With
Fireworks 4, Macromedia has incorporated options that allow for better compatibility
between Fireworks and Dreamweaver. Round-trip table editing lets you edit
and update HTML and JavaScript code and graphics from Dreamweaver while
maintaining edits to the table. It updates HTML table images placed in Dreamweaver
while preserving changes made to the HTML itself outside of Fireworks. If
you change behaviors, enter new text, change the link, or make other edits,
you can update graphic changes without overwriting the HTML in Dreamweaver.
Plus, the enhanced Launch and Edit window brings you into Fireworks from
a host application such as Dreamweaver or Flash. You can make your edits
to documents you created in Fireworks, then click Done and go back to work
in the host application. When launching and editing Fireworks images placed
in Dreamweaver, the Dreamweaver Property Inspector will let you know whether
you are editing an image or a table. |
|
|
|
The
Pen Tool |
|
|
|
|
|
|
|
|
If
you have ever used the Pen tool in any graphics program, you know that it
can sometimes be hard to tell whether you are editing a point, removing
it, adding a new one, or simply selecting the whole path. To help you use
the tool, Fireworks 4 now continuously changes it cursor icon while you
are working, so you know exactly what you are doing, whether you are plotting
a new point or modifying the cure handles on an existing one. You can also
hold down the Control (Windows) or Command (Macintosh) key to temporarily
switch from the Pen tool to the Subselection tool for greater pointer control. |
|
| |
Drag-and-Drop
Behaviors |
|
|
|
|
|
|
With
Fireworks 4, creating button or disjoint rollovers is drag-and-drop simple.
It's easy to create a mouse-over action that swaps an image under a slice
in another area of the screen. You just select the button in the workspace,
drag the target icon from the middle of the button's slice onto the slice
where you want the swap image to occur, and then release. A dialog box will
appear where you choose a source layer from the pop-up menu. And when you
select the button, a visual cue appears showing the relationship between
the slices. Once the rollover is applied, you can move slices without losing
the rollover behavior. The top image to the left shows an example of using
drag-and-drop behaviors to create a disjointed rollover. It's from one of
the lessons that are included in Fireworks 4. The bottom image shows an
example of a rollover navigation bar. It also is an example that is included
with Fireworks. The white rectangle shows the rollover effect. |
|
| |
Pop-up
Menus |
|
|
|
|
|
|
One
of the best new features in Fireworks 4 is its ability to quickly create
hierarchical menus that appear when you roll over a button. You can attach
a pop-up menu to any slice or hotspot object in Fireworks simply by selecting
it and choosing Insert | Pop-Up Menu from the menu. Fireworks then opens
a simple two-step dialog box that walks you through the process of building
the menu. You enter menu text, create submenus, specify the URL address,
define the menu's appearance, specify a background image, a font, and the
Up and Over states for the menu entries. Also, this dialog box provides
a live preview as you work, so there is no need to go back and forth to
see your design. You can create the menu using stylized text, or get creative
by using graphics for your pop-up menu items. See top image to the left
for view of a Web page sample from Fireworks that displays pop-up menus
and submenus. See bottom image to the left for a view of the dialog boxes
for the two stages in creating a pop-up menu. |
|
| |
Masking,
Layers, and Frames Panel Enhancements |
|
|
|
|
|
|
The
new Layers panel in Fireworks 4 offers an expanded thumbnail view of each
layer's objects, as well as advanced masking capabilities, such as creating
a vector or bitmap mask right in the Layers panel using thumbnails and the
Add Mask button. Plus, you can quickly and easily select, name, move, and
delete individual objects right from the Layers panel. You can hide, show,
lock, or unlock multiple layers by dragging down the hide/show and lock/unlock
columns in the Layers panel. And, opacity and blending mode settings are
in an intuitive location on the Layers panel. You can also name individual
frames in the Frames panel to better manage frames in rollovers and animations
and to import layers as frames. See the top image to the left for an example
of a mask. See the bottom image to the left for a view of the Layers panel.
The Layers panel is a significant new features that makes working with masks
easier. |
|
| |
Reorganized
and Expanded Export and Import Options |
|
|
|
|
|
|
The
Fireworks 4 Export dialog box is easier to use. The layout is more logical,
and inapplicable options for the current export format are dimmed or hidden.
The Export Special options are now located on the Export dialog box. The
export and import capabilities for a variety of file formats has been
improved:
- Photoshop
PSD Export--lets
you choose whether to maintain editability over appearance or maintain
Fireworks appearance quality, or you can flatten layers into a fully
rendered image. You can also decide whether to maintain editability
of effects and text.
- Photoshop
PSD Import--has
been enhanced by the new Fireworks layers and frames functionality.
Thus, when you import layers as frames, Photoshop layer names become
Fireworks frame names. And each Photoshop layer translates to an object
on a layer in Fireworks. Photoshop layer masks import intact into Fireworks
as image object masks.
- FreeHand
9 Import--allows
separate control over anti-aliasing for text and anti-aliasing for objects.
This is also true for other vector import formats such as Illustrator
and CorelDraw.
- Director
Export--lets
you export layers or slices, as well as HTML, into Director if you have
the Import Xtra for Director installed. You can download Xtra, from
the Macromedia Web site: http://www.macromedia.com/support/director/xtras.html
- EPS
Import--now
available in Fireworks. The file is rendered as a bitmap image.
- WBMP
Import and Export--is
now available. The WBMP file format is optimized for wireless computing
devices.
|
|
| |
Selective
JPEG Compression |
|
|
|
|
|
|
If
you have spent any time in Web design, you have been faced with the problem
of compressing an image in which one item has to be clear, while the remainder
of the image could be a lower priority. If you make the one item clear by
compressing at high quality, the file will be too large. Yet if you make
the file a reasonable size, the main object's quality will be low. Fireworks
4 can solve this problem. By using the marquee tools and the Set Selective
JPEG feature in Fireworks 4, you can identify important parts of a JPEG
image that you want to display as a high-quality image. Then you can make
the overall image file size smaller by compressing the less important parts
of the image. The top image to the left shows the Selective JPEG Settings,
and the bottom image to the left shows a graphic with the background selected
so that I could set the quality to 35 (low quality), while the pen, which
I wanted to be sharper, was saved at 96 (high quality). You can also see
the Overlay Color that highlights the selected area. |
|
| |
Rectangles
with Rounded Corners |
|
|
|
|
|
|
The
new Rounded Rectangle tool makes it easy to create buttons with customized
rounded corners. You can draw rectangles with rounded corners by using the
Rounded Rectangle tool and specifying a corner radius from 0% to 100% before
you draw, or by using the Object panel to adjust the corner roundness of
selected rectangles. |
|
| |
Live
Animation Controls in the Workspace |
|
|
|
|
|
|
Fireworks
has made two improvements to its animation controls, First, it now has an
animation control interface similar to that of Flash and Director. This
interface provides a series of VCR-like controls right in the authoring
environment that let you preview the animation and/or move through it one
frame at a time. Another powerful tool is the new Animation Line. When you
select an animated symbol, each point on the line indicates the relative
position of each symbol on each frame of the animation. By adjusting this
Animation Line, you can alter the direction and extent of an animation quickly
and intuitively because you can adjust the animation as a whole, rather
than skipping back and forth between first and last frames. When you select
an animation symbol, the Object panel displays animation properties such
as number of frames, scaling, opacity, and rotation. You can edit the selected
animation by changing values in the Object panel. Also, animated GIFs now
import as animation symbols. The top image to the left show an object being
scaled across seven frames and the opacity going from 100 percent to 25
percent. Onion skinning has been turned on so you can see all the frames.
The bottom image shows the animation controls. |
|
| |
Batch
Processing |
|
|
|
|
|
|
Fireworks
has a redesigned batch processing user interface that logically presents
the processing options. You now can determine the location and name of the
output folder as you set up your batch process tasks. Options are in plain
view on panels instead of hidden in pop-up menus. First, you select the
files to batch process in the Open Files to Batch dialog box. Then you enter
information on the panels, which are organized to lead you through the setup
process. The first panel lets you choose actions to perform (Export, Scale,
Find and Replace, Rename or Commands) in the batch process and the order
in which to perform them. The second panel lets you select how processed
files are saved and backed up. The top image to the left shows the first
panel, where you choose the action to perform, and the bottom image to the
left shows the second panel where you select the naming scheme and destination
folder. |
|
| |
Reorganized
HTML Setup Dialog Box |
|
|
|
|
|
|
The
new HTML Setup dialog box makes it easier to find and choose HTML options.
The options are organized in tabbed panels sets. You set such options such
as global preferences; file name conventions, associations, and extensions;
how HTML tables are exported; and options for the current document, such
as manual or automatic slice naming. The dialog box also lets you precisely
control many variables of HTML, JavaScript, and image output. You can customize
the setup and export variables so that the Fireworks output fits within
specific work methods, style guidelines, and server application requirements.
You can specify HTML style (generic, Dreamweaver, GoLive, FrontPage, or
custom) and extensions (.htm, .html, .HTML, .asp, .jsp, .php, .shtml, or
custom). HTML comments can be added, and you can force lowercase file names
and set a spacer style (none, 1-pixel transparent, or from image). You can
set empty cell color and contents. Fireworks 4 also simplifies the task
of setting up a slice naming convention. You can choose each part of your
naming convention from a series of pop-up menus on the Document Specific
tab of the HTML Setup dialog box. See image to the left for a view of the
HTML Setup dialog box. |
|
| |
Text
Improvements |
|
|
|
|
|
|
Fireworks
4 keeps track of text color and fill color independently. If you select
a text color, Fireworks continues using the same color for the next text
block you create. Also, if you choose another drawing tool and change the
stroke or fill, and then return to the Text tool, the text color you last
used is restored to the Text tool. You can now reposition a text block in
the workspace while the Text Editor is open. |
|
| |
User
Experience Enhancements |
|
|
|
|
| |
Some
user experience enhancements are:
- When
you create a button, it resides on a regular layer, like other vector
objects.
- If
slices accidentally overlap, the topmost slice in the stacking order
is active in the overlapping are. Fireworks slices files upon export
base don the perimeter of the topmost slice; it does not export extraneous
files from the overlapping area.
- The
pointer displays the size and shape of the brush or eraser as you draw
when you choose the Brush-Size Painting Cursor preference.
- You
can easily switch between original and previews using convenient menus
in 2-up and 4-up views.
- You
can view transformation information in the Info panel as you transform
objects.
- You
can hide the striped border that appears when you are in bitmap mode
by deselecting the Show Striped Border preference.
- When
you drag the pointer past the document windows, documents that continue
beyond the window will scroll in the direction of the pointer position.
Also, you can scroll past the document canvas so you can zoom in and
work along the edges of your artwork.
- Marquee
selecting is smoother and more precise.
- Fill
handles appear by default, so you can quickly edit the pattern or gradient
fill of a vector object. Also, a new Edit button on the Fill panel makes
it easier to edit gradients.
- When
you drag an endpoint of a path near the endpoint of a path with similar
stroke characteristics, the two paths snap together.
|
|
|
|
|
|
|
|
If
you intend to create rollovers or pop-up navigation menus for the Web, I
would suggest that you run out and purchase Fireworks 4. You will be amazed
at how easy it is to use. This version is a significant upgrade and worth
the money. The program is not an image editor like Photoshop, even though
you can work with bitmaps in the program. And it doesn't even attempt to
compete with these programs. What it was designed to do and probably does
better than other products on the market, is to allow you to easily and
quickly create Web graphics. It's optimizing options let you produce the
best quality, smallest-file-size, fastest-loading web graphics. It beats
Photoshop in producing high quality images with small file sizes. Fireworks
4 is a powerful program that allows novices or professional Web designers
to produce sophisticated Web images and sites, and is at the top of our
list of must-have programs. |
| |
|
|
|
|
|
|
PC:
- Intel
Pentium processor (Pentium II recommended)
- Windows
95/98 or NT version 4.0, 2000, XP or later
- 64
MB of available RAM
- 800
x 600, 256-color display (1024 x 768, millions of colors recommended)
- 80
MB of available hard disk
- Adobe
Type manager Version 4 or later with Type 1 fonts
Mac:
- Power
Macintosh Processor (G3 or higher recommended)
- MacOS
8.6, 9.X or OSX
- 64
MB of available RAM
- 800
x 600, 256-color display (1024 x768, millions of colors recommended)
- 80
MB of available hard disk
- Adobe
Type Manager Version 4 or later with Type 1 fonts
|
| |
|
|
|
|
|
Graphics:
Adobe Photoshop 6.0
Web Page Design: Macromedia Dreamweaver
4.0
|
|
|
|
|
|
|
|
|
|
|
|
This
site is (c) Copyright 2001, by PC Cafe Online. All World Wide Rights Reserved
|
|
