Graphics: September 2007 Archives

Web Background Color Glitches for Penn State Logo

| | Comments (0)

My colleague Dave Stong posted an informative entry on the problems of adjusting the colors of images vs. what the browser displays.

Unfortunately, I know EXACTLY what he's talking about. I create a version of the Penn State logo with a navy blue background to go on a navy blue web page...but the colors are off enough that you get a dorky rectangle around the logo.

On the other hand if you put in a logo with no background color, the edge looks very jagged.

Dave recommends Firefox, but here's what I did for years in Photoshop.

1) Found an image of the Penn State logo and opened it up in Photoshop.
2) I used the paint can to change the background color to match whatever Web hex color value I wanted.
3) When I did a "Save for Web", I set the background color to transparent.

At this point you are left with a logo with a fuzzy blue edge, and the fuzzy blue edge blends in with the background of the Web page and the slight differences go away.

FYI - I eventually created a master file with two layers - a top layer with just the logo and a bottom one for the background color. This made switching background colors a lot easier.

Quick and Dirty Color Check for Web Sites

| | Comments (2)

Since Penn State supports both Mac and PC, it is important to make sure Web site colors look decent on both Mac and Windows. The usual quirk is that colors tend to be paler on a Mac and darker on a PC, so sometimes a site looks fine on a PC, but washed out on a Mac (or fine on a Mac and very dingy on a PC).

Part of the difference is that that the gamma for Mac is set to 1.8 default, while on a PC it's set to 2.2 by default (gamma controls how pixels display color). The 1.8 gamma setting is lighter than 2.2.

I am lucky enough to have a two monitors set up on my Mac, so right now I calibrate my primary monitor to the Mac 1.8 gamma and the second monitor to PC 2.2 gamma.

It's not perfect, but since I've done it, I've been able to see some of the weirder color changes between platforms (warm tones are especially dangerous for some reason), and have been able to find decent compromise colors.

If you don't have a spare Windows, it's a good workaround.