Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the biggest problems that we face as web designers today is something called color shifting. By this I mean that the colors of graphics look differently or shift when they're loaded in a web browser versus what they look like when they're inside of Photoshop. While there are many theories on how to remedy this problem, there is one tried- and-true method that I use especially when I'm creating web graphics. I have to warn you though: no matter what you do, it is impossible for your graphics to look exactly the same across every monitor. Macs, for instance, will display graphics a little lighter by default, as opposed PCs.
And monitors themselves show all sorts of different color shifts and variations based on their individual age and settings. This is not something that you can control and certainly not something that you should beat yourself up over either. The key here is to calibrate your monitor as close to neutral as possible and use the method that I'm about to show you to ensure that your graphics look as good as possible across multiple browsers and screens. And then just prepare yourself to gently explain to your clients why their graphics might look a little different on that monitor that they bought back in 1995.
The first thing we need to do is we need to redefine how Photoshop interprets the color data that our images are using. So let's go into Photoshop and I'm going to go up to the Edit menu and go down to the bottom and choose Color Settings. Once I'm inside of the Color Settings dialog box, I'm essentially going to disable the profiles in Photoshop by changing this top dropdown from North American General Purpose 2 to Monitor Color. I'm also going to uncheck this box down here at the bottom that says Ask When Opening.
I do not want Photoshop to come up and warn me about profile mismatches, because I don't want my images inside of Photoshop to have profiles at all. You can see here the Color Management Policies are completely turned off. So now, once I have Monitor selected as my preset and I've also unchecked Ask When Opening, you'll see now it says Custom at the top. I can actually save this as a new preset, call this Web Design, and hit Save. I'll hit OK, and then from here I'll hit OK again.
Now I'm going to go up to the View menu. Inside of the View menu, I'm going to choose Proof Setup. Under Proof Setup, I'm going to go down and I'm going to choose Monitor RGB. This tells Photoshop not to manage the colors that we see on our images while we're working. Here's a little extra tip: if you'd like to test out how your images are going to look on both the Mac and PC while you're actually working inside of Photoshop, go back into the View menu, choose Proof Setup again, and then find something like Macintosh RGB or Internet Standard RGB to see the differences between the two.
Just remember to always go back and change to Monitor RGB so that you're not accidentally developing for only one platform. That would not be good. So I'll select Monitor RGB and I'm ready to go. Finally, I need to go into the Save for Web dialog box. So I need to create a blank file-- just hit Command+N or Ctrl+N. And the size doesn't matter whatsoever. I'll just hit OK to the defaults. And then I'm going to go up to the File menu and choose Save for Web, or you can hit the keyboard shortcut Shift+Option+Command+S on the Mac, Shift+Alt+Ctrl+S on the PC. And from inside of this dialog box, I want to make sure that Convert to sRGB is unchecked.
By doing this, I'm ensuring that the graphics that I export out of Photoshop will not have a color profile assigned to them, and thus they have the best chance of displaying properly across multiple screens and browsers. Once I have that done, I can go ahead and just hit Done, and now anytime I go back to File > Save for Web, you'll notice that that Convert to sRGB is now unchecked, which is exactly what I want. I can hit Escape to get back out of there. So there you have it, my three- step workflow for effectively changing Photoshop's color settings for web design.
If after doing this you still see those subtle color shifts or any big changes in your browser, chances are you haven't calibrated your monitor properly. Calibration software and tools are well worth the investment. So if you haven't already, go and pick up those tools ASAP. You'll be glad you did.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.