Macromedia Fireworks

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

Working with Files Fireworks files are called documents Fireworks files are saved as PNG files –Portable Network Graphics –have.png extension

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

File Formats Available options for Fireworks

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

The Fireworks Window Property inspector –used to modify selected object –shows properties specific to a tool or command –docked at bottom of workspace

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

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

The Layers Panel Layers can be –hidden or shown –locked or unlocked –rearranged –duplicated –deleted –collapsed or expanded –renamed

Objects can be moved to new layers The Layers Panel

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

Bitmap Images Bitmap file formats: –BMP –PICT –GIF –JPEG –PNG –TIFF –PSD (Adobe Photoshop)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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