College Web Guy

Add this to the “bane of my existence” category.

Color profiles, specifically color profiles in Photoshop have periodically kicked dirt in my eye, and resulted in many a long pause of confusion.

And yes, I know there are thousands of web designers out there who haven’t the slightest knowledge of CMYK/process color for print, and no, I’m not one of those people. I had to slug it out with old men operating 19th century printing presses to get my Art/Design Degree and I proudly wear those scars, …speaking two languages proficiently: English, and Pantone.

So how could this color profile management stuff possibly be so frustrating? We’re talking RGB for crying out loud.

The Screen Capture

Screenshots, or screen captures will fan the flames of color profile confusion; especially if you’re working on a mac. I’m an APPLE-SHIFT-4 addict, and although I can’t speak for the majority of web designers, I rely on screenshots.

Instead of going back to source files, often I’ll use a screen capture as a starting place for a design. In many cases there AREN’T source files, so you’ve got no other alternative.

So, you take a screen capture. And you open it in Photoshop. (Who uses Fireworks anyway, right?) And you are immediately faced with this prompt:

This decision the has feel of a Choose Your Own Adventure book.

You have three options. Choose wisely, and the colors of your web graphic will display correctly in all browsers. Choose poorly, and, not so much. Your story is over. Start again.

Lucky for us all, there are people like Dave Shea to offer guidance during these uncertain times.

Dave had a recent post called Shifting Back, in which he addresses many of my color profile quandaries.

“The key lies in conversion. Photoshop has the ability to convert between profiles, and keep colour levels relatively intact when doing so. What we need is to take the now properly-profiled sRGB file and convert it back to raw RGB values. Under Edit > Convert to Profile, you get a “Destination Space” dropdown that will allow you to choose between various profiles. What you want is your monitor’s working RGB profile (which is effectively the same as saying “no colour management at all”). On my iMac, the option I select is called “Working RGB – iMac”. If you don’t see an equivalent for your monitor, you could select “Generic RGB Profile”, but it’s probably best to first load up Photoshop’s global colour settings (Edit > Color Settings) and make sure your default RGB space is set to “Monitor RGB”. If it’s set as your default, your monitor’s profile ought to show up in the destination space dropdown.”

Did you get all that?

It’s also worth mentioning how Dave starts out his post:

Colour profiles in imaging applications are a sticky issue at best. The path of least resistance when producing web graphics is turning them off entirely and ignoring the whole mess, which is pretty much what I’ve been doing for years.

He references an earlier post about Mac Gamma and Screenshots in which a commenter provides a golden key:

Brian Warren points out that Cmd + Ctrl + Shift + 4 copies the screen shot to the clipboard instead of dumping it to a file. Pasting that into an open document seems to alleviate any profile matching problems with screen shots. Excellent!

So, there you have it. Screen captures on a mac can lead to problematic, amateur, color shifts. Personally, when a fellow web developer has to point those errors out to me, …he might as well be at my dinner party, pointing out a cockroach in his salad. Embarrasing.