Adobe 38039927 - Fireworks CS3 - PC Скачать руководство пользователя страница 155

Страница: 155 / 369

ADOBE FIREWORKS CS3

User Guide

150

To apply a solid shadow:

In the Property inspector, click the Add Live Filters button, point to Shadow and Glow, and then click Solid

Shadow.

In the Solid Shadow dialog box, adjust the filter settings:

•

Drag the Angle slider to set the direction of the shadow.

•

Drag the Distance slider to set the distance of the shadow from the object.

•

Select the Solid Color check box to apply solid color to the shadow.

•

Select the color box to open the color pop-up window and set the shadow color.

•

If you don’t want to see a preview of the solid shadow, clear the Preview check box.

When you finish, click OK.

To apply a drop shadow or inner shadow:

Click the Add Live Filters button in the Property inspector, then select a shadow option from the pop-up menu:

•

Shadow and Glow > Drop Shadow.

•

Shadow and Glow > Inner Shadow.

Edit the filter settings in the pop-up window:

•

Drag the Distance slider to set the distance of the shadow from the object.

•

Select the color box to open the color pop-up window and set the shadow color.

•

Drag the Opacity slider to set the percentage of transparency in the shadow.

•

Drag the Softness slider to set the sharpness of the shadow.

•

Drag the Angle dial to set the direction of the shadow.

•

Select Knock Out to hide the object and display the shadow only.

When you finish, click outside the window or press Enter to close it.

To apply a glow:

Click the Add Filters button in the Property inspector, then select Shadow and Glow > Glow.

Edit the filter settings in the pop-up window:

•

Click the color box to open the color pop-up window and set the glow color.

•

Drag the Width slider to set the width of the glow.

•

Drag the Opacity slider to set the percentage of transparency in the glow.

•

Drag the Softness slider to set the sharpness of the glow.

•

Drag the Offset slider to specify the distance of the glow from the object.

When you finish, click outside the window or press Enter to close it.

Applying filters and Photoshop plug-ins as Live Filters

You can apply all the built-in filters and plug-ins in the Add Filters pop-up menu as Live Filters using the Property
inspector. Applying them as Live Filters ensures that you can edit or remove them from an object anytime.

Note:

The menu known as the Xtras menu in some previous versions of Fireworks is called the Filters menu in Fireworks

8 and later. Fireworks Xtra extensions are now known as filters.

Содержание 38039927 - Fireworks CS3 - PC

Страница 1: ...USING FIREWORKS ...

Страница 2: ... HomeSite Illustrator Photoshop and XMP are either registered trade marks or trademarks of Adobe Systems Incorporated in the United States and or other countries Apple and Macintosh are trademarks of Apple Inc registered in the United States and other countries Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and or other countries ...

Страница 3: ... and distorting selected objects and selections 54 Organizing objects 58 Chapter 4 Working with Bitmaps Working with bitmaps 61 Creating bitmap objects 61 Accessing photo editing tools 63 Drawing painting and editing bitmap objects 63 Retouching bitmaps 66 Adjusting bitmap color and tone 71 Blurring and sharpening bitmaps 79 Adding noise to an image 83 Chapter 5 Working with Vector Objects Drawing...

Страница 4: ... layers 159 Masking images 164 Blending and transparency 179 Chapter 10 Using Styles Symbols and URLs Using styles 183 Using symbols 186 Working with URLs 196 Chapter 11 Slices Rollovers and Hotspots Creating and editing slices 200 Making slices interactive 205 Preparing slices for export 211 Working with hotspots and image maps 216 Chapter 12 Creating Buttons and Pop up Menus Creating button symb...

Страница 5: ...ith FreeHand 312 Working with Director 317 Working with HomeSite 320 Working with Photoshop 322 About working with Illustrator 326 About working with GoLive 327 About working with HTML editors 327 About extending Fireworks 328 About Adobe XMP 328 About Adobe Bridge 328 Flex integration for rich Internet application layouts MXML export 329 Chapter 17 Automating Repetitive Tasks Finding and replacin...

Страница 6: ...l creative professionals and developers remain focused on their vision and achieve the highest quality results in less time This chapter covers the following topics Installation on page 1 Adobe Help on page 2 Resources on page 4 What s new in Fireworks CS3 on page 8 Installation Requirements To review complete system requirements and recommendations for your Adobe software see the Read Me html fil...

Страница 7: ...ks At some point you may need to view or access the files installed with Fireworks During installation Fireworks places files in various locations on your system It s important to understand why these files reside where they do For more information see Working with configuration files on page 350 Macintosh users should pay special attention to the format Fireworks uses to store the program and its...

Страница 8: ...Help menu After you start the Adobe Help Viewer click Browse to see Help for additional Adobe products installed on your computer To help you learn about multiple Adobe products these features are available You can search across Help for multiple products Topics may contain links to topics in Help for other Adobe products or to additional content on the web Some topics are shared across multiple p...

Страница 9: ...reworks including Fireworks Help PDF versions of the Fireworks documentation components and several web based information sources Fireworks Help called Using Fireworks intended for all users gives comprehensive information about all Fireworks features You can access it at any time in Fireworks help Help Using Fireworks The manual is also available in PDF format on the Adobe website at www adobe co...

Страница 10: ...rn_videotutorials Adobe will regularly add new videos to the online Video Workshop so check in to see what s new Fireworks CS3 videos Adobe Video Workshop covers a wide range of subjects for Adobe Fireworks CS3 including Using the Pages panel Rapid prototyping with rich symbols Understanding layers and layout Generating symbol property scripts Videos also show you how to use Fireworks CS3 with oth...

Страница 11: ...are copied to your computer during installation Windows startup drive Program Files Common Files Adobe Fonts Mac OS X startup drive Library Application Support Adobe Fonts For information about installing fonts see the Read Me html file on the installation DVD DVD content The installation or content DVD included with your product contains additional resources for use with your software The Goodies...

Страница 12: ...link for access to Adobe Press books a variety of training resources Adobe software certification programs and more Downloads Visit www adobe com go downloads to find free updates tryouts and other useful software In addition the Adobe Store at www adobe com go store provides access to thousands of plug ins from third party developers helping you to automate tasks customize workflows create specia...

Страница 13: ... to intelligently scale vector or bitmap symbols By positioning a set of guides over your artwork you can define exactly how each part of a symbol is scaled Any of nine different regions can be specified to scale only horizontally scale only vertically scale both horizontally and vertically or to not scale at all The feature which is on by default can also be set to scale just three regions When c...

Страница 14: ...mplate for the final output and automatically batch process the required thumbnail and full size images that are optimized for the web For more information see Creating Slideshows on page 250 Hierarchical layers In Fireworks CS3 the structure of layers in a document can be as simple or as complex as required and all hierar chical layers are preserved When creating a new file all items are organize...

Страница 15: ...rt is there s no work necessary on your part because Fireworks exports the necessary Flex code MXML for you Now you can easily create a Flex application layout in Fireworks leveraging Flex common library assets as MXML for loading into Flex Builder Work with Illustrator files Open Illustrator files in Fireworks while preserving hierarchical layers patterns linked images text attributes transparenc...

Страница 16: ...Bridge and Fireworks together means you can take advantage of XMP metadata in your files Adobe XMP Extensible Metadata Platform is a technology that assists the user in adding file information to files saved in PNG GIF JPEG Photoshop and TIFF formats and facil itates the exchange of metadata between Adobe software and other systems that support the XMP metadata standard For more information see Ab...

Страница 17: ...ironment on page 24 About working in Fireworks 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 When a document is complete you can export or save it as a JPEG f...

Страница 18: ...tes About optimizing and exporting graphics Fireworks has powerful optimization features to help you find the balance between file size and acceptable visual quality as you prepare to export graphics You can optimize web graphics in Fireworks to minimize their file size so that they load quickly into websites while comparing the quality of the graphics in the Preview 2 Up or 4 Up views in the work...

Страница 19: ...utions without changing the quality of its appearance About bitmap graphics Bitmap graphics are composed of dots called 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 li...

Страница 20: ...ons later in the Property inspector To create a new document 1 Select File New The New Document dialog box opens 2 Enter the canvas width and height measurements in pixels inches or centimeters 3 Enter a resolution in pixels per inch or pixels per centimeter 4 Select white transparent or a custom color for the canvas Note Use the Custom color box pop up window to select a custom canvas color 5 Cli...

Страница 21: ... 10 recently closed documents in the Open Recent submenu The Start Page also lists recently closed documents To open a recently closed file 1 Select File Open Recent 2 Select a file from the submenu To open a recently closed file when no files are open Click the file name on the Start page Opening graphics created in other applications With Fireworks you can open files created in other application...

Страница 22: ...t Illustrator EPS files that contain vector information the Vector File Options dialog box opens This is the same dialog box that appears when you open or import FreeHand files PSD files Fireworks CS3 can open PSD files created in Photoshop and preserve all or most of the PSD features including hierarchical layers layer effects and commonly used blend modes WBMP files Fireworks can open WBMP files...

Страница 23: ...le you want to open and click Open The first table in the HTML file opens in a new document window To import the first table of an HTML file into an open Fireworks document 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 d like the imported table to appear Inserting objects into a Fireworks document You can import dr...

Страница 24: ...pmost 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 or 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 or stacked above all other objects on the bottommost layer Note The Web Layer is a special layer that con...

Страница 25: ...ant to place the upper left corner of the image 5 Import the file Click to import the full size image Drag the import pointer to resize the image as you import Fireworks retains the proportions of the image Importing from a digital camera or scanner You can import images from a digital camera or scanner only if it is TWAIN compliant Windows or uses built in OS X Image Capture capability Macintosh ...

Страница 26: ...lect either Camera Acquire or Camera Select 4 In the Select Camera dialog box select a camera and then click OK 5 In the Select Images dialog box select the images you want to import and then click OK Note The Select Images dialog box only displays file types that are supported by Fireworks 6 Follow the instructions to apply the desired settings The imported image is opened as a new Fireworks docu...

Страница 27: ...es are saved on your operating system Saving Fireworks PNG files When you create a new document or open an existing Fireworks PNG file the document s filename has the extension png The file displayed in the Fireworks document window is your source file or working file Using a Fireworks PNG file as your source file has the following advantages The source PNG file is always editable You can go back ...

Страница 28: ...PNG file and then export it again tt You can save to the following file formats directly Fireworks PNG GIF animated GIF JPEG BMP WBMP TIFF SWF AI PSD and PICT Macintosh only Fireworks saves 16 bit TIFF images at 24 bit color depth Files of other types such as PSD and HTML open as PNG files allowing you to use the Fireworks PNG document as your source file Any edits you perform are applied to the P...

Страница 29: ... newly selected tool or currently selected object as you work in the document The panels are initially docked in groups along the right side of the screen The document window appears in the center of the program Using the Start page When you start Fireworks without opening a document the Fireworks Start page appears in the work environment The Start page gives you quick access to Fireworks tutoria...

Страница 30: ...ol For other tools such as the basic shape Pen and Line tools the Property inspector displays the properties of selected objects For more information about the Property inspector see Using the Property inspector on page 26 To display tool options in the Property inspector for a tool that you are already using Choose Select Deselect to deselect all objects For information about specific tool option...

Страница 31: ... Property inspector can be open at half height displaying two rows of properties or at full height displaying four rows You can also fully collapse the Property inspector while leaving it in the workspace Note Most procedures in Using Fireworks assume that the Property inspector is displayed at full height To undock the Property inspector Drag the gripper at the upper left corner to another part o...

Страница 32: ... s size and file type and work with the color palette of the file or slice to be exported The Layers panel organizes a document s structure and contains options for creating deleting and manipulating layers The Common Library panel displays the contents of the Common Library folder which contains symbols The Pages panel displays the pages in the current file and contains options for manipulating p...

Страница 33: ... bitmap editing into one panel Path panel under Others provides quick access to many path related commands Special Characters under Others displays the special characters that can be used in text blocks Symbol Properties manages the customizable properties of graphic symbols Organizing panel groups and panels By default Fireworks panels are docked in groups in the docking area on the right side of...

Страница 34: ...for your screen resolution do one of the following Select Window Workspace Layouts 1024 x 768 Select Window Workspace Layouts 1280 x 1024 To open a panel Select the panel name from the Window menu A check mark next to a panel name in the Window menu indicates that the panel is open To close a panel do one of the following Select the panel name from the Window menu Click the Close button in the pan...

Страница 35: ...r panel Options menu 1 Click the Options menu icon in the upper right corner of the panel group or panel to open the menu 2 Select a menu item Saving panel layouts You can save the layout of panels by using the Commands menu Then the next time you open Fireworks the panels are arranged in the same position in the workspace To save a workspace layout 1 Select Window Workspace Layouts Save Current 2...

Страница 36: ...n click the close button at the upper right of the title bar to close it To dock a toolbar Drag the toolbar onto a docking area at the top bottom left or right of the application window until the placement preview rectangle appears Navigating and viewing documents You can control your document s magnification its number of views and its display mode In addition you can easily pan the view of a doc...

Страница 37: ...a preset magnification from the View menu To zoom out using preset increments do one of the following Select the Zoom tool and Alt click Windows or Option click Macintosh 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...

Страница 38: ...en mode is a maximized document window view set against a black background with no menus toolbars or title bars visible To change view modes do one of the following To change to Full Screen with Menus mode click the Full Screen with Menus Mode button in the Tools panel To change to Full Screen Mode click the Full Screen Mode button in the Tools panel To return to Standard Screen mode right click W...

Страница 39: ...his command to preview how a document would appear on the Macintosh platform Changing the canvas When you first create a new Fireworks document you must specify document characteristics You can modify the size and color of the canvas and change the image s resolution anytime using the Modify menu or the Property inspector As you work with the document you can also rotate the canvas and trim unwant...

Страница 40: ... 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 You can 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 d...

Страница 41: ...ou change the number of pixels per inch or centimeter 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 Resampling up or adding pixels to make the image l...

Страница 42: ...t the Crop tool from the Tools panel or select Edit Crop Document 2 Drag a bounding box on the canvas Adjust the crop handles until the bounding box surrounds the area of the document 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 You can retain o...

Страница 43: ...s of the unit of measurement you used when creating the document To show and hide rulers Select View Rulers Vertical and horizontal rulers appear along the margins of the document window Using guides Guides are lines that you drag onto the document canvas from the rulers They serve as drawing aids to help you place and align objects You can use guides to mark important parts of your document such ...

Страница 44: ...ange guide colors 1 Select View Guides Edit Guides 2 Select the new guide color from the color box pop up window and click OK To lock or unlock all guides Select View Guides Lock Guides To remove a guide Drag the guide off the canvas Note In addition to these editing guides the symbol editor also contains 9 slice scaling guides that are used for scaling shapes without distortion For more informati...

Страница 45: ... the JavaScript text equivalent Save a group of recently performed actions as a custom command and then select it from the Command menu to reuse as a single command For more information about creating commands using the History panel see Scripting with the History panel on page 342 To undo and redo actions 1 Select Window History to open the History panel 2 Drag the Undo marker up or down To repea...

Страница 46: ...itmap object You can use any of the following to select objects The Layers panel displays each object You can click an object in the Layers panel to it select when the panel is open and layers are expanded For more information see Pages Layers Masking and Blending on page 155 For information about selecting specific areas of pixels in a bitmap image see Selecting pixels on page 44 Using the Pointe...

Страница 47: ... one of its points or selection handles To move the entire object drag anywhere in the object except a point or selection handle Using the Select Behind tool When working with graphics that contain multiple objects you can use the Select Behind tool to select an object that is hidden or obscured by other objects To select an object that is behind other objects Click the Select Behind tool repeated...

Страница 48: ...iewing it as it will appear on the web or in print To add to a selection Hold down Shift while clicking additional objects with the Pointer Subselection or Select Behind tool To deselect an object while leaving other objects selected Hold down Shift while clicking the selected object To select everything on every layer in the document Choose Select Select All Note Select All does not select hidden...

Страница 49: ...on while you re using the Marquee Oval Marquee Lasso Polygon Lasso and Magic Wand tool The Property inspector also displays three Edge options for these tools Hard creates a marquee selection with a defined edge Anti alias prevents jagged edges in the marquee selection Feather lets you soften the edge of the pixel selection When using a selection tool you can set the Feather option before creating...

Страница 50: ...uee is turned on while you make a series of selections the Live marquee feature only affects the last selection in the series To draw a marquee from a center point deselect any other active marquees and then hold down Alt Windows or Option Macintosh as you draw To select a freeform area of pixels 1 Select the Lasso tool 2 Select an Edge option in the Property inspector For more information see Bit...

Страница 51: ...nly adjacent pixels of exactly the same tone are selected If you enter 65 a wider range of tones is selected 4 Click the area of color you want to select A marquee appears around the selected range of pixels Pixels selected with a lower tolerance above then a higher tolerance below To select similar colors throughout the document 1 Select an area of color with a marquee or lasso tool or with the M...

Страница 52: ...u draw it by pressing the Spacebar while drawing To move the marquee do one of the following Drag the marquee with a marquee or lasso tool or the Magic Wand tool Use the arrow keys to nudge the marquee in 1 pixel increments Press Shift and use the arrow keys to move the marquee in 10 pixel increments To reposition a selection with the Spacebar 1 Begin dragging to draw the selection 2 Without relea...

Страница 53: ...The pointer changes to indicate you are about to select the alpha channel or the opaque area of the object 3 Click the thumbnail A new pixel selection is created on the selected bitmap To add to the current pixel selection Alt Shift click Windows or Command Shift click Macintosh the thumbnail of an object in the Layers panel to add the shape of its opaque area to the current pixel selection When y...

Страница 54: ...amounts and view the results before deselecting the pixels You can also feather a selection by setting a feather amount in the Property inspector before or during your use of a bitmap selection tool For more infor mation see Bitmap selection tool options on page 44 To feather a pixel selection 1 Choose Select Feather 2 Enter a Feather amount in the Feather dialog box The selection marquee changes ...

Страница 55: ...and click OK Converting a marquee to a path Using Fireworks you can convert a bitmap selection to a vector object by drawing a marquee around the part of the bitmap that you want to convert This process is useful if you want to start creating an animation by tracing a selection from a bitmap for example To convert a marquee to a path After drawing a marquee select Select Convert Marquee to Path Th...

Страница 56: ...ve selection to the one specified in the Document and Selection boxes Subtract from selection subtracts the active selection from the one specified in the Document and Selection boxes Intersect with selection intersects the active selection with the one specified in the Document and Selection boxes 6 Select an option in the Operation section and then click OK Repeat this process for each of the ma...

Страница 57: ...ve that as is or if you want to delete a different selection from the document that appears in the Document box select another selection from the pop up menu 4 To delete the selection that appears in the Selection box click OK To close the dialog box without deleting any selections click Cancel Creating and moving a floating pixel selection When you drag a marquee to a new location the marquee its...

Страница 58: ...which it was copied Editing selected objects Fireworks gives you a number of ways to edit selected objects you can move objects on the canvas or from appli cation to application you can replicate objects with the Clone and Duplicate commands or you can remove objects from the workspace altogether To move a selection do one of the following Drag it with the Pointer Subselection or Select Behind too...

Страница 59: ...ecific distance between clones or maintain the vertical or horizontal alignment of the clones To delete selected objects do one of the following Press Delete or Backspace Select Edit Clear Select Edit Cut Right click Windows or Control click Macintosh the object and select Edit Cut from the context menu To cancel or deselect a selection do one of the following Choose Select Deselect Click anywhere...

Страница 60: ...t horizontally vertically or in both directions To scale a selected object 1 Do one of the following to display the transform handles Select the Scale tool Select Modify Transform Scale 2 Drag the transform handles To scale the object both horizontally and vertically drag a corner handle Proportions are constrained if you press the Shift key as you scale To scale the object horizontally or vertica...

Страница 61: ...otation Drag the center point away from the center To reset the axis of rotation to the center of the selection do one of the following Double click the center point Press Escape to deselect the object then select it again Flipping objects You can flip an object across its vertical or horizontal axis without moving its relative position on the canvas To flip a selected object Select Modify Transfo...

Страница 62: ...umeric Transform dialog box opens 2 From the pop up menu select the type of transformation to perform on the current selection Scale Resize or Rotate 3 Select Constrain Proportions to maintain horizontal and vertical proportions when scaling or resizing a selection 4 Select Scale Attributes to transform the fill stroke and effects of the object along with the object itself 5 Deselect Scale Attribu...

Страница 63: ...ject You can edit groups without ungrouping them You can select an individual object in a group for editing without ungrouping the objects You can also ungroup the objects at any time To group two or more selected objects Select Modify Group To ungroup selected objects Select Modify Ungroup Selecting objects within groups To work with individual objects within a group you can either ungroup the ob...

Страница 64: ...r Select Modify Arrange Bring to Front or Send to Back to move the object or group to the top or bottom of the stacking order Select Modify Arrange Bring Forward or Send Backward to move the object or group up or down one position in the stacking order If more than one object or group is selected the objects move in front of or behind all unselected objects while maintaining their order relative t...

Страница 65: ...e widths or heights of three or more selected objects Select Modify Align Distribute Widths or Modify Align Distribute Heights About arranging objects among layers The Layers panel offers another dimension of organizational control You can move selected objects from one layer to another by dragging the object thumbnail or the blue selection indicator in the Layers panel to another layer For more i...

Страница 66: ...page 41 This chapter contains the following topics Working with bitmaps on page 61 Creating bitmap objects on page 61 Accessing photo editing tools on page 63 Drawing painting and editing bitmap objects on page 63 Retouching bitmaps on page 66 Adjusting bitmap color and tone on page 71 Blurring and sharpening bitmaps on page 79 Adding noise to an image on page 83 Working with bitmaps The Bitmap se...

Страница 67: ... empty bitmap is added to the current layer in the Layers panel If the empty bitmap is deselected before any pixels have been drawn imported or otherwise placed on it the empty bitmap object automatically disappears from the Layers panel and the document To cut or copy pixels and paste them as a new bitmap object 1 Make a pixel selection using the Marquee tool Lasso tool or Magic Wand tool For mor...

Страница 68: ...l which you can open by selecting Window Image Editing simply presents some of the most commonly used tools all in one panel for your conve nience For detailed information on how to use these tools and options please see Retouching bitmaps on page 66 Adjusting bitmap color and tone on page 71 Blurring and sharpening bitmaps on page 79 and Adding noise to an image on page 83 Drawing painting and ed...

Страница 69: ...ll color To apply a gradient fill to a pixel selection 1 Make the selection 2 Click the Paint Bucket tool in the Tools panel and select the Gradient tool from the pop up menu 3 Set the fill attributes in the Property inspector 4 Click the pixel selection to apply the fill The Paint Bucket and Gradient tools can also fill selected vector objects For more information about creating applying and edit...

Страница 70: ...itmap objects You can use the Eraser tool to remove pixels By default the Eraser tool pointer represents the size of the current eraser but you can change the size and appearance of the pointer in the Preferences dialog box For more infor mation see Editing preferences on page 347 Eraser tool To erase pixels in a selected bitmap object or pixel selection 1 Select the Eraser tool 2 In the Property ...

Страница 71: ...mage so that you can stamp it elsewhere in the image Cloning pixels is useful when you want to fix a scratched photograph or remove dust from an image you can copy a pixel area of a photo and replace the scratch or dust spot with the cloned area To clone portions of a bitmap image 1 Select the Rubber Stamp tool 2 Click an area to designate it as the source or the area you want to clone The samplin...

Страница 72: ...option is deselected the Rubber Stamp tool samples from the active object only Opacity determines how much of the background can be seen through the stroke Blend Mode affects how the cloned image affects the background To duplicate a pixel selection do one of the following Drag the pixel selection with the Subselection tool Alt drag Windows or Option drag Macintosh the pixel selection using the Po...

Страница 73: ... Dodge tool to lighten parts of an image or the Burn tool to darken parts of an image 2 Set the brush options in the Property inspector Size sets the size of the brush tip Shape sets a round or square brush tip shape Edge sets the softness of the brush tip 3 Set the exposure in the Property inspector The exposure ranges from 0 to 100 For a lessened effect specify a lower percentage value for a str...

Страница 74: ...ck and drag the cross hair pointer over the red pupils in the photograph Replacing colors The Replace Color tool lets you select a color and paint over that color with a different color Original photograph after using the Replace Color tool Fireworks provides two different ways to replace one color with another You can replace a color that you ve specified in the color swatch or you can replace a ...

Страница 75: ...a color from the pop up menu 4 Set the other stroke attributes in the Property inspector Size sets the size of the brush tip Shape sets a round or square brush tip shape Tolerance determines the range of colors to replace 0 replaces only the To color 255 replaces all colors similar to the To color Strength determines how much of the Change color is replaced Colorize replaces the From color with th...

Страница 76: ...e Live Filters do not permanently alter the pixels you can remove or edit them anytime If you prefer to apply filters in an irreversible permanent way you can select them from the Filters menu However Adobe recommends that you use filters as Live Filters whenever possible You can apply filters from the Filters menu to pixel selections but not Live Filters You can however define an area of a bitmap...

Страница 77: ...corrects an excess of pixels in the midtones which makes the image bland Shadows corrects an excess of dark pixels which hides much of the detail The Levels feature sets the darkest pixels as black and the lightest pixels as white then redistributes the midtones proportionally This produces an image with the sharpest detail in all of its pixels Original with pixels concentrated in the highlights a...

Страница 78: ...to individual color channels Red Blue or Green or to all color channels RGB 4 Drag the Input Levels sliders under the Histogram to adjust the highlights midtones and shadows The right slider adjusts the highlights using values from 255 to 0 The center slider adjusts the midtones using values from 10 to 0 The left slider adjusts the shadows using values from 0 to 255 As you move the sliders the val...

Страница 79: ...only three variables without affecting other colors For example you can use Curves to correct for a color cast caused by lighting conditions The grid in the Curves dialog box illustrates two brightness values The horizontal axis represents the original brightness of the pixels shown in the Input box The vertical axis represents the new brightness values shown in the Output box When you first open ...

Страница 80: ...th 0 representing the shadows Curve after dragging a point to adjust You can also adjust highlights midtones and shadows automatically by clicking the Auto button in the Curves dialog box To delete a point along the curve Drag the point off the grid Note You cannot delete the end points of the curve Correcting the tonal range using tonal eyedroppers You can adjust the highlights shadows and midton...

Страница 81: ... In the Property inspector click the Add Live Filters button and then select Adjust Color Brightness Contrast from the Filters pop up menu Select Filters Adjust Color Brightness Contrast Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter...

Страница 82: ...To adjust the hue or saturation 1 Select the image 2 Do one of the following to open the Hue Saturation dialog box In the Property inspector click the Add Live Filters button and then select Adjust Color Hue Saturation from the Filters pop up menu Select Filters Adjust Color Hue Saturation Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit Undo...

Страница 83: ... R 255 G 0 B 0 changes the color to light blue R 0 G 255 B 255 A monochrome image after inverting A color image after inverting To invert colors 1 Select the image 2 Do one of the following In the Property inspector click the Add Live Filters button and then select Adjust Color Invert from the Filters pop up menu Select Filters Adjust Color Invert Note Applying a filter from the Filters menu is de...

Страница 84: ... Live Filter as described in the first bulleted option in each of the following procedures For more information see Using Live Filters on page 147 To blur an image 1 Select the image 2 Do one of the following In the Property inspector click the Add Live Filters button and then select Blur Blur or Blur More from the Filters pop up menu Select Filters Blur Blur or Blur More To blur an image using Ga...

Страница 85: ...ur effect Values range from 1 to 100 An increase in quality results in a blur effect with fewer repetitions of the original image 5 Click OK To blur an image using Zoom Blur 1 Select the image 2 Do one of the following to open the Zoom Blur dialog box In the Property inspector click the Add Live Filters button and select Blur Zoom Blur from the Filters pop up menu Select Filters Blur Zoom Blur 3 D...

Страница 86: ...pha filter to a selected area do one of the following In the Property inspector click the Add Live Filters button and then select Other Convert to Alpha from the Filters pop up menu Select Filters Other Convert to Alpha Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit Undo is an option To maintain the ability to adjust turn off or remove this...

Страница 87: ...tor click the Add Live Filters button and then select Sharpen Unsharp Mask from the Filters pop up menu Select Filters Sharpen Unsharp Mask Note Applying a filter from the Filters menu is destructive that is it cannot be undone except when Edit Undo is an option To maintain the ability to adjust turn off or remove this filter apply it as a Live Filter as described in the first bulleted option in t...

Страница 88: ...tance to simulate an old photograph or static on a television screen Original photograph after adding noise To add noise to an image 1 Select the image 2 Do one of the following to open the Add Noise dialog box In the Property inspector click the Add Live Filters button and select Noise Add Noise from the Filters pop up menu Select Filters Noise Add Noise Note Applying a filter from the Filters me...

Страница 89: ...jects including combining objects to create a single object creating an object from the intersection of several objects and expanding the stroke of an object You can also import graphics and manipulate them using these commands This chapter contains the following topics Drawing vector objects on page 84 Editing paths on page 100 Drawing vector objects Fireworks has many tools for drawing vector ob...

Страница 90: ...or more information on resizing and scaling objects see Transforming and distorting selected objects and selections on page 54 Drag a corner point on a rectangle Note Scaling a vector object does not change its stroke width Drawing basic rounded rectangles You can draw rectangles with rounded corners by using the Rounded Rectangle tool or by using the Roundness option in the Property inspector to ...

Страница 91: ...creation and editing of common visual elements Auto Shape tools draw object groups Unlike other object groups selected Auto Shapes have diamond shaped control points in addition to the object group handles Each control point is associated with a particular visual property of the shape Dragging a control point alters only the associated visual property Most Auto Shape control points have tool tips ...

Страница 92: ...d an inner polygon to the shape Spiral draws object groups that appear as open spirals Using control points you can edit the number of spiral rotations and you can determine whether the spiral is open or closed Star draws object groups that appear as stars with any number of points from 3 to 25 Using control points you can add or remove points and you can adjust the inner and outer angles of the p...

Страница 93: ...to Shape Properties The Auto Shape Properties panel appears displaying the properties for the selected Auto Shape 3 Adjust the properties in the Auto Shape Properties panel For Rectangle shapes you can choose to lock the shape corners so that changes to one corner will affect all four You can also change the properties for each corner individually 4 To apply the changes press Tab or Enter The sele...

Страница 94: ...hamfered and rounded rectangle Auto Shapes Beveled chamfered and rounded rectangles have five control points The control point on each corner adjusts all corners together You can also Alt drag Windows or Option drag Macintosh to edit a single corner The remaining control point resizes the rectangle without changing the roundness of the corner Note To edit the corner radius of rectangles drawn with...

Страница 95: ...You can add as many sections as you want using control points For each new section Fireworks adds a control point for resizing or splitting the new section To add sections to a selected doughnut Alt drag Windows or Option drag Macintosh an add divide sector control point on the outer perimeter of the shape To remove a section from a selected doughnut Drag the add divide sector control point on the...

Страница 96: ...mber of polygon sides and adding an inner polygon to the shape to create a ring To resize or rotate a selected smart polygon do one of the following Drag the scale rotate control point Alt drag Windows or Option drag Macintosh the scale rotate control point to rotate only To add or remove sections from a selected smart polygon Drag the sections control point To change the number of sides on a sele...

Страница 97: ... Auto Shapes directly on the canvas you place these Auto Shapes into your drawing by dragging them from the Assets panel to the canvas To create an Auto Shape using the Assets panel 1 Select Window Auto Shapes to display the Shapes tab if it is not already visible 2 Drag a Auto Shape preview from the Assets panel to the canvas 3 If desired edit the Auto Shape by dragging any of its control points ...

Страница 98: ...moothing you can change the number of points that appear on the path in the Precision box in the Property inspector before you draw the path A painting edited by moving vector points You can also modify existing brush strokes and add fills to selected objects you have drawn with the Vector Path tool The new stroke and fill settings are retained for subsequent use of the Vector Path tool in the cur...

Страница 99: ... is a simple matter of clicking to place the points Each click with the Pen tool plots a corner point To draw a path with straight line segments 1 Select the Pen tool in the Tools panel 2 If desired select Edit Preferences and enable any of the following options on the Editing tab of the Preferences dialog box then click OK Show Pen Preview previews the line segment that would result from the next...

Страница 100: ...ireworks extends the line segment to the new point 4 Continue plotting points If you click and drag a new point you produce a curve point if you just click you produce a corner point You can temporarily switch to the Subselection tool to change the location of points and the shape of curves as you draw Press Control Windows or Command Macintosh while dragging a point or point handle with the Pen t...

Страница 101: ...r curves To edit the Bezier curve of a path segment 1 Select the path with the Pointer or Subselection tool 2 Click a curve point with the Subselection tool to select it A selected curve point appears as a solid blue square The point handles extend from the point 3 Drag the handles to a new location To constrain handle movement to 45 angles press Shift while dragging The blue path preview shows wh...

Страница 102: ... its point To convert a corner point to a curve point 1 Select the Pen tool in the Tools panel 2 Click a corner point on a selected path and drag away from it The handles extend curving the adjacent segments Note To edit the point s handles select the Subselection tool or press Control Windows or Command Mac while the Pen tool is active To convert a curve point to a corner point 1 Select the Pen t...

Страница 103: ...e Subselection tool 2 Do one of the following Click a point or hold down Shift and click multiple points one by one Drag around the points to be selected To display a curve point s handles Click the point with the Subselection tool If either point nearest the clicked point is a curve point the near handle is also displayed Moving points and point handles You can change an object s shape by draggin...

Страница 104: ... reshapes it or simplifies editing To insert a point on a selected path Using the Pen tool click anywhere on the path where there is not a point To delete a point from a selected path segment do one of the following Click a corner point on a selected object with the Pen tool Double click a curve point on a selected object with the Pen tool Select a point with the Subselection tool and press Delete...

Страница 105: ...an object s shape by moving adding or deleting points or you can move point handles to change the shape of adjacent path segments Freeform tools let you alter the shape of objects by editing paths directly You can also use path operations to create new shapes by combining or altering existing paths Editing with vector tools In addition to dragging points and point handles you can use several Firew...

Страница 106: ...th to push it Nudge the selected path to reshape it To change the size of the push pointer do one of the following While holding down the mouse button press the Right Arrow key or 2 to increase the width of the pointer While holding down the mouse button press the Left Arrow key or 1 to decrease the width of the pointer To set the size of the pointer and set the length of the path segment that it ...

Страница 107: ...ess the Right Arrow key or 2 to increase the width of the pointer While holding down the mouse button press the Left Arrow key or 1 to decrease the width of the pointer To set the size of the pointer and set the length of the path segment that it affects deselect all objects in the document and then enter a value from 1 to 500 in the Size text box of the Property inspector The value indicates the ...

Страница 108: ...pecify how much pressure and speed affects these properties For details on setting options in the Edit Stroke dialog box see Working with strokes on page 136 Cutting paths into multiple objects The Knife tool allows you to slice a path into two or more paths To cut a selected path 1 Select the Knife tool in the Tools panel Note Using the eraser on Wacom pens automatically selects the Knife tool 2 ...

Страница 109: ... vector shape to a bitmap selection and then use the bitmap tools to edit the new bitmap To convert a path to a marquee selection 1 Select a path 2 Select Modify Convert Path to Marquee 3 In the Convert Path to Marquee dialog box select an Edge setting for the marquee selection that you are about to create 4 If you chose Feather in the Edge setting specify the value you want to use for the amount ...

Страница 110: ... to the selection the path object from which the portions are to be removed 4 Select Modify Combine Paths Punch Stroke and fill attributes remain unchanged Cropping a path You can crop a path using the shape of another path The front or topmost path defines the shape of the cropped area To crop a selected path 1 Select the path object that defines the area to be cropped 2 Select Modify Arrange Bri...

Страница 111: ...produce interesting results If the original path contains a fill the intersecting portions of the path will not contain a fill after the stroke is expanded To expand a selected object s stroke 1 Select Modify Alter Path Expand Stroke to open the Expand Stroke dialog box 2 Set the width of the resulting closed path 3 Specify a corner type miter round or beveled 4 If you chose miter set the miter li...

Страница 112: ...path object with the same stroke and fill attributes replaces the original path object Editing paths using the Path panel The path panel provides quick access to a number of path related commands You can use the tools on this panel to speed up path editing tasks To open the Path panel Select Window Others Path The Path panel contains the tools shown below Icon Function Path tools Join paths Split ...

Страница 113: ...de paths Blend paths Point tools Straighten Smooth Round to whole positions Round to half positions Move points Scale points Rotate points Mirror points Fillet points Select entire contour Select all points Deselect all points Incrementally grow or shrink the selection Icon Function ...

Страница 114: ...copy objects that include text and change the text for each copy Vertical text transformed text text attached to paths and text converted to paths and images extend the design possibilities You can import text while retaining rich text format attributes Also when you import an Adobe Photoshop document containing text the text remains editable Fireworks handles missing fonts upon import by asking y...

Страница 115: ... new name Double click the name in the Layers panel object thumbnail and then type a new name Creating text blocks All text in a Fireworks document appears inside a rectangle with handles called a text block To enter text 1 Select the Text tool The Property inspector displays options for the Text tool 2 Select color font size spacing and other text characteristics 3 Do one of the following Click i...

Страница 116: ...only the remaining text Auto sizing text blocks are created by default when you click on the canvas with the Text tool and start typing Fixed width text blocks allow you to control the width of wrapped text Fixed width text blocks are created by default when you drag to draw a text block using the Text tool When the text pointer is active within a text block a hollow circle or hollow square appear...

Страница 117: ...uble clicked the text block to edit its contents To edit text 1 Select the text you want to change Click a text block with the Pointer or Subselection tool to select the entire block To select multiple blocks simul taneously hold down Shift as you select each block Double click a text block with the Pointer or Subselection tool and highlight a range of text Click inside a text block with the Text ...

Страница 118: ...er tool after using the Text tool the fill and stroke settings revert to the most recent settings from before the Text tool was used Likewise when you return to the Text tool the fill color reverts to the most recent Text tool setting and the stroke is reset to None Fireworks retains the current Text tool color as you switch from document to document or close and reopen Fireworks You can add a str...

Страница 119: ...ly to highlighted text in a text block do one of the following Click the Fill Color box in the Property inspector and select a color from the color pop up window or sample a color from anywhere on the screen using the eyedropper pointer while the Fill Color box pop up window is open Click the Fill Color box in the Tools panel and select a color from the color pop up window or sample a color from a...

Страница 120: ...d Command Macintosh while pressing the Left Arrow or Right Arrow keys to adjust kerning by 10 increments Setting leading Leading determines the distance between adjacent lines in a paragraph Leading can be measured in pixels or as a percentage of the distance in points separating the lines baseline to baseline You can use the Property inspector or the keyboard to set leading Leading options in the...

Страница 121: ...tically If you apply this to lines of text separated by hard or soft returns each line of text is displayed as a column The columns flow from left to right Vertical Right to Left orients text vertically Multiple lines of text separated by returns are displayed as columns that flow from right to left This option is useful for displaying text in languages such as Japanese in which text flows from ri...

Страница 122: ...Indention is measured in pixels Paragraph indent option in the Property inspector If the Property inspector is minimized click the expander arrow in the lower right corner to see all properties To indent the first line of selected paragraphs In the Property inspector drag the Paragraph Indent pop up slider or enter a value in the text box Setting paragraph spacing You can specify the amount of spa...

Страница 123: ...es the amount of detail used for creating the transition between the text edges and the background Sharpness determines the smoothness of the transition between the text edges and the background Strength determines how much the text edges blend into the background To apply an anti aliased edge to selected text In the Property inspector select one of options from the Anti Aliasing pop up menu Note ...

Страница 124: ...new style by saving text attributes After you create text it remains editable in Fireworks Strokes fills filters and styles are updated automatically as you edit the text Text with stroke fill filter and style applied You can apply solid text color to highlighted text in a text block However stroke attributes and non solid fill attributes such as gradient fills are applied to all text in a selecte...

Страница 125: ...d repeats the shape of the path Text on a path that returns and repeats the path shape To place text on a path 1 Shift select a text block and a path 2 Select Text Attach to Path To detach text from a selected path Select Text Detach from Path Editing paths and text attached to paths Text that you have attached to a path remains editable In addition you can edit the shape of the path To edit text ...

Страница 126: ... Text Orientation and select an orientation Text rotated around a path Text oriented vertically on a path Text skewed vertically around a path Text skewed horizontally around a path To reverse the direction of text on a selected path Select Text Reverse Direction To move the starting point of text attached to a path 1 Select the text on a path object 2 In the Property inspector enter a value in th...

Страница 127: ...racter paths individually do one of the following Select the converted text with the Subselection tool Select the converted text and select Modify Ungroup You can edit the individual converted character paths using the vector editing tools For more information on editing paths see Editing paths on page 100 You can create a composite path from a text object that was created by converting text to pa...

Страница 128: ...that contains fonts not installed on your computer Fireworks asks if you want to replace the fonts or maintain their appearance This is useful if you share files with users on other computers that may not have the same fonts installed Choosing Maintain Appearance replaces the text with a bitmap image that represents the appearance of the text in its original font You can still edit the text but wh...

Страница 129: ...unrecognized word to your personal dictionary Ignore skips the current instance of the unrecognized word Ignore All skips all instances of the unrecognized word during the current spell check session The next time you spell check Fireworks once again identifies the word as unrecognized Change replaces the current instance of the unrecognized word with text that you type in the Change To box or wit...

Страница 130: ...ns the Text Editor was used to create and edit text All text editing and formatting options found in the Text Editor are now located in the Property inspector However you still have access to the Text Editor through the Text menu The Text Editor is useful for working with text that might be difficult to edit onscreen such as large text blocks text attached to a path or text with hard to read fonts...

Страница 131: ... Gradient Fill and Eyedropper tools which you can use to apply color to bitmap selections areas of similar color and vector objects For information on these bitmap tools see Working with Bitmaps on page 61 Note For information about color correction using Live Filters and filters see Adjusting bitmap color and tone on page 71 This chapter contains the following topics Using the Colors section of t...

Страница 132: ... or in the Color Mixer Organizing swatch groups and color models The Swatches panel and Color Mixer combine to form the Colors panel group In the Swatches panel you can view change create and edit swatch groups as well as select stroke and fill colors You can use the Color Mixer to select a color model mix stroke and fill colors by dragging color value sliders or entering color values and select s...

Страница 133: ...a custom swatch group see Customizing the Swatches panel on page 128 and Saving palettes on page 270 To add swatches from an external color palette to the current swatches 1 Select Add Swatches from the Swatches panel Options menu 2 Navigate to the desired folder and select a color palette file Note Fireworks can add new swatches from palettes exported as ACT or GIF files 3 Click OK Fireworks adds...

Страница 134: ...sh and place the pointer over a swatch The pointer becomes the scissors pointer 2 Click the swatch to delete it from the Swatches panel To save a selection of sampled colors 1 Add sampled colors to the Swatches panel 2 Select Save Swatches from the Swatches panel Options menu The Export Swatches dialog box opens 3 Select a filename and directory and click Save Clearing and sorting swatches You can...

Страница 135: ... color model To display the Color Mixer Select Window Color Mixer To apply a color from the color bar to a selected vector object 1 Click the icon next to the Stroke Color or Fill Color box in the Color Mixer 2 Move the pointer over the color bar The pointer becomes the eyedropper pointer 3 Click to pick a color The color is applied to the selected object and becomes the active stroke or fill colo...

Страница 136: ...atches panel To pick a color from the system color picker 1 Click any color box 2 Select Windows OS or Mac OS from any color pop up window Options menu The system color swatches are displayed in the pop up window 3 Select a color from the system color picker The color becomes the new stroke or fill color For information on adding a color to the Swatches panel from the color picker see Customizing ...

Страница 137: ...he Property inspector The color pop up window opens displaying options for web dither fills The object s non websafe color appears in the Source color box in the Fill Options window The two websafe dither colors appear in the color boxes to the right The web dither appears on the object and becomes the active fill color Note Setting the edge of a web dither fill to Anti Alias or Feather results in...

Страница 138: ...controls for choosing colors The palette contains three tabs Selector Mixers and Blender To open the Color Palette panel Select Window Others Color Palette To find the nearest web safe color for any color value 1 Click the fill color box on the Selector tab of the Color Palette panel to make it active 2 Use the eyedropper pointer to click anywhere inside any Fireworks Document window to sample a c...

Страница 139: ...d like to try out two different palettes in your document click Palette2 on the left side of the panel and pick out the base colors for your second palette 5 After creating your palettes click on the two Replace color icons in the lower left section of the panel to switch back and forth between the two palettes Note The swap palette function replaces fills strokes and gradients in vector elements ...

Страница 140: ...y inspector to the Color Mixer Each displays the current color assigned to the associated object property Selecting colors from a color pop up window When you click any color box a color pop up window similar to the Swatches panel opens You can choose to display the same swatches in a color pop up window as those that are displayed in the Swatches panel or you can display different swatches To sel...

Страница 141: ...y inspector the Stroke Options pop up menu and the Edit Stroke dialog box you can have full control of every brush nuance including ink amount tip size and shape texture edge effect and aspect Applying strokes You can change the stroke attributes of the Pen and Brush tools so that the next vector object you draw has the new stroke attributes or you can apply stroke attributes to an object or path ...

Страница 142: ...in the Tools panel or Property inspector to open the color pop up window 4 Select a color for the stroke from the set of swatches 5 Drag to draw the object Note A newly created stroke assumes the color currently displayed in the Stroke Color box To remove all stroke attributes from a selected object do one of the following Select None from the Stroke Category pop up menu in the Property inspector ...

Страница 143: ... inspector 2 Click Advanced The Edit Stroke dialog box opens To set general brush stroke options 1 On the Options tab of the Edit Stroke dialog box set the ink amount spacing and flow rate Higher flow rates create brush strokes that flow over time as with an airbrush 2 To overlap brush strokes for dense strokes select Build up 3 To set the stroke texture change the Texture option The higher the nu...

Страница 144: ... 2 From the Affected By options select the degree to which sensitivity data affects the current stroke property 3 Click OK Placing strokes on paths By default an object s brush stroke is centered on a path You have the option of placing the brush stroke completely inside or outside the path This allows you to control the overall size of stroked objects and to create effects such as strokes on the ...

Страница 145: ...gs Setting fill attributes of the drawing tools You can set the fill attributes of the Rectangle Rounded Rectangle Ellipse Polygon and Auto Shape drawing tools that are applied to objects as you draw The current fill appears in the Fill Color box in the Property inspector the Tools panel and the Color Mixer You can use any of these panels to change a drawing tool s fill The paint bucket icon indic...

Страница 146: ...ly them Additionally you can change various attributes of a fill such as color edge texture and transparency You can select from a number of preset gradient and pattern fills or you can create your own Note A newly created fill assumes the current color displayed in the Fill Color box in the Tools panel Use the Fill options in the Property inspector or the Fill Options pop up window to edit fill a...

Страница 147: ...rn from the Fill Options pop up menu 2 Click the Fill Color box and select Other from the Pattern Name pop up menu 3 Navigate to the bitmap file you want to use as the new pattern and click Open The new pattern is added to the Pattern Name list in alphabetical order Applying a gradient fill Fill categories other than None Solid Pattern and Web Dither are gradient fills These fills blend colors to ...

Страница 148: ...lick the color swatch 2 Select a color from the pop up window To set or change the transparency of an opacity swatch 1 Click the opacity swatch 2 Do one of the following Drag the slider to the percentage of transparency where 0 is completely transparent and 100 is completely opaque Enter a numeric value from 0 to 100 to set the opacity value Note The transparency checkerboard shows through the gra...

Страница 149: ...t an object with a pattern or gradient fill a set of handles appears on or near the object You can drag these handles to adjust the object s fill Use the fill handles to interactively adjust a pattern or gradient fill To move the fill within an object Drag the round handle or click in a new location in the fill using the Gradient tool To rotate the fill Drag the lines connecting the handles To adj...

Страница 150: ...arent button This option removes only solid fills Adding texture to strokes and fills You can add three dimensional effects to both strokes and fills by adding texture Fireworks provides several textures or you can use external textures Adding texture to a stroke Textures modify the brightness of the stroke but not the hue and give strokes a less mechanical more organic look as if you were applyin...

Страница 151: ...ty inspector Click the Fill Color box in the Tools panel click Fill Options and click the Texture pop up menu 2 Do one of the following Select a texture from the pop up menu Select Other from the pop up menu and navigate to a texture file to use an external texture 3 Enter a percentage from 0 to 100 to control the depth of the texture Increasing the percentage increases the texture intensity 4 Sel...

Страница 152: ...o be used in Fireworks as Live Filters If you prefer you can use these filters in the traditional manner using the Filters menu For more information see Adjusting bitmap color and tone on page 71 This chapter contains the following topics Applying Live Filters on page 147 Editing Live Filters on page 152 Applying Live Filters You can apply one or more Live Filters to selected objects using the Pro...

Страница 153: ...ter from the Add Filters pop up menu The filter is added to the Filters list for the selected object To apply a Live Filter so that it appears to affect only a pixel selection within an image you can cut and paste the selection in place to create a new bitmap image select it and then apply the Live Filter 2 If a pop up window or dialog box opens enter the settings for the filter and then do one of...

Страница 154: ...m the canvas An object with Inset Emboss and with Raised Emboss To apply an Emboss filter 1 Click the Add Live Filters button in the Property inspector then select an emboss option from the pop up menu Bevel and Emboss Inset Emboss Bevel and Emboss Raised Emboss 2 Edit the filter settings in the pop up window If you want the original object to appear in the embossed area select Show Object 3 When ...

Страница 155: ...parency in the shadow Drag the Softness slider to set the sharpness of the shadow Drag the Angle dial to set the direction of the shadow Select Knock Out to hide the object and display the shadow only 3 When you finish click outside the window or press Enter to close it To apply a glow 1 Click the Add Filters button in the Property inspector then select Shadow and Glow Glow 2 Edit the filter setti...

Страница 156: ...t Fireworks to load the plug ins Note If you move the plug ins to a different folder repeat the above steps or select File Preferences and click the Folders tab to change the path to the plug ins Then restart Fireworks To apply a Photoshop plug in to a selected object as a Live Filter In the Property inspector click the Add Live Filters button then select a filter from the Options submenu Applying...

Страница 157: ...r filters applied to a selected object Drag a filter to the desired position in the list in the Property inspector Note Filters at the top of the list are applied before the filters at the bottom Removing Live Filters You can easily remove individual filters or all filters from an object To remove a single filter applied to a selected object Select the filter you want to remove from the Filters li...

Страница 158: ... the Add Filters pop up menu in the Property inspector although it will remain on the Styles panel as a typical style To apply a custom Live Filter to selected objects do one of the following In the Property inspector click the Add Live Filters button then select the custom Live Filter Click the icon for the custom Live Filter in the Styles panel You can rename or delete a custom Live Filter as yo...

Страница 159: ...ADOBE FIREWORKS CS3 User Guide 154 A Save button 5 Enter a command name and click OK to add the command to the Commands menu ...

Страница 160: ... the underlying image For example if you want to block out part of a photograph so that it appears to have an elliptical frame around it you can paste an elliptical shape as a mask on top of the photo graph All areas outside the ellipse disappear as if cropped showing only the part of the picture inside the ellipse Blending techniques give you another level of creative control You can create uniqu...

Страница 161: ...ges panel Select Delete Page from the Pages panel Options menu To duplicate a page do one of the following Drag a page to the New Duplicate Page button Select a page and select Duplicate Page from the Pages panel Options menu To move between pages do one of the following Select the desired page in the Pages panel Use the Page Up and Page Down buttons on the keyboard Choose the desired page from th...

Страница 162: ...these settings unless they are linked to the master page In addition if the master page settings are later changed none of the other pages will inherit these changes unless they are linked to the master page Do one of the following to permanently link a page to the master page Select the page in the Pages panel and choose Link to Master Page from the Options menu Click in the column to the left of...

Страница 163: ...ck Export After export you ll see the files Fireworks exported on your hard drive If you chose to export all of the pages a separate HTML file for each page is created The images and HTML files are generated in the location you specified in the Export dialog box Note For more detailed information about exporting from Fireworks see Optimizing and Exporting on page 257 Exporting pages as image files...

Страница 164: ... panel or select an option from the Frame pop up menu at the bottom of the Layers panel or the Pages pop up menu at the bottom of the document window For more infor mation see Working with frames on page 242 and Working with pages on page 155 The name of the active layer is highlighted in the Layers panel You can expand a layer to view a list of all the objects on it By default the objects are dis...

Страница 165: ...t Insert Layer Select New Layer or New Sub Layer from the Layers panel Options menu and click OK To delete a layer do one of the following Drag the layer to the trash can icon in the Layers panel Select the layer and click the trash can icon in the Layers panel Select the layer and choose Delete Layer from the Layers panel Options menu To duplicate a layer do one of the following Drag a layer to t...

Страница 166: ...ayer or object up or down beyond the bounds of the viewable area To name a layer or object 1 Double click a layer or object in the Layers panel 2 Type a new name for the layer or object and press Enter Note The Web Layer cannot be renamed However you can rename sub layers of the Web Layer and web objects on the Web Layer such as slices and hotspots For more information see Using the Web Layer on p...

Страница 167: ...left of the object name A padlock icon indicates that the object is locked To lock a layer Click the square in the column immediately to the left of the layer name A padlock icon indicates that the layer is locked To lock multiple layers Drag the pointer along the Lock column in the Layers panel To lock or unlock all layers Select Lock All or Unlock All from the Layers panel Options menu To turn o...

Страница 168: ...ated automatically in all pages or frames This is useful when you want objects such as background elements to appear on all pages of a website or all frames of an animation Note Sub layers cannot be shared across pages or frames you must select the parent layer to share To share a selected layer across frames do one of the following Select Share Layer to Frames from the Layers panel Options menu D...

Страница 169: ...ke selected objects less visible or more so Or you can create a mask that uses its own transparency to affect visibility You can create a mask using the Layers panel or the Edit Select or Modify menus After you create a mask you can adjust the position of the masked selection on the canvas or modify the appearance of a mask by editing the mask object You can also apply transformations to the mask ...

Страница 170: ... properties and bitmap tool options more readily available greatly simplifying the mask editing process When a mask is selected the Property inspector displays a variety of properties not only for a selected mask but also for any bitmap tools you might use to edit the mask Original objects and a bitmap mask applied using its grayscale appearance You can apply bitmap masks in two ways Using an exis...

Страница 171: ...er object Paste as Mask creates either a vector mask or a bitmap mask When you use a vector object as the mask Paste as Mask creates a vector mask that crops or clips masked objects using the path outline of the vector object When you use a bitmap image as the mask Paste as Mask creates a bitmap mask that affects the visibility of masked objects using the grayscale color values of the bitmap objec...

Страница 172: ...ct with other objects vector graphics text or bitmap images The path itself is sometimes referred to as a clipping path and the items it contains are called contents or paste insides Contents extending beyond the clipping path are hidden The Paste Inside command in Fireworks produces a similar effect to the Paste as Mask command with a couple of differences With Paste Inside the object you cut and...

Страница 173: ...te Stacking order is not important as long as the objects you want to use as the paste inside contents remain selected These objects can be above or below the mask object in the Layers panel 3 Select Edit Cut to move the objects to the Clipboard 4 Select the object into which you want to paste the contents This object will be used as the mask or clipping path 5 Select Edit Paste Inside The objects...

Страница 174: ...ayers panel adds a white mask to an object which you can customize by drawing on it with the bitmap tools Note For details on creating empty opaque or black masks see Masking objects using the Reveal and Hide commands on page 170 To create a bitmap mask using the Layers panel 1 Select the object you want to mask 2 Click the Add Mask button at the bottom of the Layers panel Fireworks applies an emp...

Страница 175: ... the current pixel selection The other pixels in the bitmap object are hidden To achieve the same effect make a pixel selection then click the Add Mask button Hide Selection can be used only with pixel selections It applies an opaque pixel mask using the current pixel selection The other pixels in the bitmap object are shown To achieve the same effect make a pixel selection then Alt click Windows ...

Страница 176: ... Modify Mask Reveal Selection to show the area defined by the pixel selection Select Modify Mask Hide Selection to hide the area defined by the pixel selection The results of Reveal Selection and Hide Selection A bitmap mask is applied using the pixel selection You can further edit the mask to reveal or hide the remaining pixels of the masked object using the bitmap tools in the Tools panel For mo...

Страница 177: ...otoshop Grouping objects to form a mask You can group two or more objects to create a mask The topmost object becomes the mask object You can group objects as either bitmap masks or vector masks The stacking order determines the type of mask applied If the top object is a vector object the result is a vector mask If the top object is a bitmap object the result is a bitmap mask Note For more inform...

Страница 178: ...ect and edit just the mask or the masked objects without affecting the other objects When you select the mask thumbnail the mask icon appears beside it in the Layers panel and the mask s properties show in the Property inspector where they can be changed if desired To select a mask Click the mask thumbnail in the Layers panel The Layers panel displays a green highlight around a mask thumbnail when...

Страница 179: ...ely from the mask To move masks and masked objects independently by unlinking 1 Click the link icon on the mask in the Layers panel This unlinks masks from masked objects so that they can be moved independently A Link icon 2 Select the thumbnail of the object you want to move the mask or the masked objects 3 Drag the object or objects on the canvas with the Pointer tool Note If there is more than ...

Страница 180: ...g a mask s appearance By modifying a mask s shape and color you can change the visibility of masked objects You change the shape of a bitmap mask by drawing on it with the bitmap tools You change the shape of a vector mask by moving the mask object s points If a mask is applied using its grayscale appearance you can modify its colors to affect the opacity of the underlying masked objects Using mid...

Страница 181: ... 54 The transformation is applied to the mask and its masked objects Note You can apply a transformation to the mask object alone by first unlinking the mask from the mask objects in the Layers panel and then performing the transformation Changing the way masks are applied You can use the Property inspector to ensure that you are editing a mask and to identify the type of mask you are working on W...

Страница 182: ...e appearance You can also convert vector masks into bitmap masks Bitmap masks cannot be converted into vector masks however For more information about vector and bitmap masks see About masks on page 164 To apply a vector mask using its path outline Select Path Outline in the Property inspector when a vector mask is selected To show a vector mask s fill and stroke Select Show Fill and Stroke in the...

Страница 183: ...ayers panel and select Edit Paste as Mask 3 Click Replace when asked whether to replace the existing mask or add to it The existing mask object is replaced with the new one To disable or enable a selected mask do one of the following Select Disable Mask or Enable Mask from the Layers panel Options menu Select Modify Mask Disable Mask or Modify Mask Enable Mask A red X appears on the mask thumbnail...

Страница 184: ...creen multiplies the inverse of the blend color by the base color resulting in a bleaching effect Darken selects the darker of the blend color and base color to use as the result color This replaces only pixels that are lighter than the blend color Linear Burn inspects each channel of the current and background layers and darkens the background color to reflect the blend color by decreasing the br...

Страница 185: ...r Saturation combines the saturation of the blend color with the luminance and hue of the base color to create the result color Color combines the hue and saturation of the blend color with the luminance of the base color to create the result color preserving the gray levels for coloring monochrome images and tinting color images Luminosity combines the luminance of the blend color with the hue an...

Страница 186: ... options are not available for all tools To set a blending mode and opacity level for existing objects 1 With two objects overlapping select the top object 2 Select a blending option from the Blend Mode pop up menu in the Property inspector or the Layers panel 3 Select a setting from the Opacity pop up slider or type a value in the text box To set a default blending mode and opacity level to be ap...

Страница 187: ...ows you to adjust the color of an object by altering the object s opacity and blend mode This Live Filter called Color Fill produces the same effect as overlapping an object with one that has a different opacity and blend mode For more details on using the Color Fill Live Filter see Using Live Filters on page 147 ...

Страница 188: ...or mation on specific features built into the animation and button symbols see Creating Animations on page 238 and Creating Buttons and Pop up Menus on page 220 A URL or Uniform Resource Locator is an address of a specific page or file on the Internet If you are using the same URL many times you can add it to the URL panel You can organize and group your URLs in URL libraries This chapter contains...

Страница 189: ...create a style based on the attributes of a selected object The style is displayed in the Styles panel You can also delete styles from the Styles panel The following attributes can be saved in a style Fill type and color including patterns textures and vector gradient attributes such as angle position and opacity Stroke type and color Filters Text attributes such as font point size style bold ital...

Страница 190: ...g box select or deselect components of the attributes you wish to apply The Edit Style dialog box contains the same options as the New Style dialog box For details on choosing attributes to include in a style see Creating and deleting styles on page 184 4 Click OK to apply the changes to the style Exporting and importing styles You may want to share styles with other Fireworks users to save time a...

Страница 191: ...Select Edit Paste Attributes The selected objects take on the same attributes as the original object Using symbols Fireworks has three types of symbols graphic animation and button Each has unique characteristics for its specific use Instances are representations of a Fireworks symbol When the symbol object the original is edited the instances copies automatically change to reflect the modificatio...

Страница 192: ... Button 3 If you want to use 9 slice scaling guides to scale the symbol select the Enable 9 slice scaling guides check box Then click OK Depending on which symbol type you select the Symbol Editor or Button Editor opens 4 Create the symbol using the tools in the Tools panel then close the editor For more information see Creating button symbols on page 220 To swap a symbol on page 188 and Creating ...

Страница 193: ...from the Library panel Options menu To change a symbol s type 1 Double click the symbol name in the Library 2 Select a different Symbol Type option To select all unused symbols in the Library panel Choose Select Unused Items from the Library panel Options menu To delete a symbol 1 In the Library panel select the symbol 2 Select Delete from the Library panel Options menu 3 Click Delete The symbol a...

Страница 194: ...lace them appropriately on the button or symbol Make sure that the parts of the symbol that you don t want to be distorted when scaling for example the corners are outside the guides as represented by the yellow areas in the graphic above The 9 slice scaling guides are positioned on this button so that the corners will not be distorted when the button size is changed c Optional Lock the guides by ...

Страница 195: ...f the symbol Note For most types of edits modifying an instance affects the symbol and all other instances There are some excep tions however For more information see Editing instances on page 193 To create a rich graphic symbol 1 Create an object with attributes that may need to be customized This symbol could have the bullet color and the bullet number as customizable options 2 When creating the...

Страница 196: ...ument 13 Add additional elements as needed 14 Click Save to save the selected options and create a JavaScript file 15 Select Reload from the Common Library panel Options menu to reload the new symbol After the JavaScript file has been created you can create a new instance of the symbol by dragging it to the canvas and then you can update its attributes by changing them in the Symbol Properties pan...

Страница 197: ...Values push name Selected value true type Boolean Widget elem customData currentValues currValues function applyCurrentValues var currValues Widget elem customData currentValues Get symbol object name var Check Widget GetObjectByName Check Check visible currValues 0 value switch Widget opCode case 1 setDefaultValues break case 2 applyCurrentValues break default break This sample JavaScript shows a...

Страница 198: ...roup of buttons while assigning unique button text and URLs to each instance For more information see Editing button symbols on page 224 Editing rich symbols If you are editing a rich symbol that has JavaScript behavior associated with it you cannot edit the JavaScript properties using the Symbol Editor In order to change these symbol properties the values need to be changed using the Symbol Prope...

Страница 199: ...symbols that you would like to reuse or share you can export your own symbol libraries When you export a symbol library it is exported as a PNG file Importing symbols Fireworks has symbol libraries in the Common Library panel from which you can import prepared animation symbols graphic symbols and button symbols as well as navigation bars and multi symbol themes Using these symbols you can quickly...

Страница 200: ... documents or share with others you can use the Library panel Options menu to export them in a PNG file You can then import the symbols by navigating to the PNG file that contains the symbols using the Edit Libraries submenu For more information see Importing symbols on page 194 To export symbols 1 Select Export Symbols from the Library panel Options menu 2 Select the symbols to export and click E...

Страница 201: ...aved between sessions URL panel About absolute and relative URLs When you enter a URL in the URL panel you can enter an absolute or relative URL If you are linking to a web page that is beyond your own website you must use an absolute URL If you are linking to a web page within your website you can use an absolute URL or a relative URL Absolute URLs are complete URLs that include the server protoc...

Страница 202: ...to a web object 1 Enter the URL in the Link text box 2 Click the Plus button to add the URL 3 Select a web object 4 Select the URL from the URL preview pane Creating a URL library You can group URLs in libraries This keeps related URLs together making them easier to access You can save URLs in the default URL library URLs htm or in new URL libraries that you create You can also import an existing ...

Страница 203: ...s from the URL panel Options menu 2 Click OK Editing URLs You can easily edit URLs using the URLs panel You can edit just a single occurrence of a URL or you can make your changes ripple throughout the document To edit a URL 1 Select the URL to be edited from the URL preview pane 2 Select Edit URL from the URL panel Options menu 3 Edit the URL Select Change All Occurrences in Document if you want ...

Страница 204: ...ADOBE FIREWORKS CS3 User Guide 199 2 Select an HTML file and click Open All URLs in this file are imported ...

Страница 205: ...ernate text Hotspots can also receive mouse events allowing JavaScript behaviors to be acted on in slices This chapter contains the following topics Creating and editing slices on page 200 Making slices interactive on page 205 Preparing slices for export on page 211 Working with hotspots and image maps on page 216 Creating and editing slices Slicing cuts up a Fireworks document into smaller pieces...

Страница 206: ...cludes the outermost edges of the selected object 2 If more than one object is selected select how to apply slices Single creates a single slice object that covers all selected objects Multiple creates a slice object for each selected object To draw a rectangular slice object 1 Select the Slice tool 2 Drag to draw the slice object The slice object appears on the Web Layer and the slice guides appe...

Страница 207: ...r slice objects overlap or have irregular shapes then a rectangular slice may swap unwanted background graphics along with the swap image Fireworks solves this problem by allowing you to draw slices in any polygonal shape using the Polygon Slice tool You can also insert a slice on top of a vector path to create irregular slice shapes To draw a polygon slice object 1 Select the Polygon Slice tool 2...

Страница 208: ...some web objects Because slices are web objects they are listed beneath the Web Layer in the Layers panel where visibility can be turned on or off for a selected slice You can also control slice visibility through the Tools panel Hiding a slice object does not prevent the slice from being exported in the HTML To hide and show particular slices and hotspots 1 Click the eye icon next to the individu...

Страница 209: ...nd slice objects define how the rest of the document is sliced upon export You can change the shape of a rectangular slice object by dragging the slice guides that surround it Nonrectangular slice objects cannot be resized by moving slice guides Resizing a slice object by dragging its slice guides Note If you drag slice guides that surround a Fireworks button in the Document window Fireworks resiz...

Страница 210: ...apping slices use slice guides to edit slices For more information see Moving slice guides to edit slices on page 204 To edit the shape of a selected slice do one of the following Select the Pointer or Subselection tool and drag the slice s corner points to modify its shape Use a transformation tool to perform the desired transformation For more information on using the transformation tools see Tr...

Страница 211: ...ver method allows you to determine what happens to a slice when the pointer passes over it The end result is commonly referred to as a rollover image Rollover images are graphics that change appearance in a web browser when you move the pointer over them When a slice is selected a round circle with cross hairs appears in the center of the slice This is called a behavior handle A Slice name B Behav...

Страница 212: ... in the frame directly under the top frame and involves only one slice To attach a simple rollover to a slice 1 Ensure that the trigger object is not on a shared layer For more information see Sharing layers on page 163 2 Select Edit Insert Slice to create a slice on top of the trigger object 3 Create a new frame in the Frames panel by clicking the New Duplicate Frame button 4 Create paste or impo...

Страница 213: ...ice or Hotspot to attach a slice or hotspot to the trigger image Note This step is not necessary if the selected object is a button or if a slice or hotspot already covers the image 2 Create a new frame by clicking the New Duplicate Frame button in the Frames panel 3 Place a second image to be used as the target in the new frame in the desired location on the canvas You can place the image anywher...

Страница 214: ...o remove 2 Click OK to remove the swap image behavior Using the Behaviors panel to add interactivity to slices In addition to rollovers you can attach other types of interactivity to slices using the Behaviors panel You can create custom interactions by editing existing behaviors Note Although you can create simple disjoint and complex rollovers with the Behaviors panel the drag and drop rollover ...

Страница 215: ...r slices in the navigation bar to their Up state Set Pop up Menu attaches a pop up menu to a slice or hotspot When you apply a pop up menu behavior you can use the Pop up Menu Editor For more information see Creating pop up menus on page 229 Set Text of Status Bar lets you define text for display in the status bar at the bottom of most browser windows Attaching behaviors Using the Behaviors panel ...

Страница 216: ...der icon Note If you don t see this option in the Swap Image dialog box select More Options and then perform step 1 2 Navigate to the file you want to use and click Open 3 If necessary deselect Preload Images if the external file is an animated GIF Pre caching can interrupt the display of animated GIFs as rollover states To avoid this problem deselect Preload Images when setting up the rollover No...

Страница 217: ...nate or alt text appears on the image placeholder while the image is downloading from the web it also substi tutes for graphics that fail to download In some newer versions of browsers the text also appears next to the pointer as a tool tip Entering brief meaningful alternate text has become increasingly important in web design A growing number of visually impaired people are using screen reading ...

Страница 218: ...ty inspector and press Enter Double click the name of the slice in the Web Layer enter a new name and press Enter Do not add a file extension to the base name Fireworks automatically adds file extensions to slice files upon export Auto naming slice files If you do not enter a slice name in either the Property inspector or the Layers panel Fireworks reverts to auto naming Auto naming assigns a uniq...

Страница 219: ... the HTML Setup dialog box To change the default auto naming convention 1 Select File HTML Setup to open the HTML Setup dialog box 2 Click the Document Specific tab 3 In the File Names section create your new naming convention by selecting from the lists 4 Optional To set this information as the default for all new Fireworks documents click Set Defaults Slice 1 2 3 Slice 01 02 03 Slice A B C Slice...

Страница 220: ... a spacing option from the Space With pop up menu Nested Tables No Spacers creates a nested table with no spacers Single Table No Spacers creates a single table with no spacers This option can cause tables to be displayed incor rectly in some cases 1 Pixel Transparent Spacer uses a 1 pixel by 1 pixel transparent GIF as a spacer that is resized as needed in the HTML This generates a 1 pixel high ro...

Страница 221: ...to highlight or produce rollover effects in response to mouse movement or actions Hotspots and image maps are also ideal when the graphic onto which you ve placed your hotspots would be best exported as a single graphic file in other words the entire graphic would best be exported using the same file format and optimization settings Creating hotspots After you identify areas on a source graphic th...

Страница 222: ...ts and like many other objects they can be edited using the Pointer Subselection and Transform tools For more information on using these tools to edit a web object see Using tools to edit slice objects on page 205 You can change a hotspot s position and size numerically using the Property inspector or the Info panel For more information about changing an object s dimensions numerically see Transfo...

Страница 223: ...le and corresponding graphics files which you can later import into Dreamweaver or another HTML editor Copy to Clipboard copies all required HTML including a table if the document is sliced to the Clipboard so that you can later paste it into Dreamweaver or another HTML editor 6 For Slices select None only if the document contains no slices 7 If necessary select Put Images in Subfolder and browse ...

Страница 224: ...h as a rollover effect You could place a slice on top of the graphic and then a hotspot on top of the text Rolling over just the text triggers the rollover effect yet the entire graphic beneath the slice swaps out when the rollover effect occurs Avoid creating hotspots that overlap more than one slice or unpredictable behavior may result To create a trigger for a rollover effect using a hotspot on...

Страница 225: ...vigation bars on page 228 Creating pop up menus on page 229 Creating button symbols Buttons are navigation elements for a web page Buttons created in the Button Editor have the following character istics You can make almost any graphic or text object into a button You can create a button from scratch convert an existing object into a button or import already created buttons A button is a special t...

Страница 226: ...the active area The tips on each option in the Button Editor help you make design decisions for all four button states Creating a simple two state button With the Button Editor you can create custom buttons by drawing shapes importing graphic images or dragging objects from the Document window The Button Editor then takes you through the steps to control the button s behavior To create an Up state...

Страница 227: ...Over Graphic to paste a copy of the Over state button into the Down window and then edit it to change its appearance Drag and drop import or draw a graphic Note When you insert or create a graphic for the Down state the Include Nav Bar Down State option is automatically chosen This button state is for buttons that are part of navigation bars To create an Over While Down state 1 With a three state ...

Страница 228: ...s from the Onion Skinning pop up menu in the Frames panel 3 Select all the objects to be included in the button Use the Select Behind tool to select objects that are hidden behind others For more information see Using the Select Behind tool on page 42 4 Select Modify Symbol Convert to Symbol The Symbol Properties dialog box opens 5 Enter a name for the symbol in the Name text box 6 Select the Butt...

Страница 229: ...another Fireworks document into the document Cut and paste a button instance from another Fireworks document into the document Import button symbols from a Fireworks PNG file Export button symbols from another Fireworks document to a PNG library file and then import button symbols from the PNG library file into the document Select Edit Libraries and import button symbols into the document s Librar...

Страница 230: ... s object name which appears in the Layers panel and is used for naming the exported slices for the button instance upon export Live Filters or opacity applied to the entire instance Text characters and text formatting such as font size orientation and color URL link overrides any URL that exists as a symbol level property Alternate alt image description Target frame overrides any target frame tha...

Страница 231: ... Library panel double click the button preview or the symbol icon beside the button symbol 2 Click the Active Area tab 3 Do one of the following Use the Pointer tool to move or reshape the slice or move a slice guide Use any of the slice or hotspot tools to draw a new active area Setting the URL for a button symbol or instance A URL or Uniform Resource Locator is a link to another web page website...

Страница 232: ...n instance in the workspace In the Library panel double click the button preview or the symbol icon beside the button symbol 2 Do one of the following in the Property inspector Select a preset target from the Target pop up menu None or _self loads the web page into the same frame or window as the link _blank loads the web page into a new unnamed browser window _parent loads the web page into the p...

Страница 233: ...lso applies to changes made to a button symbol s target and URL To set the alt text for a button instance in the workspace 1 Select the button instance in the workspace 2 Enter the description in the Alt Text box in the Property inspector Creating navigation bars A navigation bar or nav bar is a group of buttons that provide links to different areas of a website It generally remains consistent thr...

Страница 234: ... Menu Editor is a tabbed dialog box that guides you through the creation of a pop up menu Its many options for controlling the characteristics of a pop up menu are organized in four tabs Content has options for determining the basic menu structure as well as the text URL link and target for each menu item Appearance contains options that determine the appearance of each menu cell s Up state and Ov...

Страница 235: ...e menu item You can enter a custom link or select one from the Link pop up menu if any are available If you ve entered URLs for other web objects in the document those URLs appear in the Link pop up menu Target designates the target for the URL You can enter a custom target or select a preset one from the Target pop up menu Entering content on the last line in the window adds an empty line below i...

Страница 236: ...o continue building the pop up menu Click Done to close the Pop up Menu Editor To create a pop up submenu within a pop up submenu 1 Highlight a submenu item in the Content tab of the Pop up Menu Editor For more information see the previous procedure 2 Click the Indent Menu button to indent it again so that it is indented from the submenu item directly above it You can continue indenting to create ...

Страница 237: ... pop up menu To set whether a pop up menu is HTML or image based 1 With the desired pop up menu open in the Pop up Menu Editor click the Appearance tab For information on opening an existing pop up menu in the Pop up Menu Editor see Editing pop up menus on page 236 2 Select a Cells option HTML sets the menu s appearance using HTML code only This setting produces pages with smaller file sizes Image...

Страница 238: ...ed tab or select another tab to continue building the pop up menu Click Done to close the Pop up Menu Editor In the workspace the hotspot or slice on which you built the pop up menu displays a blue behavior line attached to an outline of the top level of the pop up menu Note To view a pop up menu press F12 to preview it in a browser The previews in the Fireworks workspace do not display pop up men...

Страница 239: ... the longest text Pixels allows you to enter specific measurements in pixels in the Cell Width and Cell Height text boxes 3 Enter a value in the Cell Padding text box to determine the distance between pop up menu text and the edge of the cell 4 Enter a value in the Cell Spacing text box to set the amount of space between menu cells 5 Enter a value in the Text Indent text box to set the amount of i...

Страница 240: ...You can also position a top level pop up menu by dragging its outline in the workspace when the Web Layer is visible To set the position for a pop up menu using the Pop up Menu Editor 1 With the desired pop up menu open in the Pop up Menu Editor click the Position tab For information on opening an existing pop up menu in the Pop up Menu Editor see Editing pop up menus on page 236 2 Do one of the f...

Страница 241: ...p up menu by dragging it 1 If necessary do one of the following to display the Web Layer Click the Show Slices and Hotspots button in the Tools panel Click the Eye column in the Layers panel 2 Select the web object that is the trigger for the pop up menu 3 Drag the pop up menu outline to another location in the workspace Editing pop up menus In the Pop up Menu Editor you can edit or update the con...

Страница 242: ...tion as the HTML file When you upload your files you should upload mm_css_menu js or mm_menu js for JavaScript to the same directory location as the web page containing the pop up menu If you want to post the file to a different location you must update the hyperlink referencing mm_css_menu js and the css file or mm_menu js in the Fireworks HTML code to reflect the custom location For every docume...

Страница 243: ...directly into Flash for further editing This chapter contains the following topics Building animation on page 238 Working with animation symbols on page 239 Working with frames on page 242 Tweening on page 246 Previewing an animation on page 246 Exporting your animation on page 247 Working with existing animations on page 248 Using multiple files as one animation on page 249 Building animation In ...

Страница 244: ...in addition to the other advantages discussed in this chapter You can change animation symbol properties at any time using the Animate dialog box or the Property inspector You can also edit symbol artwork in the Symbol Editor The Symbol Editor lets you edit your symbol without affecting the rest of the document You can also change a symbol s motion by moving its motion path Because animation symbo...

Страница 245: ...you want to include in the animation Although the slider limits you to a maximum of 250 you can enter any number you wish in the Frames text box The default is 5 Move is the distance in pixels that you want each object to move This option is available only in the Animate dialog box Although the default is 72 you can enter any number you wish in the Move text box Movement is linear and there are no...

Страница 246: ...rties You edit symbol graphics in the Symbol Editor The Symbol Editor lets you use any of the drawing text or color tools to edit the graphic While you re working in the Symbol Editor only the selected symbol is affected The symbol is a library item Thus if you change the appearance of one of its instances all the other instances change as well To change a selected symbol s graphic attributes 1 Do...

Страница 247: ...rame to another Each frame also has a number of associated properties By setting the frame delay or hiding a frame you can make your animation look the way you want during the building and editing process Setting the frame delay The frame delay determines how long the current frame is displayed It is specified in hundredths of a second For example a setting of 50 displays the frame for half a seco...

Страница 248: ... 2 and so on When you move a frame in the panel Fireworks renames each one to reflect the new order It s a good idea to name your frames for easy reference and to keep track of them That way you always know which frame contains which part of the animation Moving a renamed frame has no effect on the name it remains the same To change a frame s name 1 In the Frames panel double click the frame s nam...

Страница 249: ...jects to make them appear or disappear at different points in the movie To move a selected object to a different frame In the Frames panel drag the selection indicator the small blue square at the right of the frame delay time to the new frame Sharing layers across frames Layers divide a Fireworks document into discrete planes like separate tracing paper overlays With animations you can use layers...

Страница 250: ...he selected frame are listed in the Layers panel and displayed on the canvas Using onion skinning Onion skinning lets you view the contents of frames preceding and following the currently selected frame You can smoothly animate objects without having to flip back and forth through them The term onion skinning comes from a traditional animation technique of using thin translucent tracing paper to v...

Страница 251: ...e Live Filters change in each frame of the animation For example you can tween an object so that it seems to move along a linear path To tween instances 1 Select two or more instances of the same graphic symbol on the canvas Do not select instances of different symbols 2 Select Modify Symbol Tween Instances 3 Enter the number of tween steps to be inserted between the original pair in the Tween Ins...

Страница 252: ...mation load more easily and play more smoothly You can set playback settings like looping and transparency and then use optimization to make your exported file smaller and easier to download Note If you plan to import your animation into Flash for further editing you do not need to export it Flash can directly import Fireworks PNG source files For more information see Working with Flash on page 30...

Страница 253: ... Exporting an animation on page 279 You can export the animation as a Flash SWF file and then import it into Flash Or you can skip the export step and import your Fireworks PNG source file directly into Flash This option gives you the most control over how your animation is imported You can import all layers and frames of your animation if desired and then further edit them within Flash For more i...

Страница 254: ...e motion from Fireworks To import an animated GIF 1 Select File Import 2 Locate the file and click Open 3 Click Yes to add additional frames to your animation If you click Cancel only the first frame of the animated GIF is displayed Although the whole document is imported you must add additional frames to view it To open an animated GIF Select File Open and locate the GIF file Using multiple files...

Страница 255: ...roperties and add multiple albums to a slideshow Add additional images to an existing album View and rotate images in the Create Slideshow preview window Sort images within an album Remove unwanted images and or albums Apply image intervals how long the image stays on screen in seconds for a specific album or for all albums Apply slide transitions to images in the album Export the slideshow to a s...

Страница 256: ... 252 5 Select each of the panels on the right to configure the slideshow properties For more information about the available slideshow properties see Slideshow properties on page 252 6 Choose the location for the completed slideshow in the Export Options panel 7 After configuring all of the slideshow settings click Create 8 When the slideshow has finished processing you can select the Launch slide...

Страница 257: ...lideshow 2 In the Create Slideshow window create a new album or select Albums Open an existing AlbumBook to open an existing album 3 If you are opening an existing album browse to the folder that contains the existing slideshow XML file and click Open 4 Click on the album in the Albums list to select it 5 Select individual images and click on the up or down arrow buttons at the top of the image li...

Страница 258: ...om background image for the slide show Pop up menus allow you to select the image to use and select how it should be scaled Captions panel Use these options to customize the captions in your slideshows Apply to all albums Apply the selected caption options to all albums in the AlbumBook This is selected by default No change No change is made to the existing captions Clear all captions Clears all c...

Страница 259: ... their original aspect ratios Export thumbnails Select this option to export the thumbnails along with the full sized images Width and Height Width and height of the exported thumbnail images Image Quality Determine the output quality of the exported full sized and thumbnail images A setting of 100 indicates the best possible quality Enlarge images to fit If the original image is smaller than the ...

Страница 260: ... the Info node with the src attribute containing the name of the file The info file should contain HTML text If the file contains simple non HTML text line feeds carriage returns and tabs will be removed before displaying the text Create edit the MXI file such that the renamed SWF and HTML get placed in Configura tions Commands Create Slideshow players folder Note Make sure both the SWF and HTML f...

Страница 261: ...for this album thumbnails are exported in the thumbs folder inside path hasThumb has thumbnail thumbSrc album thumbnail image hasBg has background image bgSrc album background image bgScale scaling method for album background interval slideshow interval in seconds for this album useTransition use transition when switching between images transType slideshow transition for this album transTime trans...

Страница 262: ...u use the Optimize panel and the preview buttons in the Document window They offer you greater control over the optimization process For exporting you use the Export dialog box or the Quick Export button In some cases you can simply save the graphic without exporting For more information see Saving documents in other formats on page 23 The Quick Export button makes exporting graphics for use in ot...

Страница 263: ...timize graphics They are more convenient than the Export Wizard and offer more optimization control for users who are familiar with the optimization process After you optimize graphics in this manner you must perform an additional step to export or in some cases save the graphics For more information on exporting see Optimizing in the workspace on page 261 or Exporting from Fireworks on page 276 F...

Страница 264: ...ollowing procedures To edit the size and area of the exported image click the File tab and change the desired settings For information about the options available on this tab see the following procedures To edit animation settings for the image click the Animation tab and change the desired settings For information about the options available on this tab see the following procedures 2 Use the Zoom...

Страница 265: ...a graphic based on a target file size Enter a file size in kilobytes and click OK The Optimize to Size Wizard attempts to match the requested file size using these methods Adjusting JPEG quality Modifying JPEG smoothing Altering the number of colors in 8 bit images Changing dither settings in 8 bit images Enabling or disabling optimization settings To set exported image dimensions using Image Prev...

Страница 266: ...he frame delay select the desired frame in the list and enter the delay time in hundredths of a second in the Frame Delay field To set the animation to play repeatedly click the Looping button and select the desired number of repetitions from the pop up menu Select the Auto Crop option to crop each frame as a rectangular area so that only the image area that differs between frames is output Select...

Страница 267: ...elect individual slices or selected areas of a JPEG and assign different optimization settings for each Using optimization settings You can select from common optimization settings in the Property inspector or the Optimize panel to quickly set a file format and apply several format specific settings When you select an option from the Default export options pop up menu in the Property inspector the...

Страница 268: ... canvas are selected For more information see Saving and reusing optimization settings on page 275 To modify the color palette If the Optimize panel isn t already open select Window Optimize to view and edit a document s color palette For more information see Optimizing GIF PNG TIFF BMP and PICT files on page 265 To optimize individual slices 1 Click a slice to select it Shift click to select more...

Страница 269: ...cify different optimization settings for each preview to compare them When you select 2 Up or 4 Up view the first split view displays the original Fireworks PNG document so that you can compare it with optimized versions You can switch this view with another optimized version To switch any optimized view to the Original view from 2 Up or 4 Up view 1 Select an optimized view 2 Select Original No Pr...

Страница 270: ...k and white TIFF or Tagged Image File Format is a graphic format used for storing bitmap images TIFFs are most commonly used in print publishing Many multimedia applications also accept imported TIFF graphics BMP the Microsoft Windows graphic file format is a common file format used to display bitmap images BMPs are used primarily on the Windows operating system Many applications can import BMP im...

Страница 271: ... of 256 or fewer shades of gray Choosing this palette converts the image to grayscale Black and White is a two color palette consisting only of black and white Uniform is a mathematical palette based on RGB pixel values Custom is a palette that has been modified or loaded from an external palette ACT file or a GIF file Adjusting the color palette during optimization affects the colors in the image...

Страница 272: ...high color depth graphics on the web use JPEG files For more information see Optimizing JPEGs on page 272 Removing unused colors Removing unused colors from an image before exporting or saving makes its file size smaller Note This option is available only for GIFs and other 8 bit graphic file formats To remove unused colors Select Remove Unused Colors from the Optimize panel Options menu To includ...

Страница 273: ...is occurs you should rebuild the color table A Rebuild button appears at the bottom of the Optimize panel when you need to rebuild the color table To rebuild the color table to reflect edits in the document Click Rebuild at the bottom of the Optimize panel When the table is rebuilt the Rebuild button disappears and the actual number of colors used in the image is displayed in its place To select a...

Страница 274: ...t click Windows or Control click Macintosh the color swatch and select Lock Color from the context menu To unlock a color 1 Select a locked color in the Optimize panel color table 2 Click the Lock button in the Optimize panel or right click Windows or Control click Macintosh the color swatch and select Lock Color To unlock all colors Select Unlock All Colors from the Optimize panel Options menu Ed...

Страница 275: ...panel color table 2 Click the Snap to Web Safe button If you save a Fireworks PNG changing colors to websafe in the Optimize panel affects only the exported version of the image not the actual image Saving palettes You can save custom palettes as external palette files You can use saved palettes with other Fireworks documents or in other applications that support external palette files such as Ado...

Страница 276: ...mage will be transparent when you export it as a GIF for use on the web You must select Index Transparency before export You can also use alpha transparency although it is not often used with web graphics because only PNGs support it and most web browsers do not support PNG format Alpha transparency is often used in exported graphics that contain gradient transparency and semi opaque pixels Alpha ...

Страница 277: ...viewed in a web browser interlaced images appear gradually while they are downloading They display at a low resolution first and then transition to full resolution by the time the download is complete Note This option is available only for GIF and PNG file formats You can get similar results with a JPEG by making it progressive For more information see Optimizing JPEGs on page 272 To make a GIF or...

Страница 278: ...f lesser significance such as backgrounds can be compressed at a lower quality level reducing the overall size of the image while retaining the quality of the more important areas The selected area in this image is being compressed at a quality level of 90 while the unselected area is being compressed at a quality level of 50 To compress selected areas of a JPEG 1 In Original view select an area o...

Страница 279: ... saved JPEG typically creating smaller files A smoothing setting of about 3 reduces the size of the image while still maintaining reasonable quality To help preserve fine edges between two colors Select Sharpen JPEG Edges from the Optimize panel Options menu Use Sharpen JPEG Edges when exporting or saving JPEGs with text or fine detail to preserve the sharpness of these areas Choosing Sharpen JPEG...

Страница 280: ...revent halos in native Fireworks PNG files and in imported Photoshop files For other file types such as GIF however you must remove the halo manually To prevent halos in native Fireworks PNG files and imported Photoshop files do one of the following Set the Canvas Color in the Property inspector or the Matte Color in the Optimize panel to the color of the target web page background With the object...

Страница 281: ...e Export Settings folder varies depending on your operating system For more information see the previous procedure To delete a custom preset optimization 1 In the Optimize panel Saved Settings pop up menu select the optimization setting you want to delete 2 Select Delete Settings from the Optimize panel Options menu You cannot delete a Fireworks preset optimization setting Exporting from Fireworks...

Страница 282: ...ile Export 3 Select a location to export the image file to For web graphics the best location is typically a folder within your local website 4 Enter a filename You do not need to enter a file extension Fireworks does that for you upon export using the file type you specified in your optimization settings For more information on optimizing see About optimizing on page 257 5 Select Images Only from...

Страница 283: ...s the root name for all exported graphics excluding those you have custom named using the Layers panel or the Property inspector 4 Select Export Slices from the Slices pop up menu 5 To export only the slices you selected before export select Selected Slices Only and ensure that the Include Areas Without Slices option is not selected 6 Click Export Each slice is exported using its optimization sett...

Страница 284: ...iles on page 265 2 Select File Export 3 In the Export dialog box type a name for the file and select the destination 4 Click Export To export multiple animations with different animation settings as animated GIFs 1 Shift click the animations to select them all 2 Select Edit Insert Slice A message box appears asking if you want to insert one slice or multiple slices 3 Click Multiple 4 Select each s...

Страница 285: ...ntinue drawing the marquee When you release the mouse button the export area remains selected 3 Resize the export area if necessary Shift drag a handle to resize the export area marquee proportionally Alt drag Windows or Option drag Macintosh a handle to resize the marquee from the center Alt Shift drag Windows or Option Shift drag Macintosh a handle to constrain the proportions and resize from th...

Страница 286: ...ate HTML You do not need to understand it to use it After it is generated there is no need to change it to make it work as long as you do not rename or move files HTML or Hypertext Markup Language is currently the standard for displaying web pages on the Internet An HTML file is a text file that contains these elements Text that will appear on the web page HTML tags that define the formatting and ...

Страница 287: ...Working with Director on page 317 The export method of getting Fireworks HTML into other applications is ideal if you are working in a team environment Exporting an HTML file divides the workflow into segments so that one person can perform a task in one application and another can take over at a later time using another application You can set up global HTML export preferences using the HTML Setu...

Страница 288: ...tion Copying HTML to the Clipboard has the following disadvantages You don t have the option to save images into a subfolder They must reside in the same folder as the HTML file where you paste the copied HTML An exception is HTML copied to Dreamweaver Any links or paths used in Fireworks pop up menus will map to your hard drive HTML copied to Dreamweaver is an exception If you use an HTML editor ...

Страница 289: ...that site Dreamweaver automatically resolves the paths to the associated images 2 View the HTML code and place the insertion point in the desired location between the BODY tags Note HTML code copied from Fireworks does not include the opening or closing HTML and BODY tags 3 Paste the HTML code Refer to the help system within your specific HTML editor for instructions on pasting contents from the C...

Страница 290: ...served Note For considerable changes to document layout make your changes in Fireworks and re export the HTML file To update HTML using the Update HTML command 1 Do one of the following Select File Update HTML Click the Quick Export button and select Update HTML from the pop up menu 2 Select the file to update in the Locate HTML File dialog box 3 Click Open 4 If no Fireworks generated HTML is foun...

Страница 291: ...pop up menu on the General tab and click OK 2 Export your document using any of the methods available for exporting or copying HTML For more information about the various ways you can export and copy HTML from Fireworks see Exporting HTML on page 280 Note Fireworks uses UTF 8 encoding when exporting to XHTML For more information about UTF 8 encoding see Exporting files with and without UTF 8 encod...

Страница 292: ... up menu or enter a new one Select Include HTML Comments to include comments regarding where to copyand paste in the HTML This option is recommended if your document contains interactive elements such as buttons behaviors or rollover images HTML comments help you determine which parts of the code to copy and paste Select Lowercase File Name to make the name of the HTML file and the associated imag...

Страница 293: ...orting Fireworks files to other applications Using the Quick Export button you can export to a variety of formats including Dreamweaver and GoLive All the export options available through the Quick Export button are also available elsewhere in Fireworks such as the Export dialog box and the Edit menu The Quick Export button provides a shortcut to the most common export options For more information...

Страница 294: ...ressed JPEG or a document using other file formats and optimization settings available in the Optimize panel To send a document as an e mail attachment using your default e mail client 1 Select File Send to E mail 2 Select one of the following options Fireworks PNG attaches the current PNG document to a new e mail message JPG Compressed attaches the current document to a new e mail message using t...

Страница 295: ... Undo Check Out undoes Check Out of the local file and checks it in overwriting the local file with the remote copy Undo Check Out is enabled in Fireworks only if the Enable File Check In and Check Out option is enabled in Dreamweaver for the site in which the document lives Note File Management commands are enabled in Fireworks only if your document lives in a Dreamweaver site folder with a remot...

Страница 296: ... Dreamweaver and Fireworks share a file management feature that allows users to check files into and out of a Dreamweaver website Flash and Fireworks also share a tight integration You can import Fireworks PNG source files directly into Flash without having to export to any other graphics format Flash offers a variety of options that allow you to control how Fireworks objects and layers are import...

Страница 297: ...o a Dreamweaver document You can place a finished Fireworks graphic using the Files panel or the Insert menu in Dreamweaver or you can create a new Fireworks document from a Dreamweaver image placeholder You can insert any graphic file format supported by Fireworks and Dreamweaver directly into a Dreamweaver document using the Dreamweaver Files panel or Insert menu You must export the images from ...

Страница 298: ...ed to Dreamweaver the new Fireworks graphic you created takes the place of the image placeholder originally selected To create a Fireworks image from an image placeholder in Dreamweaver 1 In Dreamweaver save the desired HTML document to a location inside your Dreamweaver site folder 2 Position the insertion point in the desired position in your document and do one of the following Select Insert Im...

Страница 299: ...e location you choose should be within your Dream weaver site folder For more information on exporting see Fireworks Help 9 Click Save When you return to Dreamweaver the image placeholder you originally selected is replaced with the new Fireworks image or table you created Placing Fireworks HTML code in Dreamweaver There are several ways to place Fireworks generated HTML code into Dreamweaver You ...

Страница 300: ... HTML file after inserting it This option does not affect the source PNG file associated with the HTML file Note If the HTML file is on a network drive it is permanently deleted not moved to the Recycle Bin Windows 6 Click OK to insert the HTML code along with its associated images slices and JavaScript into the Dreamweaver document Copying Fireworks HTML code to the Clipboard for use in Dreamweav...

Страница 301: ...in Fireworks 2 Select File Update HTML or click the Quick Export button and choose Update HTML from the Dreamweaver pop up menu 3 Navigate to the Dreamweaver file containing the HTML you want to update and click Open 4 Navigate to the folder destination where you want to place the updated image files and click Open Fireworks updates the HTML and JavaScript code in the Dreamweaver document Firework...

Страница 302: ...oose slicing options For more information see Fireworks Help 5 Select Put Images in Subfolder to choose a separate folder for saving images 6 Click Save Editing Fireworks files from Dreamweaver Roundtrip HTML is a powerful feature that tightly integrates Fireworks and Dreamweaver It allows you to make changes in one application and have those changes seamlessly reflected in the other With Roundtri...

Страница 303: ...e known PNG source file for the image Then click Edit in the Property inspector Control double click Windows or Command double click Macintosh the image you want to edit Right click Windows or Control click Macintosh the desired image and choose Edit with Fireworks from the context menu Dreamweaver starts Fireworks if it is not already open 3 If prompted specify whether to locate a source Firework...

Страница 304: ...k Macintosh the image and then choose Edit with Fireworks from the context menu Dreamweaver starts Fireworks if it is not already open The source PNG file for the entire table appears in the Document window For more information on Fireworks source PNG files see Fireworks Help 3 In Fireworks make the desired edits Dreamweaver recognizes and preserves all edits applied to the table in Fireworks 4 Wh...

Страница 305: ...in Dreamweaver You can start Fireworks from Dreamweaver to make quick export changes such as re sampling or changing the file type to placed Fireworks images and animations Fireworks lets you make changes to optimization settings animation settings and the size and area of the exported image To change optimization settings for a Fireworks image placed in Dreamweaver 1 In Dreamweaver select the des...

Страница 306: ...ing the new optimization settings the GIF or JPEG placed in Dreamweaver is updated and the PNG source file is saved if a source file was selected If you changed the format of the image the Dreamweaver link checker prompts you to update references to the image For example if you changed the format of an image called my_image from GIF to JPEG clicking OK at this prompt changes all references to my_i...

Страница 307: ...sure that Fireworks is set as the primary editor for GIF JPEG and PNG files in Dreamweaver Although you can use earlier versions of Fireworks as external image editors these versions offer limited launch and edit capabilities When you work with Roundtrip HTML Fireworks MX and Fireworks 4 do not fully support edits made to cell properties in Dreamweaver tables nor does it support behaviors applied ...

Страница 308: ... Dreamweaver uses the Design Note to locate a source PNG for that file For best results always save your Fireworks source PNG file and exported files in a Dream weaver site This ensures that any user sharing the site can locate the source PNG when starting Fireworks from within Dreamweaver Specifying launch and edit preferences for Fireworks source files The Fireworks launch and edit preferences l...

Страница 309: ... dialog box in Dreamweaver to define the target folder or a folder that contains the target folder as the local root folder for a site The File Management button displays the following menu commands Get copies the remote version of the file to the local site overwriting the local file with the remote copy Check Out checks the file out overwriting the local file with the remote copy Check Out is en...

Страница 310: ...s into Flash You can import Fireworks PNG source files directly into Flash without having to export to any other graphics format All Fireworks vectors bitmaps animations and multi state button graphics can be imported into Flash Note Fireworks button behaviors and other types of interactivity are not imported into Flash because Fireworks behaviors are enabled by JavaScript that is external to the ...

Страница 311: ...he PNG file are preserved Import all pages into new scenes as movie clips Imports all of the pages from the PNG file and maps each one to a new scene as movie clips Any layers and frames within the pages are preserved If scenes already exist in the Flash file the import process adds the new scenes after the existing ones Import Page 1 into new layer The selected page is imported as new layer Frame...

Страница 312: ... object or objects to copy 2 Select Edit Copy or click the Quick Export button and choose Copy from the Flash pop up menu 3 In Flash create a new document and choose Edit Paste or drag the file directly from Fireworks to Flash The Import Fireworks Document dialog box appears 4 Select an option from Into pop up menu Current frame as movie clip The contents being pasted are imported as a movie clip ...

Страница 313: ...sh library The structure within this folder is as follows File 1 folder Named with the Fireworks file name Page 1 folder Named with the page name if more than one page Page 1 Named with the page name Frame 1 folder Named with the frame name if more than one frame Frame 1 Named with the frame name Symbol 1 in Frame 1 Named based on the symbol name Symbol 2 in Frame 1 Shared Layers folder Shared lay...

Страница 314: ...lurX blurY distance maps to distance color maps to color angle maps to 180 Photoshop Effect angle Photoshop Live effect Outer Glow Mapping is as follows Opacity maps to strength color maps to color size maps to blurX blurY Photoshop Live effect Inner Glow Mapping is as follows Opacity maps to strength color maps to color size maps to blurX blurY Objects with any other Photoshop layer effects are r...

Страница 315: ...ormation on PNG source files see Fireworks Help Exporting Fireworks graphics and animations as SWF files Fireworks graphics and animations can be exported as Flash SWF files You can make several choices about how objects are exported Some formatting is lost unless you choose Maintain Appearance in the Flash SWF Export Options dialog box Stroke size and stroke color are maintained The following for...

Страница 316: ...t Fireworks PNG source files directly into Flash You can also create transparency with an 8 bit PNG file With an 8 bit PNG file you get excellent transparency results and better file compression than with the GIF file format You can export Fireworks 8 bit PNG graphics with transparency for insertion into Flash To export an 8 bit PNG file with transparency 1 In Fireworks choose Window Optimize to o...

Страница 317: ...ake changes to the image and click Done when finished Fireworks exports a new graphic file to Flash and if you edited the original PNG file it is also saved Working with FreeHand Because both applications support vectors vector graphics can be easily shared between Fireworks and FreeHand The appearance of objects may differ between applications however because Fireworks and FreeHand do not share a...

Страница 318: ...ayers are ignored Include Background Layers imports objects from the document s background layer Otherwise the background layer is ignored Render as Images rasterizes complex groups blends or tiled fills and places each as a single bitmap object in a Fireworks document Enter a number in the text box to determine how many objects a group blend or tiled fill can contain before it is rasterized durin...

Страница 319: ...cs that were created in Fireworks Depending on the options you select when importing or opening FreeHand can import Fireworks layers frames vectors text bitmaps and some effects that are shared by both applications Hidden Fireworks layers are ignored and are not imported Whether or not the content you import or open is editable in FreeHand depends on the import options you select in the Fireworks ...

Страница 320: ...ap option if you want to preserve the look of the entire Fireworks document When this option is selected the rest of the options in the Fireworks PNG Import Settings dialog box are dimmed Select this option only if editability is not important to you 10 Click OK 11 Click in the FreeHand Document window where you want the Fireworks PNG file to appear Copying and pasting Fireworks graphics into Free...

Страница 321: ...or applications can read the Illustrator 7 file format 4 Click the Options button 5 In the Illustrator Export Options dialog box choose one of the following Export Current Frame Only preserves layer names and exports only the current frame Convert Frames to Layers exports each Fireworks frame as a layer 6 Select FreeHand Compatible to export the file for use in FreeHand Choosing FreeHand Compatibl...

Страница 322: ...ng flattened Fireworks images such as JPEG and GIF images see Fireworks Help Exporting graphics with transparency In Director transparency can be achieved by importing 32 bit PNG images You can export 32 bit PNG graphics with transparency from Fireworks To export a 32 bit PNG image with transparency 1 In Fireworks choose Window Optimize change the export file format to PNG 32 and set Matte to tran...

Страница 323: ... you can import flattened images that you have exported from Fireworks such as JPEG GIF and 32 bit PNG images Or you can import Fireworks layers slices and interactive elements by inserting Fireworks HTML To import a flattened Fireworks image 1 In Director choose File Import 2 Navigate to the desired file and click Import 3 Change options if desired in the Image Options dialog box For information ...

Страница 324: ... can also start Fireworks from inside Director to optimize cast members To start Fireworks to edit a Director cast member 1 In Director right click Windows or Control click Macintosh the graphic in the Cast window 2 Select Launch External Editor from the pop up menu Note If Fireworks does not start as your external image editor in Director choose File Preferences Editors and set Fireworks as the e...

Страница 325: ...te document Drag the file from the Resources window to the desired location within the HTML code on the Edit tab of the Document window On the Edit tab of the Document window place the insertion point where you want to insert the Fireworks image then right click the file in the Resources window and choose Insert as Link A link to the Fireworks image is created in the HTML code Click the Browse tab...

Страница 326: ...ML type to Generic in the HTML Setup dialog box For more infor mation see Fireworks Help To copy code from an exported Fireworks file and paste it into HomeSite Export a Fireworks HTML file and then copy and paste the desired code into an existing HomeSite document For more information see Fireworks Help Updating Fireworks HTML exported to HomeSite The Update HTML command allows you to make change...

Страница 327: ...hop graphics in Fireworks You can drag individual Photoshop graphics into Fireworks or you can import an entire Photoshop file Dragging individual Photoshop graphics into Fireworks You can place Photoshop graphics into Fireworks by dragging them into your document To drag a Photoshop graphic into Fireworks Drag the graphic from Photoshop into an open document in Fireworks Each graphic you drag bec...

Страница 328: ...brought into Fireworks However because Fireworks and Photoshop apply effects differently the effects may appear different in each application When Photoshop 6 or 7 files that contain text are opened or imported in Fireworks with the Maintain Appearance option selected a cached image of the text is displayed so its appearance remains the same as it was in Photoshop Once you edit the text the cached...

Страница 329: ...works lets you use many Photoshop and other third party filters and plug ins You can use plug ins in either the Live Filters window or the Filters menu Note Plug ins and filters for Photoshop 5 5 and earlier versions are supported Photoshop 6 or later plug ins and filters are not compatible with Fireworks CS3 For more information on the Live Filters window and the Filters menu see Fireworks Help T...

Страница 330: ...ed in detail in Customizing files for export to Photoshop on page 325 Maintain Editability over Appearance converts objects to layers keeps effects editable and converts the text to editable Photoshop text layers Select this option if you plan to edit the image extensively in Photoshop and do not need to preserve the exact appearance of the Fireworks image Maintain Fireworks Appearance converts ea...

Страница 331: ...choose this option you preserve the appearance of the text at expense of the ability to edit it About working with Illustrator Fireworks provides support for importing native Illustrator AI CS2 and CS3 files with options for retaining many aspects of the imported files including layers patterns and linked images As a result you can bring Illustrator images into Fireworks for further editing and we...

Страница 332: ...kes are imported as multiple groups one group per closed path Symbols Symbols are imported as a normal group objects Transparency Fireworks imports object opacity correctly preserving object transparency settings at the original Illustrator values Sub Layers Fireworks imports all sub layers as native Fireworks sub layers About working with GoLive You can use Fireworks and GoLive together to create...

Страница 333: ...adata to an XMP file click Save in the Advanced pane of the dialog box Type a file name choose a location for the file and click Save About Adobe Bridge Adobe Bridge is a cross platform application included with Adobe Creative Suite 3 components that helps you locate organize and browse the assets you need to create print web video and audio content You can start Bridge from any Creative Suite com...

Страница 334: ...art is there s no work necessary on your part because Fireworks exports the necessary Flex code MXML for you with styling and absolute positioning maintained Now you can easily create a Flex application layout in Fireworks leveraging Flex common library assets and export it as MXML for loading into Flex Builder To export MXML data 1 Choose File Export 2 Choose MXML and Images in the Export pop up ...

Страница 335: ...te commands that are shortcuts for commonly used features or create a script that can perform a complex series of steps Fireworks can understand and execute JavaScript so advanced users can automate very complex tasks by writing JavaScript commands and then executing them in Fireworks You can control nearly every Fireworks command or setting through JavaScript using special JavaScript commands tha...

Страница 336: ... not already selected in the Search pop up menu selecting it opens a dialog box in which you can select which files to search If Search Files is already selected in the Search pop up menu you have the option to select which files to search after you begin the search operation by clicking Find Replace or Replace All 4 From the Find pop up menu select an attribute to search for The options in the pa...

Страница 337: ...iginal files are moved to an Original Files subfolder within their current folder and an incremental number is appended to each filename If you perform additional find and replace operations the original file is copied to the Original Files folder and the next higher number is added to its filename For example for a file named Drawing png the first time you find and replace the backup file is name...

Страница 338: ... stroke colors only Effects finds and replaces effect colors only Finding and replacing URLs In addition to words typefaces and colors Fireworks allows you to find and replace URLs assigned to interactive elements in your documents To search for and replace URLs assigned to web objects 1 Select Find URL from the Find pop up menu of the Find panel 2 Enter the URL to search for in the Find text box ...

Страница 339: ...on settings Scale exported files Find and replace text colors URLs fonts and non Web216 colors Rename groups of files by any combination of adding a prefix adding a suffix replacing a substring and replacing blanks Perform commands on a selection of files To batch process files 1 Select File Batch Process and select the files to process You can select files from different folders and you can also ...

Страница 340: ... process Note Valid files are files that have been created named and saved If the latest file version is not saved you are asked to save it and you can then continue the batch process If you don t save the file the entire batch process ends Add All adds all valid files in the currently selected folder to the list of files to batch process Remove removes selected files from the list of files to bat...

Страница 341: ...the tasks are performed during the batch process with the exception of Export and Rename which are always performed last 5 To view extra options for a task select the task in the Include in Batch list 6 Select settings for each option as required To remove a task from the batch select the task in the Include in Batch list and click Remove 7 Click Next 8 Select options for saving processed files Sa...

Страница 342: ...ireworksBatchLog txt Macintosh Changing optimization settings with a batch process You can change file optimization settings using the Export option in the Batch Process dialog box To set export settings for a batch process 1 Select Export from the Batch Options list and click Add 2 From the Settings pop up menu select from the following options and click OK Select Use Settings from Each File to k...

Страница 343: ...age 3 If you have chosen either Scale to Size or Scale to Fit Area in the Scale pop up menu you can also choose to scale only those documents that are currently larger than the target size To do so select the Only Scale Documents Currently Larger Than Target Size option 4 Click Next to continue the batch process For information on completing the batch process see Batch processing on page 334 Findi...

Страница 344: ...in the filename with a character or characters you specify or you can delete all blanks from each filename For example files named Pic nic jpg and Slap stick jpg might be changed to Picnic jpg and Slapstick jpg or Pic nic jpg and Slap stick jpg Add Prefix lets you enter text to add to the beginning of the filename For example if you enter night_ then the file Sunrise gif is renamed night_Sunrise g...

Страница 345: ...es Overwrite Existing Backups overwrites the previous backup file Incremental Backups keeps copies of all the backup files When you run a new batch process a number is appended to the end of the filename of the new backup copy Note If Backup is deselected batch processing in the same file format overwrites the original file if the name is the same However batch processing in a different file forma...

Страница 346: ...g that script from your hard drive to the Fireworks icon on your desktop to run the batch process The Fireworks application launches and runs that script To run a script by dragging and dropping 1 Save a script 2 Do one of the following Drag the script file icon onto the Fireworks desktop icon Drag the script file icon into an open Fireworks document Note Dragging multiple script files and multipl...

Страница 347: ...he following Select Commands Manage Extensions Select Help Manage Extensions For more information about using the Extension Manager see Extension Manager Help To visit the Adobe Fireworks Exchange do one of the following From within Fireworks select Help Fireworks Exchange From a web browser go to the Fireworks Exchange at www adobe com go fireworks_exchange Scripting with the History panel The Hi...

Страница 348: ... command 1 If necessary select one or more objects 2 Select the command from the Commands menu To replay a selection of steps 1 Select one or more objects 2 Select the steps in the History panel 3 Click the Replay button at the bottom of the History panel Steps marked with an X are nonrepeatable and cannot be played back Separator lines indicate that a different object has become selected Commands...

Страница 349: ...works Managing commands You can rename or delete any commands that appear in the Commands menu You can rename or delete any commands that you create using the Manage Saved Commands option in Fireworks You must use the Extension Manager for other commands and extensions that were installed with Fireworks or that you downloaded and installed from the Adobe Exchange website To rename a custom command...

Страница 350: ...ust to your user profile or to all users Commands folders are located in the Configuration folder in the Fireworks application folder and also in your user specific Fireworks configuration folder For more information see Working with configuration files on page 350 Commands saved directly into the Commands folder as well as those saved in the History panel appear in the Commands menu as soon as yo...

Страница 351: ...lders or Import 3 Make your changes and click OK General preferences The following options are on the General preferences tab Undo Steps sets undo redo steps to a number between 0 and 1009 This setting applies to both the Edit Undo command and the History panel A large number of undos can increase the amount of memory Fireworks requires You must restart Fireworks for the change in this setting to ...

Страница 352: ... or erase For certain large multi tipped brushes the cross hair pointer is used by default When this option and Precise Cursors are turned off tool icon pointers are displayed Precise cursors replaces tool icon pointers with the cross hair pointer Turn off hide edges automatically disables Hide Edges when the selection changes Show pen preview provides a preview of the next path segment that will ...

Страница 353: ...e elements within Dreamweaver see Working with Dreamweaver on page 292 Folders preferences The folders preferences give you access to additional Adobe Photoshop plug ins texture files and pattern files from external sources Additional Materials Photoshop Plug Ins Textures and Patterns targets folders containing plug ins textures and patterns The folders can be in another folder on your hard disk o...

Страница 354: ...nt ways to perform an action A custom shortcut set is always based on a preinstalled set Note In Fireworks shortcuts to tools cannot include modifier keys Control Shift and Alt Windows or Command Shift Option and Control Macintosh Tool shortcuts consist of a single letter or number key To create a custom or secondary shortcut for a menu command tool or miscellaneous action 1 Select Edit Keyboard S...

Страница 355: ...eets exported from Fireworks are UTF 8 encoded To create a reference sheet 1 Select Edit Keyboard Shortcuts to open the Keyboard Shortcuts dialog box 2 Click the Export Set as HTML button beside the Current Set text box The Save As Windows or Save Macintosh dialog box is displayed 3 Enter the name for the reference sheet and select the appropriate location for the file 4 Click Save Working with co...

Страница 356: ...e user system Fireworks changes your user specific configuration files and not the master configuration files in the Fireworks application folder when you save most settings This is because many users don t have access to all files if they are on multiuser systems Users with administrator level access can customize features for all users by modifying the master configuration files in the Fireworks...

Страница 357: ...ks is installed in a format called the application program package This is a feature from Apple that allows applications to be installed in a self contained package The application package is where the Fireworks application file is stored along with all default configuration files that come with Fireworks Package contents are hidden by default After you open the package you ll notice a number of f...

Страница 358: ... scaling 240 setting frame delay 242 sharing layers across frames 244 transparency 247 turning frames on and off 243 viewing all frames 246 viewing current and adjacent frames 246 viewing multiple frames 245 viewing next frame 246 anti aliasing edges 144 removing halos 275 smoothing text edges 118 target background color 274 application program package 352 arranging frames 244 Arrow tool 86 Auto L...

Страница 359: ...1 Live Filters 222 navigation bars 228 overview 220 setting a target 227 C canvas 34 modifying characteristics 34 modifying resolution 35 rotating 36 trimming 36 cell border properties 234 cellular phone graphics See WBMP files center point and axis of rotation 56 Chamfer Rectangle tool 87 character spacing See kerning Check Spelling command 124 cloning bitmap areas 66 images 66 objects 54 CMY col...

Страница 360: ...mand 49 contracting paths 106 contrast 76 Convert to Symbol dialog box 186 converting paths 104 copying all selected objects on a layer 161 bitmaps 53 frames 243 HTML 283 object attributes 186 objects 53 pixels 44 copying and pasting Adobe Fireworks HTML 283 symbol instances 195 copying and pasting objects from other applications 19 corner points 94 Create Symbol Script panel 28 creating master pa...

Страница 361: ...obe Fireworks HTML 296 drop shadows 150 duplicating selected objects 53 E edges beveled 149 showing and hiding 43 Edit Gradient dialog box 143 Edit Stroke dialog box 138 editing actions in the History panel 345 animation symbols 240 behaviors 210 bitmap objects 63 gradient fills 142 images 63 Live Filters 152 pages 156 paths 100 pixels 44 pop up menus 236 selected objects 53 single layer 162 solid...

Страница 362: ...ert 78 Motion Blur 79 Photoshop plug ins 150 Radial Blur 80 Sharpen 81 Sharpen More 81 Unsharp Mask 82 Zoom Blur 80 Find and Replace panel 331 332 Find Edges filter 80 Find panel 28 finding and replacing 331 batch processed files 338 colors 333 fonts 332 multiple files 332 non websafe colors 333 selecting source for search 331 text 332 URLs 333 uses 330 Fireworks 327 Fireworks See Adobe Fireworks ...

Страница 363: ...ndtrip 298 Setup 287 updating Adobe Fireworks HTML placed in Dreamweaver 296 working with editors 327 HTML opening tables 18 hue adjusting 71 77 Hue Saturation filter 77 I icon images See thumbnails Illustrator exporting to 314 importing files into Adobe Fireworks 326 Image Editing panel 28 63 image maps 216 creating 216 exporting 218 images exporting 277 Image Editing panel 63 painting 63 saving ...

Страница 364: ...ving 47 saving and restoring 51 selecting area around 50 selecting pixels by intersecting 48 smoothing 50 transferring to another object 50 masks 164 adding objects to a masked selection 178 bitmap 165 creating empty 170 deleting 178 disabling 178 enabling 178 grouping objects to form a mask 172 modifying 175 moving with masked objects 174 replacing 178 text as a mask 169 using an existing object ...

Страница 365: ...1 332 Frames 27 242 hiding 29 History 27 40 Image Editing 28 Info 28 Layer 159 Layers 27 Library 186 moving 28 opening custom layouts 30 Optimize 27 Options menu in 30 organizing 28 Pages 27 restoring default positions 29 saving custom layouts 30 Shapes 27 Special Characters 28 Styles 27 183 Swatches 28 127 Symbol Properties 28 Tools 25 undocking 28 undocking from panel group 28 URL 27 196 using S...

Страница 366: ... options 347 location of file 351 restoring defaults 348 setting 346 Undo Steps 346 Preview button 263 Preview Drag preference 347 previewing documents in a browser 288 optimization settings 263 264 pixels containing specific color 269 strokes 138 with Export Preview 258 previewing documents on different platforms 34 progressive JPEGs 274 properties viewing in Property inspector 26 Property inspec...

Страница 367: ... documents as e mail attachments 289 Set Nav Bar Image behavior 210 Set Pop up Menu behavior 210 Set Text of Status Bar behavior 210 shadows 72 150 shapes 14 Shapes panel 27 sharing layers 163 Sharpen filter 81 Sharpen More filter 81 Sharpen tool 66 sharpening 81 bitmap areas 66 images 67 shortcut sets 350 See also keyboard shortcuts Show Fill Handles preference 347 Show Pen Preview preference 347...

Страница 368: ...g 195 modifying 187 placing instances 187 placing instances in document 187 rich graphic 190 saving as rich graphic symbols 191 swapping 188 tweening 246 using 9 slice scaling 188 system color picker 131 system requirements 1 T text adjusting character width 118 alignment 116 attributes saving 119 checking spelling 124 color 113 direction of 116 entering 109 finding and replacing 332 formatting 11...

Страница 369: ...tton state 221 Update HTML command 285 296 updates 7 updating slices 278 URL library 196 adding URLs 197 adding used URLs 198 creating 197 entering absolute or relative URLs 196 URL panel 27 196 URLs assigning to a web object 198 assigning to buttons or instances 226 finding and replacing 333 selecting target options 212 user configuration files 350 351 user folder 350 351 UTF 8 encoding 286 350 V...

Результаты поиска

Содержание 38039927 - Fireworks CS3 - PC

Отзывы:

Бренды по названию

Популярные бренды

Adobe 38039927 - Fireworks CS3 - PC, Инструкция по использованию

Результаты поиска

Содержание 38039927 - Fireworks CS3 - PC

Отзывы:

Бренды по названию

Популярные бренды