CIS 205—Web Design & Development Fireworks Chapter 2

Chapter 2: Getting Started with Fireworks Understanding Vector Objects – A vector object can be modified any number of ways without affecting the quality of the image – Vector objects can be transformed in many ways to make it more interesting – Stroke, fill, and filters in the Property inspector can be used to alter images – The order that filters appear in the list affects an object’s appearance

Lesson 1: Work with Vector Tools Understanding Vector Tools and Paths – Vector objects begin with defining a path, such as a circle, a rectangle, an irregular path – Pen and Vector Path tools can be used to create a path – A vector object’s path is always editable – Paths can have curve points (e.g., circles) or corner points (e.g., rectangles) that can always be added, deleted, or moved Using the Pen Tool and the Subselection Tool – Use the Pen tool to add or delete points – More points yields greater precision in defining a shape – Use the Subselection tool to move points – An anchor point has one or more point handles – Path Scrubber and Reshape Area are advanced tools for paths

Lesson 1: Work with Vector Tools (2) Create an object using the Pen tool 1.Create a new document with Width = 300, Height = 275, resolution = 72 ppi, white canvas; save as fish.png 2.Click View on the menu, point to Grid, click Show Grid 3.Click the Pen tool 4.Click the Fill Color box, type #3399FF, press [Enter] 5.Click the Stroke Color box, type #000000, press [Enter] 6.Click the Stroke category list arrow, point to Caligraphy, click Wet 7.Click the canvas at points shown in Figure 5, click the beginning point to close the path

Lesson 1: Work with Vector Tools (3) Use the Pen tool and Line tool to modify the path 1.Using the Pen tool, drag the top corner point to make a smooth curve for the top of the fish body 2.Repeat Step 1 for the bottom of the fish body 3.Click and hold the Rectangle tool, click the Ellipse tool 4.Change the stroke color to black 5.Change the fill color to black 6.Hold the [Shift] key and draw a circle for the fish eye 7.Click the Line tool to draw lines on the fish as in Fig. 8

Lesson 1: Work with Vector Tools (4) Use the Subselection tool to modify an object 1.Click the Subselection tool, position the pointer over the black circle, click the bottom point on the circle 2.Drag the bottom point up as shown in Fig. 10, click a blank part of the document to deselect 3.Click View on the menu, point to Grid, click Show Grid to turn off the grid 4.Save your work 5.Close fish.png

Lesson 2: Modify Multiple Vector Objects Aligning and Grouping Objects – Modify, Align allows you to align multiple vector objects – Modify, Group allows you to group multiple objects into one object that can be modified Combining the Paths of Multiple Objects – There are six commands that apply to grouped objects Join—combine the paths of two or more objects Split—split apart the paths of objects that were joined Union—creates a path that is the total of all selected paths Intersect—an area that is common to the selected paths Punch—the outline that a top object carves into lower objects Crop—the shape of the top path defines areas of lower paths

Lesson 2: Modify Multiple Vector Objects (2) Create a vector shape to an exact size 1.Open fw2_1.png and save as pastries.png 2.Insert a layer above the Text layer and name it Donut 3.Click the Ellipse tool 4.Select no color for the Stroke Color 5.Select Solid for the Fill type and #E58900 for the Fill Color 6.Set the Edge and Texture values in the PI to 0 7.Click View on the menu, click Rulers, position the pointer at about 130 H / 170 V, hold [Shift] and drag until both W and H in the PI are Save your work

Lesson 2: Modify Multiple Vector Objects (3) Copy an object 1.With the circle selected, click Edit on the menu, click Copy (or click the Copy button on the toolbar) 2.Click Edit on the menu, click Paste (or click the Paste button on the toolbar) 3.Change the Fill Color of the circle to black 4.Set the W and H text boxes in the PI to 44 5.Save your work

Lesson 2: Modify Multiple Vector Objects (4) Align objects and combine paths 1.With the black circle selected, click the Pointer tool 2.Press and hold [Shift] and click the large circle 3.Click Modify on the menu, point to Align, click Center Vertical 4.Click Modify on the menu, point to Align, click Center Horizontal 5.Click Modify on the menu, point to Combine Paths, click Union 6.Click Edit on the menu, click Undo (or click the Undo button on the toolbar) 7.Click Modify on the menu, point to Combine Paths, click Punch 8.Click the Edit the object name text box in the PI, type cake_donut, press [Enter]

Lesson 2: Modify Multiple Vector Objects (5) Group objects 1.Click the Pointer tool, click the top object in the Ionic Column layer 2.Drag the top object on top of the column object 3.Press and hold [Shift], click the column object 4.Click Modify on the menu, click Group 5.Drag the grouped object under the circle 6.Change the name of the Group: 2 objects to full_column 7.Save your work

Lesson 3: Modify Color Understanding Fills and Gradients – You can modify the fill of a vector object with the PI – A solid fill should be a Web-safe color – You can add a pattern fill that uses a bitmap image and several preset patterns are available – A gradient is a blending of two or more colors in a design and several preset gradients are available – Gradient colors can be changed w/o changing the pattern

Lesson 3: Modify Color (2) Apply a gradient to an object 1.Select the cake_donut object 2.Click the Fill Category list arrow on the PI, point to Gradient, click Ellipse 3.Click the Fill Color box on the PI, click the LEFT color swatch below the color ramp, type #E5B900, [Enter] 4.Click the RIGHT color swatch, type #FF8000, [Enter] 5.Click a blank area to close the window 6.Click the Edge of fills list arrow, click Feather, enter 2 for Amount of feather 7.Click the Texture name list arrow, click Parchment, enter 55 for the Amount of texture

Lesson 3: Modify Color (3) Transform an object and its gradient 1.Select the cake_donut object 2.Click Modify on the menu, point to Transform, click Rotate 90 CW 3.Drag the fill handles to alter the gradient 4.Click a blank area 5.Save your work

Lesson 4: Apply Filters to Objects and Text Understanding Filters – Filters can be used to further customize objects – The filters are called Live Filters because they can always be previewed and changed after save and close Using Photoshop Live Effects – Photoshop Live Effects have additional controls – Photoshop documents can be opened in Fireworks although some attributes may not carry over Using the Filters Menu – Not all effects from the Filters menu appear in the PI and you can only undo them in the current session Filters and File Size – Adding colors and filters increases file size Understanding Transparency – The transparency of an image or effect is a percentage

Lesson 4: Apply Filters to Objects and Text (2) Apply filters to objects 1.Click the cake_donut object, click the Add Filters button on the PI 2.Point to Bevel and Emboss, click Inner Bevel 3.Enter the values shown in Fig. 31, press [Enter] 4.Click the Add Filters button, click Photoshop Live Effects 5.Click the Drop Shadow check box 6.Enter the values shown in Fig. 32, click OK, click a blank area 7.Click the full_column object, repeat Steps Deselect the object

Lesson 4: Apply Filters to Objects and Text (3) Apply filters to text 1.Click the Title text object, click the Add Filters button, click Photoshop Live Effects, click the Bevel and Emboss check box, click Bevel and Emboss, click Pillow Emboss 2.Change the style to Outer Bevel, click OK 3.Click the Title text object, click the Add Filters button, point to Shadow and Glow, click Drop Shadow 4.Double-click the Distance text box, type 2, deselect the object 5.Select the Title text object, drag the Drop Shadow filter to the top of the Filters list 6.Deselect objects and save your work