Viewers: in countries Watching now:
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.
In addition to the traditional sizes of documents like web sites and mobile applications that we're designing inside of Illustrator, we also need to take into account email newsletters, because as a designer inevitably you are going to be asked at some point, can you design an email newsletter? And your response better be yes or you're probably going to lose that client. So in this movie I'm going to be exploring some best practices for setting up a new email newsletter document. So in order to do that, I'm going to hit Command+N or Ctrl+N on my keyboard to bring up the New Document dialog box, and once I have that up, I'm going to make sure that I'm working on the Web profile.
That's very important because we want everything to be web-design-oriented inside of this dialog box. The size, none of these sizes that are listed here correspond to a traditional email newsletter template, so let's just get that out of the way. The width of your email newsletter template, my recommendation is that you don't go over 600 pixels in Width, because many people don't actually open their email; instead they view their email in some sort of Preview panel or in a smaller window docked to the side of their mail application. And on average, the smallest Preview panel for that size is around 600 pixels. So if we always design around that specific number, we ensure that most of our viewers will be able to see the full width and content of our designs. Unless you don't want people to view everything that's in your newsletter, which I'm sure you do, then I would stick to around 600 pixels, so let's go ahead and mark that down, 600 pixels wide.
The height, this can be as high or as low as you want it to be. It depends on the content of the newsletter. How much stuff are you actually putting in here? I usually use a round number like 1000 pixels, and if I don't need it, I can always crop the artboard down to any size I need after the fact, but 1000 pixels gives me plenty of room to work with, and it's a great round number to start off with on a template. So I'm doing 600 pixels wide, 1000 pixels tall, and hit OK. And once I do that, you're going to see, this is my email newsletter, and if I zoom into 100% with Command+1 or Ctrl+1, this is the full size that I'm working with.
Now I do want to add in some guides here to make it a little bit easier to determine like my margins and things like that. So in order to that, what I'm going to do is grab the Rectangle tool. This is sort of an unorthodox way of doing this, but I'm just going to show you my little trick for getting faster. What I'm going to do is I'm going to click one time with the Rectangle tool out on the canvas. Now remember, my Width is going to be 600 pixels wide for the entire document, and my Height is at 1000 pixels. Let's say that I wanted a 20-pixel margin all the way around the outside of that, so I need 20 pixels on the left, 20 pixels on the right, 20 pixels on the top, and 20 pixels on the bottom.
In order to do that, I just need to subtract 40 pixels from the overall Width and the overall Height. So the Width is 600; subtract 40, we get 560, The Height is 1000; subtract 40, we get 960. Once I do that, hit OK, then I'm going to come up here to the Alignment options and I'm going to choose Align to Artboard, and I'll just center it horizontally and vertically. Now if you are unable to see that up there, you probably don't have your selection tools selected.
I did that by hitting the letter V on my keyboard and then going up and hitting those buttons. You could also just click on the Arrow and make sure you have that selected, okay? So now I have my guideline shape out on the artboard. I want to use some guides, so I'm going to use Command+R or Ctrl+R to bring up my rulers and then I'll just drag out guides that snap to these dimensions. I'll just drag that down and snap there, drag this out, and I'll scroll down to the bottom, and snap it there. Now I've got my guides.
I can click on my shape and delete it, and my guides are all in place, giving me an even 20-pixel margin all the way around the outside, Isn't that a lot easier than doing math and trying to drag out guides to a precise pixel location? I think so. Once we get that done, we'll go to the File menu and we'll choose Save as Template. In my Templates section, I'm going to go down to my web design folder. You can just create a new folder if you don't have a web design folder yet, and I'm going to choose to call this newsletter and hit Save. So now anytime I need to create an email newsletter, I have a template already set up with guides and everything.
So if I go to the File menu, choose New from Template, go to Web Design, and select newsletter, I get this template that I just created with my guides and everything ready to rock and roll. So the next time you're asked to create an email newsletter template, follow the simple guides that I've given you here, create your new document, and you'll be ready to rock and roll.
Find answers to the most frequently asked questions about Illustrator for Web Design .
Here are the FAQs that matched your 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.