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:
|
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:
|
|
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:
|
|
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:
Mac:
|
|
Graphics:
Adobe Photoshop 6.0
Web Page Design: Macromedia Dreamweaver 4.0 |
|
|
Applications | Games
| Hardware | Children
| Plug-Ins | Tutorials
|
Back to PC Cafe Home |
| Educational | Books | Utilities | Web Tools | Legal | Articles | |
|
This
site is (c) Copyright 2001, by PC Cafe Online. All World Wide Rights Reserved
|
|