There are two different methods of creating and saving graphical images on the computer. One is called "bitmap" (or "paint") and the other is called "vector" (or "draw"). Although they may appear identical on the computer screen, each stores images in different manner which affects how you create the image and what you can do with it.

A bitmap graphic expresses an image strictly in the collection of dots. Each dot can be in different colors. The number of colors varies from two (i.e. black or white) to millions depending on settings. Realistic photographs are good examples of bitmap graphic expressed in thousands of colors. To help understand what bitmap graphic is, you might want to draw an analogy between bitmap graphic and impressionist paintings such as the ones by Monet since both express images in small dots. (The size of dots is obviously a lot smaller in the case of computer.)

On the other hand, vector graphic expresses image in the collection of objects. An object can be a circle, square, triangle, or a more elaborated shape in different colors, and they are all stored in the form of mathematical functions inside the computer. Because each object is expressed in mathematical function, objects can be enlarged without jugged lines. (If you enlarge bitmap graphics, lines invariably become jugged.) A complex image can be created by combining different objects and laying them on top of each other. A vector graphic is like a picture you create by arranging pieces of colored paper which have been cut in different shapes.

By using these types of graphics, you can create props for communicative activities such as information gap activities and find-difference activities, cue cards for vocabulary, graphics for quizzes and tests, etc. It first takes more time to create graphics on the computer than with pen and a copying machine. However, once stored electronically, the same graphics be used repeatedly and can easily be modified. we will use black-&-white line drawings as our examples. They are simplest kind of graphics, yet very useful. Also, file sizes can be kept small when they are stored.

II. Bitmap graphic

In this section, you will be introduced to the use of basic tools available to edit bitmap graphics. Figure 5.1 shows a line drawing of a room. The picture has been saved as a bitmap graphic. Our objective is to modify this original drawing by rearranging some of the objects in the room for a find-difference activity. The modified drawing is shown in Figure 5.2. First look yourself for differences between the two.

< Download RoomPaint.pic (PICT File) >

Some of the noticeable differences are listed below.

D1. The TV and the two lamps are off.
D2. It is lighter outside the window.
D3. The coffee mug is on the desk.
D4. The pencil and the desk light are on the small table.
D5. The basketball shoes are in front of the sofa.
D6. There are two basketballs.
D7. The letter paper is on the book.
D8. The door is closed and the cat is gone.
D9. The poster is different.
D10. The clock shows different time.
D11. The telephone is on the book.

The following figure shows typical tools available to create and edit print-type graphics.

#1 the regular selection tool.
#2 the lasso tool. It is also a selection tool, but it can select any shape and it is very useful.
#3 the spray tool. It creates an effect similar to a spray can of paint like gratifies.
#4 the pencil tool. It can turn on and off every pixcel (or dot).
#5 the line tool. It creates a straight line of any angle. The thickness of the line can also be changed.
#6 the oval tool. It creates a circle or an oval.
#7 the multigon tool. It creates a perfect polygon of any number of sides.
#8 the free hand tool. It creates any shape by dragging the mouse.
#9 the text tool. You can type text in the chosen font.
#10 the paint brush. You can change the thickness and shape of the brush.
#11 the paint bucket. You can fill areas in different color and patterns.
#12 the eraser. This is one of the most important tool in the paint. You can use the zoom-in function to erase small areas.
#13 the rectangular tool with round corners.
#14 the regular rectangular tool.
#15 the polygon tool. It creates any irregular shape consisting of straight lines.
#16 the arc tool.

Since there are variations among software packages, go through the manual of particular software to learn the function of each tool. Other typically available functions include enlarging, shrinking, flipping (vertically or horizontally), rotating, slanting, stretching, and distorting. These function work on selected areas.

Let’s see how each difference can be created.

D1 and D2.
Use the eraser to eliminate unnecessary part. You need to use the zoom function for small areas.

D3, D4, and D5.
These all require moving. Use the lasso tool to define the shape you would like to move, and drag it to the destination. Reinstate the background using the pencil or the paint brush.

D6. Use the lasso to highlight the basketball, then perform the cut-&-paste to create the second basketball. Drag it on the sofa.

D7. First, user the lasso to move the book and the paper to empty area. Using the lasso again, move the book back on the desk, and position the paper on the book.

D8. Use the eraser to eliminate the unnecessary lines and the paint brush to reinstate the floor. Move the door knob to the correct location.

D9. User the eraser to erase the original team name. Use the paint brush to draw "Lakers" or use the text tool to type the word. This should be done in an open area. Then, you can use the rotation function to turn a highlighted area by specified degrees so that the angle of the letters fit in the angle of the poster.

D10. You can erase the hand and use the paint brush to draw. Or, you can select the clock face, and use the flipping function.

D11. Select the handset with the lasso and move it out to an open area. Use the rotation function to rotate it the right orientation. Move it on the telephone and retouch fine part.

Exercise: Download the file of the room used in the above example (Figure 5.1). Create Figure 5.2. When you are finished, create another variation (or variations) of your own from the original. Then, write a full lesson plan using the pictures. The lesson plan should include statements about the objective of the lesson, the level of language, time necessary to complete the lesson, the procedure, vocabulary, grammar, etc.

III. Vector graphic

The following figure shows typical tools available to create and edit vector graphics.

#1 the selection tool. (Unlike the selection tool in the paint program where you select a region, In a draw program you will select an object by moving the arrow over the object and clicking the mouse.)
#2 the line tool. It creates a straight line of any angle. The thickness of the line can also be changed. Some programs have a separate tool to draw just horizontal and vertical lines.
#3 the oval tool. It creates a circle or an oval.
#4 the arc tool. It creates a quarter of a circumference.
#5 the free hand tool. It creates any shape by dragging the mouse.
#6 the text tool. You can type text in the chosen font.
#7 the regular rectangular tool.
#8 the rectangular tool with round corners.
#9 the multigon tool. It creates a perfect polygon of any number of sides.
#10 the polygon tool. It creates any irregular shape consisting of straight lines.

Let’s compare the tools for paint and those for draw. First, in draw, an eraser is non existent because you can only manipulate objects. You can delete an entire object, but not modify a part of it. Second, paint brush, paint bucket, and spray can tools are not available in draw. Third, tools to create an enclosure such as circle and rectangles can be set to fill the shape in colors. So, it is possible to achive similar effect to paint bucket. Fourth, text (or text field) is treated as an object.

The following face of cat is a combination of an oval, triangle, circles, line, and free hand line. Each component is an object and can be moved freely without affecting others. However, it is more convenient to group more than one object together such as eyes, mus??, or even an entire face. Draw program provides a function called "group/ungroup" to achieve this. A grouped object behaves as a single unit. Ojbects are ordered according to the order of creation. A new object goes on top of other objects. Since each object is independent, an object on top does not affect the object underneath. This is a major difference between paint and draw. It is possible to change the order of objects.

Using your draw program, try to create the first face (or similar one) using necessary tools. Once it is done, create the three variations as shown.

< Download CatFaces.pic (PICT File) >

When you feel comfortable with the basic tools and basic concept of objects, look at the following map. It is created using a draw program. Each building is an object and each text label is a separate object so that the text can be manipulated independently of the building.

< Download MapDraw.pic (PICT File) >

Create two pair-activities using this map. First, create two copies of the map and name them Map A and Map B. Delete some of the text labels in the two maps in such a way that the two maps are complimentaly to each other. Make a list of the buildings that the holders of Map A should look for and paste the list on the map. Do the same for Map B. You now have a simple information-gap activity.

The second activity is for giving direction to MY HOUSE. First, make a copy of the original map. Delete the arrow and the word MY HOUSE, and modify the map by moving the shops and adding more shops and houses. Try also to enlarge or shrink the objects. Paste the mofified map and add the directions for the activity.

1. Receive two maps for each pair.
2. Choose your house on the map.
3. Your partner is calling you from a public telephone in front of the station. Give directions to your house.

Exercises for Chapter 5

1. Experiment with what happens to bitmap graphics when it is enlarged or shrunk. Print them out to see how they look. Do the same with vector graphics. Examine the difference.
   
   
2. Go to a Web site for clip art collection. (http://www.sla.purdue.edu/fll/JapanProj). It has a collection of line drawings classfied into parts of speech. (i.e. verbs, adjectives, and nouns) Browse through each category, think of ways you can use them for your instruction. Develop teaching materials using them.
   
   
3. Using the map you used, write a full lesson plan for an activity of your own. Make sure to include staments about the objective of the lesson, the level of language, time necessary to complete the lesson, the procedure, vocabulary, grammar, etc.
   
   
4. Try to create more objects using draw tools. (examples: church, temple, gym, school, field, factory, hospital, trafic light, bus stop, public telephone, post box, etc.)
   
   Examples:
   
   Figure 5.8
   
   

   
   

5. Using the objects you have, draw a map with various buildings. Think of an activity using your map and write a full description.