Join Mordy Golding for an in-depth discussion in this video Using Recolor Artwork to modify colors across a site, part of Illustrator CS5 for Web & Interactive Design.
Just as important as it is to actually choose the right colors to use for your designs inside of your web site, it's also important to be able to control those colors when you need to make changes. Now Illustrator has a fantastic feature called Recolor Artwork. I want to show you how you can use it to modify colors across an entire web site design. Now the important thing to realize about the Recolor Artwork feature is that it works on an artwork that is currently selected. So the first thing I want to do, I don't want to change the colors, the logos itself that are here. So I'm actually going to go ahead now and select the two logos here and choose Object > Lock.
I'm going to choose Lock > Selection. Command+2 or Ctrl+2 are the keyboard shortcuts for that. So now if I hit Command+A or Ctrl+A to select all, everything is selected now except for those two logos. Now the feature that I'm working with right now called Recolor Artwork works on all types of artwork that's created inside of Illustrator, but it doesn't work on images. So I don't need to worry about images changing here at all. If you want to change the colors inside of an image, that's something that you'll need to do inside of a program like Photoshop, for example. But for here, I'm selecting everything and I can go up to this little icon on my Control panel called Recolor Artwork.
Alternatively, I can go to the Edit menu, choose Edit Colors, and then choose Recolor Artwork here as well. I'm going to go back over here to this little icon and click on it, and this opens up the Recolor Artwork dialog box. Now if you'll notice here inside of my design, I have some colors that I'm using and I feel like I may be using too many colors, and I want to add more consistency to my design. In fact, right now, I have some text over here especially over here inside of the sidebars that I'm coloring with some kind of a dark or deep blue color. And then I also have a blue color that's used in this gradient, which is in the background.
I want to make sure that they're using the same consistent color. So when I open up the Recolor Artwork dialog box now with all of this artwork selected, Illustrator tells me that I currently have 41 colors in my selection. If I scroll down this list, I actually see a list of all these colors. Basically what's happening is here that each of these colors rows are letting me know that this current color right now will change into a new color that I specify. Now by default, Illustrator just remaps each color back to itself again because it doesn't know really what I want to change it to.
The first thing that I want to do though is quickly identify where these colors exist inside of my file. If I click on this little icon over here, this magnifying glass, it grays out all of my artwork. Now, whenever I click on any of these colors, those colors now appear highlighted in the document, so I can see exactly where that color is being used. Now if I scroll down a little bit in this list over here to some of these darker colors and I click on this one, for example, I can see that this color is currently being used for this background, for the headers, and for some of the text here as well, but I also want that exact same color to be used with the gradient that appears in the background over here as well.
If I scroll down the list a little bit more and I click on some more of these colors, I can see that this color right here is actually being used in that gradient. So what I want to do is I want to actually combine these two together and have them all become one single color. The easy way to do that is simply take this color right here and drag it into this color. This means now that I'm telling Illustrator take both of these colors right here and combine them together to represent a new color. Now by default, Illustrator tries to simulate that by specifying different tint values to that color, but I'm going to click on this little pop-up over here and choose a different colorization method, something called Exact.
In other words, I want these two colors to change to this one exact color. When I do that, I can now click on the Recolor Art button here and I can see that Illustrator now is taking that same dark or deep blue color that's being applied to the text and it also goes ahead and adds that to the gradient itself. So I don't even have to go ahead and modify the gradient otherwise. This happens directly here to the Recolor Artwork dialog box. I'm now going to click OK and I've been able to make a change very easily across my entire web site.
- Getting perfectly sized pixel graphics from Illustrator
- Setting up preferences in Illustrator for web design
- Creating custom document profiles
- Getting great color on the web
- Understanding web graphic file formats (GIF, JPG, PNG, SWF, and SVG)
- Setting great-looking type
- Slicing artwork for various tasks
- Creating Flash animations directly from Illustrator
- Working with Photoshop Smart Objects
- Exporting HTML and CSS from Illustrator
- Integrating with Flash Catalyst
Skill Level Intermediate
Q: In the chapter 5 movie, "Simulating the CSS box model," the author details the CSS box, but names the inner portion the margin and the outer portion the padding. This is reversed from what I’ve have seen elsewhere. Is this an error in the video?
A: This video does indeed contain an error where the author describes the margin and padding. The padding should be described as the area inside the border, and the margin the area outside the border.