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 1
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 2
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 3
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). 4
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), 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) 5
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 6
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 7
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 8
Which graphics format should I use? You have only two reasons why one format might be better than another 1. 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 9
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 10
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 Product Design Games Movie Effects Simulations 3D images 11
12
13
(focal lengths) 14
15
16