Assignment in brief: (please look on the homework page to see detailed explanations of assignments)

• Optimize a photo as 4 levels of JPEGs and 4 different GIFs
• Make a web page displaying all the photos with specifications for each
• Optimize a clip art example as 4 levels of JPEGs and 4 different GIFs
• Make a transparent GIF and an Interlaced GIF
  2 points extra credit it you matte it to the background color (must not be white) of the page or cell
• Make a web page displaying all the clipart examples with specifications for each
• Take Quiz 1

Reading:
Read the Before you Begin and JPEG and GIF sections of the CD
Visit the Start Here page and become familiar with the website
Read this Lesson 1 page all the way through
Read Chapter 4 on Optimization and Chapter 9 on Transparent GIFs in the Lynda Weinman book

Recommended Reading:
GIF vs. JPEG
http://hotwired.lycos.com/webmonkey/geektalk/97/30/index3a.html
Ch 10, 11 - Non-Designers Web Book by Robin Williams

Learning Objectives:
1. Define the JPEG and GIF file formats and identify when to use each.
2. Review techniques for digitizing a photo using a scanner or digital camera.
3. Scan in 1 photo and save it in 4 JPEG formats and 4 GIF formats.
4. Create 1 clipart image and save it in 4 JPEG formats and 4 GIF formats.
5. Define transparent and interlaced GIF Create one version of the photo GIF that is an interlaced GIF and one version of the clip art image that is transparent GIF.
6. Create GIF-JPEG Homework pages containing the JPEGs and GIF examples and load the images and HTML pages onto the Web.

Instructions for creating photos as GIF and JPEGs, interlaced or transparent GIF, and placing these files into a homework page are included in the CD.

Defining JPEGs & GIFs
JPEG
Pronounced, jay-peg. JPEG is an excellent file format for the Web because it can work with 24-bit (16.7+ million colors) images and still produce files that are small enough to meet online standards. JPEGs were created by the Joint Photographic Experts Group. It was developed specifically for photographic-type-images and does a great job of compressing those types of images. It is a lossy compression method. This means that you lose information each time you compress. For this reason, you don't want to repeatedly save a JPEG as a JPEG. Always save a JPEG as a PSD when you plan to work with the file.

GIF
These files, by nature, can only contain 256 colors or less. They work well for line drawings, illustrations, type design, clip art and cartoons. GIF - Graphics Interchange Format use LZW compression (based on work done by Lempel-Ziv &-Welch), which is a lossless method of reducing file size.

GlF89a
GIF 89a files have the ability to tack on extra information to the file such as transparency, interlacing and animation. Transparency and Interlacing are discussed below and will be demonstrated during this lesson. At the end of the course we will create animated gif which also use the GIF89a standard. These images hold several frames and cycle through these frames to create an animation.

Digitizing your Images Flatbed Scanners
As the name implies a flatbed scanner is ideal for digitizing flat art. A photo, book or magazine which can be pressed onto the surface of the scanner can be converted to a graphic. Select 1 photo and scan in the image. I recommend 150 dpi and millions of colors. We have scanners in the following locations

SRJC
* CIS Lab (3rd floor Maggini) PC & Mac color scanners
* BCL Lab (2nd floor Maggini) PC & Mac color scanners
* MCL (Barnett Hall) Mac color scanner

Petaluma Center
* Bertolini Computer Lab - PC & Mac color scanners

There are written instructions on each scanner.

Digital Cameras
Digital cameras are becoming more affordable and powerful. They offer the advantage of being able to skip the step of scanning and many have a preview window so you can instantly see if the picture has turned out. They do not produce a photo that is as high quality as a 35mm with complex lens, but most of the photos digitized for the web do not require this degree of sophistication.

Saving Photos as JPEGs and GIFs
After scanning in a photo, open the file in Photoshop. Access the Save for Web dialog box from the File Menu. This is where all your compression settings are chosen. Choose 2 Up or 4 Up from the tabs at the top of the dialog box. In the Settings, choose JPEG and then set the Quality to one of the following 4 settings:

1. Maximum
2. High
3. Medium
4. Low

Notice the size of the image in the original state and with the compressed settings. These numbers are located in the bottom of each image section. Write down these numbers. Save in each of the four settings.

Next save the Photo as 4 types of GIF.

1. Adaptive 256 colors
2. Selective 256 colors
3. Web
4. Adaptive 16 colors

You will need to change 3 settings in the Save for Web dialog box. Change from JPEG to GIF, set the color palette (Web, Selective, Adaptive, Perceptual, etc.) and to the right of the color palette, set the number of colors used in the color table. As you save each file, assign a unique name such as photo_max.jpg or photo_adap-16.gif. Also make sure that the original image you scanned in is always the file you save from. You do not want to save the file as a medium jpg and then save a copy of the medium jpg as a low jpg. This will cause considerable quality degradation.

You will find when saving photos that the JPEG files have higher quality and save out in a smaller file size.

Saving Clip Art as JPEGs and GIF
Create an original Photoshop file, which contains large blocks of solid color. It can be your logo, or a rectangular button. Save it as a JPEG in

1. Maximum
2. High
   
3. Medium
   
4. Low

Next save the Clip Art as 4 types of GIF

1. Adaptive 256 colors
2. Web 216 colors
3. Web Auto colors
4. Adaptive 16 colors

You will find when saving flat art, that the GIF files have higher quality and save out in a smaller file size.

Transparent GIFs

A transparent GIF lets the background show through selected parts of an image. When creating the GIF, the designer can designate one color in the image's palette as transparent. When the GIF is displayed, areas using that color reveal whatever is underneath. Transparency is most often applied to a GIF's background color to let the page's own background show through, so that images appear to float on the page. Most modern Web browsers support transparent GIF. Those that don't, simply display the images as normal GIF.

There is no special scripting involved for interlaced or transparent graphics. The interlacing and transparency are created within the graphics software programs.

We no longer require students to create an example of Interlacing or Progressive. As connection speeds become faster, the need for them decreases.

Creating JPEG and GIF Homework pages
Since this is a course in Web Graphics each assignment will be turned in on a Web page. I recommend you create a web page, which you use to link to all your homework pages as the weeks go by.

You need to create a directory structure for the files you will create in this class. At the root directory of your internet account create a web-graphics directory/folder. Inside this folder place a file called "homework.html".

Next create a sub directory or folder named jpeg-gif. Place all the images into this directory or folder. Create one page called "photos.html", which has displays the scanned photo as 4 levels of JPEG, 4 levels of GIF, make sure one of the GIF is interlaced. Save this file inside the jpeg-gif directory.

Create another web page "clip-art.html" which has the clip art as 4 levels of JPEG, 4 levels of GIFs, make sure one of the GIFs is transparent.

Here is an example of the homework page, which organizes my assignments.

Code to link from this page to the photos page:

Code to link from this page to the clip art page:

Visit the photos and clip art pages, feel free to view the source code and use it for your assignment. Be sure to read the File Organization information in the Before you Begin section of the CD.