Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
It's time for us to have the talk. You know the talk about color management. I know it's not a fun topic to talk about, but if we mention some things right now and we understand some concepts it'll save us a lot of grief later. Now, for several versions now Adobe has done a great job on having a basic color management engine that applies to all of the design applications, meaning that when I create artwork in Photoshop, or Illustrator, or InDesign, my colors all look the same throughout those applications.
However, I want to talk about some of these settings because it might make sense for you to change some of them to get a better experience when designing for the web. Now, it's important to realize what you see on your computer screen may not be the exact same thing that other people see when they view a web site on their computer, or for that matter when they view your web content on some other kind of mobile device. For example, in general, PCs or Windows- based computers have a different gamma level and that results in artwork appearing a little bit more darker on those devices.
In addition, while some web browsers do support the concept of color management, the reality is that most of them don't. So if you're seeing vibrant colors on your computer screen it's certainly possible that when someone else views their graphic on their computer those same colors may appear washed out. Now, we already know that web graphics are RGB. That's the web color space that we work inside of. However, there are different gamuts or ranges of colors that exist inside of RGB. For example, there is something called Adobe RGB, which happens to be a very large gamut of color, but then there is also something called sRGB.
In fact, this smaller gamut of sRGB is really the gamut that is used throughout the web. So if you work inside of sRGB you're ensured that what you see on your computer screen will match pretty close to what other people see on their devices. In fact, by default Illustrator even converts all of your artwork to the sRGB workspace. For example, if you go to the File menu and choose Save for Web & Devices, you can see over here on the far-right there is a little pop-up menu and if I click on it, you can see there is a setting here that says Convert to sRGB.
This is why some people seems to complain when they're working inside of Illustrator. They may have their color space set to the bigger gamut of Adobe RGB and then when they choose Save for Web or they export to the web they see a color shift occurring. That's because they are seeing their artwork go from the richer Adobe RGB workspace to the sRGB workspace. Now, we really want to keep our artwork set to sRGB. What we want to make sure that we're doing those that when we work inside of Illustrator we're also working inside of sRGB, and that will set our expectations correctly.
This way what I see as I am designing and working inside of Illustrator is representative of what I will expect to get when I export that artwork eventually to the web. So I'm going to click Cancel here and let's open up our color management settings. I'm going to go to the Edit menu and I'm going to choose Color Settings over here. One of the nicest things that Adobe started doing way back inside of the CS2 versions is they've created a way for all the Adobe applications to talk to each other, so they share the same color management settings. As you can see, over here I have an icon and indicates that all of my applications are currently synchronized using the same color settings for consistent color management.
This is a good thing. However, by default Adobe chooses something called North America General Purpose 2. Now, remember, Adobe doesn't know what type of artwork or what type of design work that you do. They just sell shrink-wrapped software so they kind of design their applications to appeal to the lowest common denominator. That so we get this general-purpose setting. You can see over here that where it says Working Spaces, whenever I create an RGB document, Illustrator is going to be using the sRGB workspace. And whenever I create a CMYK document, I'm going to use the SWOP v2 workspace.
So this is actually great because this means when I create a new RGB document, in this case here a web document, I'm already going to be working in sRGB, which is great. The thing to look at though is this one here on the bottom where it says Color Management Policies. Notice over here where it says RGB. When I'm working in RGB it's going to Preserve Embedded Profiles. This means that if I were to place an image inside of my design-- for example, like I have right over here. I have placed this photograph into Illustrator. This photograph originated inside a Photoshop.
It's entirely possible that inside of Photoshop that document was actually created inside of the bigger gamut or the Adobe RGB gamut. Well, since right now Illustrator is set to Preserve Embedded Profiles this means that that image would maintain its profile when I embed that image into Illustrator, so that image could still be using the Adobe RGB workspace. So I will see color shifts when I now go ahead and export this for the web. Again, it just means that what I'm seeing as I'm working inside of Illustrator won't ultimately match what I'm going to see on the web.
If we go back to the Settings over here we can see that there are other ones. For example, a setting called North America Prepress. This is a setting that you might use if you don't do any web work at all. You're simply a print-based designer who always creates artwork that will appear in print. But you'll notice that there is another setting here called North America Web/Internet. If I choose this option, these settings stay the same. I'm still working in the sRGB workspace when I'm using RGB. However, notice that where it says Color Management Policies now, for RGB it says Convert to Working Space.
This means that whenever I place a photograph into my document, in this case this piece right over here, even if this was created in the Adobe RGB workspace it will automatically get converted to the sRGB workspace when I bring it into this document. In this way what I see inside of Illustrator is always going to be sRGB and it'll always be representative of what I'm going to eventually see on the web. In other words, it just sets my expectations correctly. There are some check boxes here, for example, whenever there is a Profile Mismatch. In this case, if the image does have a profile for the Adobe RGB workspace I'll get a message that says that there is a profile mismatch and it'll ask me if I want to convert it to the sRGB workspace.
The truth is I always wanted to do that so I'm simply going to go ahead now and uncheck these options. So here is the thing. If you are a designer who purely works in web design, you don't do any print work at all or very limited amounts of print work, then using these settings is probably best for you. However, if we're the kind of designer who basically splits your time between both print and web design, then you may want to stick with a general-purpose setting. In fact, that's what I usually do, but when I'm working with my photographs inside of Photoshop I always make sure that if I know that those graphics are going to go to the web, before I place those images into Illustrator when I'm still inside of Photoshop I make sure that I convert my artwork to the sRGB workspace then.
That way I know that all of the art that I eventually place and all of the photographs that I eventually place into my layout inside of Illustrator will always be within the sRGB workspace. This way my expectations are set correctly, I don't see any color shifts when I export my artwork out of Illustrator for the web, and ultimately, I know that what I'm seeing on my screen as I start designing inside of Illustrator is what others you're going to see when they view that content on their devices.
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.