Logo

Home | Audio | DIY | Guitar | iPods | Music | Brain/Problem Solving | Links| Site Map

This work is licensed under a Creative Commons License.

First Steps in Planning Your Web Site

Scanning | PNG Art | Copyrights | Images | Optimize Images for the Web | Constructing Storyboards | Sample Storyboards | Assignment

Directions: Read this page in its entirety before you begin the tutorial. You will be held responsible for the material on copyrights, so you will want to take notes here. Once you have read this page then you may begin the tutorial. The tutorial consists of three parts: 1) Lecture material, 2) the material on this page, and 3) the material contained within the links below.

You may only use the tutorial links below if you are a student currently enrolled at Palmer HS, Colorado Springs, CO. Furthermore, you agree to abide by the copyright agreement with Macromedia, and will not duplicate the material in anyway or form.

There are two major goals of the assignment that your are about to complete. They are as follows:

Students design the product/solution.

Students plan the product/solution. At the end of the course, students should be able to:

Introduction to Copyright

As you recall the Design Cycle is composed of five steps: Investigate, Plan, Design, Create, and Evaluate. Prior to this point you wrote a paper 'About' your project, and a paper on the investigative phase applied to your Personal Project. Before you begin to actually 'Plan' and 'Design' your site you need to do some research on copyright law, and graphic design. The copyright segment is pretty straight forward, but the use of images and the graphic design process is entails more information and...you will be responsible for it. You will demonstrate your proficiency by applying the techniques and skills you learn about to the actual design of your Web site.

You will be responsible for the following:

I. Demonstrate your knowledge of copyright terms by writing a one-page, double spaced paper on copyrights.

II. Identify and distinguish between GIF, JPEG, and PNG formats. Do a search using the following key terms: image, image type, GIF images, JPEG images, or PNG images.

III. Create a graphic with the scanner.

IV. Copy and save images and graphics from the Internet, using appropriate citations for copyright.

Visit the following two sites:
Copyright & Fair Use Stanford University. This should be enough information for your paper on copyright.
PNG Art

Introduction to Scanning

I. Define the four steps in using a scanner: Plan, Scan, Edit, and Save. Notice how this correlates to both Polya and the Design Cycle.

II. Scan a Black and White image. (This does not have to be done immediatley.)

Visit:
A few scanning tips.
Image and Multimedia Database Resources

Optimizing Images for the Web

We want to used optimized images on our sites so that the images and pages will download quicker. Most of this material you may have done on the Complete Fireworks Tutorial. If you haven't, then you may want to go back and do a few of them. Here is the important one: How to Optimize an Image

I. You will be expected to optimize all of the images that you will be posting on your site.

Making a Nameplate/Logo

I. Make a "nameplate" for your site using Fireworks.

II. Using the tools panel, make sure you use the following tools to construct your nameplate: bevel, emboss, drop shadow, stroke, and effect.

III. Create a Logo for use on the home page of your project.

Storyboards

There are basically three types of storyboards.

I. The typical use of a storyboard is in designing movie or animated cartoons, to depict what happens in the story. A storyboard contains scene-by-scene drawings of the sequence of action, camera angles, background, and so on.

II. A graphic storyboard shows all the elements of the graphic, indicating size, location, color, and font.

III. When you copy and save images for and graphics from the Internet, using appropriate citations for copyright. Enter this data on your storyboards.

IV. Learn how to properly construct a storyboard (University of North Carolina at Charlotte) and then preview the storyboards below and when you find the one that best fits your project, then print out some copies.

Storyboard Page Content

Here are three very valuable links. If you open these and read them then you can save yourself a lot of time in the end.

Assignment

  1. Write a short summary of copyright law, and then discuss how it will affect you...this only has to be a couple of paragraphs in length.
  2. You may want to review the Graphic Design Index page. You will incorporate the different design components that you read about into your Web site.
  3. Fill out the Web Site Specification Form.
  4. Storyboards: Using the storyboard templates above design: 1) Home Page, 2) Site Map, 3) About Page, 4) Content Pages, and 5) Image Pages.

Folder
Your assignment should be put together thusly: You will need a small 3-ring notebook with no more than a 1" binding. You will need dividers, and it is preferred that the notebook has pockets.

You will turn in your notebook on November 3, 2007. This may seem like a very long project, but most of the components are short. The key to successfully completing this is to pace yourself and when you are given time in class to work on your notebook, then do it! Success = Organization.

Home | Audio | DIY | Guitar | iPods | Music | Links | Brain and Problem Solving | Site Map | Contact

Top

Creative Commons License