Colour

This tutorial explains how to avoid unwanted color shifts with Photoshop 5.

One of the reasons I decided to write this tutorial is because web graphics are almost completely ignored in the Photoshop 5 documentation. One feature in particular is especially unfriendly to indexed graphics. This feature is the new color management system. While there is an entire chapter in the Photoshop 5 User Guide devoted to explaining the new color management system that Photoshop uses, no where does it siscuss specifically what to do if you are creating work for the web. The Photoshop 5 manual has only a single page that discusses web graphics, which is an astounding oversight.

This new color management system by default will reinterpret files and can cause serious color shifts. This can be disastrous for you if you have graphics that you've carefully created with specific colors (ie, the web palette) in any program other than Photoshop 5, or in Photoshop 5 on another computer with a different color management setup.

Here's an example. I created a file in Photoshop 4 that contained only the 216 colors used in the web palette:

I saved the file as both .tif and .psd, and brought the image into Photoshop 5. Then I indexed both files to the web palette. You can see that Photoshop 5 was forced to dither the image, demonstrating that the colors had been shifted from the original files by Photoshop 5:

These color shifts are happening because Photoshop is trying to correct the color for your monitor and printing setup. These color shifts can happen with any file from any application. They don't appear to happen if you've created a gif in Photoshop 5, and open it again in Photoshop 5 with the same monitor and color management settings.

How do you avoid this if you work with any kind of on screen graphics, whether for web or multimedia? You need to turn off all of the RGB color management options in Photoshop 5. If you also do work for print, you might consider having two installs of Photoshop 5, one for print work and one for web work. Either that or remember to reset the color management options when you use Photoshop.

From the Photoshop menu bar, select File/Color Settings/RGB Setup. On the PC, choose sRGB.

On the Mac, choose Apple RGB.

Under Display using Monitor Compensation, uncheck the checkbox .

Bold Text

Although Adobe brought many improvements to Photoshop 5, one of the main complaints is that you can no longer create bold or italic text from the Text dialog box without having the bold or italic version of a font installed.. This tutorial remedies this with a simple way to create a bold font without needing to have the bold version of a font installed.

1. In Photoshop, select File/New. Create your text using the Type tool. Right Mouse click (Windows) or Control+ Mouse Click (Mac) and select Render Text.

2. Make sure that your foreground color is the same as your type color. Select Edit/Stroke, and use a Width of one pixel and a setting of Center (as seen in the second example, above).

To achieve a bolder look, create the text but adjust the tracking in the text dialog box in order to give a little extra space between the letters. Then apply Edit/Stroke, and use a Width of two pixels and a setting of Outside. (as seen in the third "Bolder Text" example, above).

3. Select Image/Mode/Indexed and save this as a gif file if you'll be using this for the web.

Remember, even though this technique is demonstrated with type, you could also use this effect on clip art, line art, or a logo.

What is the typeface used for the title graphic? It's called Caflisch Script Web, and it's available from Adobe or ImageClub.

Italic Text

Although Adobe brought many improvements to Photoshop 5, one of the main complaints is that you can no longer create bold or italic text from the Text dialog box without having the bold or italic version of a font installed. This tutorial remedies this with a simple way to create an italic font without needing to have the italic version of a font installed.

1. In Photoshop, select File/New. Create your text using the Type tool. Right Mouse click (Windows) or Control+ Mouse Click (Mac) and select Render Text.

2. Select the layer that the type is on. Select Edit/Transform/ Numeric. In the Skew section of the dialog box, enter- 15. If you want to make the font tilt less, put in a smaller number. If you want the font to lean more, put in a larger number, like -30.

3. Select Image/ Mode/Indexed and save this as a gif file if you'll be using this for the web.

What is the typeface used for the title graphic? It's called Decotura, and it's available from ImageClub.