|
| AD 205 Introduction to Computer Graphics
Tentative Course Schedule
week1 |
Course Intro
Goals, policies, grades, syllabus
Photoshop studio
-Raster Graphics
-Document Setup
-Image Size and Resolution
-Tools
-Selecting and Transforming Objects & Areas
-Masks
-Layers, Blending Modes
-Image Adjustments
-Color Modes
-File formats: PSD, TIFF, JPG, GIF, EPS
Reading:
Review class presentation and exercises
Assignment:
1. Buzz marketing
Create an image for conventional marketing project about buzz marketing. Identity of the product, brand or service to be promoted and create a digital composition in Photoshop that generates buzz to gain attention. Use images and class examples for inspiration and reference.
|
week2 |
Web development
HTML/XHTML
-basic document
-text formatting
-RGB vs HEX
-images
-links
-tables
Reading:
Review class material and exercises
Assignment:
2. HTML/XHTML1
Create an XHTM/HTML document with the following elements (top to bottom order) separated by paragraphs:
1.emphacised title of the page- centered
2. 3 lines of red text in italic format- centered
3. 2 lined of blue text, bold format- centered
4. square image of any size- centered
5. link to any other absolute URL-centered
6. link to your email address - centered
Note: before submitting your work make sure you have both .html document and the image in the same folder. Check if image shows up in the browser and edit the document if necessary.
|
week3 |
Web development
HTML/XHTML, JavaScript
-<head>
-variables
-operators
-comments
-alerts
-functions
-rollovers
Reading:
Review class material and exercises
Assignment: study JavaScript exercises and class material
|
week4 |
Web development, FTP
JavaScript, Dreamweaver
-properties
-basic page
-links
-email
-URL
-rollovers
-layers
Midterm project introduction
Midterm project description
Reading:
Review class material and exercises
Assignments:
3. JavaScript assignment "DICE" - Due September 17
Create a simple web page with a single dice image and a link entitled "roll the dice". The dice should display a random number (random image) then the user clicks on the link. Create your own script based on JavaScript example scripts.
Use images from this page for your DICE assignment.
Below the dice add JavaScript efect of your choice from http://javascript.com/ web site. Examples: slide show, background FXs, image FXs, etc.
4. a. Web site design- Due September 24
4. b. Written/sketched and design presentation for the Midterm project - Due September 24
Example website presentation outline
|
week5 |
Midterm project discussion
Web development, FTP
Development in Dreamweaver
-properties window
-tables
-text styles
-bg images
-bg color
Reading:
DW textbook, Chapters 1, 2, 3, and 4
Assignment: Finalize web site design and content based on the class feedback and discussion.
|
week6 |
Web development
Dreamweaver
-tables
-rollovers
-images
-spry elements
Image optimization in Photoshop, slicing, export to XHTML
Reading:
DW textbook, Chapters 14, pp. 373-388, Ch. 5, 6 pp.133-187
Assignment:
5.
Study image optimization tutorial (see link above) and class files.
Finilize your web site design and develope your home page using DW.
1. make a new folder for your site
name the folder with your name, no spaces, no special char. lowcase letters, no numbers.
2. Select this new site folder each time you save images for Web from Photoshop (Photoshop will create subfolder "images" automatically)
When saving rollovers from Photoshop select again your site folder(not images subfolder) (Photoshop will automatically add additional rollover images to the "images" subfolder)
3. Rename your home page "index.html"
4. Make sure other page (if any) names with low case characters, no spaces, no special signs,etc.
5. Pay attention to nested tables for menu and content areas.
Pay attention to table cells <td> widths and heights matching your design dimensions. Use Ctrl+A to select table cell <td>
To adjust table width and height select an image inside table cell, then use right or left arrow keys on the keyboard to move mouse cursor inside the table cell (next to the image) and then adjust W(width) and H(height) properties of the table cell in the Properties window.
|
week7 |
Midterm work in progress review 1- home page developed in DW, working structure of the site
Web development
Dreamweaver
CSS
DW behaviors
-swap image
-change property
CSS overview - class presentation
Reading:
DW textbook, Chapters 13, pp. 345-354
Assignment: Midterm project - working structure of the site, navigation,
|
week8 |
Midterm work in progress review 2-
Web development
Lab production for the Midterm project
DW behaviors
-change property
-open browser window
-efects
-pop-up messages
-show-hide elements
Reading:
DW textbook, Chapters 13, pp. 354-365, Chapters 8, 9
Assignment: Midterm project - FTP, testing, optimization, publication.
|
week9 |
Midterm Critique Wednesday October 22
Animation
Flash intro (tools, document window, properties, timeline)
Reading: Flash textbook Intro to Flash
Chapters
Assignment: Written proposal and the storyboard for the Final project
|
week10 |
Final project introduction
- Storyboard
Final project description
Animation
Flash intro (tools, document window, properties, timeline)
Reading:
Flash textbook, Chapters 1, 2
Assignment:
1. A written proposal detailing your idea in terms of:
Concept / Content
Temporal development.
2. A storyboard detailing the above visually.
|
week11 |
Animation / morphing/ interactivity
Flash
-frame by frame animation
-tweening
-morphing
-shape hints
-importing bitmaps
-converting bitmaps into vectors
Animation, sound
Flash
-keyframes
-library
-animating with layers
-visibility
-folders
-onion skin
-symbols
-movie clips
-buttons
-rollovers
-layer guide
-scenes
Reading:
Reading 12
Assignment: Using a simple shape, a line, reproduce the motion of a falling leaf and a falling log, including the time of impact. Submit the electronic file for this assignment.
|
week12 |
Animation, multimedia
Flash
Interactivity with Action Script
Sound editing
Reading:
Reading 13
Assignment: Final project progress check
|
week13 |
Lab production for the final project
Assignment: Final project progress check
|
week14 |
Lab production for the final project
Assignment: Final project progress check
|
week15 |
Final Presentations and Critique Wednesday December 3
|
|
|
|
|
