|
INTRODUCTION TO WEB GRAPHICS
WD301 Course Syllabus - Summer, 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 scanning and creating images in a digital medium and making them available to various audiences on the Internet. Procedures for scanning print and photographic images and cleaning and retouching will be discussed and demonstrated, as well as scaling, rotating, and cropping 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 its 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 Individual and Team practice. Class discussion is imperative! Asking questions will incur the good graces of the instructor.
IV. Location and Time
The class meets from 9:00 AM to 5:00 PM in the Micro-computer Lab, Cramer Hall, Room 322, Wednesday and Friday of the last two weeks of July.
V. Calendar
Wednesday, July 21, 9:00am
1. Student profiles/introductions
2. Concept: Basic PhotoShop
- The Canvas
- Brushes and Pencils
- Filters
- Saving
3. Concept: The MacOS
- Saving Files
- Organizing Files and Directories
- Using The Network
- Cross-platform Issues and Techniques
4. Concept: Basic HTML and Web Page Development
- BBEdit
- HTML Basics
- The IMG tag
- HTML color
- Background Graphics
- Break
5. Concept: Basic Color Theory
- Additive Color vs. Subtractive Color
- The Color Wheel
- How Monitors work/How Computers display colors
- Color Palettes
6. Concept: File Formats
- GIFs
- File Sizes
- Optimizing GIFs
- Transparent GIFs
- JPEGs
- Optimizing JPEGs
- Other Formats
- Break
7. 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.
Friday, July 23, 9:00am
1. Recap
2. Concept: Scanning in Photoshop
- Operating a Scanner
- Issues with Materials: Transparencies, Photos, Printed
- Touch up
- Cropping/Rotating/Resizing
- Color Mode
- Break
6. Concept: Bitmaps vs. Vectors
- PhotoShop files under a Microscope
- Drawing a circle in Photoshop
- Freehand files
- Drawing a circle in Freehand
- Moving from Freehand to Photoshop
3. Concept: Freehand
- Drawing
- Anchor Points
- Bezier curves and handles
- Text
- Saving Files
- Break
4. Concept: Monitors
- Bit Depths
- Resolution DPI/PPI
- Screen Sizes
- Cross Platform Gamma
A brief take-home test will be distributed.
Wednesday, July 28, 9:00am
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
- Break
3. Concept: HTML Step 2
- Page Backgrounds
- Table Layouts
- Table Backgrounds
- Transparent dots
- Images broken up in a table
4. Concept: Animation
- How Animation works
- Building frames in PhotoShop layers
- GifBuilder
- Animated GIF compression
- Animation in a tabled image
- Break
5. Web Design: The Battle
- What your User wants
- What your Ego! wants
- What your Boss wants
- What your User needs
Friday, July 30, 9:00am
1. Recap
2. Concept: The Production Line
- Tying programs together
- Organizing files
- Exact Interactive's 'Process'
- Break
3. Concept: Applying graphics
- Content
- Navigation
- Ads/Banners
- Backgrounds
4. Wrap up
- ******
VI. Coursework
Each student is expected to complete a web site of their choosing. 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 two 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. The Visual Instruction Lab in Neuberger Hall 439 is also available, with Adobe Photoshop loaded on fast Pentium MMX machines. 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 Lead Web Developer for Exact Interactive (http://www.exactinteractive.com), the interactive media division of Exact Imaging. 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, Adobe Magazine, ID, New Media
Web Publications:
Web Sites:
Web Page Design for Designers (Highlights)
Web Color
|
[ Read and write comments ]