Overview:
Did you ever wonder how the "great" web sites do their graphics? This class will give you an overview and experience with some of the tricks for building professional graphics for your web site. Building on your basic Photoshop and Dreamweaver skills, we will learn to optimize graphics for the web, practice various uses of background images. work with photos and layers to create composite images, slice a larger image for flexibility and faster download time.  Graphic effects with CSS will be covered.

Prerequisite: Photoshop and Dreamweaver.

Text: Photoshop CS ImageReady CS for the Web by Tanya Staples and Lynda Weinman; ISBN 0-321-22855-3
Comment about this book: the content of this book is excellent, but the publisher decided to print it in black & white. This is especially humorous (or pathetic) in the Color Calibration section of the book. So, I recommend you buy this book for the excellent content. I also recommend that you send the publisher an email, if you think it should be in color!

 

Day	Class Description	Web Resources
1	Introduction and the Basics Set up Folders and Dreamweaver for Class Review the difference between inserted images and background images Review methods for color blocks Three places to find image code on a website Photoshop and Save for Web or Image Ready? Background textures v. background images with discernable lines Background Practice Image Logo Tiles Exercise Text Reference: Chapter 8, pg. 314 Extra Topic: Image Map Navigation Discussion Is it obvious? Is it obvious? In Programming Text Reference: Chapter 12, pg. 542	Quote from Text "Designing for HTML is challenging because standard HTML is capable of displaying only two layers - a background layer and a foreground layer." pg. 314 Graphics Handouts Review: Sizing Photos for the Web “Dimension” or “Dementia” - What Effect do your Background Images Produce? Other Website Links EOSDEV.com Symetrical or Asymetrical background/
2	Where Does CSS Fit into all This?    Lines    CASE 1      - How is the peach-colored stripe implemented? Properties?      - Is the logo an inserted image or a background image? Properties?      - How was the spacing created?      - What are the side effects of using a background image, instead of an inserted image?      - What is the effect of the offset lines in the logo?      - Why is there a line at the bottom of the page?   CASE 2      - How are the corners created?      - How do the graphic elements line up in the banner - and what happens if the window is too small?   CASE 3      - Find the lily pad image in several versions Just for Fun
3	Analyze and Create Photo Effects    Collage Effects    Cutouts Exercise
4	Consider Graphic Text and its Effects - and Side Effects Review Exercise: Corners      CASE 1     CASE 2   CASE 3     - With a partner, choose a case above      - List all the graphic text
5	Analyze and Create Banner Elements   CASE 1      - What is the underlying structure holding the graphic elements?      - Which images are background images and which are inserted images?      - What is the user feedback and how is it created? Exercise
6	Slicing Large Images   CASE 1   CASE      - How would you slice it? Exercise	Quote from Text "Slicing allows you to cut a single image into multiple images so they can be reassembled into an HTML table."