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.
Before we can actually get started creating our web design here inside of Adobe Illustrator, we have to first create a new document, and in this movie I am going to be exploring how to create a new document for the web using Illustrator. Let's go up to the File menu and choose New, or you can hit Command+N or Ctrl+N on your keyboard. When you first open up the New Document dialog box, you are going to be able to name your project. In this case let's say that I am doing a blog design, so I'll just call it Blog Design. And directly underneath that, you are going to have access to Profiles, and by default it probably is going to show you something like the Print profile. The Print profile is great if you are creating a business card or a poster or even some letterhead, but for a web design, not so much.
So we need to drop that down and then take a look at the other options that we have available to us. We do have a Web option, so if I select that, you are going to notice that it also gives me some size options down here at the bottom. The size options, although they've gotten better over the course of the last few versions of Illustrator, they're still not quite hitting the optimal targets, in my opinion. Let's take a look at those. We have 640 x 480, 800 x 600, 960 x 560, 1024 x 768, and 1280 x 800. The only acceptable sizes in here are 1024 x 768 and 1280 x 800 in my opinion, because screen sizes just simply aren't this small anymore unless you are talking about other devices like a tablet device or something like that.
I am going to discuss mobile document development in an another movie, but in this case let's say that I wanted a blog design. Well, I don't really see anything that fits that for me here, so I am going to have to create my own. So I am going to first select a width. And this is going to be in pixels, so you have to make sure your units are in pixels. And so I am going to do 1280 for the Width. I want it to be 1280 pixels wide. And then for the height a blog design is actually pretty big depending on how much stuff you are trying to put in there. For this particular one, I want a header. I want a big content area to show several blog posts.
I want to be able to show widgets, and a big footer. So, I usually go about 2000 pixels for the length, so 1280 x 2000 is a pretty big document. I want to make sure that this is a portrait orientation, so the little man standing up on a straight piece of paper. You could also go horizontal if you want it to, but in this case I want it to be vertical. You do not have to worry about Bleed because we're on the web; there is no bleed. You can also see here that we are set to a Color mode of RGB. Pixels Per Inch is set to 72. Now in Illustrator, we are working in a resolution- independent environment, but when we go to save these out or we have effects that need to be rasterized upon output, this is the resolution at which those are going to be rendered. For now 72 pixels per inch is okay.
Now it also is going to align objects to the Pixel Grid, meaning that everything is going to snap to a Pixel Grid, making it easier to make "Pixel Perfect designs," and so I absolutely want to leave that on. Now here is the tricky part about Adobe Illustrator: I cannot come up here and choose to save a new document profile. There is no way to do that. So what I have to do is save this out as a template file and then go from there. So, what I am going to do is simply hit OK, and that will create a new blank document for me called Blog Design. And now I want to save this out as a template, so I'll go to File and I will choose Save as Template, and that will take me to my Templates directory.
And I am actually going to create a new folder inside of my Templates directory and I am going to call this Web Design and hit Create. Once I do that, I'll change this just to be blog and I'll hit Save. So now that's saved as blog.ait or Abode Illustrator Template. And so I'll close this because I don't need to save it. And I'll go to the File menu and choose New. Now anytime I want to utilize that template I just go right here to the Templates, find Web Design and select blog.ait. Then I would hit New and my document is created. Pretty easy.
Let's close this up. Let's take a look at some other common sizes of things we might be asked to create inside of Illustrator. That's a blog or a web site template. Let's go to File > New and let's explore something like a banner ad. This is something that web designers are constantly asked to do, design a web banner for something, an ad that's going to be displayed somewhere, something that they are going to turn over to a Flash developer. Any number of things can be asked of a "web designer" these days, so we need to take a look at some common sizes for those. So in this case I am going to change the Width to something like 728 pixels, and I will change the height to 90 pixels.
And it automatically adjusts to a landscape display, and that's fine. And so now I am going to hit OK. There you see my banner ad that I've got. And I'll go to File > Save as Template. I am going to save it in my Templates directory inside of the Web Design folder, and I am going to call this Leaderboard, so that's the type of graphic I just created. It's saved, and I'll close this. I am going to create a few more. And I am just hitting Command+N or Ctrl+N each time to get into the new document dialog box, this time changing the Width to 468 and the Height to 60. Hit OK.
And if I view this at 100% by hitting Command+1 or Ctrl+1 on my keyboard, you will see just how small it is. And I will go to File > Save as Template, put it in my Web Design folder, and we'll call this just a Banner. Now I'll go ahead and close this, and let's do one more. File > New, change the Width here to 300 pixels and the Height to 250 pixels. There we go. Hit OK. Command+1 or Ctrl+1 so you can see the full size of that, and then I'll go to File > Save as Template. And I am going to call this Medium Rectangle.
Save it in my Web Design folder and hit Save. So now in just a few minutes I've created several different web design templates that I can then easily jump into anytime I need it. So let's say the client comes to me and he says "Okay, I need a Leaderboard graphic for my next web site that I am getting ready to launch and I need this at a specific size, 728 x 90 pixels." Well, that's easy. Just go to File > New and I can choose Templates\Web Design, and I'll find the Leaderboard and hit New, and there we go; it instantly jumps me into the Leaderboard.
Or I could do a blog design, or I could do the banner ad or any number of those templates that I've set up. So does it take some time to set up these templates? Yes, it does, but it is going to save you a ton of time in the long run because you'll have all of these built up and saved so that you can easily jump into any project at any given time. So the next time you go to create a new document for the web, keep in mind the dimensions and things that you are setting up, and then save that out as a template so you can easily get back to it anytime you need it.
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.