Color Management for the Web in Photoshop Video

By: Guest More than a year ago

If you're telling people to softproof an image for Monitor RGB, at least explain to them that the image will only look the same as that softproof *on their monitor, using a non color managed application*. Lately more browsers are getting color managed, so will display the same as PS does. sRGB should be used for web images. On OSX, preview is color managed (unlike Windows P&F Viewer, so Mac users won't see this difference between PS and Preview. Safari is also color managed, so they won't see a problem there either (as long as they embed an icc profile) At least you don't advise to set the monitor profile as a working space, so I guess that makes this advise only a bit out of date instead of terrible ;)

Reply to this Comment

Color Management for the Web in Photoshop

Hello everybody, Yanik here for Yanik’s Photo School, and today I’m going to my reader e-mail bag and looking at the question that you guys have that is very pertinent, I actually asked myself that question a few years ago and I found the solutions, so basically your question is this: “How come when I saved my image from Photoshop onto my computer, I look at the saved image, and I look at what in see in Photoshop and it’s not the same colors?” Actually the colors are bit more saturated on the saved image and the blacks are a bit blacker, so whether you viewed it on your computer or on the web, that’s what it’s going to be like. Part 2 of that question is “how can I solve this?”by getting the right color space in Photoshop right away so I can post process my image with the right colors for computer or monitor, or the web. And I’ll be answering that question right now for you guys. Now let’s look at an example here; this is an image that I’ve just opened up in Photoshop, I haven’t played with it or anything like that, and this is the same image, boom, that we see in the Windows picture in fax viewer, which is the default picture viewer in Windows, I’m not sure about Macs, but you guys can look at that, there are too. So we can see that the right image that we see in the default Windows Picture viewer is more saturated and the blacks are blacker, if you look at the side of the glass, the bottom here, the blacks are a lot blacker than on the left image. So of course, this is a problem because if you had post processed your image to look this way and you don’t want it that saturated, then you’re screwed. So how can we check things up in Photoshop so that you can actually feed the image this way and then you can post process it the way you want and you’ll know that the output image will be exactly what will be seen on your computer and on the web. Alright, it’s actually fairly simple; let me just close this image here, come back to our image. Now basically it has to do with the Proof set-up that we see here under the View Menu option, if I click on that, the first one on top is called Proof set-up, and a sub menu appears, and you got a whole bunch of proof set-up, that’s used mostly for printing. Now in our case we’re not printing, we’re just saving it on our computer and, or uploading it to the web but we want to make sure the colors are correct. So by default, Photoshop puts it to Windows RGB, but what we need to select is Monitor RGB, now if you select it, it will always have a check mark there, so you think that by default, all your images will be opened with Monitor RGB. Unfortunately that’s not true, alright, so we actually have to go there every time we open an image, go into View, Proof Set-up and click on Monitor RGB, or you can save yourself the headache and create a shortcut key. I’ll show you how to do that in a second, actually that could be a whole other video but I’ll show it you quickly here, and you can see it’ll put the shortcut right here, for me it’s F1. So it only took a few days for me to get used to it, every time I open an image down in Photoshop, I press F1 before I start post-processing my images. So, since you don’t have a shortcut key, View, Proof set-up, Monitor RGB, as you can see the colors are now more contrast, that the blacks are blacker, if I pull on my Windows viewer image, you can see that the colors are exactly the same. And this would be my starting point before post processing my image and I’ll know that my output image will be exactly what I see in Photoshop. Now how to quickly set-up that shortcut key, you got to go into Edit, Keyboard shortcuts, and basically you have to fiddle through the menu here and look for the View menu, select that, open it up, Proof Set-up shows up here, and you can see Monitor RGB down here, there’s an F1 key, and here you just type in the key you want and after that you just click on Accept and then OK, and you’re done and you have your shortcut. I hope you enjoyed this video tutorial on getting the correct colors in Photoshop, exactly what you see for the web and your computer. This is Yanik from Yanik’s Photo School signing out, see you later, ba-bye.

Yanik's Photo School

Photography Tutorials and Tips

http://www.yanikphotoschool.com/

Hello everybody, Yanik here for Yanik’s Photo School, and today I’m going to my reader e-mail bag and looking at the question that you guys have that is very pertinent, I actually asked myself that question a few years ago and I found the solutions, so basically your question is this: “How come when I saved my image from Photoshop onto my computer, I look at the saved image, and I look at what in see in Photoshop and it’s not the same colors?” Actually the colors are bit more saturated on the saved image and the blacks are a bit blacker, so whether you viewed it on your computer or on the web, that’s what it’s going to be like. Part 2 of that question is “how can I solve this?”by getting the right color space in Photoshop right away so I can post process my image with the right colors for computer or monitor, or the web. And I’ll be answering that question right now for you guys. Now let’s look at an example here; this is an image that I’ve just opened up in Photoshop, I haven’t played with it or anything like that, and this is the same image, boom, that we see in the Windows picture in fax viewer, which is the default picture viewer in Windows, I’m not sure about Macs, but you guys can look at that, there are too. So we can see that the right image that we see in the default Windows Picture viewer is more saturated and the blacks are blacker, if you look at the side of the glass, the bottom here, the blacks are a lot blacker than on the left image. So of course, this is a problem because if you had post processed your image to look this way and you don’t want it that saturated, then you’re screwed. So how can we check things up in Photoshop so that you can actually feed the image this way and then you can post process it the way you want and you’ll know that the output image will be exactly what will be seen on your computer and on the web.
Alright, it’s actually fairly simple; let me just close this image here, come back to our image. Now basically it has to do with the Proof set-up that we see here under the View Menu option, if I click on that, the first one on top is called Proof set-up, and a sub menu appears, and you got a whole bunch of proof set-up, that’s used mostly for printing. Now in our case we’re not printing, we’re just saving it on our computer and, or uploading it to the web but we want to make sure the colors are correct. So by default, Photoshop puts it to Windows RGB, but what we need to select is Monitor RGB, now if you select it, it will always have a check mark there, so you think that by default, all your images will be opened with Monitor RGB. Unfortunately that’s not true, alright, so we actually have to go there every time we open an image, go into View, Proof Set-up and click on Monitor RGB, or you can save yourself the headache and create a shortcut key. I’ll show you how to do that in a second, actually that could be a whole other video but I’ll show it you quickly here, and you can see it’ll put the shortcut right here, for me it’s F1. So it only took a few days for me to get used to it, every time I open an image down in Photoshop, I press F1 before I start post-processing my images. So, since you don’t have a shortcut key, View, Proof set-up, Monitor RGB, as you can see the colors are now more contrast, that the blacks are blacker, if I pull on my Windows viewer image, you can see that the colors are exactly the same. And this would be my starting point before post processing my image and I’ll know that my output image will be exactly what I see in Photoshop.
Now how to quickly set-up that shortcut key, you got to go into Edit, Keyboard shortcuts, and basically you have to fiddle through the menu here and look for the View menu, select that, open it up, Proof Set-up shows up here, and you can see Monitor RGB down here, there’s an F1 key, and here you just type in the key you want and after that you just click on Accept and then OK, and you’re done and you have your shortcut.
I hope you enjoyed this video tutorial on getting the correct colors in Photoshop, exactly what you see for the web and your computer. This is Yanik from Yanik’s Photo School signing out, see you later, ba-bye.

Transcription by: Scribe4you Transcription Services

Color Management for the Web in Photoshop

Color Management for the Web in Photoshop -

Color Management for the Web in Photoshop -