bannermuseum

Photos, charts, graphics, and line drawings are all effective visual tools. Before you insert graphics, consider the need. Does the graphic add to, supplement, or distract from the purpose of the page? How long does it take to load the graphics? If the page loads too slowly, users may get frustrated and give up.

The visuals you use should be relevant. They should also load in a minimum amount of time. If users don't begin seeing images in 10 seconds, they may give up and leave. Limit the number of graphics per page.

Be sure to consider accessibility of your visual elements. Provide clear, detailed alternative descriptions of each visual element.

There are many tools for producing high quality web images such as Photoshop or Fireworks, but low end packages such as AppleWorks, KidPix, and PhotoElements work well too. Software such as Adobe Image Ready will help you prepare existing visuals for web publication.

try itGo to GIMP. Try this open source graphics package at no cost!

Background

Backgrounds can add to or distract from the atmosphere of a project.. Rather than a fancy colored background, consider using a white background with colored lettering and bright colored graphics. Or, use a very dark background with yellow or white lettering for emphasis. The key to backgrounds is contrast. Your background and lettering should be opposites such as black on white or navy on yellow.

Clip Art

Carefully select clip art to add interest and appeal to your project. Use clip art to illustrate book reports, stories, poetry, report covers, signs, multimedia projects, banners, papers, and homework assignments. Discovery School Clipart contains lots of great graphics for kids. You'll find icons, lines, bars, and all kinds of graphics. Be sure to check the copyright policy of each site. Some sites ask the user to include a citation when copying pictures. Some sites only let you copy a small number of graphics without an additional charge.

In Netscape or Explorer you can copy or save most pictures easily. You click and hold your right mouse button on a picture and up pops a list of choices. You can also use software such as Capture to grab the picture. Once you've got the picture, you can put it in almost any document including a web page. Make sure you create a citation for where you found the picture even if it comes from a clip art source.

Create a web page with your favorite clip art or your favorite clip art sites. Use these pages to quickly access the pictures or resources you need.

Maps

You can also use maps to show the location of your project. Many school pages show the location of their country, region, city, and even street.

Timelines

A timeline is very helpful in understanding historical events and their place in history. Use Tom Snyder's Timeliner software to make an attractive timeline.

Graphic Banners

Any paint or draw program can be used to make great graphic titles for your page.

Horizontal Lines

Lines are an excellent way to separate areas of the screen. You can use the standard line that comes with most web development tools or surf the web for unique lines that incorporate color and graphics. In most cases the standard horizontal line can be made thicker or thinner to add interest.

Bars, icons, logos

Use icons with care. Make certain users know their purpose. Icons are great for navigation. Try to repeat the same graphics rather than using lots of different graphics. Since a graphic only has to load once, it can appear multiple times without having to be reloaded.

Scanned images

Scanned artwork is an easy way to incorporate student-produced work into a web page. Artwork created in chalk, crayon, marker, paints, pencil, and almost any other medium works well for web production. Ask students to draw pictures using pencils, crayons, or markers, then use the scanned pictures in student projects. Rather than placing the full-size visual on the web page, include a thumbnail that can be clicked for a full-size view.

Try to keep photographs small for easy loading. Or, provide a thumbnail that can be clicked to view a larger picture. Be careful when using color. Use the least number of colors. In other words, rather than using millions of colors for a scanned picture, use thousands or 256. These pictures will load much quicker.

Go to the Allen County Public Library Photo Collection or the Anti-Saloon League Page from Westerville Public Library. Explore their digital library of historic photographs and documents.

Captured images

In some cases you can save or copy images from graphics packages and place them directly into your web project. Not all software allows you to easily copy or save pictures. However, you can usually use a screen grabber or capture program to copy a picture.

Be considerate of your end users. Try to make your pages load as fast as possible. Keep your images small.

Charts, graphs, diagrams, tables, frames

You may wish to build charts, graphs, diagrams, or tables into your project. Consider using software such as Tom Snyder's Graph Club or Graph Action to create the graphs.

Digital stills from camera or video

Still pictures can be taken from a digital camera or video camera. For example, check out the images from a project where students created musical instruments. Notice that users click on the thumbnail image to see the large image. You can also go through the images like a slide show.

Read Web Style Guide: Graphics for some background information on typography and editorial style.

As you develop graphics, consider the following types:

| eduscapes | IUPUI Online Courses | Teacher Tap | 42explore | escrapbooking | About Us | Contact Us | ©2006 Annette Lamb