In the past, creating something as simple as an animation for the web would require multiple applications, and likely several plug-ins. You’d need a program to create the individual frames of the animation and several plug-ins to add text effects, like drop shadows. Once the frames were created you would export them into an animation program to create the animated GIF file. Finally, you would load the animation into an optimization tool to shrink it down. If you made a mistake somewhere along the way, or if you wanted to make a change to one of the frames, you would have to go through the entire process again.
Now, fast forward to the present. You create, optimize and animate the graphics in one application. If you need to edit a frame of an animation you don’t need to back-track. You no longer have to switch between multiple tools to create graphics for the web, because you have a single program installed that will do everything that you need to create stunning web graphics. Fiction? No. Reality. Macromedia Fireworks 2.
The original version of Fireworks from Macromedia was without a question the ultimate web graphic design solution. No other graphics program (including PhotoShop) could do everything that Fireworks could, without the addition of five or ten plug-ins and several third-party programs. Version 2 of Fireworks continues the long-standing tradition of this all-in-one web graphics design package with the addition of a wealth of new features and usability improvements.
New Features include:
- Auto Kerning to improve the appearance of small text.
- File format support for PhotoShop 5, Illustrator 8, among others
- Scriptlets let you create drag and drop JavaScripts to combine batch find and replace with batch export features.
- Improved batch processing lets you batch process images for an entire site.
- Hotspot rollovers provide for irregular shaped areas that trigger rollovers.
- Better integration with Dreamweaver 2
The new version of Fireworks 2 is also $100 cheaper than the original at $199. You can upgrade to the new version electronically for a mere $99.
/# pagebreak ‘The Design Environment’#/
Design Environment
Those using Paint Shop Pro or PhotoShop will feel right at home in the Fireworks 2 interface (left). There’s a standard toolbar, and several floating panels with palettes and settings for various effects.
My favourite feature in the design environment is Live Effects ™. I was able to create effects like bevels, glows and drop shadows, and later go back and edit them. As I made the changes in the panels I was able to watch the results in real time. Live effects basically allows you to make changes to any special effect, at any time, without having to start over.
Fireworks 2 provides support for both vector and bitmap graphics. It actually blurs the lines between the two types. A path of a Fireworks object is an editable vector path. Yet, it may also have a texture fill, or an effect like bevel applied to it. If you magnify any object in Fireworks you will see individual pixels, yet the pixels redraw in response to vector editing. Even effects redraw after an object is edited, something that was previously only possible in bitmap image applications.
The program provides full support for PhotoShop plug-ins and formats. However, Fireworks 2 is not a tool that is meant to be used for production of non-web graphics.
Creating GIF Animations
Fireworks 2 provides everything that you need to create animated GIF files. Several Fireworks 2 panels are designed specifically with creating animations in mind. The VCR panel allows you to view the animation frame by frame or preview it. “Instances” is a nifty feature that allows you to reproduce something on multiple frames. If it is then edited on one frame, all instances of it are updated automatically.
Onion skinning, when turned on, shows objects on frames before or after the current frame, but dimmer, so that it’s easy to distinguish them from the object’s current frame.
It’s features like these that make Fireworks 2 THE tool for designing web graphics. Fireworks combines the best of standalone graphic, animation, and optimization programs all into one framework.
Slicing
Slicing images in Fireworks is a straightforward process. Using the slice tool, I was able to draw rectangular slice objects on an image. Fireworks automatically creates the smallest number of slices possible by intelligently combining parts of an image that do not contain slice objects. The result is less HTML code, as well as slightly faster loading pages. Exporting the final output was a simple task, which required me to specify a destination folder. Fireworks 2 automatically named the sliced images according to what I had defined in the Properties dialog.
The down side on the slicing is if you actually export the HTML it comes out as CSS, and not regular HTML. The previous version actually made basic HTML templates, instead of CSS.
/# pagebreak ‘Optimizing Graphics, and creating JavaScript rollovers’#/
Image optimization takes place in the export dialog box. Optionally, you can use an export wizard to aid you in the optimization of graphics. As a test, I took the WR logo that you see in the upper-left hand corner of this page, and I ran it through the wizard. After answering a few short questions, including my target size, a dialog popped up with the wizard’s advice. After reading it, and clicking “OK,” the Export Preview window popped up.
The graphic was optimized to my target size. I fiddled with the settings a little bit more, eventually getting the file down to 2.03KB, from the original 2.18KB, without altering the image quality at all. The change was very small, but the image had previously been optimized using Ulead SmartSaver. I wasn’t expecting anything drastic.
Take a look at the screen shot above to see what the export preview window looks like.
JavaScript Rollovers
JavaScript rollovers allow for images to change their appearance when the mouse is moved over them, or when they are clicked. This is accomplished by a piece of JavaScript code that swaps the image when the visitor’s mouse is hovered over it. Creating JavaScript rollovers in Fireworks 2 is extremely simple. Once the different images to represent the different states of an image are drawn, hotspots are selected, and the final results exported. Fireworks 2 automatically generates the JavaScript necessary for the rollovers to function properly. Fireworks 2 even allows for the creation of irregularly shaped rollovers, something which used to be very difficult in the past.
However, if you haven’t read all the documentation inside out for Fireworks, it can be a little bit difficult to learn how to use the JavaScript Rollover feature.
Image Maps
An image map allows for the creation of images with hotspots which, when clicked, will take a visitor to a particular URL. A single image can therefore be linked to multiple pages. I had no problem creating a simple image map in Fireworks. Using one of the hotspot tools, I selected an area of an image and defined it as being a hotspot. In the Image Map Options panel, I specified a destination URL for each of the hotspots that I created. Next, I selected Export from the File menu, selected a destination directory, and the image and the HTML file containing the code for the image map were placed there.
/# pagebreak ‘Batch Processing, Dreamweaver 2 Integration and more’#/
Batch Processing
Batch processing is designed to automatically process a group of graphics. For example, Fireworks 2 makes it possible to convert formats for a selection of graphics or change the settings on a group of files (for example, change all GIF files into interlaced GIFs). You can even find and replace text, colors, URLs and fonts in a batch of graphics if they are in Fireworks PNG, Illustrator, Freehand or CorelDRAW format.
Fireworks allows for the creation of “Scriptlets,” which will easily recreate a batch process in the future. These cross-platform scriptlets can be shared among computers, and other individuals in a company. This makes it easy to standardize all of the graphics.
Dreamweaver 2 Integration
Fireworks 2 is great as a stand-alone product, but it becomes even better if you also have Dreamweaver 2 installed. I was able to export JavaScript rollovers created in Fireworks 2 directly into Dreamweaver, where I could make further edits. I was also able to export graphics made in Fireworks as objects, and then use them in Dreamweaver 2. If you have both programs installed, it is very easy to launch Fireworks 2 from within Dreamweaver to quickly make changes to a graphic.
System Requirements
Intel Pentium processor 120 (Pentium II recommended)
Windows 95, 98 or NT (with Service Pack 3) or later
32 MB of RAM on Windows 95/98, 40+ MB recommended for Windows NT
640 x 480, 256-color display (1024 x 768, millions of colors recommended)
60 MB of free hard disk space (100 MB recommended)
Adobe Type Manager Version 4 or later with Type 1 fonts
Power Macintosh Processor, (G3 recommended)
Mac OS 7.5.5 or later
24 MB of available RAM with virtual memory on minimum; 32+ MB of available RAM with virtual memory off recommended
640 x 480, 256-color display (1024 x 768, millions of colors recommended)
60 MB of free hard disk space (100 MB recommended)
Adobe Type 4 manager or later required with Type 1 fonts
I would recommend having at least, 64 MB of RAM for fast editing, especially if you have more than one program open while running Fireworks. Otherwise you’ll be lucky to actually get any more than one or two megs of RAM that the program can actually use for rendering.
Conclusion
Programs like Ulead SmartSaver and Ignite have their days numbered. Web graphics designers asked for a robust graphics design tool with capabilities for creating rollovers, image maps, optimizing and slicing graphics, and Macromedia delivered. The competitive $199 price makes this program cheaper than buying separate tools to do all the tasks that Fireworks 2 performs. As with all Macromedia products, a fully-functional, 30-day trial version is available for download from their site.
Rating: 5/5
Macromedia.com – Take a tour of Fireworks 2, or go straight to the trial download on the Macromedia site.
In the past, creating something as simple as an animation for the web would require multiple applications, and likely several plug-ins. You’d need a program to create the individual frames of the animation and several plug-ins to add text effects, like drop shadows. Once the frames were created you would export them into an animation program to create the animated GIF file. Finally, you would load the animation into an optimization tool to shrink it down. If you made a mistake somewhere along the way, or if you wanted to make a change to one of the frames, you would have to go through the entire process again.
Now, fast forward to the present. You create, optimize and animate the graphics in one application. If you need to edit a frame of an animation you don’t need to back-track. You no longer have to switch between multiple tools to create graphics for the web, because you have a single program installed that will do everything that you need to create stunning web graphics. Fiction? No. Reality. Macromedia Fireworks 2.
The original version of Fireworks from Macromedia was without a question the ultimate web graphic design solution. No other graphics program (including PhotoShop) could do everything that Fireworks could, without the addition of five or ten plug-ins and several third-party programs. Version 2 of Fireworks continues the long-standing tradition of this all-in-one web graphics design package with the addition of a wealth of new features and usability improvements.
New Features include:
- Auto Kerning to improve the appearance of small text.
- File format support for PhotoShop 5, Illustrator 8, among others
- Scriptlets let you create drag and drop JavaScripts to combine batch find and replace with batch export features.
- Improved batch processing lets you batch process images for an entire site.
- Hotspot rollovers provide for irregular shaped areas that trigger rollovers.
- Better integration with Dreamweaver 2
The new version of Fireworks 2 is also $100 cheaper than the original at $199. You can upgrade to the new version electronically for a mere $99.
/# pagebreak ‘The Design Environment’#/
Design Environment
Those using Paint Shop Pro or PhotoShop will feel right at home in the Fireworks 2 interface (left). There’s a standard toolbar, and several floating panels with palettes and settings for various effects.
My favourite feature in the design environment is Live Effects ™. I was able to create effects like bevels, glows and drop shadows, and later go back and edit them. As I made the changes in the panels I was able to watch the results in real time. Live effects basically allows you to make changes to any special effect, at any time, without having to start over.
Fireworks 2 provides support for both vector and bitmap graphics. It actually blurs the lines between the two types. A path of a Fireworks object is an editable vector path. Yet, it may also have a texture fill, or an effect like bevel applied to it. If you magnify any object in Fireworks you will see individual pixels, yet the pixels redraw in response to vector editing. Even effects redraw after an object is edited, something that was previously only possible in bitmap image applications.
The program provides full support for PhotoShop plug-ins and formats. However, Fireworks 2 is not a tool that is meant to be used for production of non-web graphics.
Creating GIF Animations
Fireworks 2 provides everything that you need to create animated GIF files. Several Fireworks 2 panels are designed specifically with creating animations in mind. The VCR panel allows you to view the animation frame by frame or preview it. “Instances” is a nifty feature that allows you to reproduce something on multiple frames. If it is then edited on one frame, all instances of it are updated automatically.
Onion skinning, when turned on, shows objects on frames before or after the current frame, but dimmer, so that it’s easy to distinguish them from the object’s current frame.
It’s features like these that make Fireworks 2 THE tool for designing web graphics. Fireworks combines the best of standalone graphic, animation, and optimization programs all into one framework.
Slicing
Slicing images in Fireworks is a straightforward process. Using the slice tool, I was able to draw rectangular slice objects on an image. Fireworks automatically creates the smallest number of slices possible by intelligently combining parts of an image that do not contain slice objects. The result is less HTML code, as well as slightly faster loading pages. Exporting the final output was a simple task, which required me to specify a destination folder. Fireworks 2 automatically named the sliced images according to what I had defined in the Properties dialog.
The down side on the slicing is if you actually export the HTML it comes out as CSS, and not regular HTML. The previous version actually made basic HTML templates, instead of CSS.
/# pagebreak ‘Optimizing Graphics, and creating JavaScript rollovers’#/
Image optimization takes place in the export dialog box. Optionally, you can use an export wizard to aid you in the optimization of graphics. As a test, I took the WR logo that you see in the upper-left hand corner of this page, and I ran it through the wizard. After answering a few short questions, including my target size, a dialog popped up with the wizard’s advice. After reading it, and clicking “OK,” the Export Preview window popped up.
The graphic was optimized to my target size. I fiddled with the settings a little bit more, eventually getting the file down to 2.03KB, from the original 2.18KB, without altering the image quality at all. The change was very small, but the image had previously been optimized using Ulead SmartSaver. I wasn’t expecting anything drastic.
Take a look at the screen shot above to see what the export preview window looks like.
JavaScript Rollovers
JavaScript rollovers allow for images to change their appearance when the mouse is moved over them, or when they are clicked. This is accomplished by a piece of JavaScript code that swaps the image when the visitor’s mouse is hovered over it. Creating JavaScript rollovers in Fireworks 2 is extremely simple. Once the different images to represent the different states of an image are drawn, hotspots are selected, and the final results exported. Fireworks 2 automatically generates the JavaScript necessary for the rollovers to function properly. Fireworks 2 even allows for the creation of irregularly shaped rollovers, something which used to be very difficult in the past.
However, if you haven’t read all the documentation inside out for Fireworks, it can be a little bit difficult to learn how to use the JavaScript Rollover feature.
Image Maps
An image map allows for the creation of images with hotspots which, when clicked, will take a visitor to a particular URL. A single image can therefore be linked to multiple pages. I had no problem creating a simple image map in Fireworks. Using one of the hotspot tools, I selected an area of an image and defined it as being a hotspot. In the Image Map Options panel, I specified a destination URL for each of the hotspots that I created. Next, I selected Export from the File menu, selected a destination directory, and the image and the HTML file containing the code for the image map were placed there.
/# pagebreak ‘Batch Processing, Dreamweaver 2 Integration and more’#/
Batch Processing
Batch processing is designed to automatically process a group of graphics. For example, Fireworks 2 makes it possible to convert formats for a selection of graphics or change the settings on a group of files (for example, change all GIF files into interlaced GIFs). You can even find and replace text, colors, URLs and fonts in a batch of graphics if they are in Fireworks PNG, Illustrator, Freehand or CorelDRAW format.
Fireworks allows for the creation of “Scriptlets,” which will easily recreate a batch process in the future. These cross-platform scriptlets can be shared among computers, and other individuals in a company. This makes it easy to standardize all of the graphics.
Dreamweaver 2 Integration
Fireworks 2 is great as a stand-alone product, but it becomes even better if you also have Dreamweaver 2 installed. I was able to export JavaScript rollovers created in Fireworks 2 directly into Dreamweaver, where I could make further edits. I was also able to export graphics made in Fireworks as objects, and then use them in Dreamweaver 2. If you have both programs installed, it is very easy to launch Fireworks 2 from within Dreamweaver to quickly make changes to a graphic.
System Requirements
Intel Pentium processor 120 (Pentium II recommended)
Windows 95, 98 or NT (with Service Pack 3) or later
32 MB of RAM on Windows 95/98, 40+ MB recommended for Windows NT
640 x 480, 256-color display (1024 x 768, millions of colors recommended)
60 MB of free hard disk space (100 MB recommended)
Adobe Type Manager Version 4 or later with Type 1 fonts
Power Macintosh Processor, (G3 recommended)
Mac OS 7.5.5 or later
24 MB of available RAM with virtual memory on minimum; 32+ MB of available RAM with virtual memory off recommended
640 x 480, 256-color display (1024 x 768, millions of colors recommended)
60 MB of free hard disk space (100 MB recommended)
Adobe Type 4 manager or later required with Type 1 fonts
I would recommend having at least, 64 MB of RAM for fast editing, especially if you have more than one program open while running Fireworks. Otherwise you’ll be lucky to actually get any more than one or two megs of RAM that the program can actually use for rendering.
Conclusion
Programs like Ulead SmartSaver and Ignite have their days numbered. Web graphics designers asked for a robust graphics design tool with capabilities for creating rollovers, image maps, optimizing and slicing graphics, and Macromedia delivered. The competitive $199 price makes this program cheaper than buying separate tools to do all the tasks that Fireworks 2 performs. As with all Macromedia products, a fully-functional, 30-day trial version is available for download from their site.
Rating: 5/5
Macromedia.com – Take a tour of Fireworks 2, or go straight to the trial download on the Macromedia site.
In the past, creating something as simple as an animation for the web would require multiple applications, and likely several plug-ins. You’d need a program to create the individual frames of the animation and several plug-ins to add text effects, like drop shadows. Once the frames were created you would export them into an animation program to create the animated GIF file. Finally, you would load the animation into an optimization tool to shrink it down. If you made a mistake somewhere along the way, or if you wanted to make a change to one of the frames, you would have to go through the entire process again.
Now, fast forward to the present. You create, optimize and animate the graphics in one application. If you need to edit a frame of an animation you don’t need to back-track. You no longer have to switch between multiple tools to create graphics for the web, because you have a single program installed that will do everything that you need to create stunning web graphics. Fiction? No. Reality. Macromedia Fireworks 2.
The original version of Fireworks from Macromedia was without a question the ultimate web graphic design solution. No other graphics program (including PhotoShop) could do everything that Fireworks could, without the addition of five or ten plug-ins and several third-party programs. Version 2 of Fireworks continues the long-standing tradition of this all-in-one web graphics design package with the addition of a wealth of new features and usability improvements.
New Features include:
- Auto Kerning to improve the appearance of small text.
- File format support for PhotoShop 5, Illustrator 8, among others
- Scriptlets let you create drag and drop JavaScripts to combine batch find and replace with batch export features.
- Improved batch processing lets you batch process images for an entire site.
- Hotspot rollovers provide for irregular shaped areas that trigger rollovers.
- Better integration with Dreamweaver 2
The new version of Fireworks 2 is also $100 cheaper than the original at $199. You can upgrade to the new version electronically for a mere $99.
/# pagebreak ‘The Design Environment’#/
Design Environment
Those using Paint Shop Pro or PhotoShop will feel right at home in the Fireworks 2 interface (left). There’s a standard toolbar, and several floating panels with palettes and settings for various effects.
My favourite feature in the design environment is Live Effects ™. I was able to create effects like bevels, glows and drop shadows, and later go back and edit them. As I made the changes in the panels I was able to watch the results in real time. Live effects basically allows you to make changes to any special effect, at any time, without having to start over.
Fireworks 2 provides support for both vector and bitmap graphics. It actually blurs the lines between the two types. A path of a Fireworks object is an editable vector path. Yet, it may also have a texture fill, or an effect like bevel applied to it. If you magnify any object in Fireworks you will see individual pixels, yet the pixels redraw in response to vector editing. Even effects redraw after an object is edited, something that was previously only possible in bitmap image applications.
The program provides full support for PhotoShop plug-ins and formats. However, Fireworks 2 is not a tool that is meant to be used for production of non-web graphics.
Creating GIF Animations
Fireworks 2 provides everything that you need to create animated GIF files. Several Fireworks 2 panels are designed specifically with creating animations in mind. The VCR panel allows you to view the animation frame by frame or preview it. “Instances” is a nifty feature that allows you to reproduce something on multiple frames. If it is then edited on one frame, all instances of it are updated automatically.
Onion skinning, when turned on, shows objects on frames before or after the current frame, but dimmer, so that it’s easy to distinguish them from the object’s current frame.
It’s features like these that make Fireworks 2 THE tool for designing web graphics. Fireworks combines the best of standalone graphic, animation, and optimization programs all into one framework.
Slicing
Slicing images in Fireworks is a straightforward process. Using the slice tool, I was able to draw rectangular slice objects on an image. Fireworks automatically creates the smallest number of slices possible by intelligently combining parts of an image that do not contain slice objects. The result is less HTML code, as well as slightly faster loading pages. Exporting the final output was a simple task, which required me to specify a destination folder. Fireworks 2 automatically named the sliced images according to what I had defined in the Properties dialog.
The down side on the slicing is if you actually export the HTML it comes out as CSS, and not regular HTML. The previous version actually made basic HTML templates, instead of CSS.
/# pagebreak ‘Optimizing Graphics, and creating JavaScript rollovers’#/
Image optimization takes place in the export dialog box. Optionally, you can use an export wizard to aid you in the optimization of graphics. As a test, I took the WR logo that you see in the upper-left hand corner of this page, and I ran it through the wizard. After answering a few short questions, including my target size, a dialog popped up with the wizard’s advice. After reading it, and clicking “OK,” the Export Preview window popped up.
The graphic was optimized to my target size. I fiddled with the settings a little bit more, eventually getting the file down to 2.03KB, from the original 2.18KB, without altering the image quality at all. The change was very small, but the image had previously been optimized using Ulead SmartSaver. I wasn’t expecting anything drastic.
Take a look at the screen shot above to see what the export preview window looks like.
JavaScript Rollovers
JavaScript rollovers allow for images to change their appearance when the mouse is moved over them, or when they are clicked. This is accomplished by a piece of JavaScript code that swaps the image when the visitor’s mouse is hovered over it. Creating JavaScript rollovers in Fireworks 2 is extremely simple. Once the different images to represent the different states of an image are drawn, hotspots are selected, and the final results exported. Fireworks 2 automatically generates the JavaScript necessary for the rollovers to function properly. Fireworks 2 even allows for the creation of irregularly shaped rollovers, something which used to be very difficult in the past.
However, if you haven’t read all the documentation inside out for Fireworks, it can be a little bit difficult to learn how to use the JavaScript Rollover feature.
Image Maps
An image map allows for the creation of images with hotspots which, when clicked, will take a visitor to a particular URL. A single image can therefore be linked to multiple pages. I had no problem creating a simple image map in Fireworks. Using one of the hotspot tools, I selected an area of an image and defined it as being a hotspot. In the Image Map Options panel, I specified a destination URL for each of the hotspots that I created. Next, I selected Export from the File menu, selected a destination directory, and the image and the HTML file containing the code for the image map were placed there.
/# pagebreak ‘Batch Processing, Dreamweaver 2 Integration and more’#/
Batch Processing
Batch processing is designed to automatically process a group of graphics. For example, Fireworks 2 makes it possible to convert formats for a selection of graphics or change the settings on a group of files (for example, change all GIF files into interlaced GIFs). You can even find and replace text, colors, URLs and fonts in a batch of graphics if they are in Fireworks PNG, Illustrator, Freehand or CorelDRAW format.
Fireworks allows for the creation of “Scriptlets,” which will easily recreate a batch process in the future. These cross-platform scriptlets can be shared among computers, and other individuals in a company. This makes it easy to standardize all of the graphics.
Dreamweaver 2 Integration
Fireworks 2 is great as a stand-alone product, but it becomes even better if you also have Dreamweaver 2 installed. I was able to export JavaScript rollovers created in Fireworks 2 directly into Dreamweaver, where I could make further edits. I was also able to export graphics made in Fireworks as objects, and then use them in Dreamweaver 2. If you have both programs installed, it is very easy to launch Fireworks 2 from within Dreamweaver to quickly make changes to a graphic.
System Requirements
Intel Pentium processor 120 (Pentium II recommended)
Windows 95, 98 or NT (with Service Pack 3) or later
32 MB of RAM on Windows 95/98, 40+ MB recommended for Windows NT
640 x 480, 256-color display (1024 x 768, millions of colors recommended)
60 MB of free hard disk space (100 MB recommended)
Adobe Type Manager Version 4 or later with Type 1 fonts
Power Macintosh Processor, (G3 recommended)
Mac OS 7.5.5 or later
24 MB of available RAM with virtual memory on minimum; 32+ MB of available RAM with virtual memory off recommended
640 x 480, 256-color display (1024 x 768, millions of colors recommended)
60 MB of free hard disk space (100 MB recommended)
Adobe Type 4 manager or later required with Type 1 fonts
I would recommend having at least, 64 MB of RAM for fast editing, especially if you have more than one program open while running Fireworks. Otherwise you’ll be lucky to actually get any more than one or two megs of RAM that the program can actually use for rendering.
Conclusion
Programs like Ulead SmartSaver and Ignite have their days numbered. Web graphics designers asked for a robust graphics design tool with capabilities for creating rollovers, image maps, optimizing and slicing graphics, and Macromedia delivered. The competitive $199 price makes this program cheaper than buying separate tools to do all the tasks that Fireworks 2 performs. As with all Macromedia products, a fully-functional, 30-day trial version is available for download from their site.
Rating: 5/5
Macromedia.com – Take a tour of Fireworks 2, or go straight to the trial download on the Macromedia site.
In the past, creating something as simple as an animation for the web would require multiple applications, and likely several plug-ins. You’d need a program to create the individual frames of the animation and several plug-ins to add text effects, like drop shadows. Once the frames were created you would export them into an animation program to create the animated GIF file. Finally, you would load the animation into an optimization tool to shrink it down. If you made a mistake somewhere along the way, or if you wanted to make a change to one of the frames, you would have to go through the entire process again.
Now, fast forward to the present. You create, optimize and animate the graphics in one application. If you need to edit a frame of an animation you don’t need to back-track. You no longer have to switch between multiple tools to create graphics for the web, because you have a single program installed that will do everything that you need to create stunning web graphics. Fiction? No. Reality. Macromedia Fireworks 2.
The original version of Fireworks from Macromedia was without a question the ultimate web graphic design solution. No other graphics program (including PhotoShop) could do everything that Fireworks could, without the addition of five or ten plug-ins and several third-party programs. Version 2 of Fireworks continues the long-standing tradition of this all-in-one web graphics design package with the addition of a wealth of new features and usability improvements.
New Features include:
- Auto Kerning to improve the appearance of small text.
- File format support for PhotoShop 5, Illustrator 8, among others
- Scriptlets let you create drag and drop JavaScripts to combine batch find and replace with batch export features.
- Improved batch processing lets you batch process images for an entire site.
- Hotspot rollovers provide for irregular shaped areas that trigger rollovers.
- Better integration with Dreamweaver 2
The new version of Fireworks 2 is also $100 cheaper than the original at $199. You can upgrade to the new version electronically for a mere $99.
/# pagebreak ‘The Design Environment’#/
Design Environment
Those using Paint Shop Pro or PhotoShop will feel right at home in the Fireworks 2 interface (left). There’s a standard toolbar, and several floating panels with palettes and settings for various effects.
My favourite feature in the design environment is Live Effects ™. I was able to create effects like bevels, glows and drop shadows, and later go back and edit them. As I made the changes in the panels I was able to watch the results in real time. Live effects basically allows you to make changes to any special effect, at any time, without having to start over.
Fireworks 2 provides support for both vector and bitmap graphics. It actually blurs the lines between the two types. A path of a Fireworks object is an editable vector path. Yet, it may also have a texture fill, or an effect like bevel applied to it. If you magnify any object in Fireworks you will see individual pixels, yet the pixels redraw in response to vector editing. Even effects redraw after an object is edited, something that was previously only possible in bitmap image applications.
The program provides full support for PhotoShop plug-ins and formats. However, Fireworks 2 is not a tool that is meant to be used for production of non-web graphics.
Creating GIF Animations
Fireworks 2 provides everything that you need to create animated GIF files. Several Fireworks 2 panels are designed specifically with creating animations in mind. The VCR panel allows you to view the animation frame by frame or preview it. “Instances” is a nifty feature that allows you to reproduce something on multiple frames. If it is then edited on one frame, all instances of it are updated automatically.
Onion skinning, when turned on, shows objects on frames before or after the current frame, but dimmer, so that it’s easy to distinguish them from the object’s current frame.
It’s features like these that make Fireworks 2 THE tool for designing web graphics. Fireworks combines the best of standalone graphic, animation, and optimization programs all into one framework.
Slicing
Slicing images in Fireworks is a straightforward process. Using the slice tool, I was able to draw rectangular slice objects on an image. Fireworks automatically creates the smallest number of slices possible by intelligently combining parts of an image that do not contain slice objects. The result is less HTML code, as well as slightly faster loading pages. Exporting the final output was a simple task, which required me to specify a destination folder. Fireworks 2 automatically named the sliced images according to what I had defined in the Properties dialog.
The down side on the slicing is if you actually export the HTML it comes out as CSS, and not regular HTML. The previous version actually made basic HTML templates, instead of CSS.
/# pagebreak ‘Optimizing Graphics, and creating JavaScript rollovers’#/
Image optimization takes place in the export dialog box. Optionally, you can use an export wizard to aid you in the optimization of graphics. As a test, I took the WR logo that you see in the upper-left hand corner of this page, and I ran it through the wizard. After answering a few short questions, including my target size, a dialog popped up with the wizard’s advice. After reading it, and clicking “OK,” the Export Preview window popped up.
The graphic was optimized to my target size. I fiddled with the settings a little bit more, eventually getting the file down to 2.03KB, from the original 2.18KB, without altering the image quality at all. The change was very small, but the image had previously been optimized using Ulead SmartSaver. I wasn’t expecting anything drastic.
Take a look at the screen shot above to see what the export preview window looks like.
JavaScript Rollovers
JavaScript rollovers allow for images to change their appearance when the mouse is moved over them, or when they are clicked. This is accomplished by a piece of JavaScript code that swaps the image when the visitor’s mouse is hovered over it. Creating JavaScript rollovers in Fireworks 2 is extremely simple. Once the different images to represent the different states of an image are drawn, hotspots are selected, and the final results exported. Fireworks 2 automatically generates the JavaScript necessary for the rollovers to function properly. Fireworks 2 even allows for the creation of irregularly shaped rollovers, something which used to be very difficult in the past.
However, if you haven’t read all the documentation inside out for Fireworks, it can be a little bit difficult to learn how to use the JavaScript Rollover feature.
Image Maps
An image map allows for the creation of images with hotspots which, when clicked, will take a visitor to a particular URL. A single image can therefore be linked to multiple pages. I had no problem creating a simple image map in Fireworks. Using one of the hotspot tools, I selected an area of an image and defined it as being a hotspot. In the Image Map Options panel, I specified a destination URL for each of the hotspots that I created. Next, I selected Export from the File menu, selected a destination directory, and the image and the HTML file containing the code for the image map were placed there.
/# pagebreak ‘Batch Processing, Dreamweaver 2 Integration and more’#/
Batch Processing
Batch processing is designed to automatically process a group of graphics. For example, Fireworks 2 makes it possible to convert formats for a selection of graphics or change the settings on a group of files (for example, change all GIF files into interlaced GIFs). You can even find and replace text, colors, URLs and fonts in a batch of graphics if they are in Fireworks PNG, Illustrator, Freehand or CorelDRAW format.
Fireworks allows for the creation of “Scriptlets,” which will easily recreate a batch process in the future. These cross-platform scriptlets can be shared among computers, and other individuals in a company. This makes it easy to standardize all of the graphics.
Dreamweaver 2 Integration
Fireworks 2 is great as a stand-alone product, but it becomes even better if you also have Dreamweaver 2 installed. I was able to export JavaScript rollovers created in Fireworks 2 directly into Dreamweaver, where I could make further edits. I was also able to export graphics made in Fireworks as objects, and then use them in Dreamweaver 2. If you have both programs installed, it is very easy to launch Fireworks 2 from within Dreamweaver to quickly make changes to a graphic.
System Requirements
Intel Pentium processor 120 (Pentium II recommended)
Windows 95, 98 or NT (with Service Pack 3) or later
32 MB of RAM on Windows 95/98, 40+ MB recommended for Windows NT
640 x 480, 256-color display (1024 x 768, millions of colors recommended)
60 MB of free hard disk space (100 MB recommended)
Adobe Type Manager Version 4 or later with Type 1 fonts
Power Macintosh Processor, (G3 recommended)
Mac OS 7.5.5 or later
24 MB of available RAM with virtual memory on minimum; 32+ MB of available RAM with virtual memory off recommended
640 x 480, 256-color display (1024 x 768, millions of colors recommended)
60 MB of free hard disk space (100 MB recommended)
Adobe Type 4 manager or later required with Type 1 fonts
I would recommend having at least, 64 MB of RAM for fast editing, especially if you have more than one program open while running Fireworks. Otherwise you’ll be lucky to actually get any more than one or two megs of RAM that the program can actually use for rendering.
Conclusion
Programs like Ulead SmartSaver and Ignite have their days numbered. Web graphics designers asked for a robust graphics design tool with capabilities for creating rollovers, image maps, optimizing and slicing graphics, and Macromedia delivered. The competitive $199 price makes this program cheaper than buying separate tools to do all the tasks that Fireworks 2 performs. As with all Macromedia products, a fully-functional, 30-day trial version is available for download from their site.
Rating: 5/5
Macromedia.com – Take a tour of Fireworks 2, or go straight to the trial download on the Macromedia site.
Matt MickiewiczMatt is the co-founder of SitePoint, 99designs and Flippa. He lives in Vancouver, Canada.
