2D Graphics Theory & Principles

• Single Point

• Smallest addressable area on screen or digital image

Bitmap-based images do not rely on mathematical formulas to define their various elements. Each bitmap-based image is mapped into a grid. The size of the grid is based on the image's resolution (clarity). For example, a bitmap-based image of 1 inch x 1 inch with a 600 dpi resolution would be defined by a grid of 600 x 600 pixels. Hence, a bitmap-based image is like a mosaic of pixels with each pixel holding a specific color value.

Vector-based files are more suitable for illustrations that require precise measurements. They are also easily scalable due to their mathematical nature. However, the vector-based file format has its drawbacks as well. It is not good for displaying photo-realistic images such as a photograph because images of this type generally do not contain well-defined shapes and curves.

Resolution refers to the number of pixels in an image. Resolution is sometimes identified by the width and height of the image as well as the total number of pixels in the image.

For example, an image that is 2048 pixels wide and 1536 pixels high (2048X1536) contains 3,145,728 pixels (or 3.1 Megapixels).  You could call it a 2048X1536 or a 3.1 Megapixel image.  As the megapixels in the pickup device in your camera increase so does the possible maximum size image you can produce.  This means that a 5 megapixel camera is capable of capturing a larger image than a 3 megapixel camera.

The greater the resolution the greater the file size

Quality graphics = key assetAccepted quality for intended purpose

Bitmap formats

• JPEG (Joint Photographic Experts Group)• GIF (Graphics Interchange Format)• PNG (Portable Network Graphics)• BMP (Windows Bitmap)

Vector formats

• AI (Adobe Illustrator)• SVG (Scalable Vector Graphics)• EPS (Encapsulated Postscript)• CGM (Computer Graphics Metafile)

In this example, two colours have been used (black/white) and so each pixel is represented by one bit

0 = white 1 = black

00 = white, 01 = blue, 10 = red, 11 = black

How many colours could be represented using 3 bits?

000 001010 011100 101110 111

8 colours (23) could be represented using 3 bits

24 Bit

8 Bit

4 Bit

1 Bit

Dithering “The attempt by a computer program to approximate a colour from a mixture of other colours when the required colour is not available”

Anti-Aliasing “Smoothing Jagged Edges”

Lossless Compression

None of the original data is lostMethods are found to store the information in a more efficient wayExample - GIF

Lossy Compression

This method involves sacrificing some of the data that our eyes will probably not noticeExample - JPEG

Image_num, shape, centre_x, centre_y, radius, line, fill

2, oval, 250, 520, 80, 6, 92

image_num, shape_type, start_x, start_y, length, height, line, fill

1, rect 0, 0, 200, 200, 3, 26

Advantages:

• Small file size• Unlimited zoom without anti-aliasing• Fully Scalable• Good for line drawings and images with large areas of same colour • Potential for animation and interaction• Shapes easily edited

Disadvantages:

• Can not reproduce photographs well• Formats not standardized as much as raster graphics formats

Advantages:

• Raster graphics appear onscreen very quickly• Raster graphics are great for representing complicated photographs.

Disadvantages:

• Can be relatively large (resolution vs. file size)• High file size increases download time• Cannot effectively zoom• Not effectively scalable – becomes pixelated and resolution is lost

Vector:

• Cartoons• Company Logo• Animations

Bitmap (Raster):

• Scanned Photograph• Photo from digital camera• Images used in a web design