Graphics: creating, obtaining clip-arts and editing.

This tutorial concentrates on how to create simple images, obtain clip-art on the Web and editing existing images. The detailed study of graphical packages to create images is beyond the scope of this work.

Creating business graphics

An image can be of two basic types: raster or vector. Raster images are a collection of bits of colored dots (pixels) representing the image (more here). Vector images are vectors of data stored in mathematical formats rather than bits of colored dots (more here). PowerPoint and other business graphic software create and work with vector images. Of course Adobe Photoshop, Gimp, Corel Draw, etc, are specialized graphical software which are professional tools to create vector images. The images you see on the web, however, are generally raster images.

There are two basic raster image formats used on the Web: GIF (Graphis Intergrange Format) and JPEG (Joint Photographic Experts Group). In addition, a more recent format was created to replace the GIF format -- PNG (Portable Network Graphics). These two formats are properly used for different kind of images. GIFs (and PNGs) are better suited to represent drawings, or images of up to 256 colors (8-bits per pixel). JPEGs are to be used whenever we have photos, or images with more than 256 colors(16, 24, and 32-bits per pixel). Tipically scanners and digital cameras save images in JPEG to capture the depth of colors found in nature.

This tutorial was created with the business student in mind, not a graphical artist. He or she should be able to create basic images either by using a business graphics package, such as PowerPoint (see a review of using Powerpoint here and cliparts for it here), Corel Presentations, Microsoft Paint (included in all Windows versions), or by taking pictures using digital cameras, or traditional cameras and scanning the pictures.

Lets use PowerPoint as an example of how to create a very simple graphic with three rectangles and add text inside of these rectangles:

  1. Open PowerPoint and select create a presentation using a blank presentation.
  2. then select Blank as the AutoLayout.
  3. In the blank page select the rectangle symbol in the bottom toolbar and moving the mouse place a first rectangle on the page as shown.
  4. Click on border of the rectangle, click on the fill icon , and select No Fill. You now have an empty rectangle.
  5. Now select the rectangle and select Edit, Copy then Edit Paste. Move the new rectangle to overlap one side with the other so that you have three rectangles overlaping one side as shown here.
  6. Finally, add text to each rectangle. Click on the Text box symbol in the bottom toolbar and move the mouse to one rectangle at a time and type some text -- see the final product.
  7. Don't forget to save your PowerPoint graphical image.

Finding clip-arts on the Web

These are references to sites with multiple sources of clip-arts:

Editing graphical files

Editing means: converting between formats, cropping, resizing, adding text to an image, creating interlaced and/or transparent background gif files, etc. It is the massaging of graphical files before including them in your page.

The focus of this tutorial in on the Windows platform, and on a specic Windows tool capable of doing most of the functions needed in editing graphical files: IrfanView.

Introduction to IrfanView

The IrfanView software can be found at the IrfanView page and it is free. You can also use Lview -- you can download a copy for a 21-day evaluation version, unfortunately it is no longer free for students (it was installed in the UB labs). You can also download for free XnView, a very good tool, but it will not do transparent gifs (see explanation later in this tutorial), unfortunately. The GIMP is free and will do all and more, but it is a much more complex software to learn.

Transparent gifs

Gif files have interesting properties and we will look in two of them: transparency and interlacing. We will start by studying transparent gifs and we will discuss interlaced gifs later in this tutorial. Some images look better if their background color matches the browser window, making the image appear to float in the window. You can't do this by setting the background color of the image, since you can't control how people will configure their browsers.

You can obtain this effect by using GIF89a images, which have the ability to mark a single color in the colormap as transparent, forcing the browser to use its background color for those pixels in the image. See this example with an image with a gif with a transparent color and different backgrounds.

IrfanView (free) and LView (low cost) in Windows and the GIMP for Windows and Linux (free) can do the job. Only gif files can be transparent, jpegs will not work, but modern png files can also be made transparent. Lets see through an example how we can make an image transparent.

  1. Converting a business graphics to gif and making it transparent

    An easy way to create your own graphics is to use a familiar business graphics package, such as PowerPoint, Corel Presentations, Paint, etc. I will exemplify this procedure with PowerPoint, but it also applies to the other presentation packages.
  2. Interlaced gifs

    Browsers download images one line of pixels at a time and depending upon the size of the image it can take a long time before you can see the whole image. Interlaced gifs allow a much fast blurry view of the image to be downloaded so that viewers can have an idea of what the image is about before it finishes downloading completely. See a more detailed explanation and examples here. IrfanView supports saving images as interlaced gifs:
  3. Creating animations using the gif89A format

    Take a look at my old Index page and you will see a spining triangle, if you are using a modern browser. How was that accomplished? Java? Java Script? No, that is only a gif89A format image comprised of four gif images of the triangle in different positions running in a loop.

    The easiest way to accomplish this effect is to use the GIF Construction Set. A reference on how to process of creating animations using gif89A is at Royal Frazier page and an interesting example of what you can do is seen below.

This page is maintained by Al Bento who can be reached at This page was last updated on January 16, 2010. Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided.