Notebook- List of Notebook assignments and Due Dates
I will give selected Notebook assignments which tie into certain events, exhibits or photo issues.
It is your responsibility to check the web page section for your particular class early each week and complete
assigned questions and sketchbook activities outlined for each week. These assignments are due each Monday/Tuesday at the start of your hour and should be completed outside of class time (homework!)

The computer has become an important technological tool used in nearly every facet of our society, including the visual arts. Virtually all commercial art and design careers now require some type of computer graphics experience. This course will provide important and necessary skills to students seeking careers in a variety of communication and art fields.
Students are evaluated on project-based assignments that will emphasize the fundamentals of the elements of art, principles of design, as well as, computer graphics techniques using the software applications of Adobe PhotoShop. These assignments will revolve around communication and design themes, including topics such as logotypes, letterheads, advertising, and layout. Assignments will be structured around the basic tools and techniques provided by computer technology available.

This is the Course Outline for Computer Art at MHS. Throughout the next semester you will be introduced to a variety of new computer artists, techniques and software. Please refer back to this page throughout the semester for added links, project explanations, due dates, technique workshops, and more.

Week 1 -
-#1 Clean out your folders- only "finished project folder", "web folder" Today, Do this!
Introduction to sports webs- You are creating a specific sports web site for our school, within this site you will utilize
knowledge from our last unit, plus gain some helpful insight into advanced features of "FrontPage".

Your sports web must have:
index (homepage) page with buttons that take the viewer to 4 or more other pages,
a schedule page, a results page, a picture page, a roster page. Pages should have a creative title (marquee)
that you create yourself (Photoshop?), backgrounds and some clip art could be from the Internet>
You will also include an animated gif that you create yourself, plus you must include some appropriate Java Script>
You could also create a league page, a directions to page, a links page or ?
All backgrounds and clip arts should be appropriate for your page and all areas should be very readable and useful.
This web site should have the ability to edit and change aspects of the site as changes are needed
(ex. change rosters, add scores, etc.) You could create parts in Photoshop/Image ready or FrontPage, but again the text should be editable. You will learn some cool advanced features of FrontPage and Java Scripts.
Example- Volleyball WebSite

Starting in FrontPage;
Open FrontPage, go to File-New-and create a new page.
Utilize tables for organization (can be borderless), have a preplanned layout idea.
Create a cool title, marquee in Photoshop- insert as an image from file.

To insert a button in your page, choose 'Insert | Web Component' then select Dynamic Effects for the component type and choose 'Interactive Button' under 'Choose an Effect'.

Make your choice and add the text from the Font tab. Under the button tab, you can preview the rollover effect, type in your button text and link the button to a page. Under the Image tag, you can change the size of the button, choose to preload the button images and decide if you want to save in .jpeg format (best for gradients and shaded buttons) matching the page background color or save the button as a transparent .gif. FrontPage adds all the code needed into your page to make it happen, lets you rename the button states and saves the button images for you.

Getting Ready for FrontPage Photo Gallery

While the FrontPage Photo Gallery has some useful image editing capabilities, they are limited. Though not a requirement, I highly recommend you take time to prepare and optimize your images prior to importing into the Gallery. Any image editing software such as Paint Shop Pro, Photoshop, Image Composer or Adobe Elements will do.

Always check how an image will appear on a monitor by viewing it at 100%. Most digital images, if left in their original format, will be very large in file size and look humongous on a computer monitor. So you should scale down their size, which also reduces the file size.

I try to reduce images so they are no larger than 288 x 432 pixels or 432 x 288 pixels (4x6" or 6x4"). I also make other enhancements such as cropping, adjusting brightness and contrast, color correcting, sharpening and compressing. Besides editing to perk up their look, compressing images will let them load more quickly into a web browser.

Creating and using the Photo Gallery

Now the fun begins. To create the Gallery, follow these simple steps.

1- Place your insertion point in the table you created for the Gallery.
2- Via the Insert Menu, select Web Component then highlight Photo Gallery in the left hand panel of the Insert Web Component dialog box. Then click Finish.
3- The Photo Properties Dialog box will open. In it you will find two tabs, Pictures and Layout.

The Pictures Tab area:

By clicking on the "Add" button, you can import photos into the Gallery from a scanner, digital camera or from a folder on your hard drive. You may want to select a specific size for the thumbnails before importing images. If so, check "Set as default size." You can change the size of individual thumbnails later however be aware that increasing the size of a thumbnail, or any image for that matter, after it has been saved may decrease overall image quality.

Once images have been imported into the Gallery, you can change their order, resize the thumbnails, and add text. By selecting "override and use custom font formatting" you can change the color, point size and typestyle of fonts for both captions and descriptions.

Clicking on the Edit button will let you scroll through all the large images you've brought into the gallery. You may resize, rotate and crop them but this probably won't be necessary if you previously prepared the images.

The Layout Tab area

Click the layout tab to preview and choose one of four layouts offered in FrontPage: Horizontal, Montage, Slide Show and Vertical. You may also select the "Number of pictures per row" for two of the layouts. As previously mentioned, keep in mind that you don't want too many pictures per row since by doing so causes the Photo Gallery to expand too wide across a computer screen. The size of the thumbnails you select will help serve as a guide to how many you should use per row.

Saving the Gallery for the first time

When you save the gallery the first time, FrontPage will create a directory (folder) in your web called, you guessed it, "photogallery." The photogallery folder contains a sub-folder associated with the Gallery you just created. It contains the thumbnail images and three htm pages: real.htm, real_p.htm and real_x.htm. The first two pages contain the thumbnails images. (note: if you create additional galleries, additional thumbnail sub-folders will be saved in the photogallery folder).

You can save the large images in your Images folder, or create a separate folder to store them in. But DO choose where the large images will be saved otherwise FrontPage places them in the root (main) web folder. If that happens, you will no doubt consider it a mess when you see all those jpegs saved there! Use the Change Folder button in the Save Embedded Files dialog box.

Making changes to the Photo Gallery

Any time you wish to add, delete or make other changes to the Photo Gallery, just open its web page and double click in the gallery area. You can even select a new layout if you wish.

JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and much more.

Example #1- Print Button
Directions: Simply copy the below into the <body> section of your page:

<SCRIPT Language="Javascript">

/*
This script is written by Eric (Webcrawl@usa.net)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

function printit(){
if (window.print) {
window.print() ;
} else {
var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = "";
}
}
</script>

<SCRIPT Language="Javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()"></form>');
}
</script>

3D spinning message
Step 1: Insert the below into the <HEAD> section of your page:

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
v\:* { behavior: url(#default#VML); }
</style>

Step 2: Insert the below into the <BODY> section of your page, OUTSIDE any other container tags (ie: <table>, <div> etc):
<script type="text/javascript">

/***********************************************
* 3D Spinning Message Script- By Copyright (c) 2003 Peter Gehrig
* Website: http://www.24fun.com
* Script available at/modified by Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
***********************************************/

// Add as many messages as you like
var message=new Array("Dynamic Drive", "#1 DHTML site online", "Visit us for free scripts", "Enjoy")

// Set the outline-color. Add as many colors as you like
var outlinecolor=new Array("black", "black")

// Set fillcolors 1. Add as many colors as you like
var fillcolor1=new Array("gray", "green", "white", "green")

// Set fillcolors 2. Add as many colors as you like
var fillcolor2=new Array("blue", "olive", "black", "lime")

// Set the letter marking the circle
var circlemark=new Array("-")

// Set the width of the outline
var strkweight=2

// Set the waiting time between the messages (seconds)
var pause=2

// Set the strength of the opacity (transparency of letters)
var strengthopacity="60%"

// Set the size of the circle (values range from 0.1 to 1)
var circlesize=0.5

// Always keep messages in view even if page is scrolled? (DD added option)
var keepinview="yes"

// Do not edit below this line

mytruebody=(!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body //Dynamicdrive added object

var outerwidth=mytruebody.clientWidth
var outerheight=mytruebody.clientHeight

var innerwidth=Math.floor(circlesize*outerwidth)
var innerheight=Math.floor(circlesize*outerheight)

var posleft=(outerwidth-innerwidth)/2
var postop=(outerheight-innerheight)/2

var path=new Array()
var i_message=0
var i_outlinecolor=0
var i_fillcolor1=0
var i_fillcolor2=0
var i_messagelength=0
var longestmessage=0
pause*=1000

var ie=document.getElementById&&document.all?1:0

for (i=0;i<=message.length-1;i++) {
if (message[i].length>longestmessage) {
longestmessage=message[i].length
}
longestmessage+=4
}

for (i=0;i<=message.length-1;i++) {

var emptyspace=""
var i_emptyspace=(longestmessage-message[i].length)/2
for (ii=0;ii<=i_emptyspace;ii++) {
emptyspace+=circlemark
}
message[i]=emptyspace+" "+message[i]+" "+emptyspace
}

function changeform() {
if (keepinview=="yes") //DD added
document.getElementById("roofid").style.top=mytruebody.scrollTop //DD added
if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0}
if (i_fillcolor1 >= fillcolor1.length) {i_fillcolor1=0}
if (i_fillcolor2 >= fillcolor2.length) {i_fillcolor2=0}
document.getElementById('strokeid').color=outlinecolor[i_outlinecolor]
document.getElementById('fillid').color=fillcolor1[i_fillcolor1]
document.getElementById('fillid').color2=fillcolor2[i_fillcolor2]
if (i_message < message.length) {tick()}
else {document.getElementById('textpathid').string=""
document.getElementById("roofid").style.display="none" //DD added
}
}

function tick() {
if (i_messagelength <= message[i_message].length) {
var messagestringend=""
var messagestring=message[i_message].substring(0, i_messagelength)+messagestringend
document.getElementById('textpathid').string=messagestring
var timer=setTimeout("tick()",50)
i_messagelength++
}
else {
clearTimeout(timer)
i_messagelength=0
i_message++
i_outlinecolor++
i_fillcolor1++
i_fillcolor2++
var timer=setTimeout("changeform()",pause)
}

}

if (ie) {
document.write('<div id="roofid" style="position:absolute;left:0px;top:0px;width:'+outerwidth+'px;height:'+outerheight+'px;overflow:hidden;">')
document.write('<v:oval id="tc" style="position:absolute;top:'+postop+'px;left:'+posleft+'px;width:'+innerwidth+'px;height:'+innerheight+'px">')
document.write('<v:shadow on="t" opacity="'+strengthopacity+'"/>')
document.write('<v:stroke id="strokeid" weight="'+strkweight+'pt" color="blue"/>')
document.write('<v:fill id="fillid" on="True" color="'+fillcolor1[0]+'" color2="'+fillcolor2[0]+'" opacity="'+strengthopacity+'" opacity2="'+strengthopacity+'" type="gradient"/>')
document.write('<v:path textpathok="t"/>')
document.write('<v:textpath id="textpathid" on="t" id="mytp" style="font-family:\'Arial Black\'; " fitpath="t" string=""/>')
document.write('</v:oval></div>')
if (window.attachEvent) //DD added code
window.attachEvent("onload", changeform) //DD added code
else
window.onload=changeform
}
</script>

Week 5 1-29/2-2-07
Tuesday- Logotypes
Logo Overview/ Introduction- Lecture/ Workshop and Read and Write Session

Thursday- Mr. Versch Gone Today-
*Daily Work (Yes Due This in Class Today- Jan 31)
Click on this Link - SuperBowl Commercials

*When you have completed the Superbowl work, complete the following assignment-
Logo homework (it is in the common folder for our Computer G course/Bridgette yours is in your folder already,
open it and save it to your CG folder)
Some of the information is a repeat from Tuesday, but I want you to write it down again- so it is remembered by you!
We not only want to be able to communicate in a logical graphic design language, but I also want you to pass my Logo quiz that is upcoming!

Do Not Forget the Article that is due by 8:25 a.m. Friday morning- but do not do it during class- maybe email provides the time that it was submitted, so do not waste your time!

Work on - Personal Logo
Font
Symbols
Shapes
Putting it all together

Should be completing
Font Should have completed 9 different ideas
Symbols Should have two things ( photos or symbols ) from the internet "simplified"
Shapes Should have created two different unique geometric shapes ( follow instructions or go to links)
These three preliminary assignments should be completed and saved to your 4th quarter finished project folder!
Now you should begin to work on your "Individual Logo"
Check out the requirements for your logo - "Logo Requirements"

Plus Check Out- Putting it all together

Wednesday-
#1 Clean out your Computer Graphics folder- you can eliminate your sports web folder, those have all been uploaded on the web. You should also eliminate all extra files (yes save projects and your computer graphics web page) but all elese can /should be eliminated!
#2 Build your 3rd quarter web page- should include a link to your sports web page on the usd408 server (find it/copy it and link it), your 3rd quarter page should also include your page with the 9 or more examples of font manipulation and places for your personal logos, business logs and non-alcoholic beverage logo/label. (#1 & #2 are both daily grades - do them!)
#3 Work on your first personal logo- read through- Check out the requirements for your logo - "Logo Requirements"
Font Should have completed 9 different ideas
Symbols Should have two things ( photos or symbols ) from the internet "simplified"
Shapes Should have created two different unique geometric shapes ( follow instructions or go to links)
These three preliminary assignments should be completed and saved to your 4th quarter finished project folder!
Now you should begin to work on your "Individual Logo"
Plus Check Out- Putting it all together
You should have completed three different (yes I want three totally different logos) personal logos by the end of class on Friday!
Example of my new logo (the Chinese symbols represent family!)

Week 8

Next Project- develop a new logo for a business in your community. The logo should be original, do not use existing logos, or someone else's artwork. Photographs or art that has been simplified in PhotoShop is acceptable. You should create three distinct different logos for your business, pay attention to font choice and color choice. You do not have to a geometric shape on these, but it could improve unifying the work. Logo should be adaptable to all needs!
Include a slogan (ex. Nike "Just do it!") within your logo or logo area.
Work on your Business Logo-
Fill out the business logo homework sheet, you will find this in your homework folder!
Marion- print out and put in Mr. V's turn in box.Centre-Save back to your 3rd Quarter folder for a grade!

Daily Grade
Begin building some examples of logos for your business-
consider all of the elements we have
discussed in class so far-
Font choice, shapes, simplified objects or symbols, and color choices.

Business Logo requirements- develop 3 new logos for a business in your community. Logo should be original do not use existing logos, or someone else's artwork. Photographs or art that has been simplified in PhotoShop is acceptable.
No word art! No use of existing logos or parts of others logos! You should create three distinct different logos for your business, pay attention to font choice and color choice. You do not have to a geometric shape on these, but it could improve unifying the work. Logo should be adaptable to all needs!
Include a slogan (ex. Nike "Just do it!") within your logo or logo area.

Friday and Monday- Once you have your logos done, I want you to transfer these to four different types of publication
(places you would use or see the logos) I want you to apply your logo to:
1. Letterhead (the long lost art of letter writing) should include your logo, street address, town, state, zip code and phone #
2. Envelope- should include logo in return address area, along with businesses address
3. Business Card- include logo, full address, phone # and owners name or contact person
4. T-shirt- just the logo

Week 10
Should have original logos in your finished work folder, should assemble your logo onto letterhead,
envelope, business card and t-shirt and combine these together to make one image (see example above).
These images (X3) should be flattened and saved to your website as .jpegs. At your webpage, insert business logo
compilations (jpeg.s) onto page and write an intelligent explanation about each business- include color, shape,
object/symbol and font choices.

Example of what should be on your website (X3 with explanation).

Thursday- D-Day By the end if school you should have your 3 business logos on your web page along with the three compilations of
letterhead, business card, envelope and t-shirt (see pic above). You should also have printed out all three examples to send to your business
Yes you will need to stuff some envelopes on Thursday!.

Start of 4th Quarter Project- Week 11

Pop Can Label Project
Class discussion and brainstorm for types and ideas
Beverage can display, Mr. V shows off some strange cans from his son's collection.
Brainstorm- write down 10 ideas for yourself and complete other work at POP CAN Class work
this is required for today!
Choose your favorite idea, have this okayed by Mr. Versch – e-mail me the above info (Bridgette).
Begin to find images, backgrounds and cool fonts.

Ok, you have your ideas, now what? You need to start collecting parts- backgrounds, font, object, shapes, etc.
Where can you find this stuff?
Mr. V's Favorites-
Fonts- FlamingText.com or have Mr V download a cool font from dafont.com
Backgrounds- Finla
My Super Reference Site- Reference Page for CG
Find all of your parts and begin to assemble-

Rememberyour label must be glued to some type of container (3-D), you must provide the container!
This project is very 3-D.

Week 12
Introduction/start "Funny Money" Project
I will put "money" images and "Ricky" images in your web page folder!

"Funny Money" Project

Change Color to Black and White -Open photo in Adobe Photoshop.
Go to Image column, open Mode, go to Greyscale- it will ask you "discard color information?"
Click ok. Your photo is now B & W.
To add color, Go to Image column, open Mode,
go to RGB color- you can now add color.

Adding an Overall Color Tone to Photo
Adding Sephia (or any color) Tone to all, and erasing parts-
Go to Layer column, go to new- layer.
From your color picker box, in toolbar, choose a good color (brown, green, yellow, etc.).
Got to Edit column and click on "Fill"- click on ok.
Your page now is filled with the brown. (don't freak out)
With your layer menu bar open, change "normal" to "overlay" (you can also experiment with other commands)
and change "opacity" to a lower number.
With this new layer still selected , choose your eraser and erase parts of your image,
leaving some areas toned- some b& w.

Final Project- "Digital Self Portrait"

Project- Using Adobe PhotoShop create a visual "Digital Self Portrait" similar in complexity to
the project completed by Tim Dunigan.
What kinds of images feed into how you see the world, what influences your world? What kinds of images could illustrate your interests and feelings? How could you utilize some of the PhotoShop techniques you have mastered this year?
Your "Digital Portrait" project should include:
1. A photo of yourself (scanned or digitally taken)-
this photo must appear at least 3 times in this composition (could be altered and resized).
2. Objects/illustrations ( at least 4 examples that relate something about you- what do you want to say about yourself.)
3. Contrasts- (you must use at least 2) examples could include-
color vs. b&W, hard vs. soft, manmade vs. natural, mechanical vs. natural, robot vs. human, real vs. fantasy, etc.
4. Could include images from the "Internet" (no more than 40%) or images could be scanned illustrations, photos and actual objects or freehand.
5. Areas that include repetition (at least one example of repetition of the same objects [repetition = 3 or more) and reduction/enlargement (at least one example of zoom in/zoom out).
6. Utilizing special effects of one-color toning and filters. (must utilize at least one example of both of these in project)!
Use your artistic talents! And your imagination!
Examples-

Week 15
Animation Techniques
Tuesday -
Today we are starting on a unit on Animation- in this unit you will discover animation history and methods,
plus you will create 2 different animations (#1 Cut/Collage Animation and #2 Either found object or clay animation)

#1 Complete Animation Worksheet (Open in a new window, right mouse click and click on "open in new window")

Animation History Links-

Thursday-
Introductory into simple animation and Moviemaker-

Very Good Example of How This Lesson Came About- The Lesson

Cutout/ Collage animation

Cutout animation is a technique for producing animations using flat characters, props and backgrounds cut from materials such as paper, card, stiff fabric or even photographs.Today, cutout-style animation is often produced using computers, with scanned images or vector graphics taking the place of physically cut materials. The South Park TV series is a notable example, the first episodes were indeed made with actual paper cutouts. One of the most famous animators that are still using cutout animation today is Yuri Norstein.
Animated shows using cutout animation

Monty Python's Flying Circus is famous for its animated sequences created by Terry Gilliam.

Angela Anaconda uses black-and-white photos of people over CGI-like artwork.

South Park's cutout style is more traditional, as is Blue's Clues.

Joel Veitch uses this animation style in his website rathergood.com.

#2 Begin to brainstorm for ideas for your "PhotoShop" animation
Research and listen to song (if you can find lyrics), brainstorm, complete storyboard

Week 16 (April 21-25)
Monday/Friday- Begin adding your photoshopped images to the moviemaker software, creating your first animation. This cartoon should have a title (created in MM) and some sort of beginning, middle and end. If time begin to add sound fx and music. Save as windows media file.
Your movie should be at least 45 seconds long.
Experiment with changing times of frames in the timeline mode, experiment with music and sound effects.

A Great Tutorial Page on using Movie Maker 2

Tuesday-

Movie #2 Begin to brainstorm for ideas for your "Second & More Complex" animation. Your 2nd movie should be between 2 to 4 minutes long with a complete story- something has to happen. All films must have a beginning, story and ending. Each should have a plot or point of interest.
Brainstorm, complete storyboard, create or find figures, take photos, import to PhotoShop and alter, insert in Moviemaker 2, add sound- music and voice, plus fx. A Great Tutorial Page on using Movie Maker 2

Example of finished storyboard-

When storyboard is approved begin by creating figures (clay) or altering found figures (legos, Gi Joes, etc.), plus creating a white screen which your film will be shot in front of. Using digital cameras, shoot initial shot, move slightly shoot again, repeat for single action.

Week 18 (May 5-9)
Tuesday/Thursday
Continue on movie #2.
Tweening and tweaking in MM2. Save as a Windows media file.
Movie #2 is due May 7th

Week 19- 20 (May 12-22)
During this class I am allowing my Computer Graphics students to have total control over their last projects. I want each student to develop a plan/idea for each of their projects. Projects can be created in any area you feel comfortable with or in any software you want to try to experiment with. Each of these projects should be major works and should be challenging for you. Be creative and really test yourself. I do want you to be original. Yes you might get an idea from another's' art or websites, but you must adapt your project ideas to be original. You must fill out a project proposal form and have it approved before beginning any project.
Before you begin on your project you must complete a "Project Proposal Form", plus complete the research page over your proposed subject area. You could complete research over a particular artist, technique or software (tutorials).

CG Proposal Form

Seniors last project due by 4:00 May 14th
Underclassmen last project due by 4:00 May 21st

Class Rules, Grading & Expectations	List of Notebook Assignments & Due Dates		Computer Graphics Gallery 2007-08
Week 1 (Jan. 2)	Week 2 (Jan. 7)	Week 3 (Jan 14)	Week 4 (Jan 21)
Week 5 (Jan. 28)	Week 6 (Feb. 4-8)	Week 7 (Feb. 11-15)	Week 8 (Feb. 18-22)
Week 9 (Feb. 25- 29)	Week 10 (March 3-6) End of 3rd Quarter No Class- Fri.	Week 11 (March 10-14)	Spring Break (March 17-21) No Class This Week
Week 12 (March 24-28)	Week 13 (March 31-April 4)	Week 14 (April 7-11)	Week 15 (April 14-18)
Week 16 (April 21-25)	Week 17 (April 28-May 2)	Week 18 (May 5-9)	Week 19 (May 12-16)
	Awesome PS Site- Worth 1000		E-Mail Mr. Versch

Animation Timeline	Timeline 2	History of Animation 2
History of Animation	Early Animation Toys	Optical Toys

Viking Kittens- Joel Veitch	Quizno's Creatures	Kelp- 7 Seconds of Love
Opening of Arch (flash)	Dragon Movie (commercial)

Stop Motion Animation	Clay and Stop Motion Animation
Simple Claymation	Claymation Movie
Combines found figures and claymation
Robot Chicken (Star Wars)	PS2 Robot Chicken

Getting Ready for FrontPage Photo Gallery

Creating and using the Photo Gallery

The Pictures Tab area:

The Layout Tab area

Saving the Gallery for the first time

Making changes to the Photo Gallery

3D spinning message Step 1: Insert the below into the <HEAD> section of your page:

Thursday- Introductory into simple animation and Moviemaker-

3D spinning message
Step 1: Insert the below into the <HEAD> section of your page:

Thursday-
Introductory into simple animation and Moviemaker-