Home
Username:
Password:
MasterClass! - Adobe Creative Suite: Web Design Workflow Tutorials

Getting Started in Illustrator / Laying Out the Main Blocks pt. 2




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 let's finish up the basics of our layout here inside Illustrator. I'm going to head back to the Rectangle Tool inside the Toolbox here and again just quickly throw out a rectangle onto your Artboard and I'll tap my V key here on the keyboard to grab my black arrow tool, my Selection Tool and let's head over to the Transform Panel and throw in our values. So, the x Value for this new rectangle is going to be zero; his y Value is going to be 617; his Width we'll set to 325; and his Height we'll set to 260. OK, perfect. Now, we actually need four of these guys. We need four similarly sized boxes if that makes sense, so what I'm going to do here is I'm going to hold down Option on the Mac here, or Alt on the Windows side and I'm going to use that Duplication trick and now all we have to do is go and set the x and y properties because the Width and Height can remain exactly as they are. So we'll set his x Value here to 335 and his y Value to 617. That's perfect. And I'll go and duplicate out another box here just by using that Alt or Option trick and go and set this guy's x Value, or x position to zero and his y Value can be set to 348. OK, wonderful. Now, one more here for this set of four, so I'll duplicate out another box here and I'll simply head into my Transform Panel and set his x Value to 335 and his y Value to 348. OK. Wonderful. Alright we're looking decent here. We only have two more rectangles that we need for the main part of our layout here, or our general layout here. So, you can either duplicate out another rectangle or you can go back to your Rectangle Tool and throw out another rectangle, which is what I'm going to do here. Just drop him onto your Artboard as usual and back to your black arrow tool via the V key on your keyboard and I'll head back into my Transform Panel and we'll set this guy up here. His x Value is going to be 670; his y Value is going to be 678. We'll set his Width to 320 and his Height value will be 590. OK, perfect. Alright. Last but not least we want to put a Footer into our layout, a Footer that runs right across the bottom of our layout here, so back to my Rectangle Tool here and I'll just sort of throw in a quick rectangle here; back to my Move Tool, or my Selection Tool via the V key on my keyboard and we'll go and set this guy up so his x position is going to be zero; y is going to be 77; his width - we want this guy to expand, or stretch, right across the entire bottom of the layout so we'll set his Width to 990; and his Height to 100 pixels. OK, perfect. We are looking good here. That concludes the rough layout, or the general layout for our document. Now, a neat trick that I just thought of, just as I was sort of laying this out here with you, is you may find that your artboard is a little bit distracting. A lot of people choose to keep it turned On - that's perfectly fine. Other times people choose to turn it off during the development phase of their layout. It's entirely up to you but if you do want to turn it off you can just head to your View Menu and then look for Hide Artboards - there he is, right there - and that, of course, will turn off your Page View, or your Artboard inside Illustrator. As a matter of fact, I'm going to go into my Transform Panel here for just a moment and now what we can do is take a closer look at our layout. We can zoom in on our layout if we want, Command-Plus, or Ctrl-Plus on the Windows side, will zoom you in there - Ctrl- or Command-Minus to zoom out - of if you want to have a closer look at a particular area inside your layout try this - try holding down Command-Spacebar, or Ctrl-Spacebar and now you get your Magnifying Glass Tool and as soon as you let go of your keyboard you are back to your regular old Move Tool there. And by the way, this little trick here, I was just holding down my Spacebar on my keyboard to navigate around inside my document and then I'm just going to hit Command-zero here; that'll take me all the way back out. There we go. There's the rough layout that we have here for our web page inside Illustrator.

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