Banner for Web Design

Back to Lesson 4 Main Page
Lesson 4, Task 1

GIF Files

GIF is the image format of choice for pictures that are animated, have few colors, or need to be transparent.

For this task, create a new practice page in your web and name it practice4-1.htm.  The examples shown in this task used Microsoft PhotoEditor, but the principles will be the same for all image editors.  If you don't have a photo editor at all, you can try an online version for this task.  Sites to try:  GIFworks.com  MyImager.com (has popunders - close or click 'No')

More About GIFs

Animated GIF files are really a series of images that are played like a movie, with the frames usually repeating endlessly.  There can be as few as two frames, or there can be many.  Learning to make an animated GIF will not be required for this class, but if it's something you'd like to try, go ahead!

Regular GIF files are just colored images.  GIFs lack the color depth available in other file formats, but that helps to make their file size smaller for the same size image.

'Transparent' GIF files have at least one color that will NOT be visible when viewed on a web page.  This allows background colors to show.
 

news stand - not transparent

news stand - transparent


The background of the two cells in the table above has been set to pink.  The GIF image on the left above has no transparency setting.  The GIF image on the right has had the smoky blue color set to be transparent, which lets the pink color of the cell background show through. 

NOTE:  to make an animated GIF transparent, ALL of the frames have to be set for transparency individually.  We won't be doing this as part of this class.

For this task you will need to find your own public domain GIFs to use.  The links below are generally for JPG format files.  Use the bottom link to get to public domain GIF file sites.
 

Make a Table to Display Your GIFs

Make a table that looks like this.  See the transparency tutorial here.  In the table, put the following headings in the top row:  Original, Transparent Color Changed/Added, Size Set to 100 Pixel High.  See the example table.

Download and insert (or drag in) into the left column 4 public domain non-animated GIF images and 1 public domain animated GIF image.  Using your image editor, make a copy of each image and change (or set) the transparent color an insert the changed image into the middle column and the right column.  Change the displayed size of the images in the right column to be 100 pixels high.

Web sites with public
domain images:


Wildlife: 
pictures.fws.gov/

Space: 
images.jsc.nasa.gov/

Nature & Weather:
www.photolib.noaa.gov/

Links Page to Public
Domain Images

Discussion Board Task 4-1:  Post a Link to Your Practice4 Page

When your are done with the image editing page, SAVE IT, then publish it as practice4-1.htm to your web site and post a link to it in the Discussion Board.  Discuss the difficulties you had, or tricks you learned and want to share.

 


OSU Extended Campus  ●  541-737-2676 ●  Fax 541-737-2734
4943 The Valley Library ●  Corvallis, OR 97331-4504
OSU K-12 Online  ●  Services for Students with Disabilities  ● ecampus@oregonstate.edu
Advising Center 800-667-1465 ● Admissions & Registration 541-737-2527

Copyright © 2003, Oregon State University   OSU Disclaimer