Digital Imaging

Computer Graphics

What is covered in this unit?

Categories of digital graphics Purpose of graphics in applications Uses of different types of graphics Attributes of graphics File formats Compression Software applications

Categories of Digital Graphics

Images, eg scanned/downloaded photos Computer generated graphics, eg logos,

interface elements Computer generated images, eg

graphics that look lifelike

Categories of Digital Graphics

Four sub-categories: Bitmap Vector Meta Animated

Using Graphics in Applications

To support information eg to help explain how to build a shed

As branding, eg company logoïTo help define the subject, eg environmental website would use green graphics

To form the basis of the information, eg flight simulators, news stories

Using Graphics in Applications

To entertain users As interface components, eg buttons,

backgrounds, navigation bars To add interest to the screen As icons to help users interact with a

system

When to use Graphics?

The message you're trying to put across The amount of storage space available The amount of network bandwidth

available The specification of the end users

system Project budget

Text

Text is pretty much guaranteed to be used at some point in an application

It is an extremely effective media element for relaying information

The problem with text is when there is too much of it. This can make it difficult for the user to take in the information.

Users normally find large amounts of text overbearing and not very interesting to look at.

Animation

Animated graphics are useful to demonstrate a process and can bring a page to life

Pilots are taught to fly using flight simulators which are normally created using 3D animation and/or video

There are cases where you are better to use static graphics

They are also very expensive to produce and can take a long time to create

Sound

Sound can also be expensive and time consuming to produce

If you decide to use narration in an application you will have to have good quality sound recording facilities and editing equipment

If you are trying to explain something to a user, they won't be able to remember everything that has been said

Video

Video is useful if you need to show a subject in detail, e.g. how to perform first aid, tour of a new building, or just purely to entertain users

It is one of the most effective media elements The main problems with video though are:

Video produces much larger file sizes than graphics It's much more expensive to produce video than a graphic or

photo - A 10 minute video can easily cost £5,000 + to produce It takes more time to produce video than it does a graphic -

one day of filming gives about one minute worth of footage.

Uses of Different Types of Graphics Bitmaps are used when lifelike or

detailed graphics are required. Bitmaps can be: images of real life subjects (people, objects, places)

captured using scanners and digital cameras computer generated images and graphics, eg special

effects in films, effects applied to graphics.

Why Bitmaps?

You may wonder why you would create graphics such as buttons, banners, logos etc as bitmaps and not vector graphics. It is purely because pixels can add more 'depth' and effects to graphics, therefore makes them stand out more or look more interesting. The example shows this:

Vectors

Vectors are mainly used for print media such as magazines, posters and leaflets.

In multimedia applications and websites, vectors are used to create logos, and interface graphics such as navigation bars and panels.

Vector graphics currently aren't widely supported by web browsers.

Most file formats used for multimedia applications do support vector formats.

Animated Graphics

Animation is used to add interest to the screen, demonstrate processes and entertain.

A lot of large companies use animated effects on their sites to add interest.

Added features like games are used to entertain users. Adobe Flash and Director are widely used to create these animated games.

Simple animated effects, such as animated banners and rollover buttons, are more common and much easier to learn how to create.

Meta Graphics

An image in meta format is a combination of both of the two basic formats; vector and raster format.

Examples of meta images are scanned photos in which you want to include describing text/numbers, graphics (eg arrows) or both.

Both text and arrows should be saved as vector information and not as raster to keep the good quality but the photos still needs to be in a raster format.

Colour Models

The model you pick depends on the range of colours. These are: Black & white Greyscale RGB - Red, Green and Blue CMYK - Cyan, Magenta, Yellow and Black Lab - Luminance, 'a' & 'b' stand for chrominance HSB - Hue, Saturation & Brightness.Other similar models are

HSL, where L stands for Lightness, HSV, where V stands for 'brightness Value' and HCV, where C stands for Chroma and V for Value.

Indexed Web safe

Attributes of Vector Graphics

Vector graphics are constructed and stored on the computer in a different format from bitmaps. They are made up of objects that consist of: Shapes Co-ordinates/points Lines Curves Paths Fill colour

Attributes of Bitmap Graphics

Unlike vector graphics, bitmap graphics are made up of multiples of picture elements and hence larger amounts of data. The attributes of Bitmaps comprise of: Pixels Resolution Colour depth

File Formats - Uncompressed Bitmap File formats for bitmap and vector

graphics can be divided into compressed and uncompressed formats.

Uncompressed Bitmap: PSD (Adobe) Photoshop Document

CPT (Corel Photo-Paint Document)

BMP (Bit-mapped Picture)

File Formats - Compressed Bitmap JPEG or JPG (Joint Photographic Experts

Group) is used for photo realistic graphics or graphics.

GIF (Graphics Interchange Format). This is a lossless file format designed for fast transfer of data over modems.

PNG (Portable Network Graphic) was produced to avoid paying to use GIF. PNG can also be used for simple graphics as well as photo realistic images.

File Formats - Uncompressed Vector All of the formats mentioned are

supported by Windows and Mac operating systems. AI (Adobe Illustrator). FH (Adobe, formerly Macromedia, Freehand). This

application is still in use, however there are no plans to produce anymore versions of Freehand.

CDR (Corel Draw) is the vector format used by Corel Draw. The application itself is capable of saving files in various formats, eg EPS.

File Formats - Delivery Vector

The following formats don't all use compression, however they are used for the final version of vectors. SVG (Scalable Vector Graphics) is an open standard

created and developed by the World Wide Web Consortium for an all purpose vector format for the web.

SWF (Small Web Format - Adobe Flash format). A vector-based graphics format for interactive, animated web graphics

VML is an open format, but is only implemented in Microsoft's Internet Explorer. It is not a W3C Recommendation

EPS (Encapsulate Postscript), Postscript and PDF (Portable Document Format).

Compression

In computing, compression is when the size of a file is reduced but the original message is retained. Compression is used for different types of data, eg documents, sound, video.

The aim of compression is reduce the quantity of the file size but to keep the quality of the original data. When we talk about compressing graphics for use in multimedia, we mean bitmap graphics not vectors. There are two reasons for this: Vectors generate smaller file sizes

They aren't supported on the web, therefore don't need to be compressed

Compression Techniques

There are two categories of compression techniques used with digital graphics, lossy and lossless. Whilst each uses different techniques to compress files, both have the same aim. If you are a bit unclear about this, the following may help: Lossy compression methods include DCT (Discreet Cosine

Transform), Vector Quantisation and Huffman coding Lossless compression methods include RLE (Run Length

Encoding), string-table compression, LZW (Lempel Ziff Welch) and zlib.