Advanced Web Graphics
EN 382-01 Advanced Publishing
Dr. Randy Brooks, Ph.D.
Director of the Writing Major
Millikin University
January Immersion 2007
Classroom: Staley Media Arts Center (Library 014)
Section 1: January 3-9, 2007 (7 days) 9:00 am – 3:00 pm
BRIEF DESCRIPTION:
This course is an intensive technical writing workshop on advanced web graphics with an emphasis on mastery of graphic development using Photoshop and ImageReady. Each student completes a web-based tutorial on advanced web graphics techniques. Students in this workshop should already have some experience with basic web design.
In this course we will consider four key roles of graphics in web sites—orientation graphics to help create identity and atmosphere, navigation graphics to prompt and guide the user through the web site, framing graphics to establish featured spaces for web content and graphics as content. We will develop user knowledge of graphics software including Photoshop, ImageReady and Dreamweaver.
We will also learn the following advanced web graphics production processes:
1. how to optimize graphics as high quality, quick-loading files
2. how to manage color settings for web graphics
3. how to control high quality transparency in web graphics
4. how to create type graphics with layer effects for buttons & titles
5. how to create background images and background tiles
6. how to create image maps for navigation
7. how to create image slices
8. how to create rollovers and image swapping
9. how to create animated gifs
10. how to create a collage for banners or flash pages
11. how to place web video clips into a web page
12. how to (in general) use Photoshop filters, history and other elements
13. how to integrate the use of these graphics for interactive web design
Course Goals and Learning Outcomes
(1) To learn how to create, develop and implement a variety of advanced web graphics for effective integration of text and graphics in web sites.
(2) To develop advanced user knowledge of Adobe Photoshop CS2.
(3) To demonstrate the ability to create a web-based tutorial on advanced web graphics techniques.
Web Resources
http://faculty.millikin.edu/~rbrooks
Attendance Policy
The workshop assumes extensive lab time together. With clear tasks and demonstration points, you will not pass this course if you miss a day.
Academic Honesty Policy
All students are expected to uphold professional standards for academic honesty and integrity in their research, writing, and related performances. Academic honesty is the standard we expect from all students. Read the Student Handbook for further explanation (available on the Millikin University web site). Staley Library also hosts a web site on Preventing Plagiarism, which includes the complete university policy. It is located at: http://www.millikin.edu/staley/research/prevent_plagiarism.asp. Visit and carefully read the Preventing Plagiarism web site.
If you submit work that is not your own, that is, plagiarized or copied from any source without proper citation, or if you are caught cheating on any assignment, you will fail the assignment and you will probably fail the course. In addition, the Registrar and the Office of Student Services will be notified so that they can take action according to university policy, which means that you may be dismissed from the academic program and university. If you have difficulty with any assignment in this course, please see me rather than consider academic dishonesty.
Disability Accommodation Policy
Please address any special needs or special accommodations with me at the beginning of the semester or as soon as you become aware of your needs. If you are seeking classroom accommodations under the Americans with Disabilities Act, you should submit your documentation to the Office of Academic Development at Millikin University, currently located in Shilling room 205.
Assignments
(A+=100, A=95, A-=90, B+=88, B=85, B-=80, C+=78, C=75, C-=70, D+=68, D=65, F=0)
Major Assignments
Chapter Exercises & Participation ........... 20%
Chapters 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 (read chapters 1-2 before class)
Advanced Web Graphics Tutorial Web Site (5% per sample page) ........... 60%
• compression strategies
• color control options
• transparency and various color matte
• photographic border treatments
• banner collage
• graphic masking
• graphic type effects for titles
• graphic type effects for buttons
• rollover interactivity in buttons
• image maps
• 3 types of background graphics (minimal, large, tiling)
• image slicing
Graphic Treatment Case (final exam) ........... 20%
• makeover a basic text-only web site
• reorganize & create categories with visual opening page
• reinforce visual opening with graphic continuity
• invite user interaction through mouse responsive graphics or animation
• create emphasis through graphic screen shaping
Class Schedule
Day 1........... ........... 9am-11:45
how to optimize graphics as high quality, quick-loading files
• introduction to course goals
• introduction to Photoshop tools
• compression strategies
web graphics as publication style goals—integration of orientation & navigation
• principles of graphic design
• communicating interaction through design elements
Day 2........... ........... 9am-11:45
the elements of graphic design for the web
• backgrounds & screen areas
• icons and navigation prompts
• graphics AS the content of the page
• tone and atmosphere illustrations
. how to manage color settings for web graphics
• web graphic formats
• color control options
Day 3........... ........... 9am-11:45
web site analyses—the use of graphical elements at various web sites
how to control high quality transparency in web graphics
• transparency and various color matte
• banner collage
• graphic masking
Day 4........... ........... 9am-11:45
how to create type graphics with layer effects for buttons & titles
• graphic type effects for titles
• graphic type effects for buttons
• rollover interactivity in buttons
workshop
Day 5........... ........... 9am-11:45
how to create background images and background tiles
• minimal stripe backgrounds
• large watermark style backgrounds
• tiling background graphics
how to create image maps for navigation
• rollover interactivity in buttons
• image maps
Day 6........... ........... 9am-11:45
how to create image slices
• image slicing
• importing slicing html into your page editor
JavaScript effects and image swapping
• JavaScript sources
• image swapping code
how to create animated gifs
• animated gifs
• Flash or GoLive animated graphic layers
Day 7........... ........... 9am-3pm
Putting it together in your web graphics tutorials website.
• organizing the categories
• creating prototypes for visual metaphors
• adding video or other plug-ins into your web page
workshop portfolio completion
• building continuity for secondary pages
• create navigation and content spaces
• an introduction page to general goals for web graphics
• a navigational preview of the tutorial pages
• the pages themselves
• 2pm show time for all projects