USING FIREWORKS 8

1
USING FIREWORKS 8

• Cropping an Image
• Obtaining Information
• Changing Image Size
• Rotating an Image
• Adjusting the Color of an Image
• Drawing Tools
• Using the Paint Bucket to Change or Add Color to
  a Region
  
• Blurring, Smudging, and Sharpening Images
• Dodging and Burning Images
• Using the Rubber Stamp tool
• Adding Text to an Image
• Using Filters
• Optimizing Images
• Saving Images in Fireworks

Using Dreamweaver, Photoshop, and
FireworksGraphics Production for the
Webhttp//www.stanford.edu/group/csp/cs38/
2
Cropping an Image

• 1. Select the Marquee Tool.
• 2. Using the mouse, click and drag to draw a box
  around the area to be cropped.
  
• 3. Under Edit, select Crop Document. The new
  dimensions will be displayed in the Properties
  palette.

3
Obtaining Information

• When a graphic is viewed in Fireworks, the
  program offers information about the height and
  width (in pixels) of the graphic.

4
Obtaining More Information

• The Info window (Window Info) provides detailed
  color information about each pixel in the
  graphic. Placing the cursor at a specific spot
  on a graphic will display the color (in
  hexadecimal code) for that spot. In the example
  below, at location 29x33, the color is FE 00 00
  (with an opacity of FF, or 100).

5
Changing Image Size

• To change the size of an image
• 1. Under Modify, choose Canvas, then Image Size.
• 2. Enter the new height/width desired, and press
  OK to finalize the change of size.
  

6
Keep this chart in mind when choosing image size

• Monitor Resolution Maximum Size of Material
  (Width x Height)
  
• WebTV (TV set) 544 x 738
• 640 x 480 600 x 300
• 800 x 600 760 x 420
• 1024 x 768 955 x 600
• Monitor Resolution can be set at
• - Windows Start Settings Control Panel
  Display Settings
  
• - Mac OS X System Preferences Displays
  Display
  
• - Mac OS 9 Control Panels Monitors
  Resolution
  
• If you already added this graphic to your web
  page before changing its size, you will need to
  change the height and width attributes in the
  source code. In Dreamweaver, this is done by
  clicking the Reset Image to Original Size icon
  in the Properties palette.

7
Rotating an Image

• 1. Using the Marquee Tool, click and drag to
  select the part of the image to rotate.
  
• 2. Under Modify, choose Transform, and then the
  transformation desired.
  

8
Adjusting the Color of an Image

• Under Filters, choose Adjust Color, and select
  the desired adjustment
  
• Auto Levels, Brightness/Contrast, Curves,
  Hue/Saturation, Invert, or Levels.
  

Before Adjust Color Invert After
9
Drawing Tools

• Fireworks has the following tools that you can
  use to draw
  
• Pencil (bitmap) Used to draw 1-pixel lines or
  to edit single pixels
  
• Brush (bitmap) Used to paint brush strokes in a
  bitmap graphic
  
• Pen (vector) Used to draw by placing points
  that define a path
  
• Vector Path (vector) Used to paint brush
  strokes in a vector graphic (vector equivalent to
  the brush tool). This tool is obtained by
  clicking the mouse button on the Pen tool and
  selecting the Vector Path tool.
• Line (vector) Used to draw lines
• Rectangle (vector) Used to draw rectangles,
  ellipses, polygons, arrows, beveled rectangles,
  chamfer rectangles, connector lines, doughnuts,
  pies, rounded rectangles, smart polygons,
  spirals, or stars

10
Using the Drawing Tools

• After selecting a tool, in the Properties window,
  select the color, size, and style of the drawing
  tool.
  
• Draw by clicking and dragging the mouse. The
  example below shows a frame drawn using the Line
  Tool.

11
Using the Paint Bucket to Change or Add Color to
a Region

• 1. Select a color in the fill color box.
• 2. Select the Paint Bucket tool.
• 3. Click the object or region you wish to color.

12
Blurring, Smudging, and Sharpening Images

• Fireworks has several tools to affect the pixel
  focus and the colors in images.
  
• The Blur tool lets you emphasize or de-emphasize
  parts of an image by selectively blurring the
  focus of elements.
  
• The Sharpen tool (obtained by clicking the mouse
  button on the Blur tool and selecting the Sharpen
  tool) can be useful for repairing scanning
  problems or out-of-focus photographs.
• The Smudge tool (obtained by clicking the mouse
  button on the Blur tool and selecting the Smudge
  tool) lets you gently blend colors, as when
  creating a reflection of an image.
• To blur, sharpen, or smudge an image
• 1. Choose the Blur, Sharpen, or Smudge tool.
• 2. Drag the tool over the pixels to be sharpened,
  blurred, or smudged.

13
Dodging and Burning Images

• The Dodge Tool is used to lighten parts of
  an image.
  
• The Burn Tool is used to darken parts of an
  image.
  
• To use the Dodge or Burn tool
• 1. Select the tool (both are obtained by clicking
  the mouse button on the Blur tool and selecting
  the Dodge or Burn tool).
  
• 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.
• 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 stronger effect, specify a higher
  value.
• Set the range in the Property inspector
• Shadows changes mainly the dark portions of the
  image.
  
• Highlights changes mainly the light portions of
  the image.
  
• Midtones changes mainly the middle range per
  channel in the image.
  
• 3. Drag over the part of the image you want to
  lighten or darken.

14
Using the Rubber Stamp tool

• The Rubber Stamp tool clones an area of a
  bitmap image 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. Choose the Rubber Stamp tool.
• 2. Click an area to designate it as the source,
  or the area you want to clone. The sampling
  pointer becomes a cross-hair pointer.
  
• 3. Move to a different part of the image and
  drag the pointer. You will see two pointers.
  The first one, the source of the cloning, is in
  the shape of a cross hair. Depending upon the
  brush preferences youve selected, the second
  pointer is a rubber stamp, a cross hair, or a
  blue circle. As you drag the second pointer,
  pixels beneath the first pointer are copied and
  applied to the area beneath the second.

15
Adding Text to an Image

• 1. Click the Text Tool.
• 2. Click and drag to draw a rectangle around the
  area in which you wish the text to appear.
  
• 3. When the cursor appears in the text area,
  enter the text.
  

16
Using Filters

• Filters let you change the look of your images.
  They can add unique lighting or create
  distortions. You can also use filters to clean up
  or retouch your photos. The filters are listed in
  the Filter menu.
• Examples of Filters
• Simulating static on a TV screen using Add Noise
• Correcting images that are blurry by using
  Sharpen
  
• Softening an image using Blur

17
Optimizing Images

• Fireworks gives graphic artists the option to
  pick the format which will best display the
  image. This process is known as optimizing.
  
• 1. Click the 2-up or 4-up tab to see how
  optimizing the image will affect its
  appearance.
  
• 2. Select one of the windows which appears.
  Then, in the Optimize window (Window
  Optimize), change the settings and view how the
  image would look with the settings changed
  (optimized).

Original GIF Viewed as a
image JPEG image
18
Saving Images in Fireworks

• The best choice for saving images in Fireworks is
  to use the Export Wizard.
  
• 1. Under File, choose Export Wizard.
• 2. Click Continue, select The web, click
  Continue, and then click Exit.
  
• 3. In the Image Preview screen that appears, you
  are given a chance to see how the image would
  look under different circumstances (see
  Optimizing Images). Highlight your choice,
  then click Export.
• 4. Save the image to the site folder on your
  computer.
  

19
(No Transcript)