Ai Color Management for Web Design
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. 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. For instance, we have variants like Adobe RGB, which has a very wide gamut of color.
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.
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.
There may come a time in your creative process where you just hit a roadblock when it comes to developing color. Now, chances are the client is going to be very specific about what type of color they want in their design. But just in case they give you a little creative freedom, you might find it a little difficult to come up with color combinations. And that’s okay, because there are several tools out there that will help you develop your own color palettes.
if I were to download this — and I’ll just save it to my desktop — I could then go back into Adobe Illustrator. I will go to File > New and just create a blank document. It doesn’t matter what document you create. I’ll bring up my Swatches panel and drag it out so you can see it. And I’ll go here, and I’ll choose Open Swatch Library, and I’ll go to Other Library, go to my Desktop, choose Fall Fall.ase, hit Open, and there it is.
Create a new swatch, Client Blue Green. Hit OK. It adds that in. I always hover over these, just to make sure that it’s getting them correct. Sample the next, Client Light Yellow, hit OK; sample this one, Client Burnt Orange, hit OK. And then finally, this one is just white, but I’m going to sample it anyway, just in case there’s any values that I don’t see in there. Client White.
And each time I’m creating this new swatch, I’m careful to make sure that my Color Type is set to Process and that my Color mode is always on RGB, because when we are working with the web, we want to work in RGB color. So I hit OK. So once I do that, it’s going to add it up there. I can always move it. I just click and drag it down to these right here. If I want these in their own color group, that’s easy to do. I’ll just come here, create a new color group, and I’ll call this Client Swatches, and I’m going to hit OK. Now it threw a color in there for me already. What I’m going to do now is just remove that.
One of the great benefits of working with symbols is the fact that you can instantly update and refine your artwork with very little effort, and that also makes it easy for you to update multiple instances of symbols inside of your document as well. Let’s take a look at what I mean. Inside of this document here I have a symbol on my artboard, and so I could actually create multiple instances of this symbol and then change it and it would automatically update any of those symbols that I need at any given time. I can also edit this symbol anytime I want as well. If I look in the Symbols panel, I’ll see this symbol right here, and I can double-click it to enter what’s called Isolation mode and makes changes to it any way I see fit.
And so I can also do things like replace symbols, in addition to just editing them. And the easy way to replace a symbol is to first have something you want to replace it with, and then use something called the Replace command. So I’m going to open up a symbol library that exists inside of Illustrator already, and so let’s go down to Web Buttons and Bars inside of the Symbol library, and you can see here is the loaders that I got earlier. Let’s say my client doesn’t like this loader animation that I’ve created here. They want to use something else, something a little bit more traditional. So I can select one of these and replace this one with it, and so in order to do that, what I’ll do is come up to the Replace dialog box here, and look.
