Tuesday, May 12, 2009

Setting a HEX color for GIF format graphics


NOTE RULE: you cannot change gradients in a GIF file.

This is a very basic tutorial on obtaining an accurate HEX color in a GIF file for use on the web.

NOTE Open a new file.
NOTE Click the foreground color chip in the tool box

The color chooser will open.
At the bottom will be a text field with a # pound mark. Paste or key your HEX code into that field. The swatch instantly becomes that color.
the color picker

BEWARE: If you want "pure" web safe colors, click the button in the lower left of the dialog. But beware, if the color is not "strict" HEX, it will shift, and likely go off-color from what you wanted.

Now return to the file and hit Option/Delete (Alt/Delete) and the file fills with the color.
NOTE Use File > Save for Web

In that dialog, set the format to GIF, and the "number of colors" to TWO (2)

HEXYou now have a GIF file with the pure HEX number color. If you did not click "Only Web Color" then it will be "perceptual" web color -- which will work nicely on today's Web browsers. (The file at the right)

Making a Gradient GIF is the hard part:

NOTENow, convert that file to RGB. (Image > Mode > RGB)

To validate the blue is still the right blue, use the Eyedropper (Tap "i") and sample the color. Now re-open the Color-Picker by clicking on the color chip in the Tool bar.

NOTENow tap the letter "x" to switch background and foreground colors and set the foreground to WHITE.
NOTE Now tap the letter "g" to get the Gradient tool, then drag it in the image window. You'll create a gradient from your HEX blue to white.

BEWARE: many colors generated in that gradient will NOT be web safe HEX colors.
NOTE Now select File > Save for Web
In the resulting dialog, it should still say "Two colors" ... and it will look very pixelated and rough.

NOTE Now use the Colors pull-down and set to 32 colors.

Gif Saver
blue GIF as gradientNotice the samples spread out giving graduated steps, and your image becomes much more smooth. Change the Pull-down under the "GIF" button to "Perceptual" and it should get smoother yet.

Experiment with this process until your file looks the way you want it to.

At right is our resulting GIF file. Notice there is some banding, and it is not as smooth as one might like -- we stopped at the 32 color mark for this demonstration.

No comments:

Post a Comment