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