Project Objectives Open an image Save an image Resize an image OVERVIEW Project Objectives Open an image Save an image Resize an image Add a border to an image Add a drop shadow to an image Macromedia Studio Step-by-Step

Project Objectives (continued) OVERVIEW Project Objectives (continued) 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 Macromedia Studio Step-by-Step

Overview Add images to page in line with design Enhancements used to meet criteria Basic changes: resizing, cropping, rotation Refined effects: borders, shadows Optimization: reduces file size Techniques to speed up implementation Save set of steps as a command Apply command to multiple images Use batch processing Macromedia Studio Step-by-Step

The Assignment Prepare six images for addition to page INTRODUCTION The Assignment Prepare six images for addition to page Images are photographs of several places Alterations specified in design document Use design criteria to: Import, resize, and save an image Add effects to images Add white space around an image Optimize and export images Macromedia Studio Step-by-Step

Site Design Criteria and Technical Requirements INTRODUCTION Site Design Criteria and Technical Requirements Specified in the design document Format of the design document Goals and purpose of Likeable Places site Target audience: family and friends Design requirements Examples: image dimensions and border colors Delivery requirements Example: reduce file size using optimization Content: six photos of visited locations Macromedia Studio Step-by-Step

FIGURE 1: Design document for Likeable Places Web site INTRODUCTION FIGURE 1: Design document for Likeable Places Web site Macromedia Studio Step-by-Step

Project 1 Lessons Lesson 1: Importing, Resizing, and Saving Images INTRODUCTION Project 1 Lessons Lesson 1: Importing, Resizing, and Saving Images Lesson 2: Adding Effects to Images Lesson 3: Adding White Space Around an Image Lesson 4: Optimizing and Exporting an Image and Running a Batch Process Macromedia Studio Step-by-Step

Lesson 1 Objectives Open an image Save an image Adjust the size of an image Save an action as a command Macromedia Studio Step-by-Step

Lesson 1 Introduction Design criteria specify image size Six original photos are oversized Reduce images to meet criteria Chief lesson tasks Open one image file, colorado_river.jpg Resize colorado_river.jpg Save colorado_river.jpg in PNG format Save resizing action as a command Macromedia Studio Step-by-Step

Opening an Image Open image file, colorado_river.jpg LESSON 1 Opening an Image Open image file, colorado_river.jpg Use the Open dialog box Select the Open item on the File menu Navigate to file Select and open the appropriate file Macromedia Studio Step-by-Step

FIGURE 1-2: Open dialog box LESSON 1 FIGURE 1-2: Open dialog box Macromedia Studio Step-by-Step

FIGURE 1-3: Image in Fireworks canvas LESSON 1 FIGURE 1-3: Image in Fireworks canvas Macromedia Studio Step-by-Step

Saving an Image as a Fireworks PNG LESSON 1 Saving an Image as a Fireworks PNG Best practice: save an image as PNG Changes to PNG image are editable Quickly reverse or modify changes Task: save colorado_river.jpg as PNG Create new folder, formatted_images Open Save As dialog box Select Fireworks PNG file type Save colorado_river.png Macromedia Studio Step-by-Step

Resizing an Image Adjust size of six images LESSON 1 Resizing an Image Adjust size of six images Specifications for image size Reduce size to 45% of original value Task: reduce size of colorado_river.png Navigate to the appropriate tool Click Modify, go to Transform, click Numeric Transform Enter 45 for width and height Check scaling and proportions options Macromedia Studio Step-by-Step

FIGURE 1-4: Numeric Transform dialog box LESSON 1 FIGURE 1-4: Numeric Transform dialog box Macromedia Studio Step-by-Step

FIGURE 1-5: Resized image LESSON 1 FIGURE 1-5: Resized image Macromedia Studio Step-by-Step

Creating a Command History panel records steps (actions) LESSON 1 Creating a Command History panel records steps (actions) Some steps: Save As, Transform, Save Steps may be saved as a command Commands are reused with other objects Use commands to speed up development Task: save resize command Select the Transform step Click Save Steps As Command button Key in the command name, scale45 Macromedia Studio Step-by-Step

FIGURE 1-7: History panel LESSON 1 FIGURE 1-7: History panel Macromedia Studio Step-by-Step

FIGURE 1-8: Save Command dialog box LESSON 1 FIGURE 1-8: Save Command dialog box Macromedia Studio Step-by-Step

Lesson 2 Objectives Add a bevel effect to an image Add a drop shadow effect to an image Macromedia Studio Step-by-Step

Lesson 2 Introduction Main focus of Likeable Places: six photos Effects add interest to site images Effects applied to colorado_river.png A beveled (rounded) border A shadow to slightly lift the image Save steps to add bevel and shadow Commands will be reused in a later lesson Macromedia Studio Step-by-Step

Effects Live-Filters: a built-in enhancement LESSON 2 Effects Live-Filters: a built-in enhancement Some filters: bevels, shadows, glows Add filter to object via Property inspector Add multiple filters to a single object Benefits of moderate use of filters Improve washed out colors Add the impression of motion or depth Add interest to the look of a page Macromedia Studio Step-by-Step

FIGURE 2-3: Text with drop shadow effect LESSON 2 FIGURE 2-3: Text with drop shadow effect Macromedia Studio Step-by-Step

Adding a Border Uses of bevel effects LESSON 2 Adding a Border Uses of bevel effects Create raised border around image Add depth to an image Task: add bevel to colorado_river.png Select image Click Add Live Filters on inspector Point to Bevel and Emboss Click Outer Bevel for dialog box Set options such as width and color Macromedia Studio Step-by-Step

FIGURE 2-5: Outer Bevel window LESSON 2 FIGURE 2-5: Outer Bevel window Macromedia Studio Step-by-Step

Adding a Drop Shadow General guidelines for Likeable Places LESSON 2 Adding a Drop Shadow General guidelines for Likeable Places Add drop shadow to each image Draw drop shadow at 50 percent black Keep the distance to background short Task: add shadow to colorado_river.png Click Add Live Filters button on inspector Point to Shadow and Glow Click Drop Shadow for dialog box Set properties such as distance and angle Macromedia Studio Step-by-Step

FIGURE 2-6: Drop Shadow window LESSON 2 FIGURE 2-6: Drop Shadow window Macromedia Studio Step-by-Step

FIGURE 2-7: Image with outer bevel and drop shadow LESSON 2 FIGURE 2-7: Image with outer bevel and drop shadow Macromedia Studio Step-by-Step

Creating a Command Task: save filters as a command LESSON 2 Creating a Command Task: save filters as a command Ensure that History panel is open Select the two Set Live Filter steps Click Save Steps as Command Enter add_border_ shadow as name Click OK to close dialog box Macromedia Studio Step-by-Step

Lesson 3 Objectives Draw and resize a rectangle Arrange one object behind another object Align objects Trim the canvas to the size of an object Macromedia Studio Step-by-Step

Lesson 3 Introduction Design goal: display images in common frame Problem: images have various shapes Solution: add white space around image Lesson tasks around colorado_river.png Add white square 220 pixels x 200 pixels Align the image within the white square Trim the excess canvas Capture this process as a command Macromedia Studio Step-by-Step

Adding a Square White Space LESSON 3 Adding a Square White Space Designer’s approach to non-uniformity Add white space or “air” to image background Use common frame for all six site images Meeting the design specification Draw a rectangle on the canvas Set Fill Color and Stroke Color to white Set dimensions to 220 pixels x 220 pixels Macromedia Studio Step-by-Step

FIGURE 3-2: Fill and stroke color boxes in the Property inspector LESSON 3 FIGURE 3-2: Fill and stroke color boxes in the Property inspector Macromedia Studio Step-by-Step

Aligning the Square and Trimming the Canvas LESSON 3 Aligning the Square and Trimming the Canvas Issue 1: white square above river image Solution 1: change stacking order Select square, click Modify, point to Arrange Click Send to Back Issue 2: excess canvas space Solution 2: trim unused canvas space Align square and image to canvas center Fit canvas to square and image Macromedia Studio Step-by-Step

FIGURE 3-6: Square centered behind image LESSON 3 FIGURE 3-6: Square centered behind image Macromedia Studio Step-by-Step

How Fireworks Aligns and Distributes Objects LESSON 3 How Fireworks Aligns and Distributes Objects Aligning, distributing, centering objects Three actions that should be distinguished Aligning objects on left (right) Based on leftmost (rightmost) object Aligning objects from top (bottom) Based on topmost (bottommost) objects Distributing Widths (Heights) Creates equal horizontal (vertical) spacing Macromedia Studio Step-by-Step

Creating Commands Two commands saving a set of steps LESSON 3 Creating Commands Two commands saving a set of steps draw_white-square Adds and resizes the white square center-image_fit-canvas Centers image on square and trims canvas Task: select and save steps under name Significance of separator in History panel Indicates change in object selected Limits the content of a command Do not save steps on both sides of a separator Macromedia Studio Step-by-Step

Lesson 4 Objectives Optimize an image for the Web Export an image for the Web Run a batch process on multiple images Macromedia Studio Step-by-Step

Lesson 4 Introduction Optimization reduces file size Lesson tasks The last image preparation step Caution: size reduced with some quality loss Lesson tasks Optimize and export colorado_river.png Set up a batch process Applies commands to the other five images Macromedia Studio Step-by-Step

Optimizing an Image Optimize and export image as JPEG LESSON 4 Optimizing an Image Optimize and export image as JPEG JPEG format appropriate for photograph Main tasks for optimization Click Windows and then click Optimize Optimize panel will open Click Saved settings menu Click JPEG—Better Quality (80) 80 is an acceptable tradeoff between size and quality Macromedia Studio Step-by-Step

FIGURE 4-1: 2-Up feature in Fireworks LESSON 4 FIGURE 4-1: 2-Up feature in Fireworks Macromedia Studio Step-by-Step

Exporting an Image File LESSON 4 Exporting an Image File Final preparation for river image Main tasks Click Export item from File menu Export dialog box opens Enter colorado_.jpg in the File name box Click Export River image now ready for Web page Macromedia Studio Step-by-Step

FIGURE 4-3: Export dialog box LESSON 4 FIGURE 4-3: Export dialog box Macromedia Studio Step-by-Step

Running a Batch Process LESSON 4 Running a Batch Process Advantages of batch process Saves time by automating repetitive tasks Makes images on site look consistent Overview of batch process Select Batch Process from File menu Add six images from likeable_places folder Go to the Batch Options page Add saved commands and Export Run batch from Savings File page Macromedia Studio Step-by-Step

FIGURE 4- 5: Batch Options pane of the Batch Process dialog box LESSON 4 FIGURE 4- 5: Batch Options pane of the Batch Process dialog box Macromedia Studio Step-by-Step

FIGURE 4-9: Successfully formatted images LESSON 4 FIGURE 4-9: Successfully formatted images Macromedia Studio Step-by-Step

Summarizing Project 1 Design criteria guided preparation SUMMARY Summarizing Project 1 Design criteria guided preparation Image editing and enhancement skills were demonstrated Steps were saved as commands An image was optimized Formatting applied to six site images through batch processing Macromedia Studio Step-by-Step