Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.
We've spoken how we can actually derive some inspiration on the use of colors by using the Color Guide that appears inside of Illustrator. However, Adobe has also taken that same technology that drives both the Color Guide and also the Recolor Artwork feature in Illustrator, and they've made it available as an actual community on the Internet. This is something called Kuler. The web site for this is kuler.adobe. com, and it's a free service that Adobe provides, and you can actually use it by signing in with a free Adobe ID.
I'm actually going to use my Adobe ID here. I'm going to type in my login here. I'll also add my password here, and I'll choose Remember Me, and I'll click Go to log in. Once you've logged in to the Kuler service, you have the ability to access more features. Now, the whole concept of what Kuler really is it's a community of color, meaning that people can go ahead and create these themes of colors. When we think about themes inside of Kuler, we're talking about different color harmonies or different palettes of colors that people have created and these are designers from all around the world.
In fact, you can scroll through these. Over here you can see The Sweet Life, Minimus, Cactus rocket, Identity colors, so on and so forth through all of these, and you can also see that just like in iTunes, for example, you can actually apply ratings to these, which means that you're actually able to browse through these different themes by the newest ones that are created or maybe the most popular ones, meaning those are he ones that are downloaded the most often or these are highest rated. Those are the ones that have the most stars, for example, or you can choose Random. What's great about this is that people can also go ahead and comment on these.
It's almost like each of these themes are some kind of a blog. It's really great. Perhaps more importantly, if you have a certain theme in mind for creating your web site you can do a search on keywords. For example, I could search for colors on maybe chocolate. I'll now get returned to a whole bunch of color themes that have been created by other designers throughout the world that use the keyword chocolate. Now if you're signed in with your free Adobe ID, if you've find any of these particular themes that you like, you can go over here to these buttons, and you can choose to download it as an Adobe Swatch Exchange file, which you can open up inside of Illustrator, Photoshop, InDesign or even Fireworks.
But of course, perhaps one of most powerful things about Kuler is that you have the ability to experiment and create your own color themes. So I'm going to come over here on the left side and click on the word "Create." This takes me to the Create area here inside of Kuler. You can see that I have the ability to create these themes either from a color or from an image. We'll talk about the image in just a moment here, but let's first explore about how we create things from a color. The first thing I would do is select a rule. Now you're familiar with this already because the Color Guide inside of Illustrator has things called harmonies. oOr really rules and harmonies are pretty much synonymous with each other.
So if I wanted complementary colors, we can see over here that colors are complementary if they appear on opposite sides of the color wheel. We have compound colors, different shades of colors, monochromatic, for example. As I go ahead now and I move this around, I am generating a whole bunch of different colors. Basically, I am choosing one color which we refer to as our base color. Then Kuler is automatically generating two other colors on one side and two other colors in the other side based on the rule that I've chosen. If you scroll down to the bottom over here, you can see some really important information.
It gives me the actual values in HSV, RGB, CMYK, LAB, and of course, what's most important to us as web designers, the hexadecimal values. In fact, you can simply click in here, and you can copy and paste this into either Illustrator, into Dreamweaver, or any other application for that matter, even into HTML code. Once you're happy with the theme that you've created, you can go over here and actually apply a title, give it a name, apply some tags so that other people can find it when they perform a search, and then click on the Save button.
When you save it, you can choose to have it either Public, meaning that anyone can access it, or you can make it Private, meaning that this theme is only available to you, and it won't show up in a search when other people do a search for it. Now in addition, you can also choose to create these themes from an image. I'm going to click on this button over here that says From an Image, and you can see that right now the first thing that Kuler does is it loads a generic image here into this window. But I can choose Upload. I'm going to click on Upload here. I'll navigate to my Chapter 03 files over here and choose ocean_models.jpg and click Open.
This uploads that JPEG file right here and instantly, you can see that Kuler generated a theme here, based on colors that appear inside of this image. I can choose different moods. For example, these are colorful colors. I can choose Bright ones, maybe Muted colors, Deep colors or Dark colors, and of course, I can click on these little circles and move them around to choose these colors on my own for basically a customized theme that I'm building from this particular image. If you really want to kind of go off the cuff and get totally inspired by other images, you can click on the Flickr button, which will allow you to actually see other people's images.
You even have the ability to sign into your own Flickr account, so you can access images directly to there as well. I'm going to go back to Themes here for a moment. In reality, there is a whole lot of things that you can do here inside of Kuler. In fact, Kuler for the most part is really an application within itself. If you want to find out more information about using Kuler, be sure to check out my Kuler Essential Training title, which is available here at the lynda.com Online Training Library. But perhaps, when we think about Illustrator and we think about web design, one of the most exciting things about Kuler is that you have the ability to access Kuler directly from with inside of Illustrator.
Let me show you what I mean. I'm actually going to toggle to Illustrator here. I have just a regular plain document open. I'm going to go to the Window menu, choose Extensions, and then I'm going to choose Kuler. This actually brings up a panel called the Kuler panel and the really cool thing about this Kuler panel is that it's actually Flash running here inside of Illustrator. What I'm seeing here are actual real themes that are being loaded directly from Kuler. For example, I can do a search. Remember we did a search on chocolate before. Maybe now I want to find some beach colors. So I'll type in let's say beach, hit Enter, and now Kuler, at least the panel here inside of Illustrator is going to return many different themes that are now found inside of the Kuler database.
For example, there is one over here called Back to the Beach. I kind of like that one. I'm going to click on it and then on this button on the bottom here I'm going to choose to add that theme to my swatches. You can see that instantly those colors have now been added directly to my Swatches panel inside of this document. So if you're looking for a way to get inspiration about colors, to see how other people use colors, to build your own color libraries for the work that you are doing, you can not only use the Kuler web site; you can even access those colors directly here inside of Illustrator by using the Kuler panel.
Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.