How to Use Photoshop Color Profiles for Web Images – proof colour

8/7/2019 How to Use Photoshop Color Profiles for Web Images – proof colour

http://slidepdf.com/reader/full/how-to-use-photoshop-color-profiles-for-web-images-proof-colour 1/12

How to Use Photoshop Color Profiles for Web Images

Dmitry Fadeyev · 30 Jul, 2008

I’ve noticed lately that some web designers don’t seem to be

using color profiles correctly in Photoshop. If you’ve eversaved images for the web and discovered that they come outslightly lighter and more desaturated than what you saw

when you worked on them, this guide is for you.

There are some blog posts that advocate disabling colorprofiles in web images to “fix” this problem. This isn’t theright way to go about it because modern browsers likeFirefox 3 and Safari do use color profiles, so you can get much better results by using themcorrectly. What’s more, color profiles are dead simple to use. Here’s how…

NOTE: The following instructions are for Photoshop CS3 running on OS X, but it will be thesame for Windows and similar for older versions of Photoshop.

First, we need to know what profile to use for your web images — that’s the sRGB IEC61966-2.1

profile. It is standard across many PC monitors and so is recommended for use on the web. To set your working space to this profile, open up the “Edit” menu, and click on “Color Settings…”

You’ll be presented with the following options:



Look at the “Working Spaces” section and select the sRGB IEC61966-2.1 profile from theRGB drop-down. The other settings aren’t relevant here since we’ll only be working with RGB for

web images.

Now you’ve got the working space set up correctly, but we’re not done. What you see now isn’t

what you’ll see when you save the image for the web because what you see isn’t affected by yourmonitor settings â€” to see the “real” colors we need to use color proofing.

Click on the “View” menu and then on “Proof Setup”. You should see another selection. We want to see the image as it will appear on our monitor, so select “Monitor RGB” at the bottom.

Finally, we need to activate color proofing as it is off by default. Click on the “View” menu again,

and click on “Proof Colors” if there is no check already next to it.



Once you click on it, it will be checked indicating that the colors are now being proofed using yourmonitor settings. That’s it, what you see now on your screen will be pretty much what you’ll get

when you save the image.

People will still see the colors slightly differently across many devices and operating systems (forexample, default OS X gamma differs to the standard Windows PC gamma, so images are a little

brighter — if you are working on a Mac it is advised to set your gamma level to 2.2) but the output

will still be consistent with your working space and will be ready for modern browsers that do useembedded color profiles.

74 Responses:

Travis Neilson

30 Jul, 2008

Awesome. ive been wondering about that for a little bit now. thanks. found your postthrough design float, ill have a longer look around your site. awesome so far. thanks again.

1.

Dmitry 30 Jul, 2008

Thanks Travis, I’m glad you found this useful.

One thing to note is that the “Proof Colors” mode is off by default on every new image, so you have to make sure to turn it on â€” can use a shortcut (Command+Y on OS X orControl+Y on Windows). I’m not a Photoshop guru so not sure if it’s possible to turn it on by default.

2.

Max | Design Shard

31 Jul, 2008

ohh, thats a really good post, extremly helpful, im glad you posted thanks.

Max | Design Shard

3.

Thomas

31 Jul, 2008

This tutorial is recommended reading for anyone who designs for screen.

Thank you Dmitry.

4.

Kevin Cannon31 Jul, 2008

Personally, I just turn off all colour management. That way what’s on screen, is just the way

5.



it will be in your browser.

Does this offer any advantages?

Julia RomÃ¡n

31 Jul, 2008

Well, IÂ´ve been working with web images for the last few days, so this has been a greathelp. Good Blog!!Un abrazo y saludos desde Guadalajara, MÃ©xico.

6.

Dmitry

31 Jul, 2008

Thanks everyone for the positive comments.

Kevin â€” good question :) A lot of browsers right now don’t use color profiles, but thenewer ones do (Safari by default, and Firefox 3 if you turn it on). Basically, your colorsshould be richer and stronger with profiles (though you’ll only see the difference in a

modern browser).

Here are two great links with lots of example comparison images:

http://www.gballard.net/psd/go.....files.html

http://www.dria.org/wordpress/.....04/29/633/

I think it’s not crucial for you to use color profiles today, but as they will be used by all browsers in the future, I think it’s a good idea to know how to set them up.

7.

James

1 Aug, 2008

Great just what I was looking for!

I always make sure my “new document” in Photoshop uses sRGB2.1 as well but didnt know about the “View > Proof Setup”.

I tend to turn off Proof Colours now though so that it looks the same as the Windows version since most of my clients are on Windows I know how it will look while designing.

8.

Kevin Cannon

1 Aug, 2008

Dimitry – thanks for the explanation. I’ll read up on that with a view to doing it in thefuture.

9.

Mike

3 Aug, 2008

Thanks for this usefull informations…

10.

Shristi

4 Aug, 2008

Thank you for this tips. Very helpful.

11.

gavin12.



4 Aug, 2008

Thats cool, I was wondering if i set this up will i have to change it every time i want to usethe color settings for print? can I save the two diff setups? or even three setups with thePSCS3 standard saved?

Dmitry

4 Aug, 2008

Hi Gavin,

Don’t think there is a faster way to switch color profiles than through the Color Settingsmenu under the “Edit” menu.

You can save the different settings you change in that menu for future use â€” however you’ll have to go back to Color Settings to switch to them though. Not amazing, but it’s nottoo bad either.

13.

loswl

5 Aug, 2008

A great way to switch between color profiles and apply it to all your Adobe Applications isdoing the color setting with Adobe Bridge: Open Bridge > Edit > Adobe Suite Color Settings>> Choose, Adobe North “America web/Internet”(web settings) or choose “North AmericaPrepress” (Print Settings)

*The setting you choose will be applied to all your Adobe Applications.

14.

Flo Brown

6 Aug, 2008

Thank you thank you thank you from another grateful reader. This just saved me a year’s worth of head scratching and adjustment making. You rock!

15.

Digital Fake

7 Aug, 2008

High 5*

Thanks dude.

16.

Arien

15 Aug, 2008

Thank you, quite a useful post.

17.

Dmitry

15 Aug, 2008

loswl that’s a useful tip â€” thanks.

Thanks for the positive comments everyone, I’m happy this post was helpful.

18.

Kevin Yeoh

30 Aug, 2008

Thank you! I’ve been looking for this solution for such a long time and finally its here… I’m working with mostly web interfaces using both PC and Mac, the color problems always

19.



making things complicated all the time.

Tobias Tiefert

2 Sep, 2008

i’ve been looking for this for such a long time. thanx a lot man

20.

Ronald

8 Sep, 2008

Thanks for this. I’ve been struggling with this issue for sometime now. I usually ended upover saturating my images before saving them to make them look normal when i saved themfor the web.

21.

Roc

9 Sep, 2008

That’s what was messing them up! I’ve been wondering what the hell it was, thanks!

22.

Beau12 Sep, 2008

Amen.

23.

Jean's Friend

20 Sep, 2008

Hmmm, great post, but shouldn’t you give cred to the pros posting on said blog aboutdisabling color profiles? Heh.

24.

AoC Gold

22 Sep, 2008

Hello webmaster , Your blog post about photoshop is absolutely great. Easy to understand itand with excellent value. I just stumbled up and dugg your site to digg as good news articleabout photoshop on Monday . Cheers, Mike Brown , keep up the good work !

25.

NoiteIdiotte

22 Sep, 2008

well done, brother

26.

Amir Ardalan

25 Sep, 2008

The issue I find with enabling Proof Colors is that your document will now appear to be adifferent color than the hex code that you swatch from it. if you eyedrop a color inPhotoshop and then paste that hex value into your CSS document, the HTML is NOT goingto match the exported .png.

In other words, with color management and “Proof Colors” enabled, you cannot accurately sample colors from your document within PS to use in your HTML/CSS document, becausethe raw hex has no color profile associated with it.

The solution to this would be to swatch from an exported .PNG but doesn’t that seem like ahassle?

What are the advantages for web graphics with color profiles embedded anyway? I was

27.



always under the assumption that profiles were intended for photographs exported from PS.Can you not get as “rich” or accurate colors by just starting a fresh template with no colormanagement and making the colors appear the way you intend them to look in the firstplace?

mindcrusher

14 Oct, 2008

thanks man, sorted out some minor problems I was having.

28.

Razhluk

26 Oct, 2008

It was my major prob.Solved, a BIG thanks to you.

29.

我是UI »推荐20个于网站可用性及界面设计的网站

13 Nov, 2008

[...] Usability Post是一个于可用性设计的博客。博客文章中提到了很多技巧，比如用页面空白改进用户界面、用Photoshop颜色配置文件设计 web图像等。 [...]

30.

Jeff

27 Nov, 2008

Ive been searching everywhere and was even playing around the photoshop and did exactly what you did today before I saw this post. Thank you for reassuring me my computer wasn’tthe crazy one! Great tutorial!

31.

Ben Walker

27 Nov, 2008Thanks for clearing up a whole load of conflicting advice around the web. I’ve beenstruggling to get my head around this one for ages.

Does anyone have any good advice on a workflow for picking hex refs for style guides? When you’ve finished a design is there an easy way of picking out the background and font colorsfor the CSS developers? Do you have to Save for web and colorpick? Or turn proofing on anduse Digital Color Meter?

Somebody out there must get this right every time. Where are you!? ;o)

32.

electronicsuitcase.net » Blog Archive » November Link Roundup28 Nov, 2008

[...] are still rather mysterious. I’ve now crossed RGB color profiles off that list when I foundthis consise and easy to read post on how to accurately reproduce color when exporting forthe [...]

33.

20个帮你掌握用户界面设计的网站 |瞎折腾

18 Dec, 2008

[...] Usability Post是一个于可用性设计的博客。博客文章中提到了很多技巧，比如用页面

空白改进用户界面、用Photoshop颜色配置文件设计 web图像等。 [...]

34.

November Link Roundup « at work in the cloud

2 Feb, 200935.



[...] are still rather mysterious. I’ve now crossed RGB color profiles off that list when I foundthis consise and easy to read post on how to accurately reproduce color when exporting forthe [...]

Tom van Hoogstraten

22 Feb, 2009

I’ve been looking and asking (including Adobe) for this everywhere and you solved my problem. Thanks a lot.

36.

Jeff Reynolds

4 Mar, 2009

@Amir Ardalan:

While I can see where you’re coming from, I think you’re incorrect; when you view in proof colors, you aren’t changing the RGB or HEX value, you’re just seeing it through a “lens” –that is, you’re telling photoshop to show you these colors as they would be displayed outsideof photoshop.

Therefore, when sampling colors from a document, you would be grabbing the correct HEX values regardless of what lens (in this case, monitor profile) you were looking through.

If I’m wrong and you can document where your concern is popping up, I’d love to see it.

37.

TRAEVINA

24 Mar, 2009

KEEP UP THE GOOD WORK LIL BROTHER

38.

Why Adobe, Why?30 Mar, 2009

Just installed Photoshop CS4 on my new Mac Pro running Mac OS 10.5.6 and am movingfrom using ImageReady on an old G5 running 10.3.9. The second I opened an existing filecreated in ImageReady, disaster struck. Colors are not matching what I see in Firefox. Dideverything mentioned in article above, but still slightly off. In the Color Settings menu,found the Advanced Controls settings (under “More Options” button) had the “DesaturateMonitor Colors By: 18 percent” checked off. Not sure why this was checked by default but

when I unchecked this option, colors are now fairly close, but, not perfect.

39.

caz

2 Apr, 2009

Thanks for this! Always been frustrated with having to correct an image over and over afterseeing it different on the web

40.

Grant

3 Apr, 2009

You fuckin rule, I have been so pissed off about this for a while. Thanks buddy.

41.

Artem Goncharuk

8 Apr, 2009Thanks, Dmitry!

42.



Do you know why the images may still look different in CS4 and FF3 or Safari? I haveexecuted the sequence that you have described but for some reasons images in FF3 aremuch more saturated than in CS4…

Mariano

29 Apr, 2009

Thanks a lot for this article!Finally i can get my designs to look like the final product :)

43.

Alex Canning

1 May, 2009

Great article, it has really helped me out. Given that colour management will be moreprevalent on the web in the future, I am aiming to design with this in mind. Apart fromensuring images have the correct profile, is it possible (or will it be possible) to specify aprofile within the page itself, so that both the page and images match up?

44.

Mary

9 May, 2009

Very nice modern theme thank you. = )

45.

Sillya

19 May, 2009

THANK YOU! It has been driving me nuts. i couldnt figure out why my photographs lookedless colorfull once uploaded. Thank you for your help now i can work in peace. lol

46.

Ian

3 Jun, 2009So I process my images in sRGB mode, but in Proof view for Cinema – and it works fine for

web saving. But if I now want to print the image do I need to turn Proof view off and processthe image again? As the processing I’ve just done is now too dark in sRGB view.

47.

JB

10 Jun, 2009

Dmitry, Incredibly helpful info here, wish I had found it sooner. Many thanks!

48.

20个帮你掌握用户界面设计的网站 -雷鸟映像

15 Jun, 2009

[...] Usability Post是一个于可用性设计的博客。博客文章中提到了很多技巧，比如用页面空白改进用户界面、用Photoshop颜色配置文件设计 web图像等。 [...]

49.

Ashar

26 Jun, 2009

Thank you so much Dimitry.

:)

50.

create own website28 Jun, 2009

thx for great article. today i learn sth new and in the sametime it will help me in the future

51.



Happy Hump Day | Pursuing Photoshop

1 Jul, 2009

[...] How to Use Photoshop Color Profiles for Web Images http://www.usabilitypost.com/2.....eb-images/ [...]

52.

Fotogal » Blog Archive » Oppsett av Photoshop CS3 for web

7 Jul, 2009[...] How to Use Photoshop Color Profiles for Web Images [...]

53.

Julia

11 Jul, 2009

Thanks so much for the post. One question. I’m designing on a PC (don’t ask me why) while90% of my viewers are on a Mac. So if I set my Proof Setup to Mac RGB, is that pretty much

what it would look like on a Mac? (I hope not, because it’s looking a lot lighter.)

54.

gold

28 Jul, 2009

Great just what I was looking for! Thanks and greetings from Germany

55.

tamara

30 Jul, 2009

nice!it was just what i was looking for.thanks :)loved your blog.

56.

Ajustes de color en Photoshop optimizados para Web | Uninstallme17 Aug, 2009

[...] How to Use Photoshop Color Profiles for Web Images [...]

57.

xtcommerce

19 Aug, 2009

This is a realy cool tip, thanks for sharing. I will try it on my next steps. Thanks !

58.

il

19 Aug, 2009great info!thank u!!

59.

Ahmed El.Hussaini

21 Aug, 2009

Thanks a lot, great post

60.

Pier Luigi Covarelli

21 Aug, 2009

Sorry, but I don’t agree.

What you’ve done allow you to work inside Phosthop Mac while viewing the final exported

61.



colors: this allow you to create accurate colors for Mac web surfers but PC users still seedifferent colors (not only related to gamma difference).

A better solution is to use color profiles because almost every Mac browser support colormanagement.The key point here is that the non proofed Photoshop image (using sRGB working space)look very similar on that displayed on a PC but, as you say, differ noticeably when exported

for Mac with save for web…. The tip is simple: check the option to include color profile intothe save for web panel.

This way Mac browsers will se exactly what you see inside Photoshop (non proofed image)and PC browsers (even thoose that ignore color profiles) will continue to see closest colors.

Bye.

ardarvin

28 Aug, 2009

In light of Firefox 3.5, and how its new “color correction” feature…that is treating PNGsdifferent than CSS color, I really think this article isn’t right. If ff3.5 is a sign of browsermentality to come, I think the only solution is to delete the color profile info.

See: http://hacks.mozilla.org/2009/06/color-correction/

62.

Kipp

14 Oct, 2009

I don’t get it. Proofing with the monitors rgb defeats the point of using a srgb colour space inthe first place. You may as well just use your monitors colour profile instead?

As far as I can see it this doesn’t solve anything, the difference in display between a mac andpc still persists.

63.

Rob

27 Oct, 2009

Thanks a million for this – its been nagging me for ages and never spotted the proofingoption under view

@Kipp – what is solves is saving images that look the same as when you designed them within photoshop.

64.

Gas Anbieter

2 Nov, 2009

Thanks for this information…Well done

65.

BMI berechnen

4 Nov, 2009

nice blog. thx for helpfull info

66.

Yarra

12 Nov, 2009Good info, thanks

67.



miriam

1 Dec, 2009

Hello, thanks for the great tutorial.

Though I have a question. I hope it’s okay to post it here?The tutorial is not exactly working out for me.

I use Photoshop CS4, and tried to do the same thing that your tutorial (and other tutorials)say about the color management. When I follow the instructions, the copied image from the web DOES look a bit brighter, butstill not as saturated as the original web imagehttps://reader009.{domain}/reader009/html5/0524/5b05e76e499b7/5b05e77bf1943.pngThe background shows the original image, and on the foreground you see the copied imagefrom the web, loaded in photoshop.Is there something else I should do that I am overlooking?

I hope you can help me, this is really a problem at the moment.

Kind Regards,Miriam

68.

Rechnung online schreiben

6 Dec, 2009

Awesome, thank you for sharing.Photoshop is the best graphicprogramm ever.

69.

james

11 Dec, 2009

Thank you, thank you, thank you so much for the tip!

70.

Silber kaufen

15 Dec, 2009

i also thanks for sharing this

71.

20 Websites to Help You Master User Interface Design « Usability – My Love

16 Dec, 2009

[...] Usability Post is a blog about design usability. A couple of blog posts you’ll find sharetips on using white space to improve User Interface and using Photoshop color profiles for

web images. [...]

72.

Ciprian

25 Dec, 2009

Did not work .. so i disabled color profiles when i saved from the web…

73.

Anders Rosenberg

25 Dec, 2009

Thank you :) This was very helpful.

74.

Documents

How to Use Photoshop Color Profiles for Web Images – proof colour