• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

danblee.com

Tutorials & Knowledge Base Articles for System Administrators who wear many, many hats.

  • Home
  • About
  • Ask Me
  • DBLHost.com

Photoshop Color Shift in “Save For Web”

November 17, 2011 by Dan B. Lee Leave a Comment

If you’ve spent as many years as I have designing websites using Photoshop, you’ve most definitely run into the quirky little speed bumps that must be passed in order to turn Photoshop into a better tool for creating images for the web. After all, Photoshop isn’t just for websites; the name alone will tell you that. Developers understand this and take this in stride. Yet even though we do some gnarly things in order to make our work web-friendly, I find this little quirk to be the most detrimental to all Photoshop users.

Photoshop changes the colors of images when I save for web

Photoshop knows that not all monitors produce the same colors, and not all operating systems display colors in the same manner. Photoshop allows someone creating images the opportunity to adjust the way images are viewed on different mediums using color profiles. These color profiles may be friends to some but enemies to others, depending on what you’d like to accomplish.

This image color changing phenomenon, now popularly known as the Save For Web (..and Devices) Color Shift, requires just as much research and understanding as the pen tool. Here’s a great way to test out your color options, including profiles and sRGB.

  1. Using Photoshop CS3 or higher, create a new 500 x 500 image.
  2. Put a super bright color on top of another super bright color.
  3. With just default settings, head to File > Save For Web (..and Devices), and save the file.
  4. Open up that image in a browser and check out the saved image and the PSD image side by side.
  5. For further testing, take a screenshot of the saved image, open it up in Photoshop, and select the colors with the eye dropper tool. Can you see a difference?

You’ll find my example below.

I made a 100 x 100 image with an orange background of #ff9900 with a red heart of #ff0000.

I placed it on top of a 250 x 250 html square. A screenshot of the outcome shows the difference between the two colors.

The resolution?

Easier said than resolved, really. It depends on what you want. If you’re creating stand alone images such as pictures then Photoshop is helping you out and doing the right thing by assigning color profiles. But if you’re interested in blending images, such as the images that make up the layout of your website, with backgrounds then you’re going to want dead on color accuracy. I can’t give you the end all answer because this topic is still wildly debated. I can, however, give you the options to tweak and the settings that I use to make website design more accurate.

Settings that have worked for me

  1. Head to View > Proof Setup > and select Monitor RGB.
  2. Now go to Edit > Monitor Settings > under RGB Settings change the setting to “Monitor RGB – (Your Computer Name)…”
  3. Finally, when you are finished with your image and head to File > Save for Web (…and Devices), you’ll want to make sure that “Optimized” is not checked, “Convert to sRGB” is not checked, and you’re previewing in Monitor Color.

Why it’s not working for you

That’s probably the trickiest part of all of this. You may find the outcome half as accurate as you want it to be in certain browsers or while using certain monitors. Not everyone will be satisfied. These are the variables you’ll want to play with:

  1. Converting to rSGB when you save or not.
  2. Using an ICC profile or not.

The best I can give you is a big good luck, a pat on the back, and a “hope you figure out what you like.” It’s a shame there are so many options that we have to struggle with, but what would Photoshop be without options? Imagine building websites with MS Paint.

Filed Under: Adobe Photoshop, Website Design Tagged With: Color Shift, Photoshop, Web Design

Primary Sidebar

Categories

  • Active Directory
    • Group Policy
  • Adobe Photoshop
  • Browsers
    • Chrome
  • Cloud Based Technology
    • Citrix XenApp
  • ConnectWise
    • LabTech
  • Dell
  • Internet Service Providers (ISPs)
  • iPhone
  • Linux
    • CentOS
    • OpenVPN
    • SaltStack
    • Ubuntu
  • Microsoft Office
    • Lync
    • Microsoft Excel
    • Microsoft Outlook
    • Microsoft Word
  • Microsoft Windows
    • Active Directory
    • PowerShell
    • Windows 7
    • Windows 8 Preview & Release
  • Networks
  • News
  • Off Topic
  • Office 365
  • Peripherals
    • Monitors
  • Printers
    • Local Printers
    • Network Printers
  • Programming
    • Python
  • Riverbed
  • Security
  • Sharepoint
  • Social Media
  • Splunk
  • Storage
  • Switching & Routing
    • Cisco
    • Fortinet
  • Technology Culture
    • Opinion
  • Uncategorized
  • Virtualization
    • VEEAM
    • VMware
  • WAMP
  • Web Hosting
    • WHMCS
  • Website Design
  • Windows Server
    • Exchange 2003
    • Exchange 2010
    • Exchange 2013
    • Microsoft SQL
    • Windows Server 2003
    • Windows Server 2008 R2
    • Windows Server 2012
  • WordPress

Footer

Recent Activity

  • pings on Xerox Phaser 3635MFP Default Admin Username and Password
  • Xerox Phaser 3635MFP Default Admin Username and Password — danblee.com on About Dan B. Lee
  • Estudio Login | LOGINEGG on Toshiba E-Studio Default Administrator Username and Password
  • Estudio Login | LOGINSPENT on Toshiba E-Studio Default Administrator Username and Password
  • Estudio Login | CHARTLOGIN on Toshiba E-Studio Default Administrator Username and Password

Dan Lee

Dan B. Lee works at SyApps, LLC., a Managed Hosting Solutions Firm, as a Senior Network Engineer. Dan has a decade of IT experience and specializes in a number of different disciplines including Virtualization, Web Site Hosting and Design, Network Security, Data Center Architecture, Local and Remote Server Hosting, and Backup & DRS Solutions. Read More…

Links

  • Home
  • About Dan B. Lee
  • Ask Me
  • Privacy Policy

Copyright © 2021 · Genesis Child Theme on Genesis Framework · WordPress · Log in