mirage design

With so many companies choosing to produce their marketing and promotional material in-house, it is important to have a full understanding of the information you are working with. This article gives a brief overview of digital images and colour reproduction and their use in print and screen output.

Digital images are composed of one of two file types, reflecting two different technologies - vector files and bitmap files.

Vector Files

Vector files, also known as "object-oriented" files, plot images on a page using a point to point system, much like join-the-dots, using a horizontal and vertical axis to determine coordinates (x and y axis respectively). Points can be plotted in a straight line using two sets of coordinates or along a bezier path using four sets of coordinates. Bezier paths are used to plot an arc through a series of mathematical equations, allowing curved lines as well as straight lines. Vector files also plot simple shapes such as squares and circles.

You can scale a vector graphic up or down and the program recalculates the points and draws a line in between at the highest screen or print resolution. For this reason, vector files are considered to be "resolution independent". The fonts used by computers are also vector files, as you can see when you break the letters apart in a drawing program. Vector files have much smaller file sizes than bitmap images as there is less information required to be stored in the file (vector files plot specific points, bitmaps plot every point).

File formats

Vector file formats are generated by drawing programs such as Adobe Illustrator, Macromedia Freehand and CorelDRAW and include native file formats for these applications. EPS files (which can also be used to store bitmap files and indeed contain a bitmap preview of the vector file for use in on-screen placement), PICT files, WMF files and CGM files are also vector files, amongst others.


Bitmap Files
Bitmap files are used for images that require a full tonal range, such as photographs. There are four characteristics to bitmap files - resolution, dimensions, bit depth and colour model.

Resolution
Bitmap files are comprised of touching pixels or picture elements (squares of black, white, grey or colour) for every area of the image. The number of pixels in an image is known as the resolution. The resolution of the image directly affects the file size of the image; the higher the resolution, the larger the file sizes.

So how high should your resolution be? Screen images cannot be reproduced by monitors at a resolution higher than 72 dpi (dots per inch), so any resolution higher than that offers you no increase in image quality.

Images for print will vary in their resolution depending on the lpi (lines per inch or the space between printed dots on a page) at which it is to be printed, but as a general rule of thumb most printers use 300 dpi images to get a sharp, clear image.

Bit Depth
Bit depth determines how many tones or colours each pixel can have. If an image is set to a depth of one bit, each pixel can only have two states, black or white, zero or one. A depth of two bits adds two grey tones to the black and white, giving four levels in total. Eight-bit depth gives 256 levels of grey and can produce a smooth graduation from white to black without banding. Colour images use a series of eight bit channels to produce colour values. For example, RGB colour usually has a 24-bit depth (3 channels of 8 bits) and CMYK colour uses 32-bit depth (4 channels of 8 bits).

Colour model
As we have seen in the information on bit depth, each primary colour is produced as a grey-scale channel which, when combined with other primary channels, gives an approximation of full colour. Thus an RGB file contains three channels, a CMYK file has four channels, a greyscale file (which contains a single black channel) has one channel, etc. In addition to this many bitmap file formats allow you to store an alpha channel, a single bit channel that determines transparency in the file. The more channels in your file, the larger the file size will be. With this in mind it is sometimes easier to work with a low resolution RGB file until you are ready to print and then swap it for an identical high resolution CMYK file.

Scaling
If a bitmap image needs to be rescaled there are a number of factors to take into consideration. When the file is to be downscaled to a smaller size, the dots of colour become smaller (using more pixels per dot). This poses no problem with image quality, however the file size may now be unnecessarily high (larger file size than required). When the image is scaled up to a larger size, the dot of colour become larger (using more pixels per dot) and the image takes on a stepped looked known as aliasing or "jaggies". This can be avoided to a certain extent using interpolation of the pixels, where the computer determines what the colour of each pixel should be by sampling the neighbouring pixels and calculates an average. Ultimately, the best way to get a clear image at a larger scale is to rescan the original.

File formats
Bitmap file formats are generated by painting programs such as Adobe PhotoShop and Jasc Paint Shop Pro and include native file formats for these applications. TIFF, JPEG, GIF, BMP, PICT and EPS files are also bitmap files.


Colour Mode

Full colour
All colours the human eye can see are derived from red, blue and green. On-screen colours are created by combining these colours with varying intensity. White occurs when the intensity of each of these colours is equal. Black is an absence of these colours. This is called "additive colour". As the eye only sees in red green and blue, the problem in printing is reflecting these colours. To do this "subtractive colour" is used. Cyan absorbs red light, magenta absorbs green light and yellow absorbs blue light. White is the absence of colour and black is an equal mix of all three colours (though this is not a true black and printers use an additional black ink to add definition). Monitors use an RGB colour space (additive colour) to produce an approximation of full colour at a resolution of 72 dpi. Printers use CMYK (Cyan, Magenta, Yellow and blacK) inks (subtractive colour) at a resolution of 300 dpi to approximate full colour.

Spot colour
Spot colour is where one or more colours are specified for printing and can include metallic inks and varnishes. Spot colours can be screened and mixed to give the effect of additional colours and where less than four colours are used is cheaper than full colour printing. Colour matching is achieved by specifying ink from a proprietary colour matching system; the most common of these is the Pantone Colour Matching System. Colours are specified as PMS numbers and systems such as these ensure you will get an accurate reproduction of the colour that you want.

Monotones and Duotones
Most people think of black and white when they think of monotone colour, but any colour can be used instead of black. Consider sepia toned images in a dark brown or a dark blue to add extra dimension to the page without increasing costs. Or perhaps a duotone (an image with two colour channels) to add depth to the image. For more information on duotones consult the help files of your painting program (such as PhotoShop).

Web Images
With web images the biggest concerns are accurate colour reproduction and download times. Different platforms and different browsers reproduce colours differently so to be sure that your image is going to be reproduced accurately it is best to stick to the palette of 216 web-safe colours. Most graphics packages supply a palette of web safe colours or you can download one from the internet. The two most common file formats used for images on the Internet are GIF images and JPEG images. GIF images are limited to indexed colours and will step or dither between colours to get the desired colour effect. JPEG images are a better option for continuous tone images such as photographs and can be produced with varying compression to accommodate file sizes. Keep in mind, the more highly compressed the image the lower the image quality.

To get the best possible result from your images, it pays to understand how they work. This article has hopefully given you some insight into the basics of digital images but it really just scratches the surface. For more information on digital images, check out graphics books and websites such as dtg.com, ideabook.com or allgraphicdesign.com.

Resources

An Introduction to Digital Scanning - produced by Agfa-Gevaert Ltd
Concepts in Graphic Design, David A Holzgang and Lesley Strother, MIS Press
http://www.dtg.com
http://www.allgraphicdesign.com
http://www.ideabook.com

© mirage design. You may reproduce this article as long as you include the following information including the link:

By Jane Long of mirage design. Please visit www.miragedesign.com.au for additional articles and resources on marketing and design for small business.

Labels: graphic design, image editing, photography