Loading...
ADOBE® FIREWORKS®
Help and tutorials
June 2013
Contents |
|
What's new................................................................................................................................................... |
1 |
What's new in CS6................................................................................................................................................................. |
2 |
What's new in CS5.1.............................................................................................................................................................. |
5 |
Fireworks basics........................................................................................................................................... |
6 |
Create Fireworks PNG files from HTML files.......................................................................................................................... |
7 |
Creating a new Fireworks document...................................................................................................................................... |
8 |
Fireworks basics................................................................................................................................................................... |
10 |
Insert objects into a Fireworks document............................................................................................................................. |
12 |
Opening and importing files.................................................................................................................................................. |
15 |
Saving Fireworks files........................................................................................................................................................... |
17 |
Workspace.................................................................................................................................................. |
19 |
Change the canvas............................................................................................................................................................... |
20 |
Navigate, view, and preview documents.............................................................................................................................. |
24 |
Undo and repeat multiple actions......................................................................................................................................... |
27 |
Workspace basics................................................................................................................................................................. |
29 |
Selecting and transforming objects............................................................................................................. |
37 |
9-slice scaling....................................................................................................................................................................... |
38 |
Edit selected objects............................................................................................................................................................. |
40 |
Modify a selection................................................................................................................................................................. |
44 |
Organize multiple objects..................................................................................................................................................... |
45 |
Select objects....................................................................................................................................................................... |
47 |
Select pixels.......................................................................................................................................................................... |
49 |
Working with bitmaps.................................................................................................................................. |
55 |
Add noise to an image.......................................................................................................................................................... |
56 |
Adjust bitmap color and tone................................................................................................................................................ |
57 |
Blurring and sharpening bitmaps.......................................................................................................................................... |
63 |
Creating bitmaps................................................................................................................................................................... |
65 |
Editing bitmaps..................................................................................................................................................................... |
66 |
Retouching bitmaps.............................................................................................................................................................. |
68 |
Working with vector objects........................................................................................................................ |
72 |
Auto Shapes......................................................................................................................................................................... |
73 |
Basic shapes........................................................................................................................................................................ |
77 |
Compound shapes................................................................................................................................................................ |
81 |
Free-form shapes................................................................................................................................................................. |
82 |
Special vector-editing techniques......................................................................................................................................... |
87 |
Vector objects....................................................................................................................................................................... |
92 |
Working with text........................................................................................................................................ |
93 |
Enter text.............................................................................................................................................................................. |
94 |
Format and edit text.............................................................................................................................................................. |
96 |
Selecting text...................................................................................................................................................................... |
104 |
Applying color, strokes, and fills............................................................................................................... |
105 |
Apply colors and save swatches......................................................................................................................................... |
106 |
Applying strokes and fills.................................................................................................................................................... |
112 |
Using Live Filters...................................................................................................................................... |
118 |
Create effects with Live Filters............................................................................................................................................ |
119 |
Layers, masking, and blending................................................................................................................. |
123 |
Blending and transparency................................................................................................................................................. |
124 |
Layers................................................................................................................................................................................. |
127 |
Masking.............................................................................................................................................................................. |
131 |
Styles, symbols, and URLs....................................................................................................................... |
141 |
Styles.................................................................................................................................................................................. |
142 |
Symbols.............................................................................................................................................................................. |
145 |
URLs................................................................................................................................................................................... |
152 |
Slices, rollovers, and hotspots.................................................................................................................. |
155 |
Creating and editing slices.................................................................................................................................................. |
156 |
Hotspots, image maps, and rollovers................................................................................................................................. |
160 |
Interactive slices................................................................................................................................................................. |
163 |
Preparing slices for export.................................................................................................................................................. |
168 |
Creating buttons and pop-up menus........................................................................................................ |
171 |
Button symbols................................................................................................................................................................... |
172 |
Navigation basics................................................................................................................................................................ |
176 |
Pop-up menus.................................................................................................................................................................... |
177 |
Prototyping websites and interfaces......................................................................................................... |
181 |
Prototyping websites and interfaces using Fireworks pages.............................................................................................. |
182 |
Prototyping Flex and Adobe AIR applications.................................................................................................................... |
186 |
Creating animations.................................................................................................................................. |
192 |
Animation symbols.............................................................................................................................................................. |
193 |
Animations.......................................................................................................................................................................... |
195 |
States.................................................................................................................................................................................. |
198 |
Tweening and onion skinning............................................................................................................................................. |
201 |
Creating slide shows................................................................................................................................. |
202 |
Slide shows......................................................................................................................................................................... |
203 |
Optimizing and exporting.......................................................................................................................... |
207 |
Export from the workspace................................................................................................................................................. |
208 |
Optimize graphics files........................................................................................................................................................ |
218 |
Optimize in the workspace.................................................................................................................................................. |
224 |
Send a Fireworks document as an e-mail attachment........................................................................................................ |
227 |
Use the Export Wizard........................................................................................................................................................ |
228 |
Use the Image Preview....................................................................................................................................................... |
229 |
Fireworks and other applications.............................................................................................................. |
232 |
Using Fireworks with Photoshop........................................................................................................................................ |
233 |
Using Fireworks with Illustrator........................................................................................................................................... |
238 |
Using Fireworks with Flash................................................................................................................................................. |
240 |
Using Fireworks with Dreamweaver................................................................................................................................... |
245 |
Previewing Fireworks documents in mobile emulators....................................................................................................... |
252 |
Share image metadata with Adobe XMP............................................................................................................................ |
253 |
Using Fireworks with Director............................................................................................................................................. |
256 |
Using Fireworks with HomeSite, GoLive, and other HTML editors..................................................................................... |
258 |
Automating tasks...................................................................................................................................... |
260 |
Batch-processing................................................................................................................................................................ |
261 |
Custom commands............................................................................................................................................................. |
266 |
Extending Fireworks........................................................................................................................................................... |
267 |
Find and replace................................................................................................................................................................. |
268 |
Scripting.............................................................................................................................................................................. |
271 |
Preferences and keyboard shortcuts........................................................................................................ |
273 |
Customize using configuration files.................................................................................................................................... |
274 |
Select and customize keyboard shortcuts.......................................................................................................................... |
275 |
Set preferences.................................................................................................................................................................. |
277 |
View application package contents (Mac OS only)............................................................................................................. |
280 |
What’s new
1
What’s new in CS6
Extract CSS object properties Export slices as CSS sprite Creating jQuery mobile themes Performance improvements
Set opacity separately for fill and stroke Color selection improvement
Set the angle for gradient or pattern fills New fw.png filename extension Miscellaneous enhancements
API enhancements
Extract CSS object properties
To the top
You can extract CSS object properties, such as rounded corners, gradients, drop shadows, and transformations.
1.Select the object.
2.Select Window > CSS Properties.
3.Click Copy All to copy the CSS properties of the selected object. Click Copy Selected to copy individual properties. For more information, see Extract CSS properties from design objects using Fireworks CS6.
Export slices as CSS sprite
To the top
You can slice objects in a document and export them as a single CSS sprite image. Using a single CSS sprite image instead of multiple images improves the loading time of a website by reducing the number of server requests.
When you export slices as a CSS sprite image, with the image file, a CSS file that contains the displacement values is also generated.
1.Right-click the slice or group of slices.
2.Select Export CSS Sprite.
3.In the Export dialog box, click Export.
For more information, see Working with CSS sprites in Fireworks CS6.
Creating jQuery mobile themes
To the top
You can create jQuery mobile themes based on default sprites and swatches. You can also preview the jQuery mobile theme and export it as CSS and sprites.
To create a mobile theme, select Commands > jQuery Mobile Theme > Create New Theme.
To preview mobile themes in a browser, select Commands > jQuery Mobile Theme > Preview Theme.
To export a mobile theme as sprites and CSS, select Commands > jQuery Mobile Theme > Export Theme.
To preview the theme, select Window > Extensions > jQuery Mobile Theme In-App Preview.
To add an icon placeholder, select jQuery Mobile Theme > Insert Icon Placeholder. For more information, see Create jQuery Mobile themes using Fireworks CS6.
Performance improvements
To the top
To address the not enough memory issue, the usage of GDI objects by Fireworks has been reduced.
Memory usage limit increased on Windows 64-bit computers for better stability when opening and saving large files. On Mac OS, improved refresh rate of the Property Inspector when switching between objects.
Set opacity separately for fill and stroke
To the top
1. Select the object and select the Stroke or Fill color picker. Alternatively, select the Fill or Stroke color picker from the Tools bar.
2
2.Click the Opacity slider.
3.Drag the slider to the desired value.
On Mac OS, type the value in the text box.
Color selection improvement
To the top
Use buttons to specify fill type options such as no fill, solid, gradient, and patterns in the Property inspector and Tools bar. Previously, these options were handled through drop-down menus.
You can now specify Stroke position (inside, center, outside) using the Stroke dialog box.
Set the angle for gradient or pattern fills
To the top
1.Select the object.
2.In the Property Inspector, select the gradient or pattern fill.
3.In the Edit Gradient or Edit Pattern dialog box, specify the angle value.
New fw.png filename extension
To the top
When you save a file, it is saved with the fw.png extension by default.
To change the default behavior, select Edit > Preferences. In the General tab of the Preferences dialog box, deselect Append .fw.png, and click OK.
You can also remove this extension in the Save As dialog box.
Miscellaneous enhancements
To the top
Enhancements to the Styles panel.
Location node for color stop in the Gradient tool is highlighted.
Using the Eyedropper tool, you can copy, fill, and stroke color.
Select the Eyedropper tool, right-click the object, and select the desired option.
You can now locate the default Fireworks template and common library symbols in the Users directory. If a common library symbol is deleted, a new copy of the symbol is created when you restart Fireworks.
The selected object name and zoom level now do not appear in the document's title bar. This information is available in the Layers panel and application bar.
Updates to the path panel and swatches.
On Mac OS, you can now preview the image files in Google Chrome.
The Path option that gives quick access to many path-related commands is provided in the Window menu. The Group as Mask option is provided with the right-click context menu.
The default optimization setting for a new file is PNG32. Deprecated features:
AIR export
Create slide show
Flex Skinning
Device Central
Share My Screen
You can now lock constraints for the Crop tool using the Property Inspector. Thumbnail icons for objects in the Layers panel.
The following assets are now available in the common library: Gesture, Icons, iPhone, jQuery Bootstrap, Wireframe, Wireframe-Ads, Wireframe-iPad, Wireframe-iPhone, and Wireframe Windows Phone 7.
Styles library has been updated with the following categories: Button symbol styles, fill design patterns, stroke color dots, and web button styles.
Tool tips are now available for the File Import operation.
While saving a symbol to the common library, it is retained on the canvas. More options are now available for patterns and textures.
Inside the Gradient Fill dialog box, use CTRL+Left or CTRL+Right Arrow keys to navigate between the color stops or opacity stops. On Mac, use Command+LEFT or Command+Right.
3
Libraries are updated with more patterns and textures.
API enhancements |
To the top |
|
New methods
fw.appTemplatesDir: Returns the path to the template directory.
fw.commonLibraryDir: Returns the path to the common library directory.
fw.activeTool: Ascertains whether the active tool is the specified tool.
For example, use if(fw.activeTool==Tools.pen) to discover whether the active tool is the Pen tool. This method does not depend on the tool name in the localized language.
fw.appPatternsDir: Returns the path to the Patterns directory.
fw.appTexturesDir: Returns the path to the Textures directory.
fw.reloadPatterns: Reloads the patterns from the Patterns directory.
fw.reloadTextures: Reloads the texture from the Textures directory. dom.updateSymbol: Updates the symbol imported from the common library.
Updated methods
fw.browseForFileURL(browseType, title, previewArea, startFolder): A new optional parameter, startFolder, specifies the root directory for the Browse dialog box.
fw.setDocumentImageSize(boundingRectangle, resolution, currentPageOnly, interpolationMethod): A new optional parameter, interpolationMethod, takes integer values from 1 to 4 specifying bicubic, bilinear, soft, and nearest neighbor, respectively.
fw.saveAs(doc, url, defaultFromOptions): Default value for the defaultFromOptions parameter is changed to false. If it is set to true, the file is saved with the current optimization settings.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.
Legal Notices | Online Privacy Policy
4
What’s new
Improved performance, stability
Pixel Precision
Adobe Device Central integration
Supported workflows with Flash Catalyst and Flash Builder
Extensibility improvements
Swatch sharing across the suite
Improved performance, stability
Numerous improvements to most frequently used tools in Fireworks that help increase your work efficiency Faster overall performance
Greater control over pixel placement of design elements Updated compound path tool
Pixel Precision
To the top
To the top
Enhanced pixel precision ensures that your designs look crisp and clean on any device. Quickly and easily correct design elements that do not appear on a whole pixel.
Adobe Device Central integration
To the top
Using Adobe Device Central, you can select profiles for mobile or other devices, then start an automated workflow to create a Fireworks project. The project has the screen size and resolution of the target device. After the design is complete, you can preview the design under various conditions using the emulation capabilities of Device Central. You can also create custom device profiles.
Improved mobile design workflows including emulation of interactive designs with integration with Adobe Device Central.
Supported workflows with Flash Catalyst and Flash Builder
To the top
Create advanced user interfaces and interactive content using new workflows between Fireworks and Flash Catalyst.Design in Fireworks and select objects, pages, or whole documents to export through FXG, a new XML-based graphics format for the Adobe Flash Platform tools. Export your designs efficiently to Flash Professional, Flash Catalyst and Flash Builder through a customizable extensible script.
Extensibility improvements
To the top
Experience greater control when working with other applications: Enhanced API supporting user-extensible export scripts, batch processing, and advanced control over the FXG file format.
Swatch sharing across the suite
To the top
Better control over color accuracy using the ability in Fireworks to conveniently share swatches across Creative Suite applications. The ability to share the ASE file format encourages unified color exchange among designers including those using Adobe Kuler.
Legal Notices | Online Privacy Policy
5
Fireworks basics
Learn Fireworks CS6 video tutorials video-tutorial (May. 2, 2012)
6
Create Fireworks PNG files from HTML files
Open only the first table of an HTML file
Import the first table of an HTML file into an open Fireworks document
Fireworks can open and import HTML content created in other applications that contain basic HTML table elements.
Open only the first table of an HTML file
To the top
1.Select File > Open.
2.Select the HTML file that contains the table you want to open, and click Open. The first table in the HTML file opens in a new document window.
Import the first table of an HTML file into an open Fireworks document
To the top
1.Select File > Import.
2.Select the HTML file you want to import from, and click Open.
3.Click to place the insertion point where you want the imported table to appear.
Note: Fireworks can import documents that use UTF-8 encoding and those that are written in XHTML.
Legal Notices | Online Privacy Policy
7
Creating a new Fireworks document
Create a new document
Set default dimensions for new document
Create a new document the same size as an object on the Clipboard
New documents in Fireworks are saved as Portable Network Graphic (PNG) documents. PNG is the native file format for Fireworks.
Graphics created in Fireworks can be exported to or saved in several web and graphic formats. Regardless of the optimization and export settings you select, the original Fireworks PNG file is preserved to allow easy editing later.
Create a new document
To the top
1.Select File > New.
The New Document dialog box opens.
2.Enter document settings and click OK.
Note: Use the Custom color box pop-up window to select a custom canvas color.
Set default dimensions for new document
To the top
When you open Fireworks for the first time, the following values for dimensions appear in the New Document dialog as default:
660 x 440 (Windows)
500 x 500 (Mac)
Settings in the New Document dialog are not changed when you change the canvas size in Fireworks.
The default settings get changed when you copy an object. Dimensions of the copied object (on the clipboard) are automatically used for dimensions in the New Document dialog.
To clear object dimensions from the clipboard, do the following (Windows):
1.Create a document with the preferred dimensions.
2.Save the document, and close Fireworks.
3.Reopen Fireworks, and create a document.
The dimensions of the previously saved document appear in the New Document dialog.
For Mac OS, Fireworks retains the dimension of a previously copied object when creating a new document. This is because clipboard contents are retained until you cut or copy other elements, such as text. If you copy elements unrelated to dimensions, and then select "New", the previouslysaved size appears as default.
To the top
8
Create a new document the same size as an object on the Clipboard
1.Copy an object to the Clipboard from another Fireworks document, a web browser, or from any application that is acceptable for pasting.
2.Select File > New.
The New Document dialog box opens with the width and height dimensions of the object on the Clipboard.
3.Set the resolution and canvas color, and click OK.
4.Select Edit > Paste to paste the object from the Clipboard into the new document.
More Help topics
Legal Notices | Online Privacy Policy
9
Fireworks basics
Draw and edit vector and bitmap objects Add interactivity to graphics
Optimize and export graphics Vector and bitmap graphics
Adobe® Fireworks® is a versatile program for creating, editing, and optimizing web graphics. You can create and edit both bitmap and vector images, design web effects such as rollovers and pop-up menus, crop and optimize graphics to reduce their file size, and save time by automating repetitive tasks. You can export or save a document as a JPEG file, GIF file, or file of another format. These files can be saved along with HTML files containing HTML tables and JavaScript code so you can use them on the web.
For a video tutorial that introduces Fireworks basics, see www.adobe.com/go/lrvid4032_fw.
Draw and edit vector and bitmap objects
To the top
The Fireworks Tools panel includes distinct sections containing tools for drawing and editing vectors and bitmaps. The tool you select determines whether the object you create is a vector or a bitmap. After drawing an object or text, you can use a wide array of tools, effects, commands, and techniques to enhance your graphics or to create interactive navigation buttons.
You can also import and edit graphics in JPEG, GIF, PNG, PSD, and many other file formats.
Add interactivity to graphics
To the top
Slices and hotspots are web objects that specify interactive areas in a web graphic. Slices cut an image into exportable sections to which you can apply rollover behaviors, animation, and Uniform Resource Locator (URL) links. On a web page, each slice appears in a table cell.
Use the drag-and-drop rollover handles on slices and hotspots to quickly assign swap image and rollover behaviors to graphics. Use the Fireworks Button Editor and Pop-up Menu Editor to build special interactive graphics for navigating websites.
Optimize and export graphics
To the top
Use the powerful optimization features of Fireworks to achieve the right balance between file size and acceptable visual quality for exported graphics. The type of optimization you choose depends on the needs of your users and the content.
After you optimize your graphics, the next step is to export them for use on the web. From your Fireworks source PNG document, you can export files of a number of types, including JPEG, GIF, animated GIF, and HTML tables containing sliced images in multiple file types.
Vector and bitmap graphics
To the top
Computers display graphics in either vector or bitmap format. Understanding the difference between the two formats helps you understand Fireworks, which contains both vector and bitmap tools and is capable of opening or importing both formats.
About vector graphics
Vector graphics render images using lines and curves (vectors) that include color and position information. For example, the image of a leaf can be defined by a series of points that describe the outline of the leaf. The color of the leaf is determined by the color of its outline (the stroke) and the color of the area enclosed by the outline (the fill).
Vector graphics are resolution-independent. That means the quality of a vector graphic's appearance won't change when you change its color;
10
move, resize, or reshape it; or when the resolution of the output device changes.
About bitmap graphics
Bitmap graphics are composed of dots (pixels) arranged in a grid. Your computer screen is a large grid of pixels. In a bitmap version of the leaf, the image is determined by the location and color value of each pixel in the grid. Each pixel is assigned a color. When viewed at the correct resolution, the dots fit together like tiles in a mosaic.
When you edit a bitmap graphic, you modify pixels rather than lines and curves. These bitmap graphics are resolution-dependent, which means that the data describing the image is fixed to a grid of a particular size. Enlarging a bitmap graphic redistributes the pixels in the grid, which can make the edges of the image appear ragged. Displaying a bitmap graphic on an output device with a lower resolution than the image itself can also degrade the image's quality.
More Help topics
Legal Notices | Online Privacy Policy
11
Insert objects into a Fireworks document
Drag an image or text into Fireworks
Paste into Fireworks
Location of pasted objects
Resample pasted objects
Import a PNG file into a Fireworks document layer
Import from a digital camera or scanner
Drag an image or text into Fireworks
To the top
You can drag vector objects, bitmap images, or text from any application that supports dragging. 
From the other application, drag the object or text into Fireworks.
Paste into Fireworks
To the top
Pasting an object copied from another application into Fireworks places the object in the center of the active document. Text or objects in any of these formats can be pasted from the Clipboard:
Adobe FreeHand 7 or later
Adobe Illustrator
PNG
PICT (Mac OS)
DIB (Windows)
BMP (Windows)
ASCII text
EPS
WBMP
TXT RTF
1.In the other application, copy the object or text that you want to paste.
2.In Fireworks, paste the object or text into your document.
Location of pasted objects
To the top
The placement of the pasted object depends on what is selected:
If at least one object on a single layer is selected, the pasted object is placed in front of (stacked directly above) the selected object on the same layer.
If the layer itself is selected and either no objects or all objects are selected, the pasted object is placed in front of (stacked directly above) the topmost object on the same layer.
If two or more objects on more than one layer are selected, the pasted object is placed in front of (stacked directly above) the topmost object in the topmost layer.
If the Web Layer or an object on the Web Layer is selected, the pasted object is placed in front of (stacked above) all other objects on the bottommost layer.
Note: The Web Layer is a special layer that contains all web objects. It always remains at the top of the Layers panel.
Resample pasted objects
To the top
12
Resampling adds pixels to or subtracts pixels from a resized bitmap to match the appearance of the original bitmap as closely as possible.
Resampling a bitmap to a higher resolution typically causes little loss of quality. Resampling to a lower resolution always causes data loss and usually results in a drop in quality.
Resample a bitmap object by pasting
1.Copy the bitmap to the Clipboard in Fireworks or another program.
2.Select Edit > Paste in Fireworks.
3.If the bitmap image on the Clipboard has a different resolution than the current document does, choose a resample option. Resample Maintains the original width and height of the pasted bitmap, adding, or subtracting pixels as necessary.
Don't Resample Maintains all the original pixels, which may make the relative size of the pasted image larger or smaller than expected.
Import a PNG file into a Fireworks document layer
To the top
When you import Fireworks PNG files into the current layer of the active Fireworks document, hotspot objects and slice objects are placed on the document's Web Layer. Fireworks retains the proportions of the imported image.
1.In the Layers panel, select the layer into which you want to import the file.
2.Select File > Import to open the Import dialog box.
3.Navigate to the file you want to import and click Open.
4.On the canvas, position the import pointer where you want to place the upper left corner of the image.
5.Do one of the following:
Click to import the full-size image.
Drag the import pointer to resize the image as you import.
Import from a digital camera or scanner
To the top
You can import images from a digital camera or scanner only if it is TWAIN compliant (Windows) or uses built-in Image Capture capability (Mac OS). Images imported into Fireworks from a digital camera or scanner open as new documents.
Before you try to import images into Fireworks, install all required software drivers, modules, and plug-ins for the camera or scanner.
The Plug-ins folder is located inside the Fireworks application folder. In Mac OS, Fireworks automatically looks for Photoshop Acquire plug-ins in that folder.
Direct Fireworks to Photoshop Acquire plug-ins
1.In Fireworks, select Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS).
2.Click the Plug-ins category.
3.Select Photoshop Plug-Ins and navigate to the folder containing the plug-ins.
If the Select The Photoshop Plug-ins Folder (Windows) or Choose A Folder (Mac OS) dialog box doesn't open automatically, browse to the folder.
Import an image from a digital camera (Windows)
1.Connect the camera to your computer.
2.In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select.
3.Select the source for the images and the images you want to import. The user interface for your camera software appears.
4.Follow the instructions to apply settings.
Import an image from a digital camera (Mac OS)
1.Connect the camera to your computer.
2.In Fireworks, select File > Acquire, and then select either Camera Acquire or Camera Select.
3.Select the camera and the images you want to import.
13
4. Follow the instructions to apply settings.
Import an image from a scanner
1.Connect the scanner to your computer.
2.Install the software that accompanies the scanner if you have not already done so.
3.Do one of the following:
(Windows) In Fireworks, select File > Scan, and then select either Twain Acquire or Twain Select. (Mac OS) In Fireworks, select File > Acquire, and then select either Twain Acquire or Twain Select.
Note: For most TWAIN modules or Photoshop Acquire plug-ins, additional dialog boxes prompt you to set other options.
4. Follow the instructions to apply settings. More Help topics
Legal Notices | Online Privacy Policy
14
Opening and importing files
Open a Fireworks document Open a recently closed file
Open a recently closed file when no files are open Open graphics created in other applications
Note: When you import a file from Adobe Dreamweaver®, Fireworks preserves many, but not all JavaScript behaviors. If Fireworks supports a particular behavior, it recognizes that behavior and maintains it when you move a file back to Dreamweaver.
Open a Fireworks document
To the top
Select File > Open and select the file.
To open a file without overwriting the previous version, select Open As Untitled, and then save the file using a different name.
Open a recently closed file
To the top
1.Select File > Open Recent.
2.Select a file from the submenu.
Open a recently closed file when no files are open
To the top
Click the file name on the Start page.
Open graphics created in other applications
To the top
You can open files created in other applications or file formats, including Photoshop®, Adobe Illustrator®, WBMP, EPS, JPEG, GIF, and animated GIF files.
When you open a file format other than PNG using File > Open, you create a new Fireworks PNG document based on the file you open. You can use all of the features of Fireworks to edit the image. You can then either select Save As to save your work as a new Fireworks PNG file or as another file format.
In some cases, you can save the file in its original format. If you do this, the image flattens to a single layer, and you will be unable to edit the Fireworks-specific features you added to the image.
The following file formats can be saved directly from Fireworks: Fireworks PNG, GIF, animated GIF, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD, and PICT (Mac only).
Note: Fireworks saves 16-bit TIFF images at 24-bit color depth.
Animated GIFs
Import an animated GIF as an animation symbol and then edit and move all the elements of the animation as a single unit. Use the Document Library panel to create new instances of the symbol.
Note: When you import an animated GIF, the state delay setting defaults to 0.07 seconds. If necessary, use the States panel to restore the original timing.
Open an animated GIF as you would open a normal GIF file. Each element of the GIF is placed as a separate image in its own Fireworks state. You can convert the graphic to an animation symbol in Fireworks.
EPS files
Fireworks opens most EPS files as flattened bitmap images in which all objects are combined on a single layer. Some EPS files exported from Adobe Illustrator retain their vector information.
PSD files
Fireworks can open PSD files created in Photoshop and preserve most PSD features, including hierarchical layers, layer effects, and commonly used blend modes. Use the various options for Photoshop Import/Open in the Preferences dialog box to customize PSD import.
15
WBMP files
Fireworks can open WBMP files, which are 1-bit (monochrome) files optimized for mobile computing devices. This format is for use on Wireless Application Protocol (WAP) pages.
You can use the Import Multiple Files extension to import multiple selected files into new pages of a Fireworks PNG file. This utility helps you aggregate your project files created in earlier versions of Fireworks. You can also import flattened PNG file, PSD, AI, BMP, Freehand, GIF, animated GIF, JPEG, PICT, and TIFF formats. You can download this extension from http://www.adobe.com/go/learn_fw_multiplepages_en.
More Help topics
Legal Notices | Online Privacy Policy
16
Saving Fireworks files
Save a Fireworks PNG file for use in an earlier version Save all open documents
Save documents in other formats Add a picture frame
Reset warning messages
Take screenshot (Windows only)
When you create a document or open files in formats like PSD or HTML, the File > Save command creates a Fireworks PNG file. Fireworks PNG files have the following advantages:
The source PNG file is always editable. You can go back and make additional changes even after you export the file for use on the web.
You can slice complex graphics into pieces in the PNG file and export them as multiple files with different file formats and various optimization settings.
If Fireworks takes time to save a complex document, you can edit other open documents while the save operation completes.
Save a Fireworks PNG file for use in an earlier version
To the top
1.Select File > Export.
2.Browse to the location where you want to save the file.
3.If the Fireworks file has more than one page, select Pages To Files in the Export pop-up menu.
4.Select either Images or Fireworks PNG in the Export As pop-up menu. If you select Images, each page is saved in the default file format. This file format can be set using the Optimize panel. For more information see Optimizing and exporting.
All objects on the top-level layers are saved in the export. Items on sublayers are not exported.
Save all open documents
To the top
You can save all open documents even while continuing to work on them and specify filenames for any unnamed documents. Documents that have changed since the last save appear with an asterisk (*) against the filename on the document tab.
Select Commands > Save All.
Note: You can use the Fireworks Auto Backup utility to automatically back up all open Fireworks documents. Download the utility from Adobe AIR Marketplace at http://www.adobe.com/go/learn_fw_autobackuputility_en.
Save documents in other formats
To the top
If you use File > Open to open a file in a format other than PNG, you can later select File > Save As to save your work as a new Fireworks PNG file, or you can select a different format.
For the following file types, you can choose File > Save to save the document in its original format: Fireworks PNG, GIF, animated GIF, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD, and PICT (Mac OS only). Fireworks saves 16-bit TIFF images at 24-bit color depth.
Note: If you save a PNG file as a bitmap file such as a GIF or JPEG, the graphic objects you manipulated in the PNG are no longer available in the bitmap file. To revise the image, edit the source PNG file and then export it again.
Add a picture frame
To the top
1.Select Commands > Creative > Add Picture Frame.
2.Select a pattern and set the frame size.
3.Click OK.
Reset warning messages
To the top
If you have disabled warning messages from reappearing, you can re-enable the messages.
17
Select Commands > Reset Warning Dialogs.
Take screenshot (Windows only)
To the top
1.Select Commands > Take Screenshot.
2.Switch to the window you want to take a screenshot of.
3.Click OK and then drag to select the area of the window.
4.Paste the clipboard contents on to the canvas or any image editing application. More Help topics
Legal Notices | Online Privacy Policy
18
Workspace
19
Change the canvas
Change the canvas size Change the canvas color
Resize a document and its contents About resampling
Rotate the canvas Trim or fit the canvas Crop a document
Use rulers, guides, and the grid Smart Guides
You can adjust the canvas at any time.
Change the canvas size
To the top
1. Do one of the following:
Select Modify > Canvas > Canvas Size.
Choose Select > Deselect, click the Pointer tool to display the document properties in the Property inspector, and click the Canvas Size button.
2.Enter the new dimensions in the Width and Height text boxes.
3.Click an Anchor button to specify which sides of the canvas Fireworks add to or delete from, and click OK.
Note: By default, the center anchor is selected, indicating that changes to the size of the canvas are made on all sides.
Change the canvas color
To the top
Do one of the following:
Select Modify > Canvas > Canvas Color, and select a color option. For a Custom color, click a color in the Swatches pop-up window.
From the Property inspector, choose Select > Deselect, click the Pointer tool to display the document properties, and click the Canvas color box. Pick a color from the Swatches pop-up window or click the eyedropper on a color. To select a transparent canvas, click the Transparent button in the Swatches pop-up window.
To change the default canvas color, click the Custom swatch in the New Document dialog box. (See Creating a new Fireworks document.)
Resize a document and its contents
To the top
1. Do one of the following:
Choose Select > Deselect, click the Pointer tool to display the document properties in the Property inspector, and click the Image Size button in the Property inspector.
Select Modify > Canvas > Image Size. The Image Size dialog box opens.
2.In the Pixel Dimensions text boxes, enter new horizontal and vertical dimensions.
(Optional) Change the units of measure. If Resample Image is deselected, you can change the resolution or print size but not pixel dimensions.
3.In the Print Size text boxes, enter horizontal and vertical dimensions for the printed image.
4.In the Resolution box, enter a new resolution for the image. Changing the resolution changes the pixel dimensions.
5.Do one of the following:
To maintain the same ratio between the document's horizontal and vertical dimensions, select Constrain Proportions.
20
To resize width and height independently, deselect Constrain Proportions.
6.To add or remove pixels when resizing so the image retains approximately the same appearance at a different size, select Resample Image.
7.Select Current Page Only to apply the canvas size change only to the current page.
About resampling
To the top
Fireworks resamples (resizes) images differently than most image-editing applications do.
When a bitmap object is resampled, pixels are added to or removed from the image to make it larger or smaller.
When a vector object is resampled, little quality loss occurs because the path is redrawn mathematically at a larger or smaller size.
Because the attributes of vector objects in Fireworks are visible as pixels, some strokes or fills may appear slightly different after resampling. This occurs because the pixels that compose the stroke or fill must be redrawn.
Note: Guides, hotspot objects, and slice objects are resized when the document's image size is changed.
You can alter the size of a bitmap image by adjusting the resolution or by resampling the image.
When adjusting the resolution, you change the size of the pixels in the image so that more or fewer pixels fit in a given space. Adjusting the resolution without resampling does not result in data loss.
When resampling, you either add or remove pixels:
Resampling up Adds pixels to make the image larger. This approach can result in quality loss because the pixels being added do not always correspond to the original image.
Downsampling Removes pixels to make the image smaller and results in data loss in the image. This approach always causes quality loss because pixels are discarded to resize the image.
Rotate the canvas
To the top
Rotate the canvas when an image is imported upside down or sideways. You can rotate the canvas 180°, 90° clockwise, or 90° counterclockwise. When you rotate the canvas, all objects in the document rotate.
Select Modify > Canvas > and choose a rotation option
Trim or fit the canvas
To the top
Expand or trim the size of the canvas to fit the objects it contains.
Original canvas (left); trimmed canvas (right)
1.Choose Select > Deselect to view the document properties in the Property inspector.
2.Click Fit Canvas in the Property inspector.
Crop a document
To the top
Cropping deletes unwanted portions of a document. The canvas is resized to fit an area that you define.
By default, cropping deletes objects that extend beyond the canvas boundaries. You can retain objects outside the canvas by changing a preference before cropping.
1. Select the Crop tool 
from the Tools panel or select Edit > Crop Document.
21
2.Drag a bounding box on the canvas. Adjust the crop handles until the bounding box surrounds the area that you want to keep.
3.Double-click inside the bounding box or press Enter to crop the document.
Fireworks resizes the canvas to the area you define and deletes objects beyond the edges of the canvas.
To retain objects outside the canvas, deselect Delete Objects When Cropping on the Edit tab of the Preferences dialog box before cropping.
Use rulers, guides, and the grid
To the top
Rulers, guides, and the grid are drawing aids that help you to place and align objects. Guides are lines that you drag onto the document canvas from the rulers. You can use guides to mark important parts of your document, such as the margins and the document center point. The grid displays a system of horizontal and vertical lines on the canvas for precise placement. Guides and grids do not reside on a layer and are not exported with a document.
You can use the following Fireworks extensions to work easily with guides:
Guides Panel extension When you install this extension, a Guides panel appears in your workspace, which allows you to manipulate the guides within the document or export and import guides from a previously saved set of guides. This extension is available at http://www.adobe.com/go/learn_fw_usingguidespanel_en.
Copy-Paste Guides extension This extension allows you to copy guides from one page and past them to another within the same document. Use this extension if your Fireworks document has multiple pages that need similar guides across pages. This extension is available at http://www.adobe.com/go/learn_fw_copypasteguides_en.
Inherit Guides extension This extension allows you to copy guides from the master page or the current page and apply to all pages in the document. This extension is available at http://www.adobe.com/go/learn_fw_inheritguides_en.
To change grid size or guide and grid color, see Guides and Grids preferences.
Show and hide rulers
Select View > Rulers.Vertical and horizontal rulers appear along the margins of the document window. Rulers measure in pixels.
Create a horizontal or vertical guide
1.Click and then drag from the corresponding ruler.
2.Position the guide on the canvas and release the mouse button.
Note: You can reposition the guide by dragging it again.
Move a guide to a specific position
1.Double-click the guide.
2.Enter the new position in the Move Guide dialog box, and click OK.
Show or hide guides or the grid
Select View > Guides > Show Guides or View > Grid > Show Grid.
The selection is applied across all documents open in Fireworks.
Snap objects to guides or to the grid
Select View > Guides > Snap To Guides or View > Grid > Snap To Grid.
The selection is applied across all documents open in Fireworks.
Lock or unlock all guides
Select View > Guides > Lock Guides.
The selection is applied across all documents open in Fireworks.
Remove a guide
Drag the guide off the canvas.
Display distance between guides
Press Shift when the pointer is placed between the guides.
Press Shift while dragging guides into the canvas to display the distance between guides.
22
Smart Guides
To the top
Smart Guides are temporary snap-to guides that help you create, align, edit, and transform objects relative to other objects. To activate and snap to Smart Guides, choose View > Smart Guides, and then select Show Smart Guides and Snap To Smart Guides.
You can use Smart Guides in the following ways:
When you create an object, use Smart Guides to position it relative to existing objects. The line, rectangle, ellipse, polygon, and autoshape tools display Smart Guides, as do the rectangular and circular slice tools.
When you move an object, use Smart Guides to align it with other objects.
When you transform an object, Smart Guides automatically appear to assist the transformation.
To change when and how Smart Guides appear, set Smart Guide preferences. (See Guides and Grids preferences.)
Legal Notices | Online Privacy Policy
23
Navigate, view, and preview documents
Use document tabs to select documents
Zoom and pan in and out
Use view modes to manage the workspace
Display multiple views of a document
View documents as they appear on different platforms
Preview in browser
Use document tabs to select documents
To the top
When your document is maximized, use the document tabs that appear at the top of the document window to move among multiple open documents. The filename of each open document appears on a tab located above the view buttons. When you move the mouse over the tab, the location of the file is displayed as a tooltip.
Zoom and pan in and out
To the top
A. Hand tool B. Zoom tool C. Set magnification pop-up menu
Zoom in, using preset increments
24
Do one of the following:
Select the Zoom tool and click to specify the new center point inside the document window. Each click magnifies the image to the next preset magnification.
Select a zoom setting from the Set Magnification pop-up menu at the bottom of the document window. Select Zoom In or a preset magnification from the View menu.
Zoom out, using preset increments
Do one of the following:
Select the Zoom tool and Alt-click (Windows) or Option-click (Mac OS) inside the document window. Each click reduces the view to the next preset percentage.
Select a zoom setting from the Set Magnification pop-up menu at the bottom of the document window. Select Zoom Out or a preset magnification from the View menu.
Zoom in on a specific area
1.Select the Zoom tool.
2.Drag over the part of the image that you want to magnify.
The size of the zoom selection box determines the precise magnification percentage, which is displayed in the Set Magnification box.
Note: You cannot enter a magnification percentage in the Set Magnification box.
Zoom out of a specific area
Alt-drag (Windows) or Option-drag (Mac OS) a selection area with the Zoom tool.
Return to 100% magnification
Double-click the Zoom tool in the Tools panel.
Pan around the document
1.Select the Hand tool.
2.Drag the hand pointer.
As you pan beyond the canvas edge, the view continues to pan so that you can work with pixels along the canvas edge.
Fit the document in the current view
Double-click the Hand tool in the Tools panel.
Use view modes to manage the workspace
To the top
In the Tools panel, select from one of three view modes to control the layout of your workspace.
Standard Screen mode The default document window view.
Full Screen with Menus mode A maximized document window view set against a gray background. Menus, toolbars, scroll bars, and panels are visible.
Full Screen mode A maximized document window view set against a black background. No menus, toolbars, or title bars are visible. For more information, see the article on the Fireworkszone website.
Display multiple views of a document
To the top
Use multiple views to see one document at different magnifications simultaneously. Changes you make in one view are automatically reflected in all other views of the same document.
1.Select Window > Duplicate Window.
2.Select a zoom setting for the new window.
View documents as they appear on different platforms
To the top
Windows and Mac OSX Snow Leopard version 10.6 use a display gamma of 2.2, by default, for their monitors. Macintosh (pre-Snow Leopard)
25
uses a gamma value of 1.8.
Do one of the following:
In Windows, select View > Gamma 1.8 to view the document as displayed on a Macintosh (pre-Snow Leopard). On the Macintosh®, select View > Gamma 1.8 to view the document as displayed in Mac (pre-Snow Leopard).
Preview in browser
To the top
Select File > Preview In Browser, and choose one of the options.
Preview All Pages In <primary browser> Ctrl+F12/Cmd+Shift+F12 You can preview interaction among all pages if they are linked to each other.
Preview In <primary browser> F12 Previews the active Fireworks document in your primary browser. If you have only one browser installed on your computer, Fireworks uses it as the primary browser. If you have more than one browser installed, you can select a primary browser for displaying Fireworks documents using File > Preview in Browser > Set Primary Browser.
Preview In Shift/Cmd+F12 Previews the active Fireworks document in your secondary browser. Before using this option, set your secondary browser using File > Preview In Browser > Set Secondary Browser. Navigate to and select the EXE/app file of your secondary browser.
Legal Notices | Online Privacy Policy
26
Loading...