This work is licensed under a Creative Commons License.

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 copyright, 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 link 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.

Generate several feasible designs that meet the design specification

Evaluate the designs against the design specification

Select one design and justify its choice.

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

Construct a plan to create the product/solution that has a series of logical steps

Construct a plan to create the product/solution that makes effective use of resources and time

Evaluate the plan and justify any modifications to the design.

Introduction to Graphics and 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 investigation related to copyright, and graphic design. The copyright segment is pretty straight forward, but the use of images and the graphic design process considerably more information that you will be responsible for. You will demonstrate your proficiency by apply the tools and skills you learn to the actual design of your Web site.

You will be responsible for the following:

I. 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.

II. Create a graphic with the scanner.

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

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

Copyright & Fair Use
PNG Art

Introduction to Scanning

I. Define the four steps in using a scanner: Plan, Scan, Edit, and Save.

II. Scan a Black and White image.

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.

I. Once you finish this section of the tutorial then you should optimize all of the images on your site.

Making a Nameplate

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.

Planning a Logo

The storyboard concept

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 element of the graphic, indicating size, location, color, and font.

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

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

Storyboard With Arrows

Blank Boxes Storyboard

PDF Storyboard Template 16X9

Storyboard Template 4X3

Storyboard Template 3X2

Storyboard With Comment Space

Standard ratio (4:3)

Standard ratio with space for overhead plan

Wide screen (16:9)

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

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.

Principals of Copyright
Creating a Logo
Creating a Page Banner
Optimize Images
Using Fireworks

Setting Up Dreamweaver
Using Dreamweaver
The Insert Bar

Web Design and Development Process
Production Storyboard
Using Flash and Video in a Web site
Create Image Maps
Create Rollover Images
Create pop-up Menus

IBMYP Assignment

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.

Read all of the papers on Graphic Design Index page, and write a one page summary. The summary should address how you will incorporate the different design components that you read about into your Web site.

Fill out the Web Site Specification Form.

Storyboards: Using the storyboard templates above design: 1) Home Page, 2) Content Pages, and 3) Image Pages.

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.

Title Page: Title of Web Site, Name, Date

About Page: You already wrote this...just print it out.

Copyright Summary: A couple of paragraphs.

Graphic Design Summary: You may want to use an outline.

Completed Web Site Specification Form: Not every line has to be filled in, this form will be on-going.

********* Divider *********

Storyboards. You may also want to include some printouts of your banner, page design, etc. You need a minimum of four: Homepage, Template Page, Text Page, and Image Page.

********* Divider *********

Images, maps, drawings, items to be scanned, etc., that you will be using in your Web site. You want to keep a collection of your work here. Start collecting material to scan, or catalog the images that you are going to use.

********* Divider *********

You will turn in your notebook on October 22, 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.

Top