What's Icing a Cake Got to Do With Pixels and Resolution in Photoshop?

Tutorials on Photoshop are invariably concerned with working directly on photographic images. Little attention is paid to explaining what is happening under the bonnet or hood. This article intends to explain all about pixels and resolution which make up digital images. The follow-up articles deal with 8 bit and 16 bit.

Computerized images are made up of pixels, which are small squares of digital information with a colour value. The word pixel is an abbreviation of the expression 'picture element'. Pixels have no inherent size because their size will depend on the 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.

The images in image-editing programmes are known as bitmap images, sometimes referred to as raster images. Drawing programmes, such as Illustrator and Freehand, generate vector graphics which are created mathematically. Vector programmes are best suited for type and strong graphics where sharp edges are required, because when an image is resized, a new mathematical calculation is made and quality is maintained.

When discussing a bitmap image, it should be referred to as pixels per inch (ppi) or pixels per centimetre (ppcm) - not dots per inch (dpi). The image file is made of pixels and the image on the screen is made of pixels. Respectable text books and magazines sometimes talk of dpi here but it is wrong and this term should be reserved for monitors and particularly for printing. In printing, dots of ink are laid down on paper and the two situations need to be distinguished.

So it's ppi for digital images and screen images, and dpi for prints.

The number of pixels per inch needs to be associated with the dimensions of the image in order to give the image resolution. The more data that is recorded by a digital camera or scanner, the higher will be the resolution of the image file. 300ppi in itself is not necessarily a higher resolution than 150ppi; it means nothing until the image dimensions are included.

An image of 150 ppi for an image size of 8" x 10" would be written:

8"x10" @ 150ppi, which is 1200 pixels x 1500 pixels or 20.3x25.4cm @ 60ppcm.

An image of 300 ppi for an image size of 8" x 10" would be written:

8"x10" @ 300ppi, which is 2400 pixels x 3000 pixels or 20.3x25.4cm @ 120ppcm.

• In this example, 8x10 @ 300ppi is going to be a higher resolution than 8x10 @ 150ppi.
  
  
• However, 8x10 @ 150ppi will not be a lower resolution than 4x5 @ 300ppi.
  
  
• The two are exactly the same; they both have a file size of 5.16 megabytes (5.16 Mb).
  
  
• The 8x10 @ 150 file could be resized to make it 4x5 @ 300ppi and the two will look and reproduce exactly the same.

The relationship of pixels to area might become clearer if we compare it to tiling a floor. With tiles half a metre square, a floor area of 2 metres by 2 metres would require 16 tiles. An area of 4 metres by 4 metres would require 64 tiles - four times as many. Pixels and files sizes work the same way.

Files sizes are measured in kilobytes (Kb), megabytes (Mb) or very occasionally gigabytes (Gb).

• 8 bits make 1 byte;<br><br><li>1024 bytes make one kilobyte;
  
  
• 1000 kilobytes make one megabyte; (one million bytes make 1MB)
  
  
• 1000 megabytes make one gigabyte; (one thousand million bytes make 1GB).

As well as the resolution, how an image looks will also depend on the viewing distance. A small image might require a high resolution because it is viewed closely and hence examined more closely. A street billboard is likely to be of lower resolution because it is seen from a greater distance and printed on quite a coarse screen. When an image is examined from a distance closer than normal, the pixels become noticeable and the image is said to pixelate. Recommended file sizes for different outputs are discussed later.

A monitor screen also has a resolution, such as 800 x 600 or 1024 x 768, measured in pixels. If an image has a pixel dimension of 800 x 600 then it will fit on to a 800 x 600 screen whereas it will appear small on a screen set at 1024 x 768.

In Photoshop, double-clicking on the Zoom tool enlarges the image to 100% which means the pixels of the image will be matched with the pixels of the screen setting. A PC monitor displays at 96ppi and a Mac monitor displays at 72ppi, although some of the newer Mac screens are at 100ppi.

A file of 300ppi @ 4" x 5" will have a pixel dimension of 1200 x 1500. When displayed at 100% on a 1024 x 768 monitor, the screen will not be able to show the whole image at once and PC and Mac monitors will view the image slightly differently. This is why when designing a web site, all dimensions of images and text must be in pixels and not centimetres or inches, otherwise the layout will go haywire when viewed on the other platform.

Standard resolution of images for press printing is 300ppi, which virtually equates to 120pixels per cm. In actual fact 120ppcm is equal to 305ppi, but either is near enough. This allows printing at 150 lines per inch, which is considered standard for most press printing.

So what's this got to do with icing a cake?
To illustrate how file size, resolution and image size work together, think about icing a cake.
A portion of icing is the file size.
The size of the cake is the image size.
The thickness of the icing on the cake is the resolution.

1. Spread our portion of icing over a small cake (50mm x 50mm) and we get a thickness of 40mm (a high resolution).
   
   
2. Spread that same portion of icing over a larger cake (100mm x 100mm) and we get a thickness of 10mm (a much lower resolution).
   
   
3. The file size (our portion of icing) is the same in both cases.

More great information and tips on Photoshop can be found at: ---->
How to Use Photoshop.