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.
Over the course of your design career, you will accumulate a countless number of assets that you can repurpose for other projects. The hard part is keeping track of all of them. One method that I have used that has served me really well over the last few years is creating symbol libraries inside of Illustrator. Take these icons for instance. These are just basic social media icons that I created inside of Illustrator, but I want to repurpose them and use them in various designs that I might have. A year from now I don't want have to go find this file somewhere backed up on a different drive or something like that.
I want to be able to quickly get a hold of all of these icons so I can drag and drop them into any project that I might be working on. The answer to that is symbols. So in this movie we are going to take these icons and we are going to turn them into a symbol library which we can then use in any project we want going forward. In order to do this, I need to first bring up my Symbols panel, and my Symbols panel is actually located right over here in this little docked area of icons, and it's got a little clover on it that says Symbols when I hover on it. If you can't see your Symbols panel, just go to the Window menu and choose Symbols, and it should pop up wherever it is.
And so basically what we need to do here is we need to create a new symbol for each one of these icons, and that's very easy to do. So what I am going to do is just select something like the Twitter icon here, and I can take this and I can just drag it over into the symbol library and once I see that little plus sign, I can drop it in. And so the name of the symbol in this case is going to be Twitter icon. And in this case I am just going to make it a graphic; I am not going to take this into Flash or anything like that, so I don't have to worry about this. These are all Flash options that we are talking about.
And you can see that down here at the bottom it tells me "'Movie Clip' and 'Graphic' are tags for Flash Import. There is no difference between these two symbols in Illustrator," so you don't have to worry about it. Registration, I am going to keep that right in the center. We want to enable guides for 9-slice scaling. Again this is something that has to do with a lot of motion and things like that, so don't worry about that now. I am going to align it to the Pixel Grid though, and I am going to hit OK. And so that creates a new Twitter icon symbol for me. I am going to do the same thing for Facebook.
Set this to your graphic, Align to Pixel Grid, OK, and I am just going to do this for each one of the icons. I am just dragging them over, setting them to a graphic. Again, it doesn't matter which one you do, but in case I wanted to move these over into Flash, I am just going to use these as graphics, so Align the Pixel Grid. There we go! And I'll just drag this one over. This is for Forrst, another design social network. We'll drag this over. This is for Vimeo, a video sharing platform.
And of course, we all know YouTube. Now we'll drag over just the RSS icon, so if you have a blog or something, you could use this to let people subscribe to your blog. Google+, that's the new kid on the block when it comes to social networks. And you'll notice there that I actually made a mistake with my Google+ icon. I didn't select a part of it, so what I am going to do is undo that and go back and try to select all of it.
There we go, and then I'll drag it over and redefine it. Here we go. Align it to the Pixel Grid. Here we go. LinkedIn, and we'll grab Skype. This one will belong to Flickr, and the last one is another design social network called Behance. Here we go, and hit OK.
And so now I have all of these symbols loaded up over here. Any time I need to use them, I can use them and I can just drag out a new instance of that symbol. So let's say I was working on a project. I could then say, oh, I need a Twitter icon here. That's okay. I have one. I'll just drag it out, boom. There is a Twitter icon. I need Facebook too. Okay. Here we go. There is Facebook. And we can line those up and, you know, move them around. So as of right now, these exist, but they only exist here inside of this document. So what I need to do now is I need to take these and save them out as their own symbol library so that I can then load them up into another document at any given time.
So in order to save them out as a symbol library, I am just going to first come over here and I am going to select the symbols that are in here by default, and I just did that with Shift+Clicking. I am going to remove those, because I only want these to be inside of the symbol library. And then instead of the Symbols panel, I'll undock that, so you can actually see it. I'll go here, I'll down to Save Symbol Library, and then I would just go out to the Desktop, and I'll call this Social Symbols and I'll hit Save.
And so now those have been saved to my Desktop. If I close this document, I am not going to save any changes. I don't have to. I'll create a brand new document. It doesn't matter what size. And when I do that you are going to notice the default symbols come back in. Those aren't the social symbols that I was just working on, so I need to go down to the library icon, I need to go Other Library, go out to my Desktop, and select Social Symbols, and hit Open. Once I hit Open, those will appear, and close this Symbols Library. And now if I need Twitter, drag it out; Facebook, drag it out; Google+; LinkedIn; any one that I want, I can drag it out from the symbols library and use it.
These are still scalable vector artwork, so it does not matter how big or how small I make them; they are always going to be scalable vector arts, so I can use them in any way, shape, or form that I need, but I now have this library saved anytime I need it to go back and use it any project going forward. So I do this for things like client logos. I also have a lot of brand logos that I use when I do sponsorships and things like that on different client web sites, so I bring in some sponsor symbol libraries. I have a social icon set like this; actually, I have several of those.
Anything that you think you can repurpose for further use, try saving it as a symbol library, keep those symbols somewhere in a safe place on your computer, and then load those up quickly and easily each and every time you need them, and you workflow will go so much smoother and so much faster.
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.