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.
As you continue to evolve your workflow inside of Adobe Illustrator, you may find that you need to get a hold of some tools a little bit more quickly, or that you might find that the panel arrangements just don't suit your eye for your particular workflow. In this movie, I am going to be exploring how to set up Illustrator for a web workflow environment. The first thing I am going to do is create a new document by going to File > New. And I'll just accept the defaults by hitting Enter or Return. It does not matter what size document I am working on; I just want to be able to see all of the active panels and tools here inside of the Illustrator environment.
Once I have this open, I am then going to come up here to the top-right corner and I am going to find the workspace jump menu. And as is the case with all of the Creative Suite applications, you have various workspaces that you are able to jump to from this menu. You can also go to the Window menu and choose Workspace and find one of the workspaces there. Now anytime I open up an application, whether it be Photoshop or Illustrator, for the first time, I always go through to see if they've added any workspaces so that I can then take those and use them as jumping-off points for my own personal workflow. In this case Illustrator does ship with a Web workspace.
And if I click on the Web workspace, it's going to create a lot of different things on my screen. For instance, you are going to notice that I get a lot of different icons here docked on the left-hand side. I also get access to my symbols and things like that. These are all things that Illustrator believes correspond to a web design workflow. So let's take a look at some of these and customize it a little bit to suit our needs. First up here, we have the Stroke, the Gradient, and of course the Transparency panel. These are all things that I need quick access to at all times. I don't want to find them over here in the tabs hidden, or have to go to the Window menu, so I am very comfortable with those being right there, very easily accessible.
Directly beneath that you are going to see some type options like Character and Paragraph, also the OpenType, which is also a great thing to have a hold of. So these three, those can stay right where they are. We have the Links panel. If you're going to be working with other documents like Photoshop documents, JPEGs, TIFFs, PNGs, whatever they might be from other applications, the Links panel is going to be an essential part of your workflow, so you might want to leave that up. If you are going to be creating exclusively inside of Illustrator, or you are not going to be using any raster graphic from Photoshop, for instance, you can actually get rid of that.
If you want to get rid of this, all you have to do is just undock it like this and then click the little X like that, and it will go away. I will click it away for now, just so we can have something to customize. Right here we have the Attributes. If you open that up, that's going to be things like Overprint Fill and Overprint Stroke, things like that. It's also got some things for image mapping. Now in this case I am not going to be using this very much at all, so I am also going to drag that out and just delete it, just like that. I also have variables. If you are going to be working with any sort of data-driven graphics inside of Illustrator, you can use the Variables section. I am not going to be using those, so again I'll drag those out and close them up.
Then we have the Actions panel. If you don't know what actions are, basically they are a way of recording repetitive steps that you find yourself doing inside of Illustrator, and then playing them back on different objects and documents. It's a great way to streamline your workflows. Now I've got some other things up here that I want to rearrange, for instance the Transform panel. I am not going to be using that a whole lot, so I am actually going to drag that over to the right, and I am going to make the Info panel active. I use the Info panel constantly to let me know exactly where I am in my document for X and Y coordinates. It's also great for resizing objects.
You get the Width and Height properties right here. Great to have that prominently displayed. Swatches, I use swatches all the time, so I like to leave those right where they are. The color, same thing. Symbols, I use symbols quite a bit in my web design workflow, and you might want to check out the chapter that I have on symbols as well a little bit later on, because that's going to cover a lot of different things on how to utilize symbols in your web designs. Another great panel to have prominently displayed in your workspace is the Appearance panel. The Appearance panel is like a book that refers to every single piece of your document, and if you can learn to read the Appearance panel and use it to its fullest potential, you won't even have to use a lot of the panels that I have already pointed out.
The Appearance panel has some amazing capabilities. If you want to know more about the Appearance panel, I would suggest going and watching a course on lynda.com called Illustrator: Rethinking the Essentials by Mordy Golding. Mordy goes through the Appearance panel, how you can use that to analyze documents and also edit documents all from this one panel. It's an amazingly efficient way for working in Illustrator, and I highly recommend it. The Appearance panel here I think needs to be a little bit more prominent, so I am actually going to resize it a little bit to give it a little bit more space. Now, I am also going to be working a lot with responsive designs and multiple screen size designs, like mobile sites, applications, things like that, so I am going to need access to Artboards panel.
The Artboards panel is actually collapsed by default right here. So what I am going to do is I am going to drag that out on its own, and I just did that by clicking on the tab and dragging it out. And then I am going to take Artboards, I am going to drag it right here, and I am going to drop it right beneath the Actions button right there. So I have always got my Artboards easily accessible from right there. The Layers panel, I use layers a lot, so I am actually going to resize that a little bit as well. You'll notice that the Appearance panel has collapsed on me. If yours collapses, just double-click the word Appearance and it should open back up, and you can expand it back up like that. If you want to, you can also collapse the Symbols. So just double-click on Symbols; that will collapse that and give it a little bit more space. And then clicking Layers will expand that out.
So now I have Appearance and Layers. Symbols are still active, but it's just collapsed at the moment. If you wanted to, you can dock those right here along the left-hand side. As a matter of fact, I think I'll do that. Let's go ahead and drag Symbols down here, Brushes right beneath that. I use brushes occasionally, not much. And then Graphic Styles, I do use graphic styles quite a bit, so there we go. And so now I have my big panels that I need to see all of the time, which are Info, Appearance, and Layers, all right here, all prominently displayed. I also have easy access to Color and the Color Guide.
I have access to Transform. And then all the things that I use a lot, but I don't necessarily need open all the time are displayed right here in this little Side Dock. Now I have modified the original Web workspace here inside of Illustrator, so what I need to do is go up to the Workspace drop menu, go down and choose New Workspace. I am going to call this Justin's Web Workspace. You can call it whatever you want and then hit OK. And so now I am working in Justin's Web Workspace. Anytime I need to get back to that, I can go back up to the jump menu and choose that. If I make a mistake or rearrange something, I can always go back and reset it. I can do anything I need just like that.
If I need to jump into another workspace, no problem. Let's say I'm working on a brochure and I need to go to Printing and Proofing. I can hop right into that, and then instantly jump back into Justin's Web Workspace right there at the top, and it switches me right back. Now right now you maybe thinking that you simply don't know enough about your own personal workflow to know what you need and what you don't. And that's okay. I just wanted to give you an idea of how to rearrange and reorganize everything inside of Illustrator so as you continue to collect information about the tools and options that you use most often, you'll be able to then put those in play and create your own workspace whenever you feel comfortable.
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.