Viewers: in countries Watching now:
This course reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator. Author and Adobe Certified Expert Justin Seeley covers topics such as building responsive layouts with artboards, producing custom color palettes and swatches for web graphics, and making vector shapes and text that seamlessly scale. The course also explores adding drop shadows and other live effects, setting up interface elements such as forms and tabbed interfaces, optimizing and exporting different types of graphics, and speeding up your workflow with reusable image sprites and Smart Objects.
As you begin to create and work with more complex artwork inside of Adobe Illustrator, it becomes increasingly more important for you to understand something called object appearance. In this movie, I'm going to be exploring how to decode object appearance and also how to use something called the Appearance panel to gain a better understanding of what's going on inside of your document. So the first thing I'm going to do is create a new document, just going to File > New. And again, the size does not matter, so you just hit OK. And so once we do that, I'm just going to draw out a shape onto my artboard. In this case, I'll draw a circle.
Once I have the circle on my artboard, I'm going to add some things to it. So I'm going to add a gradient fill, and I'll switch to target the stroke, and I'll increase the size of the stroke to something like 10 points. And I'll go up to the Effect menu, add a quick drop shadow, and I'll also go up to the Effect menu, and I'll choose Stylize, and let's do an Outer Glow. Preview that, change the color, something crazy like green.
There we go. So I've got several different things applied to this object. At its core, it is still nothing more than a vector ellipse or circle shape, but it has several different layers of appearance applied on top of it. And so if I open up the Appearance panel--and that's over here on the right-hand side; you can also go to Window and hit Appearance to bring it up-- you'll notice that I get a laundry list of everything that's going on inside of this shape. So I see here that it's got a ten-point stroke, it's got a fill applied to it, it's got a drop shadow, an outer glow, and then the default opacity at the bottom.
So when you open up a document, the first thing you should do when you're looking at different things that--especially when other people have created the artwork, you should be clicking on those objects and then looking at the Appearance panel to gauge exactly what's going on, so you can see how to effectively alter or change the objects that are on screen and you can also understand why certain objects look the way they do. You have the ability, through the Appearance panel, to target these individual objects by clicking on them and then making changes like so. For instance, if I wanted to change the fill, I could just target like this, go in and change the fill to something like this pattern fill like this.
If I wanted to change the outer glow, I just click on Outer Glow to make it active, and then this little hyperlink here allows me to edit the Outer Glow as well, so I can make a change. Let's say I wanted to change the color to something like a blue. Hit OK and I can hit Preview to see it, hit OK. There we go. I could also change the stroke from here. Let's shrink it down a little bit. And we'll change the color as well, something like bright green. And I can click away and it will close. You can add other attributes from the Appearance panel as well.
Let's say for instance, that I wanted to put another fill on top of this for whatever reason. I could come down here and click to add a new fill. It adds a new fill on top. Every time you add a new object, it automatically adds it on top of the other objects that you're working on, so once I do that, I could select this fill here. And you notice it goes over the top of it, this gradient which goes form pink to transparent. I can then also add another stroke to this if I want to, by clicking here, so that adds another stroke to it. When I go into the Stroke panel here, I could change how that stroke is aligned.
I can then change the stroke color to be a different color inside of there. So you can really do some cool things with the Appearance panel, but you have to first understand how to read what's going on in here. So when I first open this up, if I clicked on this object, I would say, okay its got a 9-point stroke set to the inside with this color. It's got a gradient fill right here on top of that. It's got another stroke underneath there which is five points and set to the default. It's got a pattern fill here. It's got a drop shadow and an outer glow. And so anything that I want to change, I just target that specific attribute, make any changes I want, and then I can go from there. You can also remove things from the Appearance panel as well.
Let's say I don't like that extra stroke I added. I'll just target it and click the trashcan to throw it away. You don't like the original stroke? That's okay. You can toss that away too. If you don't like this new fill, that's all right; just toss that away. And then I can change this fill back to just a regular color, I can select the drop shadow and the outer glow, and now in just a few clicks, I'm right back to a normal shape. I didn't have to go in and find those anywhere; they're all located right there in the Appearance panel. So the more that you pay attention to what's going on in the Appearance panel each and every time you select an object, the more you'll understand about your document and the easier it'll be for you to change things going forward.
Find answers to the most frequently asked questions about Illustrator for Web 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.