Introduction to Fireworks Making It Graphic

1
Introduction to FireworksMaking It Graphic

• Dreamweaver 4.0
• Guthrie Soe

2
Objectives

• In this chapter you will
• Learn how to use the Fireworks menu bar,
  toolbars, and Tools panel
• Create and edit graphics and photographs using
  Fireworks
• Use drawing tools to create shapes and lines

3
Objectives

• In this chapter you will
• Color objects using the Color Mixer and Tools
  panel
• Change fill, stroke, and effect attributes of
  objects and text
• Create a graphic using layers
• Export and optimize a file

4
Fireworks Editing Menus

• Figure 2-1 shows a Fireworks screen as it appears
  when you first open a blank document in the
  Fireworks application
• By default, the work area contains four windows,
  each of which contains several panels
• You can switch among these panels by clicking the
  tabs at the top of each window

5
Fireworks Editing Menus
6
Fireworks Editing Menus

• The menu bar at the top of the Fireworks screen
  contains ten options
• File Edit
• View Insert
• Modify Text
• Commands Xtras
• Window Help

7
Fireworks Editing Menus

• The Main toolbar, shown in Figure 2-12, is
  similar to that of many applications you may
  already use
• Using this toolbar, you can create a new document
  or open an existing one, save a file, import or
  export a file, and print
• The Modify toolbar, shown in Figure 2-3, shows
  several icons that allow you to orient objects in
  the work area with respect to one another

8
Fireworks Editing Menus

• The toolbar is divided into four actions
• Grouping
• Positioning
• Alignment
• Rotation

9
Fireworks Editing Menus
10
Fireworks Editing Menus
11
Fireworks Editing Menus

• Figure 2-5 shows the four tabs at the top of the
  Fireworks work area called the canvas
• Original
• Preview
• 2-Up
• 4-Up

12
Fireworks Editing Menus

• You can preview and optimize your graphic
• The Original tab displays your original drawing
• If you create an animation or button, the Preview
  tab allows you to see how it looks when it is
  operational
• Using the 2-Up and 4-Up tabs, you can adjust
  characteristics to preview your graphic using
  different settings

13
Creating a New Document

• Using the New Document dialog box, you must
  specify the canvas size and resolution, and
  select a canvas type
• Most Web graphics are 72 pixels per inch because
  most monitors display graphics at this resolution

14
Creating a New Document

• You can choose one of three options for canvas
  color
• White is the most popular background for a
  business Web page
• Transparent displays a checkered background in
  the workspace that disappears when you save your
  graphics
• Custom Background allows you to choose the
  background color from the Web safe 216-color
  palette
• After you create your work area, you may decide
  that you need to modify the size of the canvas or
  image, or the type of background you selected
• To change any of these attributes, click Modify
  on the menu bar

15
Saving and Exporting Files

• Fireworks automatically saves your file in
  Portable Network Graphic format, which uses
  compression algorithms that yield better results
  than .gif compression
• However, many Web browsers do not support .png
  graphics without the use of a plug-in
• Saving your graphics file in .png format
  maintains all the files editable features as
  well as the layers created as part of the
  graphic, so that you may continue editing the
  file in detail

16
Saving and Exporting Files

• Many Fireworks options allow you to preview and
  optimize your graphics before exporting them for
  use on the Web
• You can use the 2-Up and 4-Up preview tabs to
  optimize your graphic
• You can click Export on the File menu and select
  a variety of file types, generate HTML code, and
  slice a graphic

17
Saving and Exporting Files
18
Using the Tools Panel

• The Tools panel is located to the far left of the
  Fireworks work area
• With it, you can create basic shapes, add text,
  color shapes and text, and manipulate objects in
  the work area
• The Tools panel is divided into subsections for
  selecting, drawing, transforming, special, and
  moving graphics

19
The Shape Tool

• If you click and hold the Solid Rectangle Tool in
  the Tools panel, you see a menu of four shapes
• Notice the color wells at the bottom of the Tools
  panel

20
The Shape Tool
21
The Shape Tool

• The color wells show the fill color and line
  color of the object you create on the page
• You can view the options for a tool, if they
  exist, in the Options panel for the tool
• As with the rectangle, drawing an ellipse is a
  matter of selecting the Ellipse Tool and then
  dragging the mouse button across the canvas to
  form the shape

22
Lines, Pens, Pencils, and Brushes

• The Pen Tool is a bit more complex
• You create the line (or path) by dragging the
  mouse over the canvas
• However, this tool lets you define a path using
  anchor points and segments
• The Pencil Tool lets you draw free-form lines by
  holding down the mouse button over the canvas and
  dragging the mouse to draw the desired shape

23
Lines, Pens, Pencils, and Brushes

• The Brush Tool operates much like the Pencil Tool
• You can paint a free-form line by dragging the
  paintbrush across the canvas
• If you want to paint a straight line, you can
  hold down the Shift key while dragging the
  paintbrush in the desired direction

24
Lines, Pens, Pencils, and Brushes
25
The Text Tool

• The Text Tool is useful for adding labels and
  text to your graphics
• Elements in the Text Editor dialog box allow you
  to change font type, size, color, and style
• Kerning is a means of controlling the amount of
  space between the characters of text
• The Leading attribute allows you to control the
  amount of space between multiple lines of text

26
The Text Tool
27
The Color Tools

• To draw a line using a specific color, simply
  activate the Stroke Tool, select a color from the
  palette, and draw the line
• To color an existing line, use a selection tool,
  the Pointer Tool or Marquee Tool, select the
  object, and then change the color in the Stroke
  Tool
• This modifies the color of the line
• Use the Fill Tool to fill shapes or selected
  areas
• You can fill a selected area by clicking the Fill
  Tool and then clicking the selected area of the
  canvas

28
The Selection Tools

• Selection tools are the most important tools for
  manipulating graphics and photographs in any
  graphics application
• Being able to select shapes allows you to add
  colors to specific objects very precisely
• Being able to select portions of drawings allows
  you to delete unneeded colors and backgrounds and
  to recolor photographs so they fit any color
  scheme

29
The Pointer and Subselection Tools

• The Pointer Tool has three options
• The Pointer Tool
• The Select Behind Tool
• The Export Area Tool
• Using the Pointer Tool, you can select and
  reposition a shape any place on the canvas
• You use the Subselection Tool to select an object
  for reshaping

30
The Pointer and Subselection Tools
31
The Pointer and Subselection Tools

• When you select the tool and click an object, you
  see several small squarescalled Bezier
  pointsaround the object

32
The Marquee and Lasso Tools

• The Marquee and Lasso Tools allow you to select
  areas of the canvas by drawing a shape around
  them
• Using the Marquee Tool, you can draw a fixed
  selection shape
• Using the Lasso Tool, you can draw a customized
  selection shape

33
The Marquee and Lasso Tools
34
The Marquee and Lasso Tools

• The Lasso Tool has one additional option, the
  Polygon Lasso Tool
• To use the Lasso Tool, simply drag the mouse
  around a desired area, holding down the mouse
  button
• This tool works like the Pencil or Brush Tools,
  except you select the area inside the lasso you
  create

35
The Cropping Tool

• The Crop Tool is used to select a portion of the
  document you are working on and discard the
  remainder of the document
• This is a quick way to select part of a
  photograph or graphic that you wish to use and
  immediately get rid of everything else
• To use the Crop Tool, drag the tool across the
  canvas to create a rectangular shape

36
The Magic Wand Tool

• Using the Magic Wand Tool, you can select all
  areas of a document that are the same color
• More selection alternatives are available on the
  menu bar under Edit and in the Marquee submenu
  under Modify

37
The Magic Wand Tool
38
The Magic Wand Tool
39
The Transformation Tools

• The Transformation Tools are in the center of the
  Tools pane, as shown in Figure 2-8
• They include the Scale Tool, Freeform Tool,
  Eyedropper Tool, Paint Bucket Tool, Eraser Tool,
  and Rubber Stamp Tool

40
The Scale Tool

• The Scale Tool offers two additional tools in its
  pop-up menu
• Skew Tool
• Distort Tool
• The Scale Tool lets you resize a selection, the
  Skew Tool lets you stretch a selection along its
  vertical or horizontal axis, and the Distort Tool
  lets you stretch a selection by dragging its
  sides with the mouse

41
The Freeform Tool

• The Freeform Tool offers three additional options
  in its pop-up menu
• Reshape Area Tool
• Path Scrubber Tool-additive
• Path Scrubber Tool-subtractive
• You use the Freeform Tool to reshape the selected
  line

42
The Eyedropper Tool

• Sometimes when you edit a graphic or photograph,
  you may want to use a color from one portion of
  the element and duplicate it in another area
• The Eyedropper Tool lets you change the fill
  color in the color box by clicking a pixel that
  contains the color you want
• Once you copy the color to the color box, you can
  use it as a fill color on other selections

43
The Paint Bucket Tool

• With the Paint Bucket Tool, you can fill
  selections and areas with color
• You can use the Paint Bucket Tool in conjunction
  with the color box at the bottom of the Tools
  panel

44
The Eraser Tool

• The Eraser Tool allows you to erase portions of
  your document by dragging an eraser over the
  canvas
• Double-clicking the Eraser Tool opens a Tool
  Options panel in which you can select the size
  and shape (round or square) of the eraser

45
The Rubber Stamp Tool

• Using the Rubber Stamp Tool, you can copy a
  portion of a graphic and duplicate it in another
  area of the canvas
• Figure 2-28 shows how you might use the Rubber
  Stamp Tool to eliminate the menu hanging on the
  wall between the two men in the photograph

46
The Image Tools

• Special Fireworks 4 tools let you create hotspots
  and slices
• Hotspots are areas defined on a graphic that a
  user can click like a hyperlink to go to another
  Web page
• The three Hotspot Tools help you create a shape
  on a graphic that users can click to link to a
  different Web page
• Rectangle Circle
• Polygon

47
The Image Tools

• The Slice Tool and Polygon Slice Tool let you cut
  a graphic into several smaller graphics or slices
  and arrange them in a table
• Slices reduce the time needed to load a large
  graphic and let you attach different behaviors to
  the smaller graphics in a table

48
The Move Tools

• The Move Tools in Fireworks include a Hand Tool
  so that you can move around the work area to view
  specific portions of larger elements, and a Zoom
  Tool for magnifying a document or image

49
Working with Panels

• Four panels open when you start Fireworks
• Stroke panel
• Optimize Document panel
• Layers panel
• Color Mixer panel
• Each window containing these panels has several
  other panels that you can access by clicking the
  appropriate panel tab

50
Working with Panels
51
Using Color Panels

• Fireworks has a Color Table, Swatches, and Color
  Mixer panels to assist you further in using color
• The Color Mixer offers four other modes that you
  can access by using the list arrow on the right
  side of the mixer
• The other color models are RGB, CMY, HSB, and
  Grayscale

52
Using Color Panels

• Color panels represent common color schemes that
  graphic artists use to define color
• Hexadecimal color defines a Web color by using
  three different hexadecimal numbers to represent
  red, green, and blue
• RGB (red green blue) color defines red, green,
  and blue as values from 0 to 255
• CMY (cyan, magenta, yellow) color defines DMY as
  values between 0 and 255
• HSB (hue, saturation, brightness) color defines a
  hue (a color with a value between 0 and 360)
• Grayscale color uses shades of color between
  black and white by defining a K value as a
  percentage

53
Using Color Panels

• Use the list arrow to choose which color format
  you want to work with
• Figure 2-31 displays the Swatches panel with the
  Windows System Palette

54
Strokes, Fills, and Effects

• The Stroke panel lets you change the appearance
  of paths to thicken and reduce line size, so they
  look like a specific instrument created them
• To change the path appearance using the Stroke
  panel, you must select the Stroke panel, either
  from the Windows menu by clicking the title of
  the panel, or by pressing the CtrlAltF4 key
  combination

55
Strokes, Fills, and Effects

• The Fill panel, shown in Figure 2-34, provides
  colors, styles, and textures that you can use to
  create interesting effects for the fills of
  objects in your graphic

56
Strokes, Fills, and Effects
57
Strokes, Fills, and Effects

• If you choose to select a Pattern fill from the
  list shown in Figure 2-37, several options are
  available to you, including Flames,
  Impressionist, or Wood

58
Strokes, Fills, and Effects

• The Effect panel is useful for making changes to
  text and objects, such as buttons and headers,
  that enhance the visual appeal of your Web page
• The Information panel provides size, color, and
  placement information about selections in your
  graphic

59
The Layers, Frames, and History Panels

• To create a complex graphic, you must often work
  in layers
• Layers are transparency canvases, stacked on top
  of one another
• Figure 2-39 shows the Layers panel for a food
  train graphic composed of several cropped images
  of various types of produce
• Each object on the canvas occupies its own layer

60
The Layers, Frames, and History Panels
61
The Layers, Frames, and History Panels

• You use the Frames panel to create Web animations
• Animations are similar to cartoons
• They consist of a series of images displayed in
  rapid succession to give the appearance of
  movement

62
Working with Layers

• Refer to the steps on pages 77 to 79 of the
  textbook to use layers to create a logo for a
  company named La Bonne Cuisine
• You reposition layers in the work area with
  respect to one another

63
The Optimize Panel

• The Optimize panel lets you see how your document
  will look before you save it, flatten any layers,
  and export it for use on the Web
• To see how your image will actually look, you
  must select the Preview tab in the work area and
  use it in conjunction with the Optimize panel
• An additional mechanism for optimizing your file
  is the 2-Up and 4-Up screens indicated by tabs in
  the work area

64
The Optimize Panel
65
The Optimize Panel

• Figure 2-42 shows the 4-Up window with different
  settings for each window
• Viewing the four options simultaneously lets you
  see the visual effect of the settings directly on
  the graphic

66
Summary

• Fireworks creates .png format files that you can
  export into other, more commonly supported Web
  formats such as .gif and .jpg
• The Fireworks Tools panel allows you to create
  shapes and lines in a variety of colors, fills,
  and strokes
• Selection tools include a Pointer Tool, a
  Subselection Tool, and Marquee and Lasso Tools
  that let you select paths, fills, and areas to
  edit

67
Summary

• Text Tools are used to enter text on top of the
  canvas
• You can alter text features, including font,
  size, color, and style
• Paths, or lines, can be manipulated using the
  Stroke panel
• A wide variety of strokes create different pen
  styles, pen tip widths, and textures

68
Summary

• Solid, Web Dithered, and Pattern Fills can be
  used to fill shapes and selected areas
• Layers are independent, stacked canvases in one
  document
• Using layers allows you to create a complex
  graphic with independent, editable elements on
  the different layers
• The Optimize panel can be used with the preview
  of your graphic to experiment with different
  optimization properties