Until the introduction of Macromedia Fireworks in 1998, no single application had been dedicated to creating, optimizing, and exporting web graphics. Instead, we had to use several applications which did not play well together.
Fireworks 1.0 offered a new approach: a single tool that supported the entire web graphics workflow from start to finish. Although Fireworks has the ability to produce HTML, its best features are optimization and file export. The ability to export portions of design, such as rollover buttons with JavaScript, makes Fireworks a powerful web graphics application.
With each new release of Fireworks we see new tools to make our jobs even easier. Using an application that was built from the group up to be a web graphics tool only, really shows! In this article we'll be exploring some of these new features added to Fireworks 8.
Introducing Fireworks 8
Fireworks 8 is the best solution for creating and optimizing web images with precise control. The optimization tools in Fireworks enable users to strike the balance between maximum image quality and minimum compression size. One huge advantage Fireworks 8 has it that it integrates seamlessly with Dreamweaver, Flash and other Studio 8 applications. This saves a ton of time and makes roundtrip editing a breeze. When I have an image in Dreamweaver and decide I want to "tweak" it. No problem, click the Fireworks icon, Fireworks opens, I make the edit, click Done and whalla-the image is repaired and I'm back in Dreamweaver! What a timesaver. Best of all, you can create professional quality web graphics and animations, such as rollovers and pop-ups, without programming skills.
Who Needs Fireworks 8?
Macromedia Fireworks 8 is used by web designers, graphic designers and developers to create and optimize graphics for the web. Fireworks 8 serves customers who are looking for an integrated, easy-to-use solution for web graphics. Fireworks 8 will also appeal to a new range of users, including non-linear video editors looking to create, encode, and bring video online, as well as traditional graphic designers looking to expand their print skills to digital design.
The Fun Stuff
What I'm sure you all really want to know-what's new and exciting about Fireworks 8? Save time and effort with the many refinements made to common tasks.
Optimization
- There is a new panel (Image Editing) which contains the entire image editing tools in one location.
- New support for ActionScript and CSS (Cascading Style Sheet) formats allow Fireworks to work even more efficiently with Dreamweaver and Flash.
- Support for new file formats, new panels, and dramatically streamlined workflow optimize both time and images.
- Batch processing workflow has been optimized with streamlined file renaming, the ability to check file dimensions when scaling and a new status bar and log file are just a few.
- CSS (Cascading Style Sheet) pop-up menus! This is a much awaited for improvement in the Fireworks pop-up menus.
- Vector compatibility-preserve vector attributes when moving from Fireworks to Flash.
- Polygon slices for a polygon path.
- Fireworks recognizes ActionScript color values when copied from Flash and pasted into Fireworks color value fields.
- Save as command to save bitmaps to different file types.
- Evolved open, save and export logic, easier to use default folders for opening, saving and exporting.
- 25 new blend modes
- Perspective shadow-add a perspective shadow to open paths and text objects
- Solid shadow-a new live filter that stamps the object it is applied to.
- Mobile interface components-mock up mobile interfaces quickly with bitmap interface components.
- New sample buttons, cool animations, themes (backgrounds and matching buttons) and bullets
- AutoShape properties panel-used to modify AutoShape properties.
- Live marquee and convert selections-very cool. Make a selection and convert it into a path!
- Layers with text are automatically named by the text typed in them.
- Special characters panel-easy access to characters such as copyright symbols and other special characters.
- Reshape text on a path-now you can edit a path even after text has been attached.
- Recently used fonts now appear at the top of the font menus.
- Save multiple selection-you can save, restore, name and delete multiple marquee selections within PNG files
- Autosave is automatically saved more frequently
- Group consecutive nudges-treated as one move.
- Improved tablet support.
- Lock on a per-object basis in the Layers panel.
The tight integration between Dreamweaver and Fireworks offers the best solution for rapid website development.
Top Dreamweaver 8 integration features include:
- CSS pop-up menus
Fireworks 8 uses CSS (Cascading Style Sheet) format to create interactive pop-up menus. The result is clean and easily customizable code that integrates well with sites built in Dreamweaver. Once integrated, use the powerful new CSS panel in Dreamweaver to quickly modify the presentation of the CSS. - Integrated Dreamweaver graphics editor
Leverage Fireworks technology to provide basic image manipulation and editing directly within Dreamweaver. Crop, resize, and resample images without leaving the Dreamweaver environment. - Roundtrip table editing with Dreamweaver
A designer can output a set of nested tables containing sliced graphics from Fireworks and pass it to a developer, who can edit the tables in Dreamweaver. The developer can then pass the tables back to the designer, who can edit the graphics files and update the tables without overwriting the developer's custom code. - Launch and optimize/edit
Double-click on a graphic in Dreamweaver to instantly launch Fireworks for fast editing; single-click to make simple edits without leaving Dreamweaver. Post edits to the web graphic (JPEG or GIF) or to the source image. To optimize site graphics for fastest download, choose optimize image to launch the Fireworks optimization engine. - Export as Dreamweaver library from Fireworks
Create a set of common graphics elements such as pieces of a navigation bar, and save them as library items. When exported from Fireworks, these items will automatically appear in the Dreamweaver library. To edit a Fireworks-originated library item, edit the original PNG and re-export it to the Dreamweaver site folder. Dreamweaver will prompt with an option to update the library item and propagate the changes site-wide. - Export layers, slices, or frames as absolute positioned Dreamweaver CSS layers
Create Fireworks graphics and place them on a page comp, then export the layout, including the graphics, to Dreamweaver using CSS layers. Keep the existing Fireworks layout in Dreamweaver, and easily reposition the CSS layers. - Integrate native behaviors
In Fireworks, create rollovers and JavaScript effects. Then, import the graphics and code into Dreamweaver where the behaviors are recognized and editable as native Dreamweaver code. - Auto-insert HTML and graphics
Import graphics, JavaScript, and HTML created in Fireworks directly into Dreamweaver with the one-step insert Fireworks object operation. Dreamweaver will import code created by Fireworks while maintaining precise placement, links, and other image properties.
Fireworks offers Macromedia Flash developers a roundtrip workflow between their bitmap production environments and Macromedia Flash. Fireworks is ideal for combining optimized bitmap graphics with vector-based Macromedia Flash websites.
You can easily import, copy and paste, or export Fireworks vectors, bitmaps, animations, and multistate button graphics for use in Flash. A button symbol made in Fireworks can be dragged to Flash and it becomes a Flash button! Launch-and-edit functionality also makes it easy to edit Fireworks graphics from within Flash.
Top Flash 6 integration features include:
- Import Fireworks PNG files to Macromedia Flash
Directly import native Fireworks PNG files into Flash. Vectors, shapes, lines, layers, and guides remain editable. Maintain and take advantage of existing creative assets when importing Photoshop PSD files into Fireworks and save them as layered PNG files for importing into Flash. - Export Macromedia Flash SWF files from Fireworks
Create animated GIF ad banners and export them as compact SWF files. Copy and paste Fireworks vectors, and quickly repurpose graphics by copying and pasting their paths directly into Flash. - Launch and edit in Fireworks
Click the edit button in the property inspector to launch the original Fireworks file or bitmap image; changes will automatically update in Flash. - Create custom commands and panels for Fireworks in Flash
Use Flash to create SWF movies in JavaScript and then reuse them as Fireworks commands or panels of commands. - Mobile interface development
Mock up mobile interfaces quickly with bitmap interface components in Fireworks then export to Flash to add interactivity. Use Flash Professional 8 to design, build, and test content using its advanced authoring environment and interactive mobile emulator for deploying content to mobile phones. - Preserve graphical elements and color consistency
Vector attributes, such as fills, strokes, filters, and blend modes are preserved when moving objects between Flash and Fireworks. Fireworks recognizes ActionScript color values when copied from Flash and pasted into Fireworks color value fields.
Fireworks provides excellent support for importing native Photoshop (PSD) files, with options for retaining many aspects of the imported files, including layers, masks, and editable text.
Bring Photoshop images into Fireworks for further editing and web optimization without losing the ability to export the images back into Photoshop.
Maintain and take advantage of existing creative assets when importing Photoshop PSD files into Fireworks and save them as layered PNG files for importing into Flash
Fireworks 8 and Macromedia Director MX
Safely export sliced images with rollovers and even layered images. Director users can take advantage of the optimization and graphic design tools of Fireworks without compromising quality.
Fireworks 8 and other vector graphics applications
Fireworks can share vector graphics with other vector graphics applications, such as Adobe Illustrator. In Fireworks, exporting and importing vector graphics is a breeze, whether designers are using Macromedia FreeHand, Adobe Illustrator, or another illustration tool.
Fireworks 8 and other HTML editors
Fireworks generates HTML that can be read by all HTML editors and it can also import HTML content. This is a powerful feature, allowing opening and editing of most HTML documents within Fireworks.
Fireworks 8 and CSS
Cascading Style Sheets (CSS) provide added control over how web pages are displayed. CSS layers define how different elements, such as headers and links, should appear. Fireworks users can export HTML as CSS layers to create interactive pop-up menus.
Fireworks 8 and JavaScript
Fireworks 8 can understand and execute JavaScript, allowing advanced users to automate complex tasks by writing JavaScript commands and then executing them in Fireworks. Control nearly every Fireworks command or setting through JavaScript using standard JavaScript commands that Fireworks interprets:
- Command scripts are saved as JavaScript. Open and edit commands in any text editor, such as Dreamweaver, Notepad (Windows), or TextEdit (Macintosh).
- Reduce the tedium of repetitive tasks by writing JavaScript commands to run within Fireworks. Control nearly every command or setting in Fireworks through JavaScript.
- Create custom Fireworks panels by designing and coding in Flash ActionScript and exporting as a SWF movie. If dropped into the command panel's folder, the movie will appear as a panel in the Fireworks window menu.
- Use JavaScript to write custom objects and commands that affect Fireworks documents and the elements within them. The Fireworks cross product communication architecture allows ActionScript 2.0 and C++ applications to control Fireworks. For more information, see Extending Fireworks on the Fireworks Support Center at www.macromedia.com/support/fireworks/.
Fireworks 8 has some really exciting new changes. The improved integration with Flash is great. Some of my favorite new features are the Marquee selection to path option and text objects being automatically named by the text. A very important change is the new pop-up menus. They are now CSS based-you've got to check them out! This feature alone makes the upgrade worth it. If you've ever used the Red Eye tool, then you'll be pleased with the improvements there as well.
New fancy tools are always great but don't overlook the usability enhancements. Easier saving, opening and exporting really saves time. Fireworks remembers the last folder you've used. Other enhancements such as putting the last used font on the top of the list sure saves time as well as putting all the image editing tools in one easy to access panel.
If you've never used Fireworks before-then what are you waiting for? This is by far the BEST application out there for working with and producing web graphics. Its integration with the other Studio 8 applications and more, make Fireworks the perfect choice for creating your web graphics and even client comps (site samples)!