Macromedia Fireworks

1
Macromedia Fireworks
2
Understanding Fireworks

• What can you do in Fireworks MX?
• Work with vector objects and bitmap images
• Add JavaScript-enabled interactivity and
  animation
• Optimize files for the Web

3
Working with Files

• Fireworks files are called documents
• Fireworks files are saved as PNG files
• Portable Network Graphics
• have .png extension

4
File Formats

• Many file formats can be imported into Fireworks
• Fireworks documents can be exported as a variety
  of file formats
• You can copy and paste images into Fireworks

5
File Formats

• Available options for Fireworks

6
The Fireworks Window

• The Fireworks workspace is the area where you
  work with documents, tools, and panels
• Panels help perform specific functions
• Tools panel houses tools
• Layers panel organizes objects

7
The Fireworks Window

• Property inspector
• used to modify selected object
• shows properties specific to a tool or command
• docked at bottom of workspace

8
The Fireworks Window

• The document window has four tabs
• Original
• Preview
• 2-Up
• 4-Up
• 2-Up and 4-Up are used to evaluate different
  optimization settings side by side

9
The Layers Panel

• Layers are used to manipulate objects
• Objects are the individual elements in your
  document, such as text or images
• Layers function like folders, divided into
  sections that contain objects

10
The Layers Panel

• Layers can be
• hidden or shown
• locked or unlocked
• rearranged
• duplicated
• deleted
• collapsed or expanded
• renamed

11
The Layers Panel

• Objects can be moved to new layers

12
Bitmap Images

• A bitmap graphic represents a picture image as a
  matrix of dots, or pixels, on a grid
• Resolution refers to the number of pixels in an
  image
• onscreen resolution is 72 or 96 pixels per inch

13
Bitmap Images

• Bitmap file formats
• BMP
• PICT
• GIF
• JPEG
• PNG
• TIFF
• PSD (Adobe Photoshop)

14
Bitmap Images

• Bitmap tools in Fireworks are used to modify
  pixels
• Blur tool
• Sharpen tool
• Burn tool
• Dodge tool
• Smudge tool
• Rubber Stamp tool

15
Vector Objects

• Vector objects are mathematically calculated
  objects composed of
• anchor points
• straight or curved line segments
• Vector objects are created in Fireworks with
• Shape tools
• Pen tool
• Text tool
• Line tool
• Vector objects can be manipulated using the
  Subselection tool

16
Positioning Objects

• You can align and position bitmap and vector
  objects using
• Rulers
• Guides
• Grid
• Objects can snap to guides
• Guides can be hidden or shown using the View menu

17
Working with Text

• Text can be created and modified in the
  properties panel
• Text properties include font, size, color,style,
  kerning, leading, alignment, text flow, offset,
  and anti-aliasing
• Kerning adjusts the space between adjacent
  letters or a range of letters
• Leading adjusts the amount of space between lines
  of text

18
Working with Text

• Fixed-width text blocks are created by dragging
  the Text tool on the canvas to a fixed size
• Clicking the Text tool on the canvas and typing
  creates an auto-sized text block
• Anti-aliasing blends the edges of type to the
  color behind them
• You can choose Crisp, Strong, Smooth or No
  anti-aliasing

19
Attaching Text to a Path

• Text can be attached to a path to create an
  interesting design
• Create text
• Create path using Pen tool
• Use Attach to Path command on Text menu

20
Attaching Text to a Path

• You can edit text on a path
• To edit a path, you must detach the text first
  using the Detach from Path command

21
Working with Objects

• Fireworks can import and export many file formats
• The workspace includes canvas, tools, and panels
• Objects are organized in the Layers panel
• The Property inspector helps you modify a
  selected object and shows options for tools

22
Working with Objects

• Objects can be combined with others to become new
  shapes
• Apply fills, strokes and effects to objects using
  the Property inspector
• Objects can be joined using the Group command
• Group objects are treated as one unit
• Ungrouped objects maintain their original
  appearance

23
Path Operations

• Fireworks offers six ways to the paths of two or
  more vector objects
• Join
• Split
• Union
• Intersect
• Punch
• Crop

24
Path Operations

• Join
• Combines the paths of two or more objects to
  create a single merged object
• Includes all points on both paths
• Overlapping area appears empty
• Can be used to join selected end points of open
  paths

25
Combine Paths Options

• Split
• Splits the path of two or more objects that had
  been combined using the Join command
• Union
• Creates a path that is the sum total of all
  selected areas

26
Combine Paths Options

• Intersect
• Creates an object by eliminating everything
  except the overlapping areas of the selected
  objects
• Punch
• The topmost object carves its shape through all
  lower selected objects
• Crop
• The topmost path removes the areas of the paths
  beneath it

27
Modifying Objects

• Vector objects can be modified by
• Applying fill color, gradients and patterns
• Changing stroke color, texture, type of edge,
  opacity and blend mode

28
Gradients

• Gradients are two or more colors that blend into
  each other in a fixed design
• Gradient options are found in Property inspector
• Fireworks includes preset gradients

29
Patterns

• Patterns are chosen from the Fill category list
  arrow
• There are many preset pattern fills
• Pattern fills can be modified
• Patterns can be previewed in the Property
  inspector
• You can create a custom pattern using a bitmap
  file of your own

30
Edges and Textures

• Edges refer to the edge of a fill applied to a
  vector object
• The type of edge (hard, soft or feather) make it
  appear to blend or fade into the background
• Textures can be applied to fills to create a
  tactile illusion
• Custom textures can be created from bitmap files

31
Working with Effects

• Effects are like filters that add the illusion of
  depth and dimension to objects
• Examples of effects include drop shadows, blurs,
  and glows
• Effects are found in the Property inspector
• Multiple effects can be applied to objects
• The Edit and arrange effects list in the Property
  inspector lets you
• Change effect settings
• Temporarily hide an effect
• Rearrange order of effects
• Adjust opacity of effects

32
Understanding Filters

• Filters are very similar to effects
• Found under Filters menu
• Are not listed in Edit and arrange effects list
  in Property inspector
• Cannot be temporarily hidden or rearranged

33
Understanding Opacity

• Opacity is the amount that an object is opaque or
  transparent
• Completely opaque 100 opacity
• Completely transparent 0 opacity
• Opacity settings are found in Layers panel and
  Effects section of Property inspector

34
Working with Styles

• Styles are preset attributes that can be applied
  to text and objects
• Style attributes include
• color
• texture
• type of edge
• Preset styles are found in the Styles panel
• Styles can be renamed and edited
• The Edit Styles dialog box allows you to control
  which attributes the style should apply
• Example Deselect the Font and Text Size check
  boxes to maintain the original font style and
  size

35
Using Plug-ins

• Plug-ins are mini applications that add features
  or enhancements to other software applications
• Eye Candy 4000 LE made from Alien Skin products
  is an example of a plug-in
• Adobe Photoshop plug-ins are accessible in
  Fireworks
• Open Fireworks Preferences dialog box
• Click Folders tab to access folders containing
  Photoshop plug-ins
• Click Import tab to determine how Fireworks
  translates layers and text