Fireworks 4.0 Easy learning book

32 Using Fireworks Web Design Tools How to Work with Pointer Tool To Work with Pointer Tool !"Move the Pointer tool over the object's stroke and click.. How to Work with Select Behind

Fireworks 4.0 Easy Learning eBook

Table of Contents

CREATING FIREWORKS WEB DOCUMENT 7

How to Create a New Fireworks Document 7

How to Open Existing Fireworks Document 9

How to Open the HTML File 10

How to Work with Import Command 11

How to Work with Export Command 12

How to Work with Export Wizard 14

How to Work with HTML Setup - General 16

How to work with HTML Setup - Table 18

How to Work with HTML Setup - Document Specific 19

How to Copy HTML Code 21

2

How to Edit Preference 25

How to Launch and Edit in the Preference Dialog Box 27

How to Work with Folders in the Preferences Dialog Box 29

How to Work with the Import in the Preference Dialog Box 31

USING FIREWORKS WEB DESIGN TOOLS 32

How to Work with Pointer Tool 32

How to Work with Select Behind Tool 33

How to Work with Export Area Tool 34

How to Work with Subselection Tool 36

How to Work with the Marquee Tool 37

How to Work with the Oval Marquee Tool 38

How to Work with Lasso Tool 39

How to Work with Crop Tool 40

How to Work with Magic Wand Tool 41

How to Work with Line Tool 42

How to Work with Pen Tool 43

How to Work with the Rectangle Tool 44

How to Work with the Rounded Rectangle Tool 45

How to Work with the Ellipse Tool 46

How to Work with the Polygon Tool 47

How to Work with the Polygon Tool Options Panel 48

How to Work with the Text Tool 50

How to Work with the Pencil Tool 51

How to Work with the Brush Tool 52

How to Work with the Redraw Path Tool 53 How to Work with the Scale Tool 54

How to Work with the Skew Tool 55

How to Work with the Distort Tool 56

How to Work with the Freeform Tool 57

How to Work with the Reshape Area Tool 58

How to Work with Eyedropper Tool 59

4

How to Change Pointer Tool Option 62

How to Change the Marquee Tool Option 63

How to Change Polygon Lasso Option 64

How to Work with Magic Wand Tool Option 65

How to Work with the Pen Tool Option 66

How to Work with the Pencil Tool Option 67 How to Work with the Eraser Tool Option 68

How to Work with the Rubber Stamp Option 69

EDITING TEXT AND IMAGE 70

How to Change the Font Type 70

How to Change the Font Size 72

How to Change the Text Style - Bold 73

How to Change the Text Style - Italic 74

How to Change the Text Style - Underline 75 How to Change the Image Brightness

and Contrast 76

How to Adjust the Image Curves 77

How to Adjust the Image Hue or Saturation 79

How to Adjust Image Invert 81

How to Adjust the Image level 82

How to Blur the Image 84

How to Convert Image to Alpha 85

How to Convert Image with Find Edges 86 How to Sharpen the Image 87

How to Unsharp Mask the Image 88

USING FIREWORKS PANELS AND EXTRAS 90

How to Work with the Stroke Panel 90

How to Work with the Fill Panel 92

How to Work with the Mixer Panel 94

How to Work with Swatches Panel 95

How to Work with Show Grid 96

How to Work with the Styled Panel 97

6

How to Work with Accented Edges 99How to Work with Diffuse Glow 100How to Work with Bas Relief 101

Creating Fireworks Web Document Welcome to Fireworks 4.0 Easy Learning eBook.

3 Enter a Resolution in pixels per inch or pixels per centimeter

4 Select white, transparent, or a custom Color for the canvas

How to Open Existing Fireworks

10

How to Open the HTML File

To Open the HTML File

How to Work with Import Command

To Work with Import Command

!"You can use this command to import the image and fireworks file

!"After that click on the Import button

12

How to Work with Export Command

To Work with Export Command

!"You can export the file to html and image file

!"Finally, click on the Save button

14

How to Work with Export Wizard

To Work with Export Wizard

!"If you select General tab from the Menu, you will see four main things as

the picture shown

1 Choose an HTML Style to set the style for exported HTML

2 Choose a file extension name from the Extension pop-up menu or enter a new one

3 Select Include HTML Comments to include comments regarding

where to cut and paste in the HTML

4 Select Lowercase File Name to make the name of the HTML file,

including the extension and image files, lowercase on export

18

How to work with HTML Setup - Table

To work with HTML Setup - Table

1 Select the Table space

2 Select the cell color

3 Select the contents

How to Work with HTML Setup -

Document Specific

To Work with HTML Setup - Document Specific

Step 1

!"If you select Document Specific tab from the Menu, you will see three

main things in this dialog box

1 Choose a formula for auto-naming slices in the Slice Auto-naming

pop-up menus

2 This alternate text appears on the image placeholder while the image

is downloading from the Web or in place of an image if it fails to

20

How to Copy HTML Code

How to Set the General Preference

To Set the General Preference

!"After entered to the Preferences dialog box, choose General from the

Menu Bar, you will see three main sections as the picture shown

24

How to Edit Preference

1 Replaces tool icon pointers with the cross-hair pointer

2 Permanently deletes pixels or objects that are outside the bounding

box of a selection when you choose Edit from the Menu and click Crop Document or choose Modify and then click Canvas Size

3 Expand the striped border to surround the entire canvas when you switch to bitmap mode, allowing pixel editing within the entire

document

4 Open any image file directly in bitmap mode

5 Automatically disable Hide Edges when entering or leaving bitmap mode

How to Launch and Edit in the

Preference Dialog Box

To Launch and Edit in the Preference Dialog Box

1 Decides if the original Fireworks PNG file opens when you use

Fireworks to edit images from within Dreamweaver or another HTML editor

2 Decides if the original Fireworks PNG file opens when you optimize a graphic by using the Optimize Image in Fireworks command in

Dreamweaver

28

How to Work with Folders in the

Preferences Dialog Box

To Work with Folders in the Preferences Dialog Box

3 Patterns stored as PNG files appear as options in the Pattern pop-up menus in the Fill panel and the Textures pop-up menu in the Stroke panel

4 Specify where Fireworks stores temporary cache files

30

How to Work with the Import in the Preference Dialog Box

To Work with the Import in the Preference Dialog Box

32

Using Fireworks Web Design Tools

How to Work with Pointer Tool

To Work with Pointer Tool

!"Move the Pointer tool over the object's stroke and click

!"If the object has a fill, you can click the fill to select it

How to Work with Select Behind Tool

To Work with Select Behind Tool

!"Click the Select Behind tool repeatedly over the stacked objects,

progressing through the objects one by one until you have selected the object you want

34

How to Work with Export Area Tool

To Work with Export Area Tool

!"Drag a marquee defining the portion of the document to export

!"Double-click inside the export area marquee to go to Export Preview

!"Adjust settings in the Export Preview and click Export

!"In the Save as pop-up menu, choose Images Only

!"In the Export dialog box, type a file name, choose a destination folder, and

click Save

36

How to Work with Subselection Tool

To Work with Subselection Tool

How to Work with the Marquee Tool

To Work with the Marquee Tool

How to Work with Lasso Tool

To Work with Lasso Tool

40

How to Work with Crop Tool

To Work with Crop Tool

How to Work with Magic Wand Tool

To Work with Magic Wand Tool

!"Click the area of color you want to select

!"A marquee appears around the selected range of pixels

!"You can also use the Shift key + mouse to select the color

42

How to Work with Line Tool

To Work with Line Tool

How to Work with Pen Tool

To Work with Pen Tool

!"A straight-line segment will join the two points

!"Continue plotting points Straight segments bridge each gap between points

44

How to Work with the Rectangle Tool

To Work with the Rectangle Tool

How to Work with the Rounded

46

How to Work with the Ellipse Tool

To Work with the Ellipse Tool

How to Work with the Polygon Tool

To Work with the Polygon Tool

1 Choose Polygon from the Shape pop-up menu

2 Use the slider to choose 3 to 25 sides

50

How to Work with the Text Tool

To Work with the Text Tool

!"Click your document where you want the text block to begin

!"And then, choose color, font, size, spacing, and other text characteristics

!"After that type the text

!"Finally, click Apply button

How to Work with the Pencil Tool

To Work with the Pencil Tool

52

How to Work with the Brush Tool

To Work with the Brush Tool

How to Work with the Redraw Path Tool

To Work with the Redraw Path Tool

54

How to Work with the Scale Tool

To Work with the Scale Tool

How to Work with the Skew Tool

To Work with the Skew Tool

56

How to Work with the Distort Tool

To Work with the Distort Tool

How to Work with the Freeform Tool

To Work with the Freeform Tool

!"Drag the cursor to draw what you want to draw

!"To constrain the path to a horizontal or vertical line, hold down Shift while dragging

!"Release the mouse button to end the path

!"To close the path, release the mouse button when you have returned the pointer to the point at the beginning of the path

How to Work with Eyedropper Tool

To Work with Eyedropper Tool

How to Work with the Eraser Tool

To Work with the Eraser Tool

62

How to Change Pointer Tool Option

To Change Pointer Tool Option

How to Change the Marquee Tool

2 Hard option creates a marquee selection with a defined edge Notice that the Anti-alias option prevents jagged edges in the marquee selection

!"After that you will see the Tool Options (Polygon Lasso Tool) dialog box

as the picture shown, where you can edit the Edge of Polygon Lasso to hard, anti-alias or feather

!"Hard creates a marquee selection with a defined edge

!"Anti-alias prevents jagged edges in the marquee selection

!"Feather allows you to soften the edge of the pixel selection

How to Work with Magic Wand Tool Option

To Work with Magic Wand Tool Option

1 Hard creates a marquee selection with a defined edge

Anti-alias prevents jagged edges in the marquee selection

Feather allows you to soften the edge of the pixel selection

2 Set the tolerance level by dragging the tolerance slider

How to Work with the Pencil Tool

1 Puts a smooth edge on the lines you draw

2 Draw the fill color over the stroke

3 Restrict the Pencil tool to draw paths only into existing pixels, not into transparent areas of a graphic

1 Drag the Edge Softness slider to set the softness of the eraser's edge

2 Choose a round or square eraser

3 Transparent makes the erased area transparent Fill Color selects the color in the fill color box Stroke Color selects the color in the stroke color box Canvas Color selects the document canvas color

4 Drag the Eraser Size slider to set the size of the eraser

How to Work with the Rubber Stamp Option

To Work with the Rubber Stamp Option

2 Image lets you clone from the selected image only Document lets you clone any area of the document, including any existing path objects

3 Drag the slider to adjust the softness of the Rubber Stamp tool's edge

4 Drag the Stamp Size pop-up slider to set the size of the Rubber Stamp

70

Editing Text and Image

How to Change the Font Type

To Change the Font Type

Step 1

!"To change the Font Type, you must select the text first

!"After that, choose the Text and then select the Font that you want your

72

How to Change the Font Size

To Change the Font Size

Step 1

!"To change the Font Size, you must select the text first

!"Choose the Text and then select the Size you want

How to Change the Text Style - Bold

To Change the Text Style - Bold

Step 1

!"To change the Text Style to Bold, you must select the text first

!"Choose the Text and then elect the Style tab from the Menu Bar After that, click Bold

74

How to Change the Text Style - Italic

To Change the Text Style - Italic

Step 1

!"To change the Text Style to Italic, you have to select the text first

!"Choose the Text and then select the Style tab from the Menu Bar After that click Italic

How to Change the Text Style -

!"The Brightness or Contrast filter modifies the contrast or the brightness of

all pixels in an image

How to Adjust the Image Curves

To Adjust the Image Curves

How to Adjust the Image Hue or

!"You can use Hue or Saturation to adjust the color, the purity of the color,

and the lightness of the color in an image

80

How to Adjust Image Invert

To Adjust Image Invert

82

How to Adjust the Image level

To Adjust the Image level

3 Drag the right slider to adjust the highlights using values from 255 to 0 and drag the left slider to adjust the shadows from 0 to 255

Step 3

!"This is the result of adjusting the Level

84

How to Blur the Image

To Blur the Image

How to Convert Image to Alpha

To Convert Image to Alpha

How to Sharpen the Image

To Sharpen the Image

88

How to Unsharp Mask the Image

To Unsharp Mask the Image

!"Drag the Pixel Radius slider to select a radius from 0.1 to 250

!"Drag the Threshold slider to select a threshold of 0 to 255

!"Values between 2 and 25 are most commonly used

90

Using Fireworks Panels and Extras

How to Work with the Stroke Panel

To Work with the Stroke Panel

2 Choose a stroke from the Stroke Name pop-up menu

3 Drag the slider to adjust the softness

4 Choose a texture from the Texture pop-up menu

5 To change the stroke color

6 Drag the Size pop-up slider to set the size

Step 3

!"This is the result of Stroke panel

92

How to Work with the Fill Panel

To Work with the Fill Panel

1 Selects Solid from the Fill Category pop-up menu

2 The fill appears in the selected object and becomes the active fill color

3 Hard creates a marquee selection with a defined edge Anti-alias prevents jagged edges in the marquee selection Feather allows you to soften the edge of the pixel selection

4 Choose a texture from the Texture pop-up menu

94

How to Work with the Mixer Panel

To Work with the Mixer Panel

!"After entered to the Color Mixer dialog box, you will see four main sections

as the picture shown

1 Stroke

2 Fill color box

3 Set default brush or fill colors

How to Work with Swatches Panel

To Work with Swatches Panel

96

How to Work with Show Grid

To Work with Show Grid

How to Work with the Styled Panel

To Work with the Styled Panel

98

How to Work with Colored Pencil

To Work with Colored Pencil

How to Work with Accented Edges

To Work with Accented Edges

100

How to Work with Diffuse Glow

To Work with Diffuse Glow

How to Work with Bas Relief

To Work with Bas Relief

102

Index

A

Accented Edges 99

result 99

Adjust 77, 79, 82 Adjust Color 76, 77, 79, 81, 82 Adjust Image Invert 81

Image 82

Image Curves 77

Image Hue 79

Image level 82

midtowns 82

Alpha 85, 86 Convert 85, 86 Convert Image 85

Anti-alias 63

Apply button 50

Artistic 98

B Bas Relief 101

result 101

Before & After 70, 72, 73, 74, 75, 98, 99, 100, 101 Blur 84

Blur Radius 84

Drag 84

Image 84

Bmp 9

Bold 73

Brightness 76

result 76

Brush Strokes 99

Brush tool 25, 52 shape 25

C Canvas Color 68

Canvas Size 25

Change 62, 63, 70, 72, 73, 74, 75, 76 Change Pointer Tool Option 62

Change Polygon Lasso Option 64

Font Size 72

Font Type 70

Image Brightness 76

Marquee Tool Option 63

Text Style 73, 74, 75 Tool Option 62