macromedia fireworks. understanding fireworks what can you do in fireworks mx? –work with vector...
TRANSCRIPT
![Page 1: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/1.jpg)
Macromedia Fireworks
![Page 2: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/2.jpg)
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
![Page 3: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/3.jpg)
Working with Files
• Fireworks files are called documents
• Fireworks files are saved as PNG files– Portable Network Graphics– have .png extension
![Page 4: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/4.jpg)
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
![Page 5: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/5.jpg)
File Formats
Available options for Fireworks
![Page 6: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/6.jpg)
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
![Page 7: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/7.jpg)
The Fireworks Window
• Property inspector – used to modify selected object– shows properties specific to a tool or
command– docked at bottom of workspace
![Page 8: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/8.jpg)
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
![Page 9: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/9.jpg)
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
![Page 10: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/10.jpg)
The Layers Panel
• Layers can be– hidden or shown– locked or unlocked– rearranged– duplicated– deleted– collapsed or expanded– renamed
![Page 11: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/11.jpg)
• Objects can be moved to new layers
The Layers Panel
![Page 12: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/12.jpg)
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
![Page 13: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/13.jpg)
Bitmap Images
• Bitmap file formats:– BMP– PICT– GIF– JPEG– PNG– TIFF– PSD (Adobe Photoshop)
![Page 14: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/14.jpg)
Bitmap Images
• Bitmap tools in Fireworks are used to modify pixels– Blur tool– Sharpen tool– Burn tool– Dodge tool– Smudge tool– Rubber Stamp tool
![Page 15: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/15.jpg)
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
![Page 16: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/16.jpg)
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
![Page 17: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/17.jpg)
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
![Page 18: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/18.jpg)
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
![Page 19: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/19.jpg)
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
![Page 20: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/20.jpg)
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
![Page 21: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/21.jpg)
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
![Page 22: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/22.jpg)
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
![Page 23: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/23.jpg)
Path Operations
• Fireworks offers six ways to the paths of two or more vector objects– Join– Split– Union– Intersect– Punch– Crop
![Page 24: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/24.jpg)
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
![Page 25: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/25.jpg)
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
![Page 26: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/26.jpg)
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
![Page 27: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/27.jpg)
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
![Page 28: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/28.jpg)
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
![Page 29: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/29.jpg)
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
![Page 30: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/30.jpg)
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
![Page 31: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/31.jpg)
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
![Page 32: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/32.jpg)
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
![Page 33: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/33.jpg)
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
![Page 34: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/34.jpg)
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
![Page 35: Macromedia Fireworks. Understanding Fireworks What can you do in Fireworks MX? –Work with vector objects and bitmap images –Add JavaScript-enabled interactivity](https://reader035.vdocuments.net/reader035/viewer/2022062712/56649c925503460f9494dcb4/html5/thumbnails/35.jpg)
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