Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator. Author and Adobe Certified Expert Justin Seeley covers topics such as building responsive layouts with artboards, producing custom color palettes and swatches for web graphics, and making vector shapes and text that seamlessly scale. The course also explores adding drop shadows and other live effects, setting up interface elements such as forms and tabbed interfaces, optimizing and exporting different types of graphics, and speeding up your workflow with reusable image sprites and Smart Objects.
Although it's not the most fun topic in the world to discuss, we need to take a moment and talk about the color management settings inside of Adobe Illustrator. We already know that when designing for the web we need to use the RGB color space, but that doesn't necessarily refer to the color management setting or profile that we should be using for our graphics. In any case, you need to be aware of the fact that even if you take the time to meticulously tweak your color management settings and really dial in your artwork colors, the chances are they are still going to look different on every screen that accesses them.
This is the thorn that is forever wedged in the web designer's side. Different devices have different gamma settings and different ranges of color which they can display. This makes color management for the web basically a crapshoot. However, we can put some things in place to help alleviate this pain and ensure that our graphics look as close to our original design as humanly possible. As I said before, I'm not really talking about just RGB versus CMYK; in fact, there are several variants of each one. For instance, we have variants like Adobe RGB, which has a very wide gamut of color, and we also have something called sRGB, which is somewhat limited.
sRGB is the gamut that is most widely used when it comes to color on the web, so by working in the sRGB space, you can take comfort in the fact that your graphics will appear as close as they can to your original when they're viewed on someone else's screen, providing of course that the device and/or browser that they're using actually uses some sort of color management policy. In some browsers and devices, that's simply not the case, and there's nothing really we can do about it. Illustrator automatically converts web graphics to the sRGB space upon output, but it's a good idea to work in that space throughout your design process so as not to cause any color shifts down the road.
Another school of thought states that we shouldn't color manage our graphics at all, but simply rely on our monitor preview with no color management settings whatsoever, so that our graphics appear identical when we view them on the web. In the end, it's up to you, but the sRGB space is probably the safest way to go. Let's take a look at both of these and how we would change the color settings in Illustrator to match. So let's say that I wanted to stick with the sRGB space because I'm playing it safe. In order to change the color settings inside of Illustrator to match sRGB, you need to go to the Edit menu and go down to Color Settings.
Once you go into Color Settings, you'll have the ability to choose a settings profile from the top, and once you choose this, you can actually pick one that's called North America Web/Internet. When you choose that, it's going to say RGB and it's going to be set to sRGB and then a few letters and numbers after that. When you hover over that, it's going to tell you at the bottom in the description that this reflects the characteristics of the average PC monitor. This is the default color space for many scanners, low-end printers, and applications. It's recommended for web work, but not pre-press work because of its limited color gamut.
So, sRGB, probably the safest way to go when it comes to color, but not necessarily a guarantee that you'll get the same results out on the web as you do when you're looking at it inside of Illustrator. Also, when you choose the North American web and Internet setting, it's going to automatically change your color management policy so that when you open up a document inside of Illustrator it will convert that document to the working space. So if something is using Adobe RGB or not color managed at all, when you open it up and you have your working space set to this with this color management policy in place, Illustrator will automatically convert that document over to sRGB.
This is where you're going to see some really big color shifts if you're not careful. So if you open up a document that somebody sends you that they created using Adobe RGB, and it opens up inside using sRGB, and you've got it set to convert over without asking, then you're going to have a big problem, because you're not going to be seeing the true color that they gave you. That's why profile mismatches come in handy. So if the profile doesn't match the profile of the working space, do I get asked when I'm opening a file. Do I get asked when I'm pasting a file? I would leave these checked so that anytime you encounter a file that is not of the same working space, you can tell it exactly what to do: either convert it to the profile, or keep the old profile or discard all color information, et cetera.
That way, you ensure that you can view the colors as they were intended to be viewed from the start. You'll also see this Missing Profiles link down here at the bottom. This refers to files that don't have any color management policies on them at all. What do you do with them? Well, in this case, it would just convert it to the working space without asking, and that's probably the best things to do for that as well. Anytime you get confused in this dialog box, just hover over something and it will explain it to you down there in that description box. Okay. So in order to use the sRGB space, this is all we need to do. So now if I hit OK, I'm now working in the sRGB space.
Anytime I open something that is not in the sRGB space, it will automatically pop up and say, hey! This doesn't match your current profile. What would you like to do? And then you can work from there. Now, I said there was another school of thought where we don't color manage. So if you don't want to do color management, you don't want to play it safe with sRGB because of the limited color gamut or whatever, you can actually set it up this way. So go into Edit > Color Settings, and underneath Settings, choose Monitor Color. And basically this is going to mean what you see on your monitor using your monitor profile is what you're going to get out of Illustrator.
At the bottom here, Profile Mismatches, I would turn that off, because if you don't turn that off, it's always going to pop up and say that this doesn't match, because most graphics you open are going to have some sort of color profile associated with them. So now, we are not color managing at all. We are not going to convert it to a space. We're just going to use the monitor preview for this. So what I see on my monitor should be what I get out, theoretically. This is what a lot of people have started doing because of the fact that most of these applications automatically convert our graphics to sRGB upon output, and so they're seeing a color shift, and by doing this and turning off the sRGB export, they feel like they're alleviating this pain of the color shift that they see in the web browser.
So if you want to do it this way, set it up, hit OK. But you're not done yet. Go up to the View menu, and once you have a document open, you'll need to go down to Proof Setup. So let's just create a new document really quick. It doesn't matter how big. Go to the View menu, choose Proof Setup, and you want to make sure this is set to Monitor RGB so you're viewing everything as it is with the monitor preview. And then finally the last step if you're wanting to use no color management policies whatsoever is to go to File > Save for Web. And once you're inside Save for Web, you want to make sure you come in and depending on the file that you're optimizing, you can uncheck convert to sRGB.
I'm going to cancel that and get back out, and I'm going to stick with the sRGB policy. So in order to switch that back, I'll just to go Edit > Color Settings, and I'll switch this back to North America Web/Internet. Hit OK. So, hopefully by now you have a better understanding of how to edit the color setting inside of Adobe Illustrator and also how to play it safe and how to sort of be a cowboy, if you will, and when it comes to managing the color in your artwork for display on the web.
Find answers to the most frequently asked questions about Illustrator for Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.