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

Class 5 Handout

PhotoShop Lesson 3. Transparent gifs. Creating an animated gif. Creating an image map.

1. Review of homework -
We will look at our banners(section titles) and menubar and fix any problems.

2. 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 a piece of artwork of today's date that is a transparent gif for the "Kramer Report" section of the website.
1) Make a piece of artwork that says today's date that is 200 pixels wide by 50 pixels high. The type will be a dark green and the background will be blue.
2) Save it as "date.psd" in RGB mode in your "images" folder and then with the magic want select the background color.
3) Choose "Export Transparent Gif' under Help and follow the instructions.
4) Save it as "date.gif" into your "images" folder.
5) Let's create the date again, this time starting with a transparent background and using "Save for Web".

3. Making an animated gif -
Gif animations are low-bandwidth, low tech ways to create animations. We will download a simple animated gif program and use to make one for ourselves.
1) Let's start by making three versions of our "Wayne Headquarter" banner. One is "Headquarters" invisible. On is "Headquarters" a dark color. One is "Headquarters" a lighter color. Export all three as "banner_head1.gif", "banner_head2.gif", banner_head3.gif"
2) Go to http://download.com and type in "animated gif" into the search choice. Choose a FREE application that has a higher than 50% user rating. I chose "unFreez", but try any program that sounds like it will work. Download it, unzip it and install it.
3) Drop the banner1-3.gif files onto the frames panel.
4) Click "animated gif" button and save as "banner_head.gif". Test it by drag/dropping onto a browser window.
5) Experiment with frame delays and looping vs non looping the animated gif.

4. Creating an image map-
Image maps allow for you to have one piece of artwork on your HTML page have more than one link. You can use free image map applications to generate the HTML.
1) Let's start by exporting our menubar from Photoshop with all the buttons in the off state. Save it as "menubar.gif"
2) Go to http://download.com and type in "image map" into the search choice. Choose a FREE or FREE TO TRY application that has a higher than 50% user rating. I chose "Coffee Cup Image mapper". Download it, unzip it and install it.
3) Choose map wizard and create a new map importing our "menubar.gif". Follow the instructions. Define the areas to be links with the urls to be "report.htm", "discography.htm", "content.htm", "message.htm", "live.htm", and "media.htm".
4) Under file menu, save your map as menubar map.
5) Next, we will copy the image map code into the correct place on our HTML page.

HOMEWORK ASSIGNMENT:
Build the homepage(index.htm) of the Wayne Kramer site. It should include:
1) An animated banner.
2) The menu bar down the left side with an image map.
3) A picture of Wayne.
4) A transparent gif that says "Rock Star" under his picture.
5) Some "placeholder" text under or next to his picture.
Experiment with the "align" command in HTML to get the images positioned correctly.