Images for the Web
2 image formats -- GIF and JPG
GIF:
256 Colors
Transparency
Animation
Interlaced
Lossless Compression
Use GIFs for:
Drawings or other images that contain less than 256 colors
Images that must match the color of web page text, backgrounds, borders, etc. (e.g., buttons)
When transparency or animation is important.
Where detail is important
Only use GIFs for photographs when only 1 GIF is on the page
JPG:
16.7 million colors
Progressive Scan
Lossy Compression
Compression Quality
Use JPGs for:
Photographs
Where detail is not important
Microsoft Image Composer
Tutorial in help file
Will save in GIF and JPG
Can use to crop, resize, and change images
For class today, we will work with these two images...
Right click on the images and save them to your 'y' drive
Take a gif file and make the background transparent
Step 1: Open Image Composer. Click on File/Open and choose the butterfly graphic. (NOTE: If you don't see any files, click on the 'Files of Type' drop down list at the bottom of the screen and change to 'all files'.)
Step 2: File/Save As
Step 3: Give the file a name and click on the transparent check box. If the color is not the same color as the background (in our case, the color shown is not white), then double click on the colored square and set the color to the correct color. (NOTE: You will need to arrange your windows on your screen so you can see the image when the dialog boxes are showing. The, to choose the correct color, you can click on the eye dropper icon and then click on the background color of the image).
Step 4: Close the file (File/Close)
Insert the picture of Giddings Hall
We are now going to add to our butterfly the image of Giddings Hall. To do this, you will need to...
Step 1: Click on File/Open and open the picture of the butterfly with the transparent background (that you saved above).
Step 2: Click on Insert/From File and insert the Giddings Hall image.
Step 3: Click on the upper right corner of the butterfly image and drag to make the image smaller.
Step 4: Move the butterfly image on top of the Giddings Hall image. If you can't see the butterfly because it is behind Giddings Hall, right click on the outline of the butterfly image and choose BRING TO FRONT OR click on Giddings Hall and choose SEND TO BACK.
Step 5: Save your file. Since this is primarily an image, we will eventually save it as a jpg. But we still have some work to do on it so first, we will save the image in the native file format. This means, since we are using Image Composer, we will save the image as an mic (Microsoft Image Composer) file. So, do the following:
1. Edit/Select all (This will make sure that we save both Giddings and the butterfly)
2. We will first save the file as a mic file (Image Composer Format) then as a web file. So, first, click File/Save As and give the file a name. Your file should now look like this...
Now, we will add the text..
Step 1: Click on the text tool (has the letter A on it)
Step 2: Choose your font, size and color
Step 3: Drag your mouse to create a box on your image where you want the text to be located. NOTE: You can move the text later!
Step 4: Type in the text that you want to add to the image. Click out of the text box when finished.
Step 5: Move the text to where you want it to go. Then, save your image as a mic file (like we did above).
Finally, we will add the drop shadows...
First, to the text...
Step 1: Click on the text again.
Step 2: Click on the effects tool (3 tools under the text tool)
Step 3: Under the categories drop down box, choose Outline and then click on the drop shadow button. Click on the details tab to set the position of the shadow. Click apply to see the results. Now, add the drop shadow to the butterfly (same steps).
REMEMBER TO SAVE!
Now we are ready to put this image on the web. So, we need to save it as a jpg file (because it is primarily a photograph).
1. Edit/Select all to select all of the image elements (or sprites)
2. File/Save Selection As and save as jpg.
|
|
To resize an image -- just click on the image, grab the handles and move the image to the size that you want.
To crop an image -- click on the arrange tool (above the scissors tool), click on the crop tool (far right under the close button), and move the box around the image to the position that you want to keep.
Andrea's Top 10 Graphics Tips
