Page 1 of 9
It is important to understand the various theories and applications of digital graphics technology if you are looking into a career within the games industry. Digital graphics are used widely throughout gaming, advertising, web and multimedia, creative design and printing. Anyone who is involved in the gaming industry must understand how digital graphics are created as it is the basis in which interactive media, including computer games, is sold. This article is designed to help you further understand the various principles and concepts of digital graphics and to help encourage people with the necessary skills into the gaming industry.
Interactive media graphics can be used for various projects such as navigation bars, rollover buttons (see Bells Web Designs), menu bars, animated gifs, web banners and headers, company logos, backgrounds and texture graphics. These can be produced using text, images, graphics etc and are usually produced using software such as Adobe Photoshop, Adobe Flash, Adobe Fireworks and other various image editing programmes. The use of digital graphics in interactive media, such as navigation bars, headers, banners and company logos, can give a website a professional edge. But it isn’t just used in web design and advertising. Digital graphics are the sole focus in games design too. Game poster production, packaging, in game graphics, sprite or avatar, backgrounds, terrains, textures and concept art are all produced from digital graphics, in essence, the entire game development process relies on digital graphics in order to make a game. So now we know what digital graphics are used for let’s take a closer look at subject terminology, file types and styles and understand why and when they are used.
Pixels Brendan McGuigan, of Wisegeek.com, states that pixels are “dots used to display an image
on a screen or printed matter”. The word pixel is a combination of two words, Picture and Element, and is used in a digital context. It can also be used to describe the smallest
part of an image. This photo shows an example of what pixels look like. The left side of the photo is the original image but the right side of the photo has been pixelated.
As you can see these pixels are quite large but they give you an idea of how an image is put together. Most digital cameras today give a measure of pixels-per-inch (ppi). This can give you a rough idea of the quality of the photo taken. Understandably, the more pixels that make up an image, also called image resolution, the clearer and more detailed the image will be. Pixels are not one specific size. Duncan Wherrett, of Photoshop Tutorials Plus, suggests “its [pixel] size will depend on the
Page 2 of 9
resolution of the image. With two files of the same dimensions, a file with a resolution of 150 pixels per inch will have larger pixels than a file of 300 pixels per inch”. Each pixel is made up of smaller pieces. Brendan McGuigan gives the example of an RGB monitor whose pixels are made up of three dots, Red, Green and Blue. Each of these dots appears to join at the same point which in turn gives the appearance of seamlessness.
Raster Images Raster images are represented by a grid of pixels and are commonly called bitmaps. Each pixel within a bitmap is stored in computer memory as one or more ‘bits’. So, if an image contains a greater number of colours and pixels then it will require more memory to save the file as the file size will be larger. The width and height of an image are indicated by the number of rows and columns rather than a metric size such as centimetres or millimetres. For example, the size of an image may be described as being 800 x 400 which means that there are 800 pixels in a row and 600 pixels in a column. This does not determine the resolution of the picture, only its size. The resolution of a picture is determined by its ppi (as described above). Merrilee Willoughby, of wisegeek.com, tells us that black and white raster graphics only contain black and white pixels and therefore each pixel only requires one ‘bit’ of memory whereas the pixels of a coloured raster graphic contain three separate colours (Red, Green and Blue) and therefore take up more ‘bits’ of memory making the file size larger. The most common file formats for raster graphics are JPEG, TIFF, PNG, GIF and BMP.
JPEG
(Joint Photographic Experts
Group)
The JPEG is the standard file format used in photography and similar works, as well as some web graphics. This file format is only a still image and not an animation and is what is known as a lossy compression method. This basically means that when the file is saved as a JPEG the file is compressed in order to maintain a relatively small file size. The downside of lossy compression is that each time the file is opened and saved as a JPEG a little more of the quality is lost in the image. Often this does not become a factor as the loss is very small but over a period of time it would become noticeable as you can see in the image below.
TIFF (Tagged Image File Format) This file format is common in the graphic design industry as it is a lossless file. Unlike the JPEG, this file format does not lose any quality when compressed and is used for high quality images or archiving master images. This file type also allows you to modify the image and still retain the original quality. Eric Miller, of about.com, suggests that TIFF is the industry standard file format for print design and desktop publishing because it can store high quality images such as Photo’s. He also states that printers often stipulate the
Page 3 of 9
use of a TIFF over a JPEG or any other file format.
PNG (Portable Network Graphics) The
PNG file format was introduced specifically for the web due to a licensing scheme that meant that any company or creator of software that supported the GIF file format would have to pay thousands of pounds in order to be able to use the PNG file format. (This licensing scheme has since ceased). PNG’s are proficient in the use of alphachannels. This means that instead of the transparency options of other formats, which allow pixels to be either transparent or opaque, the PNG allows you to specify the opacity of any pixel, from 0-255, with 0 being fully transparent and 255 being fully opaque.
The GIF file format is one of the most commonly used for web graphics. They can be used as both static and animated images and support 256 colours maximum. Sudipa Sarkar, of blurt it, suggests that one of the most important features of a GIF is its ability to use transparency (like the PNG) and you are also able to interlace the image which enables it to load faster. When this feature is used the GIF image is loaded by a web browser in several stages. The image may first appear blurred or fuzzy until more information is downloaded by the server. The image then becomes more defined until the entire image has been loaded. It is important to note that interlaced GIF images do tend to have a larger file size than non-interlaced ones. Although GIFs are commonly used in web graphics it is not suitable for use on colour photographs and images that have a continuous colour or gradient. The reason for this is that it only uses a maximum of 8 ‘bits’ per pixel (256 colours) which gives you a poor quality. You would not use this file type unless the image makes use of continuous colour, such as a logo or graphic. Here is an example of an image saved as a JPEG and a GIF.
Having this option allows you to be able to place a graphic on top of any background and it will still retain its translucent effect. Mickiewicz and Danino, of Sitepoint, state that “PNG was designed to offer the main features of the GIF format, including streaming and progressive file formats. It also provides greater depth of colour, catering to images up to 24 bit in colour”.
GIF (Graphics Interchange Format) Page 4 of 9
As you can see the quality has been drastically reduced in the GIF example whereas the JPEG image remains clear and crisp.
BMP (Bitmap)
Here you can clearly see that the image retains its quality when the size is reduced but loses it once it has been resized back to the original size.
Vector Images
The BMP can also been known as a DIC (Device Independent Bitmap) or a Fixed Resolution Image. Jacci Howard Bear, taken from about.com, defines a BMP as “a type of graphic composed of pixels in a grid”. Each pixel, or ‘bit’, contains the information of colour for the image. As these file types have a set resolution it is not recommended you resize the image as it can cause distortion and jagged edges. Something you will need to remember if using a BMP image in Photoshop is that once you reduce the ‘Image Size’ you will lose all of the information of the image as the software ‘dumps’ all of the unnecessary information. This means that if you then decide to resize the image back to its original, larger size the image will become degraded. It is for this reason that I would suggest if you are working with a BMP you should always make the image larger than intended for use and keep a master copy. Another downside to BMP images is that they usually have a large file size due to the lack of compression. Below is an example of resizing a BMP image.
Unlike Raster Images, Vectors are made up of tiny scalable objects that can be defined by mathematical equations rather than pixels. This means that they will always render at the highest quality. If you were to change the elements of a Vector Image, such as a line, curve or shape, you would not change the object itself. For example, you could totally change any number of attributes of a Vector Image such as resizing, rotating and warping, but you would not destroy or damage the quality of the original image. Although this may be a massive advantage when using image editing software it also has its drawbacks too. Sue Chastain, of About.com, suggests that “the primary disadvantage is that they're unsuitable for producing photo-realistic imagery. Vector images are usually made up of solid areas of colour or gradients, but they cannot depict the continuous subtle tones of a photograph”. It is for this reason that Vector images are usually cartoons or black and white images opposed to photographs. She also states that Vector Images are becoming more advanced and that various tools within image editing software allow you to add Bitmap textures to a Vector producing a more ‘photorealistic’ appearance. You can also create soft blends and transparency which you were unable to do to a Vector Image a decade ago. The most common Vector Image file types are CGM, SVG and AI.
Page 5 of 9
be used on the web. Below is an example of what a CGM file is capable of.
CGM (Computer Graphics Metafile) The CGM file format is often used for 2D Vector style graphics such as clipart, raster graphics and text. It is now mainly used in CAD drawings. CGM is one of the very few graphics formats that are an international standard (ISO 8632). A metafile is a file containing information that describes or specifies another file therefore, this file type can hold a wide range of graphical and mathematical information. This file type works by “holding data and instructions for reconstructing graphical images using an object-oriented approach” (Cool Utils). Three different methods are used for encoding this file type. Binary Encoding – This allows software and relevant programmes to read the file quickly and efficiently. CharacterBased Encoding – This produces the smallest available file size allowing you to utilise disc space and faster data transfers. Clear-Text Encoding – This allows you to read the file and modify it using a simple text editor. It would depend on the purpose of the file as to which encoding practise you would use. Cool Utils states that “CGM files are supported by many different programs. Among them Adobe Illustrator, IMSI TurboCAD, AutoDesk AutoCAD, CorelDRAW or Paint Shop Pro on Microsoft Windows; and Adobe Illustrator, IMSI TurboCAD, and Apple Works on Mac OS. All these programs open the files directly. Total CAD Converter can convert CGM files to DXF, WMF, PDF, JPEG, TIFF, PNG to view or share them with ease without special software.” They also tell us that, as this file type is not generally supported by web pages, the World Wide Web Consortium devised WebCGM that can
SVG (Scalable Vector Graphic) This file format is a 2D Vector format that was created by the World Wide Web Consortium, with ADOBE developing it, for the use of displaying Vector Graphics on the web. ADOBE tells us that this file format is a text based graphics language “that describes images with vector shapes, text, and embedded raster graphics”. It is understood that an SVG is a compact file type and can produce high quality graphics for the web and resource limited handheld devices such as mobile phones.
Page 6 of 9
As this file type allows you to use XML and JavaScript to create web graphics and illustrations that respond to your actions, it is advantageous to use this file type on the web for animation. The applications that support SVG file types are Adobe Illustrator CS2 and higher, Adobe GoLive CS2 and higher.
AI (Adobe Illustrator) This file type is commonly used for logos and print media. Unlike a BMP image this file type can be resized without losing any of the quality. AI images are generated using Adobe Illustrator but there are third party programmes available that can open this file type, however, they may rasterize the image thus making it a BMP. Faqs.org suggests this file type is a variation of the EPS (Encapsulated PostScript) format.
Bit Depth Bit depth tells us how many unique colours are in an image’s colour palette. This is given to us is terms of 0’s and 1’s and is referred to as ‘bits’. Each ‘bit’ specifies a single colour. An image may not necessarily use every one of these colours but it is able to specify its colours with precision when the bit depth is higher.
Number of colours available
256
VGA
16
65536
XGA, High Colour
24
16777216
SVGA, True Colour
An example of how to work out the number of colours per bit depth is simple. Most digital cameras use 8-bits (8bpp) per channel which means that they can use eight 0’s and 1’s. This means that they use a total of 2 8 (2x2x2x2x2x2x2x2), 256 different variations of colours. If all three of the primary colours are used (Red, Green, Blue) you will get 24 bpp. You would work this out in the same way: 2 8*3 (2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2 x2x2x2x2) giving you 16777216 variations of colour. Cambridgecolour.com states that “The available bit depth settings depend on the file type. Standard JPEG and TIFF files can only use 8-bits and 16-bits per channel, respectively”. Here is an example of 8, 16 and 24 bpp colour channels.
The most common bit depths used are 8 bpp (bits per pixel), 16 bpp and 24 bpp. The following table explains the number of colours available per bit depth. Bits Per Pixel
8
Common name
Page 7 of 9
As you can see, the difference between 24bpp and 16 bpp is not easy to discern but there is an obvious difference in the 8 bpp image.
Colour Space Computer monitors show colour as RGB light. This means that they can only display a limited range (gamut) of the visible spectrum variants. The difference between monitors and paper prints is that a monitor emits light whereas a porous material, such as paper, absorbs it. Because of this, when colour is converted from a computer monitor to paper (i.e. printed image) the colour conversion needs to approximate the colours in order to display them correctly and preserve colour quality. A printer uses CMYK (Cyan, Magenta, Yellow and Black) opposed to RGB. This is where the colour space conversion occurs. It will approximate the colours in order to create the best colour match. Because the colours are only an approximation this is what is known as a gamut mismatch. The images below show the difference between RGB and CMYK.
Image Capture Images can be captured using various tools such as scanners or digital cameras. Both of these can be connected to a computer to allow the user to upload images. Some often use specialised software to enable you to upload and view the image but many now adopt ‘plug and play’. Having the option of ‘plug and play’ means that the computer does not need drivers in order to store the image as it on only receiving the file.
Image Optimisation Once an image has been captured by either a scanner or digital camera it may be necessary to optimise the image ready for its proposed use. The way you optimise the image will depend solely on the purpose of use. It is best practise to always have a master copy (original image) in case something goes wrong when editing the file. Image optimisation could include cropping, changing the shape or orientation of an image. All of these things can change the size of a file. You may also want to change the colour or bit depth to enhance the image. Using the correct file type, such as JPEG, PNG, GIF etc, also come under this category. As previously discussed, the file should be optimised for its purpose. For example, you would not be likely to use a large file type, such as a TIFF, for a website banner or logo as the loading time would be vast.
Dan Bailey, of The Photoletariat, explains that no device, camera or monitor is able to accurately reproduce every colour that is able to be seen by the human eye. This is the reason that standard colour spaces (RGB and CMYK) were developed.
Basically, optimisation involves choosing the correct file type or compression in order to reduce the file size.
Page 8 of 9
DPI (Dots Per Inch) DPI is a measurement of resolution which applies to printers. It specifies the number of dots per inch that a printer is able to print in order to achieve text or graphics. R. Kayne, of wisegeek.com, suggests that DPI can also be referred to when talking about monitors, scanners and digital cameras. He also states “Scanners operate at different resolutions. Scan time will increase with higher DPI settings, as the scanner must collect and store more data. However, the greater the DPI, or requested resolution, the richer the resulting image�. To conclude, the file type of an image is solely dependent on its intended use. Whether you are creating websites, or game graphics, the file types you use will always change. It can be tricky to get the right balance between file size and picture quality so always do your research to ensure you get the best out of your work. The easiest way to decide which format is best for your graphic is to save it as different types. That way you can choose the file that best suits your purpose, but remember, ALWAYS keep a master copy for those occasions when things go wrong.
Page 9 of 9