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.
A really nice feature that Adobe recently added to versions of Creative Suite is the ability to save workspaces, or to position your panels, choose which panels are open, and then save that so that you can work with an environment that works best for the type of work that you do. This is especially useful if normally you actually work on different types of projects all the time. Since we are talking about web and interactive design, let's focus on creating a workspace that works best for that type of work. Now as you can see right now inside of Illustrator I am using the Essentials workspace.
Although you have to really understand that this is just a workspace that Adobe created for the general public. So even though it says Essentials, it may not mean they are the right essentials for you. Still if you go over here to the workspace switcher, click on this button where it says Essentials, you can see that Illustrator ships with several other workspaces. Things like Painting, Printing and Proofing, Like InDesign or Photoshop, and there is even one here for Web. However, if you choose the Web workspace here, which I am doing right now, I will that I am not really that happy with the way that it's set up.
It doesn't really have the tools that I need when I am working in web graphics. For example, as we have discussed, working with pixel dimensions and precise measurements is really important, something that we will be using the Transform panel to help us do, but the Transform panel isn't even here. In reality, this Web workspace is more of an advertisement by Adobe to let us know which features it has that work with web design. So what I'd like to do right now is actually focus on building a Web workspace that works best for us. So I am going to go here back to the Essentials workspace. I will click on the little white arrows here to expand his panel dock, and we are actually going to rip this apart and start from scratch.
I am going to take this gray area right here and click on it. Drag it over here so now it floats on its own. We are going to start to build our own workspace. Now I am going to start over here using the Appearance panel. Of course, you know the Appearance panel is probably one of the most important panels inside of Illustrator. But not only for the functionality that it adds, for example, the ability to have multiple fills and strokes and objects and to add effects, but it also contains several panels inside of it which will allow us to free up more space on our screen. For example, take a look at the Stroke panel. It's huge.
It has so much information inside of it. First of all, we have some basic stroke information, like the weight right here inside of the Control panel, but I am going to take the Stroke panel right now and kind of drag it out and then close it, because anytime we need to access that information, I can click on the word "Stroke" in the Appearance panel and that entire Stroke panel now temporally appears. I can make a change or make an adjustment. As soon as I click off of it, it disappears. The same thing applies if I click on the word "Opacity." The entire Transparency panel appears.
So I can take the Transparency panel right here and close that one. No reason to keep that open on my screen. I also don't need the Color panel at all. Because when working with Fills or Strokes if I want to change the color, I can simply click on these little squares of color and bring up either the Swatches panel, or if I Shift+Click on this it brings up the Color panel. Now I am actually going to leave the Swatches panel open on my screen because later on we are going to see it's just going to be easier for me to manage my colors that way, but there is really no need for the Color panel at all, so I am going to take that and remove it as well.
Now I am going to take my Graphic Styles. I am going to drag that up so that they live in the same grouping over here as Swatches, Brushes, and Symbols, as these are all really library elements. And I also find that when I am working with Graphic Styles or Symbols it's much easier to see the names of these than the little iconic previews. So I am going to go to the flyout menu here, I am going to choose to view these as a list, and I will do the same thing for Symbols here. By the way, if you are someone who actually is familiar with working with things like Flash Catalyst or Flash Professional you might find it more familiar to actually view things in this way because this list view is how they appear in those applications.
Now then on the bottom here I have Layers and Artboards. These are both really important for working with web Design, so I am going to drag the Artboards panel out here and also the Layers panel. So we are starting to get a better idea of what panels are going to appear on our workspace, but we need to go to the Window menu to find those that are missing. So let's go over here to the Window menu, which is actually where all the panels appear, and I will choose to open up the Transform panel. As I said before, this is going to be one of the most important panels I will use when creating web graphics in Illustrator. So I am going to take that Transform panel and drag that right about over here.
The Align panel is pretty important too, so we are going to use that but just maybe not as much, so I am just going to leave it here for a moment. Now I use to rely on the Pathfinder panel a lot, but really not anymore. Now inside of Illustrator CS5 we have the new Shape Builder tool. If you are not familiar with this tool, it's actually a way to replace the functionality of the Pathfinder panel, and if you are not familiar with it, I cover it extensively inside of my Illustrator CS5 Essential Training title here in the lynda.com Online Training Library. So I am going to keep the Pathfinder panel closed for now and I am going to go back again to the Window menu and choose to open up the Info panel.
I don't need the Navigator panel here, so I am just going to drag that out and close it, but one of the most important things about the Info panel is if I go ahead now to flyout menu and choose Show Options, you can see that the Info panel will always display the hex values or the color basically for any object, both fill and stroke, that I have selected. This is actually going to prove to be very helpful as I work inside of Illustrator, because as we will see it takes a little bit of digging to find that the hex values of colors inside of Illustrator. But with this Info panel open, I will always have them available.
Finally, I will go back to the Window menu, because we are going to be working with text a lot when creating our web graphics and to save time and to be more efficient we want to use paragraph and character styles. So I will scroll down over here to where it says Type, and then I will choose Paragraph Styles. This will actually open up both the group panel of Character and Paragraph Styles, and I move them just about over here as well. So we have our basic elements in place. Let's now position these in a way that we want to. I am going to start by taking this Transform panel, taking the top over here of the panel, the gray part here, and dragging it to the right so that I can create a new panel dock.
Next, I will take my Layers panel and drag that in right about over here. Notice that as I kind of drag it to the top here, a blue line appears, letting me know that I can now attach it to the bottom of the Transform panel inside of this panel dock. The Layers panel expands to fully fill that panel dock. I also want add my Artboards and Appearance panels to this dock as well, so I am going to start with Artboards, drag them in over here, and you will notice that when I position it right between the two, a blue line appears right in the middle. If I kind of come down here, it will group it together with Layers. I don't want that.
I want it to actually appear in between them. So notice now the Layers panel moves down to make room for the Artboards panel. I will do the same thing for the Appearance panel right here and now you can see that I will always have visible my Transform, Appearance, Artboards and Layers panels. I am also going to take my Info panel, grab it just by the tab right here, and group it together with Transform. So now I can either toggle between Transform or Info to get the information that I need. These are the panels that I am going to be using most often.
However, this information that I see here are things that I am only going to be using once in a while. So I don't need to keep them in a fully expanded dock. We are going to create a dock that's actually collapsed to its iconic state so we can easily access that information as we need it and we will start by taking the Color Guide right here, dragging it over here to create a new dock. But now I will click on the little white arrows that appear on top over here to collapse it to its iconic state. This way now if I need to have the Color Guide open I can click on it to activate it and then click on it again to hide it.
Next, I will take my Symbols panel and drag it over into this dock as well. Notice that a blue line appears directly underneath that little icon, which allows me now to create a new group over here of just this panel here in the Symbols panel. I will take Graphic Styles and now when I drag it in I am actually going to drag it directly on top of it. Notice now the whole thing turns blue, and that groups these two together. In fact, I will do that with Brushes and with Swatches as well. So I now have all of these panels kind of living inside of one single group.
Next, I will take my Gradient panel and drag that again underneath right here so the blue line appears in the bottom, which creates a new group. I will do the same thing over here for Align to create a new group underneath it, and then finally I will take Paragraph Styles, create a group for that, and I will put Character Styles into the same group as the Paragraph Styles. So you see we have a really nice and clean workspace right now that's optimized for working with web and interactive graphics here inside of Illustrator. Now I do want to add one other thing.
We know that in Illustrator we have the ability to have several different color libraries. We may want to work with web safe color. We will talk more about that in a later chapter, but there happens to be a really nice library, something called VisiBone, and I want to include that in my workspace as well. So first let's explain what that means. If I go to the Window menu here and I scroll down to the bottom where it says Swatch Libraries, there is something here called Web. This space leaves a whole list of web safe colors, but there is really no easy way for me to choose these web safe colors. If I look at them, it's just a whole big mishmash of color.
So I am actually going to close that. I am going to go back to the Window menu, scroll down again to where it says Swatch Libraries, and this time I am going to choose something called VisiBone2. This is actually a library that was created that takes the same web colors, but organizes them in a way where it makes a little bit more sense. Let me show you what I mean. I am actually going to take the tab over here of the VisBone2 library, drag it out on its own, and let's close over here at the web panel. We don't need that one right now. And this also looks kind of like a mess of colors if you think about it.
But here is the thing. You see that there are several white little swatches. Well if we resize the panel here so that the white squares line up to the four corners, notice now I have white squares in all four corners. I can see that the swatches are actually arranged as a color wheel so with the same web safe colors, but I can see them in a way that makes a little bit more sense to me. Now since this is an external library, I want to make sure that this library is always going to be available to me inside of Illustrator. So I am going to go to the flyout menu of this panel and I am going to make sure that the Persistent option is checked.
This way even after I quit Illustrator and then restart it again, this VisiBone2 library will already be loaded. I am now going to take this library, grab it by its tab, and put it in the same group over here as the Color Guide. I now have my Web workspace set up just the way that I want it. So to save it I am going to come back up over here to the Workspace Switcher and choose Save Workspace. I don't want to delete the original one that Illustrator ships with so I am going to choose Web 2 and click OK. Now, anytime that I am working if I know that I want to work with web and interactive graphics I can switch to my Web 2 workspace and everything that I need will be right at my fingertips.
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.