Presentation is loading. Please wait.

Presentation is loading. Please wait.

Project Objectives Open an image Save an image Resize an image

Published byEzra Bruce Modified over 6 years ago

Similar presentations

Presentation on theme: "Project Objectives Open an image Save an image Resize an image"— Presentation transcript:

1

2 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

3 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

4 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

5 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

6 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

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

8 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

9 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

10 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

11 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

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

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

14 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

15 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

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

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

18 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

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

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

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

22 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

23 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

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

25 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

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

27 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

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

29 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

30 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

31 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

32 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

33 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

34 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

35 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

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

37 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

38 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

39 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

40 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

41 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

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

43 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

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

45 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

46 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

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

48 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

Download ppt "Project Objectives Open an image Save an image Resize an image"

Similar presentations

Introducing Macromedia FreeHand MX

Introducing Macromedia FreeHand MX
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.

Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Learning the Basics – Lesson 1

Learning the Basics – Lesson 1
Creating Animations – Lesson 71 Creating Animations Lesson 7.

Creating Animations – Lesson 71 Creating Animations Lesson 7.
Exploring Other FreeHand Features – Lesson 31 Exploring Other FreeHand Features Lesson 3.

Exploring Other FreeHand Features – Lesson 31 Exploring Other FreeHand Features Lesson 3.
Working with Vector Graphics – Lesson 21 Working with Vector Graphics Lesson 2.

Working with Vector Graphics – Lesson 21 Working with Vector Graphics Lesson 2.
Macromedia Fireworks MX 2004 – Design Professional WORKING WITH OBJECTS.

Macromedia Fireworks MX 2004 – Design Professional WORKING WITH OBJECTS.
Text, Masks, and Live Effects – Lesson 41 Text, Masks, and Live Effects Lesson 4.

Text, Masks, and Live Effects – Lesson 41 Text, Masks, and Live Effects Lesson 4.
Work with multiple objects Modify color in objects Apply effects to objects and text Apply a style to objects Unit Lessons.

Work with multiple objects Modify color in objects Apply effects to objects and text Apply a style to objects Unit Lessons.
 Insert a picture from a file  Move and delete images  Use the Picture Tools tab  Add styles, effects, and captions to images  Resize photos  Use.

 Insert a picture from a file  Move and delete images  Use the Picture Tools tab  Add styles, effects, and captions to images  Resize photos  Use.
Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.

Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.
Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction.

Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Introduction.
Tutorial 2 Drawing Text, Adding Shapes, and Creating Symbols.

Tutorial 2 Drawing Text, Adding Shapes, and Creating Symbols.
The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.

The Web Collection, Revealed MACROMEDIA STUDIO 8 INTEGRATING.
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.

Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE.

Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE.
Creating a Logo – Lesson 3 1 Creating a Logo Lesson 3.

Creating a Logo – Lesson 3 1 Creating a Logo Lesson 3.
CIS 205—Web Design & Development Fireworks Chapter 1.

CIS 205—Web Design & Development Fireworks Chapter 1.
Creating Buttons – Lesson 71 Creating Buttons Lesson 7.

Creating Buttons – Lesson 71 Creating Buttons Lesson 7.
Working with Objects. Objectives Create an object Transform an object Arrange and lock an object Step and repeat an object Use Live Distribute Use the.

Working with Objects. Objectives Create an object Transform an object Arrange and lock an object Step and repeat an object Use Live Distribute Use the.

Similar presentations

Ads by Google