Macromedia Fireworks 8 Fireworks Project 1-1

Macromedia Fireworks 8 Fireworks Project 1-1

Table of Contents

Project Objectives 1

File Listing 2

Project 1 Overview 2

Teaching Tip: Specification Before Implementation 2

Lesson 1: Importing, Resizing, and Saving Images 3

Teaching Tip: Another Advantage to Working with PNG Files 4

Teaching Tip: Maintaining the Image Aspect Ratio 5

Lesson 2: Adding Effects to Images 5

Teaching Tip: A Judicious Use of Effects 6

Teaching Tip: Experimenting with Drop Shadows 7

Lesson 3: Adding White Space Around an Image 7

Teaching Tip: Achieving Balance with Common Frames 7

Lesson 4: Optimizing and Exporting an Image and Running a Batch Process 8

Teaching Tip: Lossy versus Lossless Compression 9

Discussion Topic: CSS and Saved Commands 10

Key Terms 10

Project Objectives

·  Open an image.

·  Save an image.

·  Resize an image.

·  Add a border to an image.

·  Add a drop shadow to an image.

·  Create white space by using an object behind an image.

·  Trim the canvas around an image.

·  Optimize an image.

·  Store a set of actions on an image as a reusable command.

·  Apply batch processing to images by using stored commands.

File Listing

Location / Provided Filename / Saved Filename
Lesson 1 / colorado_river.jpg / colorado_river.png
Lesson 2 / colorado_river.png / colorado_river.png
Lesson 3 / colorado_river.png / colorado_river.png
Lesson 4 / colorado_river.png
colorado_river.jpg grand_canyon.jpg hawaiian_beaches.jpg lake_powell.jpg
nw_forests.jpg
san_francisco.jpg / colorado_river.png
colorado_river.jpg
grand_canyon.jpg hawaiian_beaches.jpg lake_powell.jpg
nw_forests.jpg
san_francisco.jpg

NOTES

Project 1 Overview

See Figure 1 to view the design document for the Likeable Places Web site

Before adding images to a Web page, they should be enhanced in accord with the Web site's design.

Basic image changes include resizing, cropping, and rotation. More refined effects include the addition of borders and shadows. Once the image has been modified, it should be optimized to reduce file size. Actions used to enhance images may be stored as commands. Commands can be applied to a set of images by running a batch process.

The assignment in this project involves preparing six different images for inclusion on a personal page of the Likeable Places Web site. The images, which are photographs, must conform to the site's design criteria. Follow the criteria within the design document to:

·  Import, resize, and save an image.

·  Add effects to images.

·  Add white space around an image.

·  Optimize and export images.

Teaching Tip / Specification Before Implementation
An up-front investment in project planning speeds up implementation and improves the final product. To impress the importance of a well-defined project blueprint, have your students design a page that contains images related to a personal interest. They can use Figure 1 as a template for developing the design document.

In general, the design document provides the background about the goals, purpose, requirements, content, and audience for the page. Students should use the design document to direct them through this project. It provides guidance for setting up a page, processing images for the page, and then adding the enhanced images to the page.

Figure 1: Design document for Likeable Places Web site

Lesson 1: Importing, Resizing, and Saving Images

Lesson 1 Introduction

The six photographs to be posted to Likeable Places Web site should be resized according to specifications in the design document. In this lesson, students will open one of these images, colorado_river.jpg, resize the image, and then save the image in the PNG format. Following these operations, they will save the resizing action as a command. In Lesson 4, students will use batch processing to apply the command to the other images.

Opening an Image

See Figure 1-3 to view colorado_river.jpg against the Fireworks canvas

To open the image file, colorado_river.jpg in Fireworks, students use the Open dialog box, which can be activated by selecting the Open item on the File menu.

Figure 1-3: Image in Fireworks canvas

Saving an Image as a Fireworks PNG

It is advisable to save an image as a Fireworks PNG. Changes made to a PNG image remain editable in Fireworks. The main task in this section is to save colorado_river.jpg as colorado_river.png in a new folder, formatted_images. Students conduct the operation using the Save As dialog box, which can be opened via the File menu.

Teaching Tip / Another Advantage to Working with PNG Files
Images saved in the PNG file format may be partitioned and then exported to multiple files. The files containing the exported portions of the original image can have various formats and various optimization settings.

Resizing an Image

The size of the six images should be adjusted to meet the site's design criteria. In this section, students will reduce the size of one image, colorado_river.png, to 45 percent of its original size.

Teaching Tip / Maintaining the Image Aspect Ratio
The image aspect ratio is expressed as the image width divided by the image length. For example, the aspect ratio for an image with dimensions 180 pixels by 135 pixels is 4:3. When the user selects the Constrain Proportions option in the Numeric Transform dialog box, any size changes made to the image will maintain the 4:3 aspect ratio, which incidentally is the aspect ratio of a traditional television set.

Creating a Command

Figure 1-7 below highlights the Save Steps as a Command button on the History panel

The History panel lists every step or action the user takes in a session with Fireworks. The user may save a set of steps as a command to be applied to other objects, such as the images for Likeable Places Web site. The main task of this section is to save the resize command just applied to colorado_river.png with the name, scale45.

Figure 1-7: History panel

Lesson 2: Adding Effects to Images

Lesson 2 Introduction

In this lesson, students add a beveled border and a drop shadow to colorado_river.png, the image modified in Lesson 1. They then save the steps for adding the bevel and shadow as a command to reuse later in the project. A beveled border makes the images appear clickable, while the shadow gives the image a slight lift from the page. Both effects add interest to the six photographs, the main focus of the Likeable Places Web site.

Effects

See Figure 2-2 for an illustration of a blur effect.

The Live-Filters tool is an enhancement built into Fireworks that includes bevels, embossing, shadows, glows, color correction, blurring, and sharpening. A filter may be applied directly to a selected object from the Property inspector. Users may apply multiple filters in combination to a single object. Used in moderation, effects can improve washed out colors, add the impression of motion or depth, or just add interest to the look of a page.

Figure 2-2: Text with blur effect

Teaching Tip / A Judicious Use of Effects
Sophisticated effects, such as drop shadows and blurs, can be easily added to images. When students reach this insight, they may be inclined to overuse effects. To check the tendency toward gratuitous use of effects, have students compare their applications with each other. Effects can be judged by whether they enhance or hinder the goals of the page. Do they attract or distract the visitor? Do they emphasize or obscure a message?

Adding a Border

See Figure 2-5 for a view of the Outer Bevel window.

The main task for this section is to add an Outer Bevel filter to colorado_river.png. The bevel effect that is used creates a raised border around the image. Bevel effects may also be used to add depth.

Figure 2-5: Outer Bevel window

Adding a Drop Shadow

See Figure 2-7 for a view of an image with outer bevel and drop shadow.

The design document calls for a drop shadow to be added to each image. Students should draw the drop shadow at 50 percent black to avoid overpowering the image. Since the current image already has a border, students should keep the distance to the background short.

Figure 2-7: Image with outer bevel and drop shadow

Teaching Tip / Experimenting with Drop Shadows
Have your students experiment with various values for the drop shadow distance and angle. Compare preferred settings and determine if any preference patterns emerge. Next, compare your findings with text recommendations. Share your final results with the class; they should provide good material for an insightful class discussion.

Creating a Command

The main task for this section is to save the drop shadow and bevel filters as a command.

Lesson 3: Adding White Space Around an Image

Lesson 3 Introduction

The purpose of adding white space or "air" around the image is to provide a common frame in which to display images of various shapes. In this lesson, students add a white square with dimensions 220 pixels x 200 pixels to the image, colorado_river.png. After aligning the image within this square, students trim the excess canvas. Then they capture this process as a command to use later in the project.

Teaching Tip / Achieving Balance with Common Frames
The use of a common frame to display images of various shapes is an application of the graphic design principle of balance.

Adding a Square White Space

To give the six location images uniformity on the Likeable Places Web site, the site designer has recommended adding a white space to the background of the image. All site images will be placed in equal-sized white squares.

Aligning the Square and Trimming the Canvas

See Figure 3-4 for a view of the Align panel.

Two issues still surround the composition of colorado_river.png:

·  The white square is stacked above river image.

·  Excess canvas space surrounds the white square and river image.

To resolve the first issue, students change the stacking order of the images.

Figure 3-4: Align Panel

How Fireworks Aligns and Distributes Objects

Aligning or distributing objects is different from centering them. Fireworks aligns objects on

the left (right) based on the leftmost (rightmost) object in the selected group. The topmost object controls Align Top, and the bottommost object controls Align Bottom. For Distribute Widths, Fireworks creates an equal amount of horizontal space between objects. For Distribute Heights, Fireworks creates an equal amount of vertical space between objects.

Creating Commands

Two additional commands are created in this section

·  draw_white-square: adds and resizes the white square.

·  center-image_fit-canvas: centers the image on the square and trims the canvas.

Each command contains a set of steps, which may be selected and then saved with the appropriate command name. Students should be mindful of the separator in the History panel: it indicates a change in the object selected, effectively limiting the range of steps that may be included in a command. They should not save steps on both sides of a separator.

Lesson 4: Optimizing and Exporting an Image and Running a Batch Process

Lesson 4 Introduction

In this lesson students optimize and export the image they have been preparing in the previous lessons. Students should proceed with caution when optimizing a JPEG image: optimization effectively reduces the file size of an image, but with some tradeoff in quality. To complete the project, students set up a batch process to prepare and export the remaining images for the site.

Optimizing an Image

See Figure 4-2 for a view of the Optimize panel.

Because the image prepared for use on this site is a photograph, it should be optimized and exported in the JPEG format.

Figure 4-2: Optimize panel

Teaching Tip / Lossy versus Lossless Data Compression
As lossy compression techniques remove information, their effects upon a file are irreversible. The loss of data is tolerable for certain file types, such as JPEG images, but may not be appropriate for others. If there is premium placed on the integrity of the file to be transferred, lossless compression techniques should be used. Lossless compression is reversible and used in a number of formats, including the popular ZIP file type.

Exporting an Image File

Once the user has specified the optimization setting for an image, it is a simple matter to apply those settings by exporting the image file. The image is then ready to place on a Web page.

Running a Batch Process

See Figure 4-9 for images successfully formatted using a batch process.

Using a batch process, students can apply the commands associated with the preparation of the river image to all six JPEG images to be placed on the Likeable Places Web site. Batch processes save time by automating repetitive tasks. They also help the user make all site images look consistent.

Figure 4-9: Successfully formatted images

Discussion Topic / CSS and Saved Commands
Cascading style sheets (CSS) define a set of formatting options which are applied to the elements making up a Web page. For example, a CSS may specify that text enclosed by HTML h2 tags should be presented in font-size 110% and the color red. How does the CSS tool compare and contrast with the technique of applying saved commands to objects?
Key Terms / ·  Bevel - to apply a sloping edge to an object, giving it a raised look.
·  Command - stores a series of actions or steps applied to an object.
·  Design criteria - a set of specifications that describe how a Web page will look.
·  Design document - provides the background about the goals, purpose, content, requirements, and audience for a page.
·  Drop shadow - effect added to an object that gives the impression of depth.
·  Batch process - applies commands containing saved actions to many images at once.
·  Optimization - the process of decreasing the file size of an image as much as possible while maintaining a sufficient level of image quality.