Refining the Illustrator Layout / Creating Banner Ad Spots
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.
Learn More
Subtitles of the Movie
So, there's just one final area to create here inside our Illustrator layout and that's actually the area below our scientist, this rectangle right here. And what I was thinking for this area is I thought we would set this up so that we'd have a spot inside our layout that would support Banner Ads, so we're going to go with a Standard Banner Ad size, 125 pixels by 125 pixels and we'll set up two columns of Banner Ads here, so here's what I'm going to do. I'm going to go and grab my Rectangle Tool here and I'm going to click and drag out a rectangle, something like this is just fine inside my layout and I'll go and grab my black arrow tool after I do that and I'm going to use my Transform Palette for this work. So this is sort of a, sort of a throw-back to how we were working not too long ago when we were initially setting up our Illustrator layout, so drop a rectangle onto your screen, head to your Transform Palette, and here's our values for x, y, Width and Height. This guy's x Value is going to be 693; his y Value's going to be 660; his Width is going to be 125; and his Height is going to be 125. Something like that, OK great. Now, the next thing that I want to do is and this might sound a little bit odd, but kind of follow me on the magical mystery tour here, what I want to do is I want to put a second stroke on this object so that he stands off the background. Now, this background that we have set up is just plain white, so maybe what we should do is go and throw in our standard Gradient here and then we'll see this second stroke that we're going to put on our Banner Ads kind of pop out a little bit more. So all I'm going to do here and I'm going to kind of show you the down and dirty way to do this, I'm going to select this rectangle here that we created. I'm going to hit the I key on my keyboard and that switches me to the Eyedropper Tool and all I'm going to do is sample the Footer area and what that will do is that'll copy the gradient from the Footer into this layout block that we have here. Now the next thing that I'm going to do is I'm going to hit the V key on my keyboard to switch back to my Selection Tool and I'm going to pop open my Gradient Panel because the only thing that I want to do is I want to set the angle of this Gradient, as always, to that minus 90, just so that everything's nice and uniform and looking like it belongs together. So now we have something like this happening. OK, now, this second stroke, or this double stroke that we're going to put on this object here, so go ahead and select that rectangle that we created there and the palette that we're after next is called the Appearance Palette and once again you might have to head to your Window Menu or look around for a moment onscreen. You should see him kicking around there and once you have your Appearance Panel handy go ahead and pop open the Appearance Panel Menu and choose New Stroke. That's the item that we're after there. Now, the stroke that we are going to add in is going to be a hefty 9 points, so he's nice and thick and the stroke color that we want to set is white, so pop open that little Color area there, that little Color Swatch there and choose white. Set your Width there to the 9 point that I had set there, or the weight of your stroke there and then the next thing that I want to do is I want to move this stroke below the fill, so this is very much like layers if you've worked with your layers quite a bit, so just drag that straight down and we should wind up with something like this. Now, I'm going to collapse my Appearance Panel and I'm going to zoom in here so you can see what we have. Something like this is what we're after. So we have the white fill, the black stroke and then a white stroke after that, if that makes sense. So, hopefully you're getting the same result that I have here. OK, now next up I said that I wanted two columns for my Banner Ads, right? So, what I'm going to do is I'm going to select this first rectangle here and I'm going to use my Option, or Alt-drag trick to duplicate my Ad box out and what I'll do is I'll just go and set up my x and y Values, or coordinates, for this duplicate. So this guy's x Value's going to be 842, so this is for the copy, right and his y Value's going to be 660, just like that. OK, wonderful stuff. Now, what we want to do next is we want to create the two columns, right and again, I'm going to do this as quickly and as down and dirty-ish as possible here with you. So what I'm going to do is I'm going to select both boxes here just by using my Shift key. I'm going to Group them ÐCommand-G or Ctrl-G - I'm going to hold down Alt, or Option and I'm going to drag straight down. But before I let go of my mouse I'm going to throw in Shift so I know that they're nice and locked in, then let go of your mouse first and then your keys on your keyboard, and we should get a duplicate there; nice and lined up and we have x and y Values for these fellas as well. Now I got lucky. My x Value is bang on the money. Make sure you're at 693. If you held down Shift you should get that x Value. The y Value that we want to use is 231, right on the nose, something like that. OK, wonderful. Now, what I'm going to do is I'm going to drag out two copies of this group, so I'm going to hold down Alt or Option here on the Mac. Click and drag straight up, holding down Shift as well so they're nice and lined up. Let go of your mouse first then your keys - let's do that one more time. So, Option, click and drag, throw in Shift, let go of your mouse, then let go of your keys on your keyboard. You should wind up with something like this, right? Lot of work here. OK, we're almost done. The last thing that I want to do is I want to make sure that my pairs of Ads, or my pairs of boxes are all nice and evenly spaced out and there's a nice easy way to do that. I'm going to select all of my pairs here, all the way up here and then I'll head to my Align Palette, hopefully you still have that guy kicking around. I'm going to flip open this Align To option and I'm going to say Align To Selection and underneath Distribute Spacing I want this option right here Ð Vertical Distribute Space. Now, if you don't have this area turned On I believe it's underneath the Show Options and so if you don't see that it's going to say Show Options. Anyway, go ahead and click on that button there. Everything should be nice and spaced out there. You can close out of your Transform and your Align Palette. You can zoom out just a little bit on your layout, save everything and then bask in the glory of your Illustrator layout. So, now that the Illustrator layout is complete, the next task that we have together is to get this guy out of Illustrator and into Photoshop.
Tutorial Information
| Course: | MasterClass! - Adobe Creative Suite: Web Design Workflow |
| Author: | Geoff Blake |
| SKU: | 34049 |
| ISBN: | |
| Release Date: | 2009-10-20 |
| Duration: | 2.5 hrs / 36 lessons |
| Work Files: |
Yes |
| Captions: | For Online University members only |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 