About Fireworks CS6

Adobe Fireworks CS6 is the latest version of the product to be released.   However, it was announced by Adobe that it will also be the last version they will release. Users will continue to be able to purchase Fireworks CS6 and use it as they would any of the other Adobe Creative Suite products. In addition, they will also be able to use Adobe Fireworks CS6 as part of Creative Cloud.  

This means that users can either purchase the program for a one-time fee or pay for a monthly subscription. However, since many of the features in Fireworks overlap with programs such as Photoshop, Illustrator, and Edge Reflow, Adobe will not create or release any new versions of Fireworks CS6 nor will they provide any updates except for bug fixes.

What's New in Fireworks CS6

If you're an experienced Fireworks user and have upgraded to CS6 from a previous version, such as CS5, the new features contained in CS6 will be helpful to you.   We've listed some of the most critical upgrades below so that as you start to use Fireworks CS6, you will be sure to watch for these improvements.

• New and improved panels

• The Color Picker is now available in Fireworks so that you get just the right color that you need to use.

• New and better templates section and common library

• Advanced rendering capabilities for pixel-perfect rendering.

• Copy and paste from Fireworks to Dreamweaver. Import and export to Illustrator or Photoshop.

• Easier to use vector and bitmap graphic tools

• Increased CSS support

• And more

Creating a New Fireworks Document

Files that you create within Fireworks are referred to as documents. These documents are PNG files – or Portable Network Graphic files.  

When you open Fireworks CS6, you will see this dialogue box:

To create a new document, go to the Create New column and select Fireworks Document.

We are going to create a new web page.

To do this, we will set our height to 600 pixels, and will set the width to 960. 

We will leave the resolution at the default setting of 72 PPI – or Pixels Per Inch. 

About Resolution The resolution you choose will depend on the project. For example, if you are creating a print project, you should ask your printer what resolution you should be using. Typically, it's 300 PPI.   If you're designing for devices with higher resolution capabilities, you may want to use a higher resolution as well. Otherwise, 72 or 96 PPI is usually fine.

The New Document dialogue box is pictured below.   This is where you will set your height and width.

Choose a canvas color. You can select either white, transparent, or custom. We are going to choose white.

Click OK. 

The Fireworks window then opens. The new document is located in the work area of Fireworks. The work area is located in the center of the Fireworks window.

Navigating Fireworks CS6

The Fireworks window consists of menus, toolbars, and panels in addition to the work area.

Let's take a minute to discuss the different parts of the Fireworks window and begin to learn how to navigate through the program.

We will start at the top of the window where you will see the Application Bar.

The Application Bar

The Application Bar contains the Menu Bar, as well as other features.

The Menu Bar is pictured below.

If you click on any of the menu commands such as File, Edit, or View, you can see the tools or options available to you for that command.

For example, the Window menu command is where you will find the different panels that you can view and use, as well as the toolbars.

To the right of the Menu Bar you will see the zoom and pan tools, the workplace switcher, and the Help search field.   To use the Help search field, type in what you need help with and press Enter.

Next, take a look below the Application and Menu Bars.   You will see the Main Toolbar .

The Tools Panel

The Tools panel is located on the far left of the Fireworks window.

The Tools panel is broken down into six areas: Select, Bitmap, Vector, Web, Colors, and Views. The areas are divided by a grey line, as you can see in the snapshot above.

The tools you will find in the tools panel:

• Select area tools are used for selecting, cropping, distorting, and scaling objects.

• Bitmap area tools are for creating and/or editing bitmap objects.

• Vector area tools are for creating and editing vector paths and shapes. Since text is a vector, you will also find the Text tool in this area.

• Web area tools are used for optimizing graphics for the Web and creating interactive documents.

• Colors area tools allow you to add stroke and fill colors.

• View area tools allow you to switch between the three views: Standard, Full screen with Menus, and Full Screen (no menus or panels). 

The Properties Panel

At the bottom of the Fireworks window is the Properties panel. It is not important that you learn how to use any of the tools or panels at this time.   Instead, it is important to familiarize yourself with the look and feel, as well as the layout, of the program.

The Panel Dock

The Panel Dock is located on the right side of the window. As you start to use the different panels in Fireworks, you will find them here. 

NOTE: In Fireworks CS6, just as with other Adobe editing programs, the rulers can help you align objects in your document. To view the rulers in Fireworks CS6, go to View>Rulers.

Working with Panels and Panel Groups

As you learned in the last section of this article, the panel dock is located on the right side of the Fireworks window.   In Fireworks, a dock is simply a collection of panels that are displayed together, as shown below.

If you look at the panel dock above, you can see that panels are grouped together. Below is a picture of a panel group. It contains the Optimize, History, and Align panels.

To adjust the order of the panels in a panel group, simply drag on the tab of the panel you wish to move, then drop it in its new location.

In the snapshot below, we are dragging the Optimize tab so the Optimize panel tab appears after the History panel tab.

You can add more panels to the group by dragging a panel to a group. You can also remove a panel from a group by dragging out of the group. To drag a panel, click on the tab of the panel, then drag and drop.

In addition to adding or removing panels from a panel group, you can also collapse all the panel groups – or just a certain panel group. 

To collapse all the panels, simply click once an empty area of the grey tab bar, as circled below.

To collapse one panel group, right click on the grey tab bar to the far right of the panel tabs (circled in red below). Select Minimize.

 

To increase or decrease the width of the panels, drag on the left outer edge of the panels. Drag inward to decrease the width. Drag outward to increase the width.

Creating a Workspace

Once you take time to organize your panels and panel groups, you may want to save the configuration for future documents. You can do this by creating a new workspace.

To create a new workspace, go to the Workplace Switcher, as shown below.

Select Save Current from the dropdown menu.

Enter a name for the new workspace, then click OK.

Working with Documents

In Fireworks, you can have more than one document open at a time.

In the snapshot below, you can see that we have two documents open. Each document is represented by a tab.

To view a document, click on its tab.  

Just as with panels, you can drag on the tabs to rearrange the order of the documents. You can also drag a document tab away from the tabbed documents to create a floating document, as shown below.