Definition of terms

Application - A software application is also called a computer program. Examples of applications are: word processors, spreadsheets, databases, accounting programs, and graphic programs. Several applications bundled together are called an application suite. Examples of application suites are: Microsoft Office 2003 Professional, Macromedia Studio MX 2004, CorelDraw Graphics Suite, StarOffice, AppleWorks, and Adobe Creative Suite Premium.

File Format - Used to encode information for storage called metadata. There are different file formats to store different types of information. When a file is saved in a software application it is assigned a file format. The program's own file format is frequently called the "native" file format. In a filename the period is used to seperate the filename from the file format (filename.txt). The three or four letters after the period on a file name is called an extension. On a PC this extension is used to identify the type of file and the program that created or that can be used to edit the file. Here are some examples of common file formats:

*.doc - is used to store an Word document file
*.xls - is used to store an Excel spreadsheet file
*.htm or *.html - is used to store HyperText Markup Language
*.txt - is used to store text information
*.jpg - is used to store static images with a maximum of 16 million colors
*.gif - is used to store static and animated images with a maximum of 256 colors

For more detailed information on file formats visit WordIQ. For a complete list of file formats by application, click here.

Pixel - My favorite definition of a pixel is "A tiny dot of light on the monitor" from Buzzword. Pixel stands for Picture Element and it is the smallest unit on a monitor. For a more in depth definition of pixel, read this page from TechEncyclopedia.

Resampling - Changing the number of pixels in an image. For detailed information on resampling review this tutorial at designer-info.

Bitmap Image - A picture image represented as a matrix of dots or pixels. Also called raster graphics. (source: TechEncyclopedia) Essentially, the pixels are positioned by row and by column like the image below.

Raster Image Sample

The above image is zoomed in by about 1000%. Notice the jagged edges of the letters. This is one of the undesirable things about bitmap or raster graphics. If we increase the size of the image, the jagged edges would become more pronounced. For additional bitmap samples click here.

Vector - <graphics> The representation of separate shapes such as lines, polygons and text, and groups of such objects, as opposed to bitmaps. The advantage of vector graphics ("drawing") programs over bitmap ("paint") editors is that multiple overlapping elements can be manipulated independently without using differenet layers for each one. It is also easier to render an object at different sizes and to transform it in other ways without worrying about image resolution and pixels. (source: The Free On-line Dictionary of Computing). Here is a sample vector image:

Vector Image Sample

The above image is also zoomed in by about 1000%. The vector letters are very smooth and can be resized without any negative effect.

Business Applications

Word Processing - Used to used to compose, format, edit and print documents (letters, memos, & business correspondence). Specific applications: Microsoft Word, WordPerfect, and Lotus WordPro.

Spreadsheet - Used to present bookkeeping/accounting information, keeps financial records and generates reports and graphs. Specific applications: Microsoft Excel, Quattro Pro, and Lotus 1-2-3.

Database - Used to manage data or information (records). Specific applications: Microsoft Access, MySQL, and FileMaker

Presentation - Used to create graphical slide presentations or audiovisual presentation. Specific applications: Microsoft PowerPoint and Corel Presentations.

Desktop Publishing Applications - Digital Imaging

Drawing and Illustration - Designed to create and edit vector based graphics or drawings and illustrations. Specific applications: Illustrator, Freehand, and CorelDraw.

Image Editing - These programs are designed to work strickly with pixel based images and photographs. Specific applications: Photoshop, Photoshop Elements, Paint, CorelPhotoPaint, GIMP, and CorelPainter.

Image Editing (All-in-one packages) - These programs are designed to work with vector images, pixel based images, and photographs. Specific applications: Paint Shop Pro, and Fireworks.

Page Layout - These programs allow you to format pages of text and graphics. They are ideal for creating flyers, brochures, calenders, book covers, etc. Specific applications: InDesign, Publisher, PageMaker, and QuarkXPress.

For more detailed definition of terms visit WordIQ. For a complete glossary of graphic design and web design terms visit Grantastic Designs.

Which Application Do I Use?

A question that I am frequently asked is "How do I know what graphic application to use for a specific project?" There are several things that a designer must take into consideration:

What software do you already own? Take an inventory of the software that you own and what each application is capable of creating and editing.

What software application are you most comfortable with using? It isn't always necessary to learn a new application to complete the task.

Are you modifying an image? If so what is the existing image file format? You should determine the existing file format of an image before you attempt to edit it. This helps to determine what application should be used to edit the image.

What type of output do you want to create? Web, print, animation. This also helps to determine what application is best suited for the job. For example, Paint Shop Pro, Fireworks, and Flash are best suited for web graphics; they should not be your first choice for creating a graphic that will be printed. Illustrator and Photoshop are much better suited for print graphics.

Bitmaps and Vectors

Two terms that you must be understand are bitmap and vector. Bitmaps, also called raster, and vector refer to how the data in an image is recorded.

Your computer monitor contains millions of pixels. A bitmap (raster) image is comprised of colored pixels. They are edited by moving, erasing, or recoloring the pixels. They are typically more difficult to edit. All scanned images and images from digital cameras are bitmaps. Very complex graphics with a lot of color and shading (a painting) are also usually bitmaps. While you can decrease the size of a bitmap, increasing the size usually causes deterioration to the image.

Vector images are recorded mathematically (based on a formula that can be changed without effecting the image quality), they are typically a combination of individual, scalable, geometric shapes (points, lines, and curves). They are easier to modify because each of the pieces of the graphic can be resized, rotated, moved, and altered independently. They are also very scalable, the size of the image can be increased without any negative effect on the image.

One of the key elements in selecting the appropriate graphic software program is to understand the difference between these two formats (raster/bitmap and vector images). Sue Chastian at About.com has an excellent series of articles that explain the difference between the two image formats. You should read the Facts About Bitmap Images and the Facts About Vector Images and Which Format Should I Use which includes a handy chart of graphic file formats. After you have read these articles read A Brief Tour of Graphic Essentials by Mike Doughty.

File Formats

Vector vs. Bitmap

Native File Formats

When you save a document in a graphic application (this includes both vector and bitmap applications) it will automatically be saved in the program's native file format. This format retains all of the layers and other important file information used to create the image. Saving the document in the native file format makes it very easy to edit the image at a later date. Here is a chart of some of the popular graphic programs and their native file formats:

Application	Format (extension)
Photoshop	PSD
Paint Shop Pro	PSP or PSPIMAGE
Flash	FLA
Fireworks	PNG
Illustrator	AI

Once the document has been saved in the native file format it can then be exported or saved in a web format, usually JPEG or GIF, or it can be saved in a specific format for printing (EPS). When you're working with web graphics you usually end up with two copies of the image: One copy is in the native file format which can be edited later and then a copy is made of the file, usually through an export process, for the web in either jpeg or gif format. If you want to make changes to the file you open the original file (in the native file format), make the changes and re-export the image as a jpeg or gif.

Vector and Bitmap Applications - An Overview

Fireworks, Illustrator, Paint Shop Pro, Freehand, and Flash are the leading vector applications.

Photoshop, Paint Shop Pro, and Corel Photo Paint are the dominant bitmap editors. Photoshop can also edit vectors, but that capability was not in its original design and I don't find it very intuitive. I tend to use ImageReady if I want to add vector objects to a Photoshop image.

Both vector and bitmaps are used for print publications.

In order to display a vector image on the web it must first be converted to a bitmap image, either a jpeg or gif. Jpeg and gif images are always bitmaps.

It is very easy to downsize images (make them smaller) without any loss of quality. Vector images are very flexible; their height and width can be resized (up or down) without any real impact on their quality. Bitmap images (photos) are not as flexible; you can only downsize the image (make it smaller) without affecting the quality. If you try to increase the height and width of a bitmap, image the quality will deteriorate. Using a process called resampling may help to lesson image deterioration.

Here is the tricky part. Most of your bitmap image editors have vector capabilities and most of your vector programs have some bitmap capabilities. Even though most programs edit both formats, to some degree, it is a good idea to use the program that is best suited for the file format. Here is more information on image editors and illustration programs.

The chart below illustrates the popular file formats and the applications that I would use to edit them with.

File Format	Graphic Editor	How the graphic is used	Vector or Bitmap
JPEG or JPG	Photoshop, Paint Shop Pro	Web Pages	Bitmap
GIF	Photoshop, Paint Shop Pro	Web Pages	Bitmap
WMF (Windows Meta File)	Paint Shop Pro, Fireworks, Illustrator. Flash may be used if I wanted to create animations.	Print	Vector
EPS	Photoshop, Illustrator	Print	Vector or Bitmap
TIFF	Photoshop, Paint Shop Pro	Print	Bitmap
PNG	Fireworks - PNG is Fireworks native file format	Web	Vector or Bitmap

For a complete list of file formats visit this page at WordIQ.

Vector Applications

Leading vector programs: Flash, Illustrator, Freehand- Best for text, geometric shapes, re-editing, and line art. These are great programs to create most web graphics (text, banners, buttons, bars) with. The above "Graphic Format Image" was originally created as a vector image. Paint Shop Pro and Fireworks can also create outstanding vector graphics.

Bitmap Applications

Leading raster/bitmap programs: Photoshop, Paint Shop Pro, Corel PhotoPaint, Fireworks - Best for photos, painting, and other special effects. These programs can be used to create buttons, banners, and other web graphics, but you may have dificulty resizing or manipulating the image at a later date. That being said, if you want special effects on your text or buttons like those seen in these text tutorials you will need to use one of these programs.

Animation Programs

The following applications can animate images: Photoshop w/ImageReady, Paint Shop Pro with Animation Shop, Fireworks, Flash.

Images for the Web

Once you have created an image it must be exported or saved for use on the web. The two most common formats for the web are JPEG and GIF. JPEG images are used for images with a lot of detail and color; they are ideal for photographs. JPEGs do not support transparency or animation. GIFs support only 256 colors, transparency and animation. They are ideal for images with a few colors, line art, and images that resemble cartoons. PNG images may also be used on the web. They support 16 million colors, animation, and transparency, but unfortunately they are not supported by all browsers.

Paint Shop Pro - An inexpensive alternative

JASC Paint Shop Pro 9 is a terrific program for creating both bitmap and vector graphics. I tend to use this program a lot when I want to work easily with an image that combines both bitmap and vector elements (like text on a photo). The program is specifically designed to create web graphics. It is both powerful and easy to use. Features include: Direct importing of images from your digital camera (raw support), rotate, crop, and fix color and brightness, frames, borders, and photo edges, restore damaged photos, background erasing, layers, built-in special effects, custom shapes, fine art brushes, batch processing, vector image editing and more. If you are looking for an affordable alternative to Photoshop (just $119), I would highly recommend it if you are looking for an entry level graphic application that will manipulate and create both vector and bitmap images.

What application do you use?

I thought it would be helpful if I provided some real world scenarios/projects and the application I would choose to complete the project:

Scenario 1: A client sends numerous historic family photos that have been damaged over time. What application should be used to retouch these photos?

Photoshop - Photoshop is the superior program for photo retouching. It is a bitmap editing program and all photos are bitmaps. There are tools built into the program that are specifically designed for retouching. Paint Shop Pro (which is less expensive and an excellent alternative to Photoshop) can also be used.

Scenario 2: See Creating Molly Dog - A project incorporating Photoshop, ImageReady, Paint Shop Pro, and Dreamweaver.

If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.

Stop by my Amazon Store for gifts for the web developer.