|
INTRODUCTION TO WEB GRAPHICS
WD301 Course Syllabus - Fall, 1999
Portland State University School of Extended Studies
Web Site Developers Program
Instructor: Ross Olson
I. Synopsis
This course examines introductory aspects of graphics and design on the World Wide Web. It deals with creating and scanning images in a digital medium and making them available to various audiences on the Internet. Procedures for scanning photographic images and cleaning and retouching will be discussed and demonstrated, as well as scaling, rotating, and cropping of images. The theory of color including additive and subtractive methods will be explained and demonstrated. General principles for the design and implementation of graphics and design in multimedia applications will be discussed. Concepts of vector and bitmap based file formats with be explored along side their relation to anti-aliasing techniques. We will study various graphic formats including GIF, JPEG and PNG, and opportunities for students to create files in these formats will be available. During the course, we will cover the following:
- The technical concepts that underlie graphical media
- Procedures for creating and scanning images
- Methods of processing graphics, including compression
- File formats and the positive and negative attributes thereof
- The tools and techniques used by professional graphic and web designers
- Basic animation concepts and implementation
II. Objectives and Outcomes
The primary objective is to give students a thorough grasp of the concepts of graphic design and image formats on the Web. When this understanding comes into focus, the tools for solving problems and creating useful, artistic media files are readily applied. Students will observe and participate in the creation of graphics in a production environment, gaining the perspective of professional graphic designers and web developers. The course will focus on Adobe Photoshop, the most widely used tool for professional graphic design, and use various utilities to demonstrate further steps that the base tool does not cover. Students can expect to be competent in performing the following tasks, if they engage fully in the course:
- Demonstrate an understanding of graphic formats and the concepts of their underlying approach
- Identify hardware and software tools for media production
- Recommend the most effective method for delivering image contents on the Web
- Identify the necessary steps to create, acquire, process, and compress media
- Build a resource bank containing URLs, articles, references, and subject matter experts
In addition, it is assumed that students will develop an appreciation for high quality design and the ability to recognize professional graphic design and web development.
III. Course Format
The classes will include lectures, demonstrations, and lab projects, and follow the pattern of: Concept Introduction, Real-world Examples, Concept Details, and Practice. Class discussion is imperative! Asking questions will incur the good graces of the instructor.
IV. Location and Time
The class meets from 6:30 PM to 9:30 PM in the Micro-computer Lab, Cramer Hall, Room 322. The class dates are most Wednesdays from the last Wednesday in September through the 1st in December.
- Sept 29
- Oct 6
- Oct 13
- Oct 20
- Oct 27
- Nov 3
- Nov 10
- Nov 17
- Nov 24
- Dec 1
V. Calendar
Wednesday, Sept 29
1. Student profiles/introductions
2. Concept: Basic Photoshop
- The Canvas
- Selecting, Stroking and Filling
- Hands On: Creating a graphic: The Tree
- Saving
3. Concept: Macintosh 101
- Saving Files
- Organizing Files and Directories
- Using The Network
- Cross-platform Issues and Techniques (Filenames)
Wednesday, October 6
1. Recap
2. Concept: Basic HTML and Web Page Development
- BBEdit
- HTML Basics: (Tags HTML, HEAD, BODY, P, B)
- Hands On: Creating a HTML page describing favorite park
- The IMG tag
- HTML color
- Background Graphics
3. Concept: Intermediate Photoshop
- Layers
- Transform commands
- Hands On: Creating a graphic: The Dog and Tree
- Saving
Wednesday, October 13
1. Recap
2. Concept: Bitmaps
- Bitmaps vs. Vectors
- Resolution on the web (DPI) and why it doesn't matter.
- Screen Sizes
3. Concept: Basic Color Theory
- Additive Color vs. Subtractive Color
- The Color Wheel
- How Monitors work/How Computers display colors
- Bit Depths
- Color Palettes
- (Cross Platform Gamma)
4. Concept: File Formats
- GIFs
- File Sizes
- Optimizing GIFs
- Transparent GIFs
- JPEGs
- Optimizing JPEGs
- Other Formats
Wednesday, October 20
1. Recap
2. Concept: Vectors
- Drawing a circle in Photoshop
- Photoshop circles under a Microscope
- Freehand files
- Drawing a circle in Freehand
- Moving from Freehand to Photoshop
Wednesday, October 27
1. Recap
2. Concept: Freehand
- Drawing
- Anchor Points
- Bezier curves and handles
- Hands On: Creating a graphic: The Hydrant
- Text
- Hands On: Creating a graphic: The Welcome Sign
- Saving Files
Wednesday, November 3
1. Recap
2. Concept: Typography
- History of Type
- The Feel of Type
- WWW: The Typographer's Heartache
- Type in Graphics
- Type in Text
- Cross-Platform Type in Text
3. Concept: Critiquing Design
- What appeals to your Eye?
- The influence of Color
- Communicating a point
- Analyzing, Contextualizing, and Deconstructing
- Homework: Find 2 site designs that you find attractive, and relate the five top reasons why. Find 2 site designs that you find are ugly, and relate the five top reasons why.
Wednesday, November 10
1. Recap
2. Concept: Scanning in Photoshop
- Operating a Scanner
- Issues with Materials: Transparencies, Photos, Printed
- The Steps: Scan, Crop, Levels, Color Balance, Hue Saturation, Unsharp Mask, Touch-up, Resize, Unsharp Mask.
- Color Mode
Wednesday, November 17
1. Recap
2. Concept: Intermediate HTML
- Page Backgrounds
- Table Layouts
- Table Backgrounds
- Transparent dots
- Images broken up in a table
Wednesday, November 24
1. Recap
2. Concept: Animation
- How Animation works
- Building frames in Photoshop layers
- GifBuilder
- Animated GIF compression
- Animation in a tabled image
3. Web Design: The Battle
- What your User wants
- What your ego wants
- What your Boss wants
- What your User needs
Wednesday, December 1
1. Recap
2. Concept: The Production Line
- Tying programs together
- Organizing files
- Exact Interactive's 'Process'
3. Concept: Applying graphics
- Content
- Navigation
- Ads/Banners
- Backgrounds
4. Wrap up
- Class Evaluation
- Instructor review
VI. Coursework
Each student is expected to complete a web page of their own design. The course is specifically designed to prepare students to develop graphical content for the Web.
VII. Student evaluation
This course will be graded Pass/No Pass, based on attendance and participation. You must attend three of the four sessions to successfully pass, and demonstrate your skills.
VIII. Computer labs
For participants enrolled in this course the PSU computing labs will be available for students to work on related projects during the weeks that classes are held. The Mac lab in Cramer Hall 322 consists of twenty G3 Power Macintosh computers. Each computer is connected to the campus network, and offers Internet access including Netscape Navigator and other applications. Software packages include the Microsoft Office suite and Adobe Photoshop. The IBM compatible side of CH322 is also available, with Pentium-based computers. Call 725-9100 to schedule time, or to find out when labs are open.
Please! Absolutely no food or drink in the labs.
IX. Instructor biography and contact information
Ross Olson
Exact Interactive
E-mail: rosso-at-bad-seed.org
Ross Olson is the Web Design and Development Lead for Exact Interactive (http://www.exactinteractive.com). Ross came to Portland in 1994 as a graphic artist, working with Creative Multimedia, at the time the largest consumer multimedia developer in the Metro area. He took the lead in developing web technologies for Creative but soon moved on to ply his new trade at other companies. In 1997 Ross joined the Oregon Museum of Science and Industry as the Lead Web Developer and undertook an overhaul of their enormous site and developed several educational sites. Ross has lectured and given presentations for universities and for professional web development associations.
X. Recommended readings
Photoshop:
- Photoshop in a Nutshell, Donnie O'Quinn, O'Reilly Books
- GIFAnimation Studio, Richard Koman, O'Reilly Books
- Photoshop for the Web, Mikkel Aalaud, O'Reilly Books
- Web Photoshop 5 To Go, Jason I. Miletsky
Freehand:
- Macromedia Freehand 8 Authorized
Web Graphics:
- Designing Web Graphics 3, Lynda Weinman
- Preparing Web Graphics, Lynda Weinman
- Deconstruction Web Graphics 2, Lynda Weinman and Jon Warren Lentz
- Web Navigation: Designing the User Experience, Jennifer Flemming, O'Reilly Books
- Web Designer's Guide to Typography
- The Project Cool Guide to Enhancing Your Web Site, T Martin, G Davis
- Hotwired Style, Jeffry Veen
- Web Sites That Work, Roger Black
Monthly Journals:
- Web Techniques, ID, New Media, Adobe Magazine
Web Publications:
Web Sites:
Web Page Design for Designers (Highlights)
Web Color
|