Images

Images

Images include graphics, such as backgrounds, color schemes and navigation bars, and photos and other illustrations

An essential part of a multimedia product, is present in every multimedia product

A picture is worth a thousand words

The major make-or-break factor of your multimedia application will always be graphics and design

Potential customers will make an instant judgement, for better of for worse, on the basis of that first impression on the screen

Production of graphics for multimedia applications In real-life multimedia products there are

two key parts of managing the production of graphics: definition of the task and the selection of the personnel

The approach to graphics should be included in the project plan

Your project team may include a graphics artist or an art director

The production team is chosen on the basis of graphics requirements

Production of graphics for multimedia applications

Organizations have quite often a pool of freelance artists; a common situation for graphics and programming

Plan your approach Whatever is your working method, there

will always be a starting point where your page is ”clean”.

Before reaching this point, be sure you have given your project a good deal of thought and planning

To get a handle on any multimedia project, you start with pencil, eraser and paper

Outline your project and graphic ideas first: make a flow chart and storyboard

Colour A colour image on computer and television

screen is made up with red, green and blue; they are called the primary colours

Almost any colour can be made by mixing the three primaries; in a full-colour image each picture element or pixel is built up from varying amounts of three primaries

Shades of grey are produced by making the amount of reg, green and blue light equal; for black there is no light and for white the light is ”full on”

In digital terms there are 256 shades to each of the primaries in a full-colour 24-bit image

Bitmaps Four bit color palette is capable of

displaying 16 colours because there are 16 different combinations of four bits.

With 8 bit colour, there is a total of 256 colours available, with 16 bit colour, a total of 65536 is available. When you have 24 bit colour palette, a total of 16 777 216 colours is available.

With 32 bit colour we are talking about high quality print graphics (CMYK cyan, magenta, yellow, black).

Bitmaps

The more pixels used in an image the larger the actual file size; the more it consumes memory

You can’t scale a bitmapped image without losing information

Bitmapped images are often used in web pages and multimedia (CD-ROM, DVD, blue ray), but most of the time they are compressed.

Vector graphics

In computer terms a drawing is an image that consists of distinct segments or shapes, called draw objects

It is sometimes referred to as line art A popular name for drawings in the

computer world is vector graphics The vector graphics are made in

drawing programs (e.g. Illustrator)

Vector graphics In vector graphics, all the elements in the

image (circles, rectangles, letters) have characteristics, which can be changed

For example, when you draw a circle in one place, then you draw a rectangle in another place, you can still select the circle and change its size and location

It’s possible because vector graphics are stored as dimensions and formulas, unlike bitmapped images which are stored as individual pixels

Vector graphics

Although most of the graphics on the Web and multimedia are bitmapped, there is a small but important use of draw objects in making animation files

Flash is very popular example In Flash you have series of still images

and Flash contains the information of the moves and changes

Bitmaps vs. Vector Graphics Remember that the programs can

save images in different formats. You are not stuck with the technology you were using in the beginning.

Quite often a bitmap starts out as a set of draw objects; you’ll probably need both technologies

The vector graphic images are smaller in size than the bitmapped

Using what, when and why In an ideal world, you would always use 24-bit

colour images However, display incompabilities and file sizes

(download times) make this sometimes impossible

As well as taking up three times more space of an 8-bit image on your web site or CD-Rom, a 24-bit image takes three times as long to load

Always do retouchíng and compositing operations in 24-bit, although you final delivery may be in 8- or 16-bit

Look before you leap Any graphic should be checked on the delivery

system Reducing bit-depth, for example, can have all

sorts of undesirable side-effects (quantization, posterization)

You can only be sure of compability if you have checked your image on every screen format

Nowadays the platforms are getting closer to each other and they are more compatible (remember the issues with web browsers in the past)

Taking less space

You will usually need to reduce the size of graphics files. There are several methods: Degrading. The size in pixels can be

reduced. Reducing the color depth. Compression. JPEG, GIF, PNG

Which graphics format should I use? You have only two reasons why one format

might be better than another1. The end-user’s browsers may or may not

support the format (unlikely)2. The way the image is compressed lends

itself to a particular kind of image GIF for logos, cartoons JPEG for photos, other images with smooth

edges

Image compability and quality Take care that any compression does not

noticeably degrade your 24-bit images From a practical point of view the days of

incompatibility for still pictures are over However, you should know the difference

between lossy and lossless compression methods: Lossless: you will not lose data when the image

is compressed Lossy: you will lose data when the image is

compressed

Asset management Usually the number of graphics files in a

multimedia application is large Therefore it’s vital that you have a known

system of naming files Do not use too long filenames, they may

create problems in some platforms Try to organize a decent directory structure Reserve the suffix or extension for the file

type

Proofreading ”There is always one more bug” Typo is a graphical equivalent for a bug in

the code Even the most experienced typegrapher

can make a mistake; be extra careful with names and foreign languages

Proofreading should not be carried out by the same person who wrote the text

Do not rely on spellcheckers

3D drawing and rendering 3D packages are usually object-oriented

like a drawing package Speed of display is often more important

than the quality; nowadays the GPU’s (not CPU) have fortunately so much computational power that the limits are not a problem

Surfaces and lightning conditions are set after the objects are drawn

The scene must be rendered to produce the final image or images; this can be very slow

ProductDesign

Games

MovieEffects

Simula-tions

3Dimages

(focal lengths)