Integrating Technology in the Second Language Classroom

Creating Clip Art

You can use any image editor to create your own clip art. Why create your own? Because if you use your own work, you do not need to worry about copyright. The results will tend to be best if you use a small number of colors and keep the image simple.  For better control of your drawing tools, Zoom  in to work with a larger copy.

Try to keep the background a single color.  This can make future manipulations easier.  Slight variations in color may remain unnoticed.  You may wish to use the Fill tool to fill the entire background with a single color or you may prefer to select the clip art object without the background, copy the object, make a New image with a selected background color, then paste the clip art into the new image.

Saving Clip-art as a transparent GIF or PNG

In some cases you may want the background to be transparent in your final image, allowing the page's background (not the clip art background) to show through.  Which of the following two images has a transparent background?
 

1. When you are happy with your clip-art created in Adobe Photoshop Elements and want to save it as a transparent GIF:
   
   First you may select Image / Mode / RGB Color.
   
   Next you need to make the background a Layer by selecting Layer / New / Layer from Background.  The new layer will be named Layer 0.

If your image is a background (this is the case for most flat images), you can also double click on the lock symbol for the layer to change it to Layer 0. You can also right-click on the layer and select "Layer from Background. n.b. If these options are not listed, you might need to Flatten Image first.


Now tell the computer which part of your image should be transparent by selecting the portion you wish to make transparent and cutting it from your image. This should change the background to a checkerboard pattern. (n.b. The magic wand tool, the various lasso tools, the magnetic eraser tool can all help here.)


Another example...

Save as a GIF or PNG, but be sure to check Transparency if you see that option

Save for Web is another Save option that limits formats to those available for the web, such as GIF and PNG. JPG cannot do transparency. You can select File / Save for Web, check the transparency box, and save. However, this is net required since Save as a GIF or PNG should also work.


Save for Web dialog box


Dialog box for GIF

You could also select the part of an image that you want, copy, then create a new image from the clipboard. Either way will work.


2. You can try it out in KompoZer or Dreamweaver just to make sure it is transparent.  After inserting the transparent GIF or PNG image, change the background color to something radically different, and your GIF will show up as transparent with the background color you selected showing through... if you followed the steps correctly.
   
   
3. Practice this a few times until you are comfortable with the process.

It is also possible to create transparent GIF or PNG files using shareware programs such as LViewPro or Paint Shop Pro . Note that Paint Shop Pro has been bought by Corel, but the basic ideas behind the tutorials are valid in other image editors. On IOS and Android, you could try the free app Photoshop Mix.

For more information take a look at some great tutorials: Transparent GIFs from Wise-Women tutorials, The Photoshop Roadmap, How to Create a Transparent GIF in Photoshop, Transparent PNG in Photoshop .

Video tutorial: How to Make a Transparent PNG. Make transparent PNGs for free (without Photoshop).
Photoshop CS6 and Creative Cloud remove background from image
How to Remove Anything from a Photo in Photoshop

Cartoons - modified for contextualized activities

Cartoons can be a great source of context for language. Here is an example of using an edited GIF image to use a well known catroon as the basis for generating new, original target language.

After the original text has been removed, the student can be creative. Of course, this can be done with a pencil and paper as well.

With some additional tricks, you might even be able to insert new text online.

<textarea name="comictext" cols="20" rows="3" style="font-family: Comic Sans MS; font-size:13pt" ></textarea>