Web Background Color Glitches for Penn State Logo

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.

This entry was posted in Graphics. Bookmark the permalink.

Leave a Reply