Griffin | Web Design
 
Resume Table of Contents  

Web Design
Fireworks

1. 2. 3. 4. RS. TB.  
State Standards
 
  • WD 3.1 Content Standard: Students demonstrate the principles of good design and
    graphics utilizing commercial based software. (e.g. Adobe Photoshop, Microsoft
    Paint, Macromedia Fireworks, Macromedia Flash) (H.9.1)
  • WD 3.1.1Compare and contrast the uses and benefits of various graphic file formats (e.g. gif, png, jpeg, jpg, bmp, tiff) (LA11.1.3)(LA12.1.3)
  • WD 3.1.5 Edit, crop, and resize existing clipart files(A1.3.1)
  • WD 3.1.7 Optimize and export graphics to improve web page loading time
  • WD 3.1.8 Utilize proper typography in relation to graphic creation
Chapter Objectives
 
  • Describe different types of web graphic files
  • Resize images in Fireworks
  • Create a GIF image with a transparent background

  • Describe bBitmapped versus vector images
  • Add text to photographs
  • Adjust levels of light
  • Adjust colors

  • Use the pencil tool and fill options
  • Draw with the Pen Tool
  • Select a bitmapped object versus a vector object
  • Use the shape tool
  • Create text graphics
  • Exploring the options for edges

  • Displaying the layer panel
  • Adding your own layers
  • Give names to your layers
  • Duplicating a layer
  • Changing the stacking order of layers
  • Making layers visible or invisible
  • The opacity option
  • The drop shadow "trick" when working with photographs
  • Using the rubber stamp tool
  • Associating text with a vector path
1. Basic Fireworks
 

Create a NEW folder called "fireworks". Save all future fireworks files in this folder. Remember, no spaces or extra periods in filenames.

Read through Lesson 1 at ag.arizona.edu/ecat/fireworks/lesson1.html and complete the tasks outlined below.

Subjects Covered in Lesson 1

  • Types of web graphic files
  • Resizing images in Fireworks
  • Cropping
  • Creating a basic GIF image
  • Creating a basic JPEG image
  • Creating a transparent background in a GIF image
  • Erasing the background in a photograph

Related Video Clips

top

Fireworks Lesson 1 Assignment

Create a web page demonstrating the following items:

  1. What are the different types of graphic files and when would you use each?
  2. Show an original image and a resized thumbnail. (Same photo, not the same file.) List filename and file size.
  3. Display a photo with an erased background.
  4. Link web page to you index.

List the number, questions, and answer similar to the Fireworks Sample 1. Here is an image that helps show how my table is set up.

Grading Fireworks 1:
1. File formatted , definitions and purpose of  
    GIF, JPEG, and PNG.  
2. Original and Thumbnail Image w/ file size  
   

• Original Image, Original File size
• Thumbnail, Thumbnail File Size

 
3. Erased Background         
   

• Original Image
• Checkered background

 
4. Titled Background/list number and questions       
5. Link web page to your index.  
Total ___ 10 points

2. Working with Photographs
 

Read through Lesson 2 at ag.arizona.edu/ecat/fireworks/lesson2.html and complete the tasks outlined below.

Subjects Covered in Lesson 2

  • Creating a new image
  • Bitmapped versus vector images
  • Selecting parts of photographs
  • Layers (briefly)
  • Adding text to photographs
  • Adjusting levels of light
  • Adjusting colors

Related Video Clips

top

Fireworks Lesson 2 Assignment

Create a web page demonstrating the following items:

  1. Describe the difference between a bitmapped image and a vector image? When should you use each?
  2. Select, feather and cut an image similar to the one shown.
  3. Add text to an image.
  4. Save and correct the light of this sample light image.
  5. Save and correct the colors of this sample color image.

List the number, questions, and answer similar to the Fireworks Sample 2. Link web page to you index.

Grading Fireworks 2:
1. File formatted, Bitmap and Vector  
   

• Difference between the two
• When you should use each

 
2. Feather Image    
3. Text on an Image w/ drop shadow       
4. Picture light settings (before and after)     
5. Picture color settings (before and after)    
6. Link web page to your index.  
Total ___ 10 points
3. Creating Original Images
top

Read through Lesson 3 at ag.arizona.edu/ecat/fireworks/lesson3.html and complete the tasks outlined below.

Subjects Covered in Lesson 3

  • Saving your original art work
  • The pencil tool and fill options
  • Drawing with the Pen Tool
  • Selecting a bitmapped object versus a vector object
  • Erasing options
  • The History palette
  • Using the shape tool
  • Creating text graphics
  • The gradient feature
  • Exploring the options for edges
  • Cautions about creating art work without layers

Read through the Curves info at www.smartwebby.com to learn how to use the pen tool.

curves

Also read through the Advanced Vector Shapes info at www.smartwebby.com to learn how to use the rounded rectangle vector tool.

rounded rectangles

Related Video Clips

Bitmap v. Vector Info

Fireworks Lesson 3 Assignment

Create a web page demonstrating the following items:

  1. Show a sample flower petal by using the Pencil Tool
  2. Show a sample shape.
  3. Show a sample curve using the Pen Tool.
  4. Show a quarter circle using the Pen Tool.

List the number, questions, and answer similar to the Fireworks Sample 3. Link web page to you index.

Grading Fireworks 3:
1. Flower Petal by using the Pencil Tool  
2. Shape Image    
3. Curve using the Pen Tool.     
4. Quarter Circle using the Pen Tool.  
5. Link web page to your index.  
Total ___ 10 points
4. Creating Original Images
top

Read through Lesson 4 at ag.arizona.edu/ecat/fireworks/lesson4.html and complete the tasks outlined below.

Subjects Covered in Lesson 4

  • Displaying the layer panel
  • Adding your own layers
  • Give names to your layers
  • Duplicating a layer
  • Locking layers
  • Changing the stacking order of layers
  • Making layers visible or invisible
  • The opacity option
  • Deleting a layer
  • The drop shadow "trick" when working with photographs
  • Using the rubber stamp tool
  • Associating text with a vector path

Fireworks Lesson 4 Assignment

Create a web page demonstrating the following items:

  1. Create 4 photos that overlap.
  2. Create the desert drawing below from scratch with each element on a different layer. Include a print-screen showing different layers with new layer names. Also make your cactus 50% opaque.
    cactus man
  3. Show a drop shadow photo.
  4. Edit the first photo below, using the rubber stamp tool to clear up the nose.
    pimple chick

    pimple chick

    pimple chick

List the number, questions, and answer similar to the Fireworks Sample 4. Link web page to you index.

Grading Fireworks 4:
1. Overlapping Photos  
2. Desert Image    
3. Drop Shadow Photo     
4. Rubber Stamp Nose  
5. Link web page to your index.  
Total ___ 10 points
RS. Rick Steves
 

Rick Steves Firework Assignment 5 - Create a Fireworks web page that "looks like" the linked Rick Steves' site. Your page should have something to do with one of your classes. You may use pictures you have already saved. Add the elements listed below.

RS2

rs1

  • Image Size = 600 high x 750 wide
  • Drop Shadow Text, 3 Fonts, 4 text colors
  • Clip Art Added
  • Picture Added
  • 4 Color Bars (2 horz., 2 vert)
  • 4 Bullets, any shape w/ black text (Note blue link label plus simple black sentence description.)
  • Saved as a Firework file *.png
  • Saved as a jpg
  • Added and linked to index.

TO PRINT: Open Microsoft Word, Insert Picture from file. (Insert jpg.) Print in Landscape. Type your Name, Period, and Date. Hand in to Instructor. Also, link to your index.

top

Notes: Use LEFT alignment (Align ALL text on the left.) If you have a dark background, use WHITE TEXT, If you have a light background, use BLACK TEXT. DO NOT emboss text.

Grading:
1. Image Size (600 x 750)

 ___ 5 points

2. Drop Shadow Text, 3 Fonts  ___ 5 points
3. Clip Art  ___ 5 points
4. 4 Color Bars (2 horz., 2 vert)  ___ 5 points
5. 4 text colors  ___ 5 points
6. 4 Bullets (any shape) w/ black text

 ___ 5 points

7. Name, Period, Date, Landscape  ___ 5 points
8. Printed and linked  
Total  
 ___ 35 points
TB. Title Bar - Ex nihilo
top

Title bar Firework Assignment 6 - Edit a current photo to fit in the title bar for your index. You may use pictures you have already saved. Add the elements listed below.

lancy pants small

Photo 1
Photo 2

Go from this:

lance

To this:

Lance A

To this:

Lance B

Grading:
1. Image Size (800 x 120)

 ___ 5 points

2. Photo not distorted  ___ 5 points
3. linked  
Total  
 ___ 10 points

 

Other Fireworks Material
Macromedia Tutorial: Creating Page Mock-ups
Macromedia Tutorial: Handling Photographs
Tutorial: Creating a Page Banner
Tutorial: Creating a Web Page
SmartWebby.com Fireworks Help
Firework Curves
Image Feathering
Drop Shadowing
Advanced Vector Shapes