Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
One of the great benefits of working with symbols is the fact that you can instantly update and refine your artwork with very little effort, and that also makes it easy for you to update multiple instances of symbols inside of your document as well. Let's take a look at what I mean. Inside of this document here I have a symbol on my artboard, and so I could actually create multiple instances of this symbol and then change it and it would automatically update any of those symbols that I need at any given time. I can also edit this symbol anytime I want as well. If I look in the Symbols panel, I'll see this symbol right here, and I can double-click it to enter what's called Isolation mode and makes changes to it any way I see fit.
So for instance, if I wanted to change the color of this to a different color, I could do so very quickly and easily, just by selecting the individual pieces and then making the change. And so you see there I've got all these different colors to work from here. So let's say I want to change this to a variation of, let's say red. I'll select this here and I'll grab a dark-red color, select this one and make this sort of a lighter red. This one, I'm running out of reds in my Swatches panel, so I'll just go here and I'll go all the way down to like pure red, and then I'll just step backwards through. Here we go.
Start off here. And I'll actually just hit the letter I and sample that color and double-click here, go a little bit lighter, sample that color, double-click, a little bit lighter, until finally we get to the lightest one at the very end. Double-click and there we go. So now I've changed that symbol and if I wanted to, I could exit Isolation mode by clicking here or simply by double- clicking in the blank space here.
When I do that, you're going to notice, the symbol updates in the Symbols panel, and also, if I zoom out, it updates here as well. So now my loader is red, as opposed to the default black and gray. If I want to undo that, just Command+Z or Ctrl+Z and I can step back and undo all those changes I made. And then once I Command+Z or Ctrl+Z back, it goes right back into my document like so. If I wanted to resize the symbol, I can just drag it back up to resize it, and there you go.
And so I can also do things like replace symbols, in addition to just editing them. And the easy way to replace a symbol is to first have something you want to replace it with, and then use something called the Replace command. So I'm going to open up a symbol library that exists inside of Illustrator already, and so let's go down to Web Buttons and Bars inside of the Symbol library, and you can see here is the loaders that I got earlier. Let's say my client doesn't like this loader animation that I've created here. They want to use something else, something a little bit more traditional. So I can select one of these and replace this one with it, and so in order to do that, what I'll do is come up to the Replace dialog box here, and look. Well, I don't have any of these listed here right now, so what I have to do is actually select one of these--and let me drag this out, so you can actually see what I'm doing.
I'll close the Symbols panel for now. And once I click on one, it adds it to my Symbols panel. So now I've got that loaded as something I can use in my document and if I go up to replace again, it should be listed there. And watch what happens. If I click, it automatically switches over to give me that symbol instead of the one before that. And I could do this as many times as I want. Say I wanted to replace it with the Home icon. I can do that, or switch it back to the original. I can do that as well. So using symbols inside of Illustrator is a great way to ensure that you can easily switch objects in and out, and change multiple objects all at once, simply by using a symbol that you save into your symbols library and then load up in any document that you wish.
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.