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

Tutorials on Photoshop are invariably involved with working directly on photographic images. Itsybitsy concentration is paid to explaining what is happening under the bonnet or hood. This record intends to elucidate 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 facts 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.

Akdy Hood

The images in image-editing programmes are known as bitmap images, sometimes referred to as raster images. Drawing programmes, such as Illustrator and Freehand, create vector graphics which are created mathematically. Vector programmes are best mighty for type and strong graphics where sharp edges are required, because when an image is resized, a new mathematical calculation is made and capability 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 amount of pixels per inch needs to be related 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 connection of pixels to area might come to be clearer if we correlate 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;
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 road billboard is likely to be of lower resolution because it is seen from a greater length and printed on quite a common screen. When an image is examined from a length closer than normal, the pixels come to be noticeable and the image is said to pixelate. Recommended file sizes for distinct 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 determined thorough for most press printing.

So what's this got to do with icing a cake?
To elucidate how file size, resolution and image size work together, think about icing a cake.

A quantum 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 quantum of icing over a small cake (50mm x 50mm) and we get a thickness of 40mm (a high resolution).

2. Spread that same quantum 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 quantum of icing) is the same in both cases.

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

Recommend : Motorcycle Store video games Store