GRAPHICS, GRAPHICS, AND MORE GRAPHICS

If your participants are having problems with saving an image from the Web, dragging an image onto their Web page, making backgrounds transparent, and making an image interlaced, have them use the Shockwave movies.

Prerequisites:

basic browser skills
downloading skills
an inquisitive mind
patience
One or more of these are required:
a scanner
a digital camera
graphics software

Purpose:

To know how to find and properly utilize graphics from Internet resources
To find good graphics to use on Web pages
To produce original graphics through the use of scanners, digital cameras, and/or graphics software
To identify and make a transparent and an interlaced GIF

Lesson:

 Free Graphics from WWW Image Formats
Creating Original Graphics 
Getting and Saving Images from the Web Transparent and Interlaced GIFs  Converting Images to GIF Format 

Free Images:



Like anything you find as you search the World Wide Web you need to be careful when selecting graphics for your Web pages. There are many "free" graphics created by people who are willing to share their art with you. They may request you send your URL, or a postcard, e-mail, or contact them first for permission to use their graphics. These graphics are original and may be copyrighted. Make sure that the artists wishes are respected.

Web page addresses change frequently and sites that may have been good last month may be gone or no longer free. Use your favorite search engine to look for sites. Simply using "free graphics" may send you to great places. Read through the sites carefully to make sure what the artist requests and if there are any hidden costs. This search may take some time to find good sources. Here is where your classmates and you may help one another.

Activity on finding good free graphics including images, buttons, bars, and backgrounds

Back to the top


Getting Images:



As you have been researching your project you may have seen images that could be used on your Web pages. There are many options when including graphics on your project Web pages. You may create original graphics or you can use graphics created by others. These include clip art images or images that can be found on existing sites.

Many people create original images including backgrounds that anyone may use by simply downloading and saving them. Most of the sites include directions on how to download the images you want. (Remember to download the image into your graphics folder and save the image so you will remember what it is later.) Many authors create different icons and label them by abbreviations--example: an image of a dog might be one of five labeled dog1, dog2, dog3, etc.

Directions on how to include graphics like buttons, bars, backgrounds, and other images on your Web pages follow below.  REMEMBER graphics may not be used unless you have permission from the creator. Most authors will be pleased to grant their permission. Check their Web sites for copyrights or permission to freely use the images. Check for an e-mail address to contact the author of the Web page and do so. Check if you only need to give credit to the author for the image on your Web page and include it. Some authors may only require a postcard sent to them. Most authors are more than willing to give their permission. (They might want to see your final Web pages.) When contacting the author of the page include your name, school (if appropriate), and a short note on what you are doing and how you are using the image.

You might also have a disk or CD containing clip art images. These images might give the user limited permission to copy only in printed materials. Make sure you have permission to include these images on your Web pages. Check for copyrights in your manual or the "read me first" files. Contact the publisher and/or author for permission. Again, explain who you are and how you are using the images. Many companies are more than willing to have their products advertised through your Web pages.

Remember to:

STRESS: Remember what the graphic is named when placing the image into your graphics folder. Check the HTML source to make sure the IMG SRC contains only the graphics/name_of_graphic.gif within the quotation marks.

Saving Images in Web Browser:



Once you have found an image that you like and know that you can use it legally, you can save it to your graphics folder by selecting it with your mouse and holding down the mouse until you see a pop-up menu shown below. Select "Save this Image as . . ."

Find your graphics folder and save the file either with the name that shows or change it to one that you prefer. Remember its name for later when you want to put it on your Web page.


Back to the top


Using the Images:



Good Web pages should be easy to read while being attractive to see. Place your images, buttons, bars, etc. to draw the reader's eye. Remember that not everyone will be using the same hardware and software to view as you used to create your project Web pages. If possible, look at your Web pages with various computers, monitors, and Internet connections. Look at different Web pages on the Internet to obtain different ideas for your Web pages.

Back to the top


Image Formats:

Images come in various formats. Previously, you had to take two steps to create a file that you can display in WWW: Generating a PICT or TIFF file and then converting it to a GIF file. Recently many applications will allow you to make GIF or JPEG files directly.

Some formats that you might encounter are:

Back to the top


Creating Original Graphics:



As you are writing your Web pages you might want to create your own images. This requires hardware and/or software. Some are listed here as examples.

There are many software programs that enable you to draw or paint, for example,  Microsoft Paint, Adobe PhotoShop and Illustrator, Fractal Design, and SuperPaint. After creating your graphics, save them as PICT, TIFF, or GIF files. Some authoring programs may allow you to DRAG the saved image onto your Web pages. If the software program does not have this option, try a CUT and PASTE from the programs to your Web pages. If you have problems, try using a program like GifConverter (MAC only, see Finding Software for downloading information and resources) to save your images, then transfer them to your pages. Remember to save these images to your graphics folder first before using on your Web pages.

A digital camera enables you to take pictures of your students' work, actual images pertaining to your project and/or models. It saves them as graphic files. Most of the digital cameras come with image editing software. Save the images in your graphics folder first; then you can transfer them to your Web pages. It is similar to how you transferred your original graphics.
 
You may also want to include samples of your or your students' work. This may be completed using a digital camera or by using a scanner, like those manufactured by Apple, HP, Epson, etc. Most scanners have software to edit your scanned images. SAVE them as graphic files in your graphics folder first for use on your Web pages.

There is software that enables you to take images off your screen, screen grabs, like Flash-it (MAC format only but there are similar Windows software, see Finding Software for downloading information and resources). For the MAC, images of your computer screen can be created with command-shift 3. You actually hear a "camera click" and the image of the screen usually appears on your hard drive since this is an image of the entire screen crop with a program similar to GifConverter. Save the images to your graphics folder first before inserting into your Web page.

Back to the top


Converting to GIF Format

Conversion Software

When you are creating original graphics in a program that will not generate GIF files, you can create PICT or BMP files and then convert them to GIF files. Examples of programs that convert image files into GIF format: GifConverter, Graphic Converter, and LView Pro are quite similar; all are shareware so you need to register and pay for them. In GifConverter and Graphic Converter, just open your image (usually a PICT) file and then choose Save As from the File Menu. Be sure to select GIF format. It will make a file with the extension ".gif".

Use these sites for more information on Graphic Converter and GifConverter for Macintosh .

Having original work on the participants' Web pages adds not only a creative look to their Web pages but also makes them unique. Showing examples of student work will give readers insight to the participants' classroom and the students' engaged learning. If the participants have the hardware and software, encourage this aspect for their project. Stress that the images are to be put into the graphics folder first and then inserted into their pages. If this is not followed, the HREF will not be correct. Be sure to add the due date for this assignment to the assignment sheet


Back to the top

Transparent and Interlaced GIFs

Having your graphic images look natural and part of your Web page instead of looking like pictures just "hung" for display is a part of good Web design. Sometimes you might want to keep a frame around your image but it might look better without it. Eliminating colors from your graphic is called making ittransparent. The colors you do not want are replaced with your background.

As you have been researching, did you notice how long Web pages take to appear on your monitor? Having your pages load quickly is part of good Web design. If your graphic is not too large, the loading time is insignificant, but by interlacing them, you will speed up the downloading time of your pages.

If you do not want your images framed or taking too long to load, try these:

 

Transparent GIFs

Photo courtesy of NASA

Notice the difference between these two images on the background that you see in Netscape. The second one is transparent and the first one isn't. If your emphasis is on the graphic, you may want to eliminate the blocked style background of the image. This enables the image to blend into your Web page background.

NOTE: Stress the importance of interlacing their graphics. Smaller images will not take as long as larger, but people will have various connections to the Internet and they need to make sure their Web pages do not take too long to load. Be sure to add the due date for this assignment to the assignment sheet.


Task:

Do a Net search, using your favorite search, like YAHOO and type in the words "free graphics". You should then see a list of many sites. Do not assume they are all great or free. Take the time to find sites for free backgrounds, buttons, bars, and icons that you think you and others would be able to use. Find at least four sites that you found useful and free and share with the other participants using the discussion tool as instructed by your facilitator. Remember to include the URL (address), what type of graphics can be found at the site and what the artist requests before use.

Example: Free Clip Art and Web Page Graphics contains an archive of free clip art organized by category so you can browse. This page also contains links to other graphic Web sites.

The examples that you send will help others and theirs might help you.

Back to the top

 


 

The list of good free graphics can be shared with the class participants through a CMC format of your choice.

You might want to submit some current Web sites that you have found useful to the designated CMC to get your group started. 

Remember to add the due date to this activity on the assignment sheet.

Using a engine, like Yahoo or Google, find icons (images), buttons, bars, and backgrounds. Download these into your graphics folder. Create a Web page using the different images you have found. Remember to obtain permission before using the icons. The Web page may be one from your project. Send the page to your facilitator using appropriate methods. If the author requests recognition, include it at the bottom of your Web page.

Back to the top


 

Create an original graphic design to use on your Web page. Use any of the methods described above. Transfer the images onto your pages and send them to your facilitator. Remember to save the images into your graphics folder and be sure the path to them is written correctly.

NOTE: Remember to keep your original graphics small. You can make them transparent if needed. You can also interlace them so they load quicker. 

Stress the importance of acknowledging the work of others. It just takes a little time and makes their Web pages look more professional. Plus, they will not be violating any copyright laws.

Be sure to add the due date for this assignment to the assignment sheet.

Warning: Some icon (images) sites may include subject matter inappropriate for your students. Preview them before allowing your student access.

Hint: The stars are examples of "buttons." The search eye is an example of an "icon." The bar was created using PhotoShop. The star and search images were downloaded free and the author required just a postcard to be included for their collection.

Back to the top


 

Select two of your graphics. Make one transparent and the second interlaced using the above tutorials. If you need a graphic, try downloading a standard format image from the Internet. You may use the same image for both.

Make your images transparent and interlaced on your project Web pages, if appropriate.

Remember to save your images in your graphics folder. (If you have not created a graphics folder, go back to the authoring tutorial.)

Back to the top