Video: Using Recolor Art to convert art to web-safe colors

As a designer, before you start working on any kind of web design or any web graphics, you know that you could start to define your color panels and maybe go ahead and even choose web safe colors for your work. However, quite often, you're also repurposing artwork that was maybe used for another task, or you're using artwork that you didn't create, but are being handed off to you by either a client or another designer. In those cases, you may find that the colors that are being used are not really the ones that you want to work with. Maybe they are not web-safe or maybe they are not the specific colors that you want.

Using Recolor Art to convert art to web-safe colors

As a designer, before you start working on any kind of web design or any webgraphics, you know that you could start to define your color panels and maybego ahead and even choose web safe colors for your work.However, quite often, you're also repurposing artwork that was maybe used foranother task, or you're using artwork that you didn't create, but are beinghanded off to you by either a client or another designer.In those cases, you may find that the colors that are being used are not reallythe ones that you want to work with.Maybe they are not web-safe or maybe they are not the specific colors that you want.

So it could be tedious to kind of go through your document and select all yourcolors and convert them to the right colors.Well, there is a great feature inside of Illustrator, something called RecolorArtwork, which has some really fantastic functionality inside of it to help youmake quick color conversions.In this case, I want to show you how can use it to take any artwork andinstantly convert those colors to web safe colors.For example, here is some artwork on our artboard right now that was createdmaybe by another designer.I now need to incorporate this in my web site.Maybe this was originally created for print.

I did just a quick RGB conversion.I have the colors that are here, but maybe I want these to match specific colors,either colors I'm already using for a web site or maybe I want these to haveactually web safe colors applied to them.If I go to my Window menu, I'm going to choose to open up Color panel here,and you can see that with my Direct Selection tool, if I click on maybe thebackground color here, I can see that Illustrator is telling me this is not a web safe color.I can see that's the case for these other colors as well.These colors that are being used are not web safe colors.Now, I could start to select all of this artwork and start to make changes, butI want to show you a way that you can actually make this change in one quickstep, meaning convert all colors in your artwork to their closest equivalentsof web safe colors.

I'm going to start by taking my Regular Selection tool.I'm going to select one of these pieces of art over here.It's important to realize that the feature I'm about to show you right now onlyworks on art that is selected.This allows you to make changes to different pieces of art individually withoutaffecting your entire document.So I want to keep this original here, and I want to use this image here on theright to convert it to web safe colors, so that I can kind of compare it to andmake sure that they are close enough for me to use.With the artwork selected, you'll now see that there is a little color wheelthat appears in the top of your Control panel.

If you mouse over this, it says Recolor Artwork.That's the quick way to actually find this feature.Another way to get that feature is to actually go to the Edit menu, chooseEdit Colors, and then choose Recolor Artwork. But now I'm simply going to takethis artwork with it selected and click on this button, which opens up theRecolor Artwork dialog box.Now, in a previous movie, we spoke about something called the Color Guide.It's a way for Illustrator to go ahead now and recommend colors that work basedon certain harmonies.We know that we had the ability to limit the Color Guide to work within acertain range of colors.

Well, the Recolor Artwork feature actually taps into that same basic technology.You'll notice there is a button over here that also allows me to limit theRecolor Artwork feature to use a specific library.So if I come now over here to this little pop-up menu and I scroll to the bottomand I choose Web, that means I'm limiting the Recolor Artwork dialog box torecolor the artwork that I have selected only using web safe colors.Now before I do that, let me explain to you exactly what's happening here.Right now, I currently have five colors in my document.

Illustrator does count white or black as a color.In this case, I have some white here, but I really only have four colors thatI'm going to change into new colors here.We refer to each of these as color rows, and what Illustrator is telling me isthat right now this current color is going to change into a new color.If I wanted to protect a certain color, I can actually click on the arrow to deselect it.That means that this color won't change at all, but only these three colors will change.But I'm not actually going to click on this arrow here.I do want all these four colors to change and I want them to change to theirclosest web color, or web safe color equivalents.

So to do that, I'm going to limit the Recolor Artwork feature to only workwithin the web safe color palette.So I'm going to choose web over here, and now you can see that automaticallythese colors now changed, meaning that these colors now will snap to theirclosest equivalents of web safe colors.If I click OK, that's all I really need to do.I have now successfully changed the colors in this to be web safe colors.You can even see a small difference between the colors here, but that'sreally fine for me.I actually kind of like the more saturated and richer colors that I'm seeing here.

If I go back to the Window menu and open up my Color panel, you'll now see thatas I click on each of these colors, these are indeed web safe colors.I'm not getting that warning, that 3-D cube over here, like I do get on this side over here.So all the colors here with really one step just by limiting the Recolor Artworkfeature to only work within the web safe color palette,I can simply launch that feature and click OK, and now in one step, I've nowconverted all of my colors in my artwork to web safe colors.

Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design .

Here are the FAQs that matched your search "" :

Expand all | Collapse all

please wait ...

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.

Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.