GIF Reference Article
This article is reprinted in full from Designer-Info.com without permission. Please read the web version of this document if possible. Unfortunately web Pages disapear with great frequency and I feel the following article is of great merit.
Understanding GIF.
Creating a GIF file could hardly be more different than creating a JPG. To begin with rather than simply scanning a photograph the illustrative image has to be originated from scratch. To create a typical test GIF, I created a similar 300 x 400 blank image with a solid green background. I then added some simple blue text which thanks to Photoshop 5’s new type layers remains editable. I than wanted to add a triangular red flash effect behind the text but above the background. As Photoshop doesn’t offer any shape handling beyond the basic rectangle and circle tools this is actually quite difficult and eventually involved adding a new layer, creating a path with the pen tool and applying a fill to that. For serious logo work I would soon have had to turn to importing files from a drawing program like Illustrator.
Theoretically I could then use Photoshop’s Save As Copy command to save the image directly to GIF, but the options provided here are virtually useless as they give no feedback. Essentially GIF compression works by cutting down the 16 million potential colours in an RGB image to a palette of 256 or less. As such it immediately cuts the size of the file by a third from 24-bit to 8-bit. Moreover it then enables high levels of compression of the resulting areas of flat colour by enabling sequences of the same colour to be abbreviated so that, for example, a 100 green pixels in a row can be stored in just two bytes as Green(100). As such successful GIF handling is all about choosing the right palette and ensuring that the original colours are converted to this palette exactly as you want them to be.
To be able to do this it’s essential that you can see what’s happening and in Photoshop the only dialog that offers the necessary control with a live preview is the Image>Mode>Indexed command. As we don’t want to lose our original RGB image it’s first necessary to Save As a new file, which makes the fact that Photoshop insists on flattening all layers before changing to indexed mode slightly less irritating. Because we designed our image with only three colours it’s not surprising to find that the preview of the indexed image with the default Exact palette option is identical. What is surprising is that the number of colours reported in the image is 139! This is because Photoshop automatically "anti-aliases" text, mixing the edge pixels of the text with the background colour to create a much smoother and more readable effect.
Even so 139 colours is still well within GIF’s 256 limit and so saving our file as a GIF is lossless in terms of quality. Moreover thanks to GIF’s compression scheme it produces a file of only 10k, a compression ratio of 35. For our simple test file, the GIF format has matched the best compression ratio that JPEG could offer and with no loss of quality. More interesting, however, is what happens with original images containing more than 256 colours. To test this I replaced the solid background in the original test file with two rainbow gradients, one horizontal and the other vertical, and went through the same procedure.
This time rather than an Exact palette, Photoshop creates an Adaptive palette based on the frequency with which each colour appears in the image. It then has to map those colours that it is discarding to the colours it is keeping. The default solution to this is to apply "dithering" which attempts to simulate missing colours by creating a pattern of available colours to fool the eye. Because the palette is adaptive our main colours for the text and triangular flash are unaffected, but the background gradient appears very different depending on which of the three main dithering options is selected. "None" simply maps each pixel to the nearest available colour which results in very noticeable bands. "Pattern" creates less obvious banding but with a clearly discernible halftone grid effect. Finally, "Diffusion" creates a much smoother though still clearly granulated effect.
In terms of appearance there’s no question that the diffusion dithering is closest to our original image, but we also have to take file size into account. For the image with the vertical gradient the option with no dithering is 17k, but dithering pushes this up to 22k. Even worse, for the image with a horizontal gradient the sizes are 28k and 32k respectively. In fact this shouldn’t really be surprising. Dithering works by deliberately mixing up pixels so that it inevitably breaks up the long sequences of a single colour which is how the GIF compression scheme works its magic. This also explains why the horizontal gradient is such a disaster as it virtually guarantees that every pixel in its line is different to its neighbour. The clear moral is to avoid GIF dithering and gradients if you can and as such I’m happy to return to the simpler three colour image.
Copyright 1995-2002, Tom Arah, Designer-Info.com
Next -----> 7. File compression and Winzip
This article is reprinted in full from Designer-Info.com without permission. Please read the web version of this document if possible. Unfortunately web Pages disapear with great frequency and I feel the following article is of great merit.
Understanding GIF.
Creating a GIF file could hardly be more different than creating a JPG. To begin with rather than simply scanning a photograph the illustrative image has to be originated from scratch. To create a typical test GIF, I created a similar 300 x 400 blank image with a solid green background. I then added some simple blue text which thanks to Photoshop 5’s new type layers remains editable. I than wanted to add a triangular red flash effect behind the text but above the background. As Photoshop doesn’t offer any shape handling beyond the basic rectangle and circle tools this is actually quite difficult and eventually involved adding a new layer, creating a path with the pen tool and applying a fill to that. For serious logo work I would soon have had to turn to importing files from a drawing program like Illustrator.
Theoretically I could then use Photoshop’s Save As Copy command to save the image directly to GIF, but the options provided here are virtually useless as they give no feedback. Essentially GIF compression works by cutting down the 16 million potential colours in an RGB image to a palette of 256 or less. As such it immediately cuts the size of the file by a third from 24-bit to 8-bit. Moreover it then enables high levels of compression of the resulting areas of flat colour by enabling sequences of the same colour to be abbreviated so that, for example, a 100 green pixels in a row can be stored in just two bytes as Green(100). As such successful GIF handling is all about choosing the right palette and ensuring that the original colours are converted to this palette exactly as you want them to be.
To be able to do this it’s essential that you can see what’s happening and in Photoshop the only dialog that offers the necessary control with a live preview is the Image>Mode>Indexed command. As we don’t want to lose our original RGB image it’s first necessary to Save As a new file, which makes the fact that Photoshop insists on flattening all layers before changing to indexed mode slightly less irritating. Because we designed our image with only three colours it’s not surprising to find that the preview of the indexed image with the default Exact palette option is identical. What is surprising is that the number of colours reported in the image is 139! This is because Photoshop automatically "anti-aliases" text, mixing the edge pixels of the text with the background colour to create a much smoother and more readable effect.
Even so 139 colours is still well within GIF’s 256 limit and so saving our file as a GIF is lossless in terms of quality. Moreover thanks to GIF’s compression scheme it produces a file of only 10k, a compression ratio of 35. For our simple test file, the GIF format has matched the best compression ratio that JPEG could offer and with no loss of quality. More interesting, however, is what happens with original images containing more than 256 colours. To test this I replaced the solid background in the original test file with two rainbow gradients, one horizontal and the other vertical, and went through the same procedure.
This time rather than an Exact palette, Photoshop creates an Adaptive palette based on the frequency with which each colour appears in the image. It then has to map those colours that it is discarding to the colours it is keeping. The default solution to this is to apply "dithering" which attempts to simulate missing colours by creating a pattern of available colours to fool the eye. Because the palette is adaptive our main colours for the text and triangular flash are unaffected, but the background gradient appears very different depending on which of the three main dithering options is selected. "None" simply maps each pixel to the nearest available colour which results in very noticeable bands. "Pattern" creates less obvious banding but with a clearly discernible halftone grid effect. Finally, "Diffusion" creates a much smoother though still clearly granulated effect.
In terms of appearance there’s no question that the diffusion dithering is closest to our original image, but we also have to take file size into account. For the image with the vertical gradient the option with no dithering is 17k, but dithering pushes this up to 22k. Even worse, for the image with a horizontal gradient the sizes are 28k and 32k respectively. In fact this shouldn’t really be surprising. Dithering works by deliberately mixing up pixels so that it inevitably breaks up the long sequences of a single colour which is how the GIF compression scheme works its magic. This also explains why the horizontal gradient is such a disaster as it virtually guarantees that every pixel in its line is different to its neighbour. The clear moral is to avoid GIF dithering and gradients if you can and as such I’m happy to return to the simpler three colour image.
Copyright 1995-2002, Tom Arah, Designer-Info.com
Next -----> 7. File compression and Winzip