Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
So it could be tedious to kind of go through your document and select all your colors and convert them to the right colors. Well, there is a great feature inside of Illustrator, something called Recolor Artwork, which has some really fantastic functionality inside of it to help you make quick color conversions. In this case, I want to show you how can use it to take any artwork and instantly convert those colors to web safe colors. For example, here is some artwork on our artboard right now that was created maybe 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 have actually 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 the background 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, but I want to show you a way that you can actually make this change in one quick step, meaning convert all colors in your artwork to their closest equivalents of 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 only works on art that is selected. This allows you to make changes to different pieces of art individually without affecting your entire document. So I want to keep this original here, and I want to use this image here on the right to convert it to web safe colors, so that I can kind of compare it to and make sure that they are close enough for me to use. With the artwork selected, you'll now see that there is a little color wheel that 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, choose Edit Colors, and then choose Recolor Artwork. But now I'm simply going to take this artwork with it selected and click on this button, which opens up the Recolor 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 based on certain harmonies. We know that we had the ability to limit the Color Guide to work within a certain 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 the Recolor 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 bottom and I choose Web, that means I'm limiting the Recolor Artwork dialog box to recolor 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 that I'm going to change into new colors here. We refer to each of these as color rows, and what Illustrator is telling me is that 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 their closest web color, or web safe color equivalents.
So to do that, I'm going to limit the Recolor Artwork feature to only work within the web safe color palette. So I'm going to choose web over here, and now you can see that automatically these colors now changed, meaning that these colors now will snap to their closest 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's really 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 that as 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 Artwork feature 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 now converted all of my colors in my artwork to web safe colors.
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.