Join Justin Seeley for an in-depth discussion in this video Finding color inspiration using Adobe Color, part of Illustrator for Web Design: Aesthetics.
- One of the easiest ways to inject life into a lifeless mock-up like the one we're looking at here, is to start adding some color. But first thing we have to do is come up with a color scheme that we want to apply to this mock-up. So in order to do that, what we're going to do is we're going to use Adobe's Color service because it's well integrated into this application and it's super easy to use. What you're going to do, is you're going to come over here inside of the panels on the right hand side of your screen, and you're going to look for a panel called Color Themes. If you're in the collapsed view, it looks like this, kind of like a circle with two little alien hands coming off of it.
And you can see here Color Themes, they're all listed here, and I can hit the sync button so that you can see exactly what's going on in there. All of these Color Themes are ones that I have either liked or favorited or saved inside of my Creative Cloud system. If you have never used Adobe Color before, you may not see anything in here, and that's perfectly okay. In order to add colors directly from this system, what you have to do is go right to this little icon here and choose launch Adobe Color website.
Once you do that, it should take you over to your web browser of choice, in this case it's Safari for me, and it should automatically log you in using the exact same Creative Cloud credentials that you used to sign into the Creative Cloud desktop application. You need to make sure that you're using the exact same account here, and if you're not sure, you can go up here to this little guy, and click on it, and you can actually see what account you're signed into. If you don't see the same account that you're signed into under the desktop application, you should sign out and sign in using that credential instead.
You need to make sure you're signed in using the same credential because that's the only way that this is going to sync any colors that you create, save, or favorite directly back to your desktop. Now, I have an entire course devoted to Adobe Color, it's actually called something different in our library, though, because Adobe recently changed the name from Adobe Kuler, K-U-L-E-R, to Adobe Color, C-O-L-O-R. So, if you're looking in the lynda.com online training library, you can find that course at Kuler Essential Training. It walks you through all of the ins and outs of Adobe Color and basically the interface is the same, the name has just changed.
But, let's take a look at what I do anytime I need a little inspiration for a Color Theme. The first thing I do is I go to the Explore tab. And on the Explore tab, this is where you can find all of the different Color Themes that people have been creating using Adobe Color. Up in the top right hand corner, there's a search box, and this search box allows you to type in pretty much anything you want and get results based on that, that you can then use to generate your Color Themes. So let's say that the people that have hired us for this website design, want us to give it sort of a corporate feel.
Well, I can just type out the word corporate, right up here at the top, and hit enter. Once I hit enter, that's going to return back several different results for me, and I can see all of them listed right here on my screen. Now I should let you know that when you type the word corporate into that little field up there, you may get a completely different set of Color Themes on your screen, so it might not look exactly the same as mine, and that's perfectly okay. I'm going to include a .ASE file in your exercise files so that you can use the exact same colors that I get today.
What we're going to look for here is this color palate right here. And when I hit Info, that's going to take me in here and it says it's called Corporate Blues. So if you just wanted to search for Corporate Blues you should be able to find this. It's a relatively simple Color Theme. Over here on the right hand side, once I see all of this information, I can Appreciate it, Share it, Edit and Copy it, Report it for Abuse, and I can also see who Created it, when they Created it, how many times it's been Viewed, how many times it's been starred, and also how many people have Appreciated it over time.
This is basically a monochromatic setup here, with a few exceptions, there's a neutral gray and white, but for the most part, it sticks to this dark blue, light blue color scheme. And I kind of like it. So what I'm going to do first, is I'm going to Appreciate it. Appreciating something on Adobe Color is the easiest way to get it synced back to your account inside of Creative Cloud. So now, if I go back into Adobe Illustrator and I hit this little sync button at the bottom, you'll notice that the Corporate Blues has been added to the top.
That's the easiest way for me to get these back into Illustrator. Then, once I have this inside of my Color Themes palate, what I'll do now is open up the Swatches panel, let me move this out on screen so you can see it, also open up the Color Themes panel so you can see that as well. What we want to do is we want to add this over to our Swatches so that we can quickly and easily use it anytime we want. What I'm going to do is just simply click on the heart next to Corporate Blues, and that's going to add all of those colors down here to the bottom and allow me to use those in my designs.
I can also save these out as an Adobe Swatch Exchange file and share them with colleagues, or even the clients themselves, making it easy for anyone who has an application that supports .ASE files to load up these colors and use them in their projects. A little bit later on I'll show you also how to save these colors to your Adobe Creative Cloud libraries, so that you can quickly and easily share them via the cloud as well. Well, that's going to wrap up our look at Adobe Color. I think I've got most of the colors that I need. Along the way we may add a couple of accent colors, but for the most part we're going to make due with what we have here.
In the next movie, we'll start talking a little bit more about how I can transform these colors into something called a global color, so that I can easily update them across all of the objects inside of my designs without much hassle.
- Finding color inspiration
- Applying color
- Choosing the right typeface
- Using character and paragraph styles
- Optimizing graphics in Photoshop
- Placing photos and vector artwork in Illustrator
- Creating buttons and other UI elements
- Organizing and sharing your project