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.

Leave a comment