Macromedia Fireworks 8 Revealed, Deluxe Education EditionFireworks 2-1

Chapter 2

Working with Objects

Table of Contents

Chapter Objectives

File Listing

Projects to Assign

Lecture Note: Chapter Overview

Teaching Tip: Instruction Style

Lecture Note: Work with Vector Tools

Classroom Activity: Using Vector Path and Pen Tools

Lecture Note: Modify Multiple Vector Objects

Classroom Activity: Applying Combine Paths Commands

Lecture Note: Modify Color

Discussion Topic: Choosing Color Models

Lecture Note: Apply Filters to Objects and Text

Classroom Activity: Using the Filters Section of the Property Inspector

Lecture Note: Apply a Style to Text

Teaching Tip: Using the Paste Attributes Command

Teaching Tip: Saving a Style

Teaching Tip: Available Styles

Chapter objectives

  • Work with vector tools.
  • Modify multiple vector objects.
  • Modify color.
  • Apply filters to objects and text.
  • Apply a style to text.

File Listing

Location / Provided Filename / Saved Filename
Lesson 1
Lesson 2-5 / No file provided
fw2_1.png / fish.png
pastries.png
Skills Review / fw2_2.png / confection.png
Project Builder 1 / No file provided / remember_me.png
Project Builder 2 / No file provided / impact_potions.png
Design Project / No file provided / yoakam.png
Portfolio Project / No file provided / classic_buckle.png

Projects to Assign

Skills Review covers all of the objectives covered in the chapter in a step-by-step progression. Assign this exercise for extra reinforcement.

Project Builder 1asks students to create objects and text, and to apply filters to these. It also asks students to adjust the swatches on the color ramp and to use the Line tool.

Project Builder 2 gives students experience in creating objects, applying fills, styles and strokes, and combining paths. It also gives students practice in creating text and applying fills, strokes, styles, transparency and filters to text. In addition, this project asks students to rename objects or layers on the Layers panel and to experiment with changing the order of filters in the Filters list.

Design Project makes use of the Web and gives students experience in analyzing the layout of a Web page.

Portfolio Project gives additional opportunities to complete a layout, either by assigning elements of the project to individual members of the group or by working collectively to finish the project.

NOTES

Lecture Note: Chapter Overview

In this chapter, students will create shapes (paths) using vector tools and modify various properties, such as shape, size, fill, and stroke. You can edit vector object properties until you achieve just the look you want, without affecting image quality.

You can combine multiple objects to create completely new shapes. The Combine Paths commands—Join, Split, Union, Intersect, Punch, and Crop—modify a graphic’s appearance. You can also adjust the alignment of objects or group objects to modify a graphic’s overall appearance.

You can dramatically affect an object’s appearance by altering its path fill with a solid color, gradient, or texture. The Filters section of the Property inspector contains options that can also change an object’s appearance.

Throughout this book, basic skills such as opening the New Document dialog box, will be shown once or twice when they are first used in the lessons, and then abbreviated in subsequent lessons. For example, in Chapter 2, page Fireworks 2-7, students are asked to create a new document with specific dimensions. The instruction, “Click File on the menu bar, click New…” is assumed. Similarly, on page Fireworks 2-29, the instructions in Step 8 instruct students to simply save and close the document. The abbreviated style resembles the instruction style in End-of-Chapter projects.

Lecture Note: Work with Vector Tools

See Figure 1 to view curve points, corner points, and point handles on vector paths.

In this lesson, students will create and modify paths using vector tools, including the Pen tool.

Regardless of its physical shape, a vector object consists of a path and points on that path. The path can be straight or curved, or a combination of those and open or closed paths. A vector object’s path is always editable. Using vector tools, you can draw geometric shapes or free-form paths. Path segments connect anchor points. Curve points are found on a path that has curves, such as a circle, ellipse, or rounded rectangle, while corner points are found on a path that has angles or is linear, such as a square, a star, or a straight line. Each anchor point has one or more point handles, which you can use to modify the size and angle of a curve.

You edit a vector object by adding, deleting, or moving points along the path, adjusting point handles, or changing the shape of the path segment. You can use the Pen tool to add or delete points on a path, and the Subselection tool to move points on a path. For curved paths, you can use both the Pen and Subselection tools to create and modify point handles or convert curve or corner points into the other.

Key Term / Curve points- Circular points on a path that has curves, such as a circle, ellipse, or rounded rectangle.
Key Term / Corner points- Square points on a path that has angles or is linear, such as a square, a star, or a straight line.

Figure 1: Points on paths

Lecture Note: Modify Multiple Vector Objects

See Figure 18 to view grouped objects

This lesson provides students with the basics of creating and copying a vector object, aligning and grouping objects, and applying Combine Paths commands to multiple objects.

Using the coordinate text boxes (X and Y) on either the Info panel or the Property inspector, you can easily determine the precise size of an object. The key to laying out a design is being able to align and distribute objects as desired. You can align both vector and bitmap objects using a variety of commands on the Modify menu.

Using the Combine Path commands on two or more objects allows you to incorporate the properties of multiple objects when you combine their paths.

Combine Paths commands:

  • Join – combines the paths of two or more objects to create a single object that includes all the points of both paths
  • Split – splits apart the paths of two or more objects that had been combined using the Join command
  • Union –creates a path that is the sum total of all the selected paths
  • Intersect –creates an object consisting of the area that is common to all of the selected paths
  • Punch –outline of the topmost object carves through all of the lower selected images
  • Crop –area of the top path is used to remove the areas of the paths beneath it

Teacher Notes: When you group objects or combine their paths, Fireworks automatically renames the newly created object on the Layers panel. This chapter includes steps to rename those objects with a distinct name immediately. This practice will reinforce the importance of an intuitive naming convention before the document becomes unworkable.

Figure 18: Grouped Objects

Lecture Note: Modify Color

See Figure 25 to discuss adjusting fill handles

This lesson gives students an opportunity to apply and modify gradient fills. Fireworks uses a solid color as the fill for an object. However, the full complement of fill choices includes solids, Web Dither (Web-safe colors), gradients, and patterns. There are several gradient options built in, and you can modify the angle of the gradient after you have applied it. Similarly, you can choose from dozens of patterns and further affect the result by changing the type and amount of edge and texture.

You can apply a gradient by selecting the Gradient tool (the tool option under the Paint Bucket tool on the Tools panel), or by selecting a preset gradient fill. The Gradient tool fills an object with a gradient, just as the Paint Bucket tool fills an object with solid color.

You can modify gradient colors, the transition from one color to the next, and gradient transparency in the Edit Gradient pop-up window. You can also choose a preset gradient color combination. Once you have applied the gradient, you can adjust the width, position, rotation, and angle of the fill handles. The fill handles appear when you select the object.

Key Term / Gradient–two or more colors that blend into each other in a fixed design.
Key Term / Color ramp–creates and displays the range of colors in a gradient, including their transparency.

Fireworks supports the following color models: RGB (red, green, blue); Hexadecimal (Fireworks default);HSB (hue, saturation, and brightness); CMY (cyan, magenta, yellow); and Grayscale. The color model you choose depends on the medium in which the graphic will appear.

Figure 25: Adjusting fill handles

Lecture Note: Apply Filters to Objects and Text

See Figure 27 when discussing the options available in the Filters section of the Property inspector

Applying effects in Fireworks is one of the more enjoyable features for students to practice. You can apply effects to both vector and bitmap graphics. You can adjust the settings of most effects in a pop-up window that appears when you click the effect name.

Many effects reside on both the Filters menu and in the Filters section of the Property inspector. While the effects may be the same, the difference between the two areas is worth noting. Effects applied from the Filters section are known as Live Effects because they render instantly on the canvas and are editable, even after you save the document and reopen it. You can edit an effect, temporarily disable (hide) it, or change its order in the Filters list (stacking order), which alters the overall appearance of the selected object.

In contrast, the effects you apply from the Filters menu are permanent—you can undo the command that applied the filter, but you cannot edit a filter once you have applied it.

You can adjust the opacity of any selected objected using the opacity setting on the Property inspector. The lower the opacity setting (0-100%), the more transparent the image.

Figure 27: Filter categories

Lecture Note: Apply a Style to Text

See Figure 33 to view sample styles and the Styles panel.

The Styles panel manages preset and custom styles. You can apply a style to text or to other objects. The two types of styles in Fireworks are text and object. Text styles can modify font, font size, and so on. You can choose the attributes that the style will change in the New Style dialog box.

In addition to using pre-existing styles, you can also create your own style and save it as a custom style in the Styles panel.You can import or export styles using the commands under the Options menu button on the Styles panel.

Key Term / Styles- preset attributes such as colorand texture that you can apply to objectsand text.

Using the Paste Attributes Command

Point out to students that if they want to apply the attributes from one object to another, but do not want to create a custom style, they can select the object with the attributes, click the Copy command on the Edit menu, select the target object, and then click the Paste Attributes command on the Edit menu.

Saving a Style

Point out to students that if they modify an existing style, they should be sure to save it with a new style name; otherwise, they will lose the original style.

Available Styles

The list of available styles may vary from system to system depending on computer platform, whether your version of Fireworks 8 is an update or a fresh install, and if other users have imported or created custom styles. If the styles shown in this lesson do not appear on your students’ system, please substitute another style.

A plug-in adds features to an application.Many Fireworks plug-ins are available. Depending on their function, some plug-ins may be resource-intensive. Many third-party plug-ins are available for Fireworks, and most contain their own installers. For the latest plug-in information, including the status of Photoshop plug-ins, visit the Macromedia Fireworks Web site. You can locate Fireworks-specific plug-ins by performing searches on the Internet.

Key Term / Plug-in- adds features to an application.

Figure 33: Style samples