Comprehensive Web Design
Fall 2002 - Spring 2003
https://ehollywood.net/dhima/handouts/class4.htm

Class 4 Handout

PhotoShop Lesson 2. Effective use of images. Optimization for low-bandwidth design. Web safe colors. Using layers in Photoshop for manipulation and consistent design elements. Transparent gifs.

1. Review of homework -
We will look at our banners, fix any problems, and then upload them to the class website.

2. Let's build the graphics for a website. Starting with the title -
We are redesigning a website for a friend of mine, Wayne Kramer whose old ugly website is at:
http://waynekramer.com/
1) Create a new image that is 600 pixels wide and 100 pixels high.
2) We will use four "web safe" colors: Green (2 shades), Blue, and Black. Let's choose our colors. One color will be for the background, one for the 2nd grapihc color, and two for the button text colors to show "on" and "off" states.
3) Choose a Serif font to go with the menubar. Serif vs. San Serif Fonts - We will choose one font for this menu bar. (everyone must have a different font) - read http://www.webdesignref.com/examples/textex.htm 4) Let's apply some text effects to it.
5) Let's save it out as a gif that uses a 32 color palette. We will optimize it using "Save for Web".

3. Let's build a menubar -
1) The menu bar must contain six sections named: a) Kramer Report b)Discography c) Content d) Message Board e) Live f) Media Kit
2) We will make the menu bar 100 pixels wide by 300 pixels high and divide it into six equal quadrants with guide lines.
3) It will have an inner stroke of 1 around the edges that is 75% of black.
4) We will create an "on" and "off" state for the button backgrounds.
5) We will create an "on" and "off" state for the button text.

4. Using the Export Transparent Gif Wizard -
Transparent images are great to use and low-bandwidth. Let's play with "Export Transparent Image" under "Help" on the menubar in Photoshop and then use it in an HTML page. We will create one section title that is a transparent gif for the "Kramer Report" section of the website.

HOMEWORK ASSIGNMENT:
1. Design all the banners for the section titles for Wayne's site.
2. Create your website title that says "Wayne Kramer Headquarts".
3. Finish the design of your menu bar..