Solve Colour management Problems during Designing Website or Apps in Photoshop

Rate this item
(2 votes)
Color Management in Photoshop Color Management in Photoshop

In dinosaur era of web designing, we were simply taking help of Flash or Photoshop and sliced images in pieces to call by HTML in table layout chiefly done by Dream viewer like IDE. Later on, we entered into the table-less web designing era where CSS was making backgrounds and most of graphics through repeat background properties or styling through color codes.

Before images were appearing directly in the browsers with their intact color properties, but with CSS and moreover, due to fragmentation in screens, OS and device hardware color display becoming a challenging problem. Therefore, today I have initiated this post to make color management easy during web designing process using Photoshop like graphics designing software in order to match colours across the devices.

 

For printing world color management involves RGB, CMYK, and Grey scales and trading off between them is well-known techniques since long. Whereas for TV like analogous devices taking help of real screens (broad cast monitors) make solutions handy. Unfortunately, web and application interface designing is bit different from the above as we have same device type (monitors/mobile screens) to look our artwork, but operating system and several hardware issues making problems more complicated.

 

For instance, if you are going to editing same image in the different version of Photoshop, color setting becomes tricky even becomes more tricky, when you have different operating systems where Photoshop is running. Image file formats are playing crucial parts due to their different algorithms to store color data. Finally, color sources like images, CSS, JavaScript, HTML, Java, Objective C, etc. are making our lives difficult when we are going to match colors everywhere.

What We Want

Our final target is to get color values from the Photoshop that truly display the color across the devices whatever we are looking at the time of editing in Photoshop. Means we want to nullify all factors, which are affecting the color display on the monitors of the web designers or graphics designers. This is only the perfect ways to obtain absolutely pure color code that never show any differences across the devices as well as browsers and operating systems of the devices that displaying your website or mobile app.

The Best Possible Solutions

Basically color management in Photoshop is applied at the end of the processing chain and on entire display. Against these, Photoshop color management is only applicable to the current working windows (image portion only) and restricted up to the open file.

 

This the reason for the problems you see differences in colors across the devices because operating system’s color management is applied on the top of the Photoshop’s color management. Therefore, our first duty is to avoid the color management conflict by disabling the color management mechanism of Photoshop since we are not able to stop color management process of the operating systems of the various devices used.

Steps to Disable Color Management of Photoshop

 

Color Management in Photoshop

 

In above figure, I have illustrated those important steps in brief. However, I have prefer somewhat backward version of Photoshop here as we most of have not reach at the latest versions due to financial constraints for its costly licensing system.

 

  • Step 1: Go to Edit → Color Settings

    (This is same in all versions)

  • Step 2: In resulting color setting dialogue box set the working space for RGB to Monitor RGB.

  • Step 3: On top of the color setting dialogue box set setting parameter as “Color Management Off”

    (In latest version this step becomes different and you have to open a document and go to Edit → Assign Profile, then set it to Don’t Color Manage This Document. Unfortunately, you have to repeat this step for each new document you open in latest version of Photoshop CS series.)

  • Step 4: Now assure that the View → Proof Colors is turned off.

  • Step 5: Finally, save file with Save for Web & Devices option and also confirm that Convert to sRGB is turned off. 

Remember

Here you are not go to convert to profile instead, go to assign profile because fundamentally, each Photoshop document has its own color profile different than that of color data stored in the file. Therefore, when you assign color management to the profile it affecting only the profile not underneath the data stored in the file so you will get same color in any device.

In case you select Convert to Profile, you will miss the color consistency and the screen of devices will change the color data in the file forever. Thus, don’t take risk.

 

At last, I hope this post will help you to trading off an image file between various graphic design software like Photoshop, Illustrator, Fireworks, Corel Draw, etc. without affecting color management and consistency in display across the devices. Moreover, you have now insight that how the web designing and graphics designing team at Lujayn is giving excellent user experiences due to their expertise and skills for web designing, mobile app UI designing, and responsive designing