Building a Full Layout / Finishing Up the Layout
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
Did you get all of your Layers organized into Groups inside your Layers Palette? So this is how my Layers Palette is looking now, so I have all of these folders and each folder contains each main area inside my layout. Now, you don't have to do this, but I thought I would show you how to do this in case you want to further organize and arrange your compositions and your layouts, so I think working with something like this with the Layer Groups is going to be much easier as we go along. So, hopefully all good. Now, let's finish off our layout. What I'd like to do first of all is I'd like to crop off the excess content or the excess canvas size down at the bottom of our layout, so I'll hit the C key on my keyboard to flip over to the Crop Tool and then all I'm going to do here is click and drag out a crop frame, something like this and then I'm just going to drag down the bottom edge of my crop frame until its sitting right on the edge of that Footer. And because I have my Snap turned On from earlier, it's actually going to snap to the edge of the Footer, the bottom edge of the Footer, that is anyway. So hopefully you have something like this. Go ahead and hit Enter on your keyboard and that should finish the job for you. OK, great. Now we have a few other layout elements that we've got to create here. I want to create sort of like Sub Boxes inside the Lead Story inside each of our main stories here, Story 1, 2, 3 and 4 and also into our Feature Story as well, so let's see how this is going to play out and there are a number of ways that we can do this. I'm going to start off with our Lead Story here. I'm going to twist open his Layer Group, so I see the Lead Story sub-layer, if you will, inside the Layer Group and I think I'll start off by creating a new layer inside the Lead Story Layers Group and, of course, that new Layer is created inside my Layer Group. Now what I want to do is I want to create a small area down at the bottom of the Lead Story area and that area is going to contain some text. Now let me show you a bunch of different ways to pull this off. One such method that I could use is I could use the same method that you and I used to create all of the other Layout elements. For example, I could head to the Rectangular Marquee Tool inside my Toolbox and if I knew my dimensions I could type them into the Width and Height fields, that's certainly one way to go about this. What I'm going to do though is I'm going to switch the Style Menu up on the Options Bar from Fixed Size back to Normal and now what I'm going to do is I'm going to free-hand out my selection. And this is sort of a second technique that I could use, so I could just sort of eyeball something out like this, you know, I could crank out something like that if I wanted to, right? Which isn't too bad but the accuracy might be off, for example, I'm off on the right-hand side there just a little bit. But what I could do is I could use Photoshop's Info Palette to help me out. So let's go and open him up. I'll head to the Window Menu and then all the way down to Info and what I like about the Info Palette is keep your eyeballs on this area of the Info Palette, the Width and Height area. As I drag out it's going to tell me how large my selection is as I'm creating it, right. So, what I actually want is a selection that's 660 pixels in Width by 105 pixels in Height. How do I know that? Well, again, I measured everything out ahead of time, right, so what I could do is maybe bring my cursor down toward the bottom left corner of the Lead Story area and then drag out a selection that is, indeed, 660 pixels in Width and I'm being very careful here and I'm keeping my eyeball down on the bottom right corner of the Info Palette and we set 105 pixels in Height, something like that, OK? perfect. Now hopefully that's all good there. I can see that I'm 1 pixel off on my Width, which is a real shame so now I'm going to have to take another run at that, so hang on a sec here, let me see what I can do here. Drag this out here, see, it's flipping me there between 659 and 661. Isn't that a shame? Well, I'm going to show you another trick here in just a sec, but I'm going to go and set my Height here to 105, something like that. OK. Now you know what I'm going to do? I'm going to go to the Select Menu and then down to Transform Selection, remember this guy? I'm going to zoom way in on the right edge of this Layout container, something like this and I'm just going to bring this guy out 1 pixel until he's exactly 660 pixels in Width. Look at that. What a shame. It's not letting me do that. I suspect because I have my Snap turned On, by the way, so I'm just going to go View and then Snap, maybe that will help me out of this mess here a little bit. There we go. Awesome. Enter to lock that in. I'm just going to hit my left Arrow key once to nudge that over, something like that - looks great. I'm just going to zoom out here - Ctrl-minus. You still have that New Layer selected inside your Layers Palette - what an ordeal just to get a selection. Anyway, Option-Delete or Alt-Delete to fill that in with your Foreground color. Go ahead and deselect - Command-D or Ctrl-D. Now what you want to do inside your Layers Palette, of course, is rename this guy. Let's just call this Text for now, just so we know what he's going to be used for. Now, as I said, that was one method for pulling off our Text Box, our future Text Box here. Let me show you another method. I'm going to twist shut the Lead Story and I'll pop open Story 1 and inside the Story 1 Group I'll select the Story 1 Layer and then of course I'll go down to the bottom of the Layers Panel and create a New blank Layer, but check this out. Now what I'm going to do is I'm going to hold down Ctrl, or Command here on the Mac side and click on the Story 1 thumbnail. That loads that Layer in as a selection, or as marching ants. You can see down in the Info Palette there, there's the Dimensions of our Story 1 container. What I want to do is I want to create a new box that's 325 pixels in Width by just 105 pixels in Height. So I'm going to head back to the Select Menu and then back down to Transform Selection and then I'll just drag down this guy's Height until the Height is set to 105 pixels and, of course, I'm looking down on the bottom right corner of the Info Palette and it looks to me like it's going to give me a hard time on this one as well, but at least I've had a better time on the Width anyway. See if I can get this locked in here. There's 106, oop, 105 just blew by. There it is, right there, perfect. Fill that guy in. Option-Delete or Alt-Delete. OK, wonderful stuff. Deselect - Ctrl-D or Command-D. Now you know what I'm going to do is I'm going to leave it up to you to finish off the Text Boxes for the other Stories. Go ahead and do those on your own. Over inside the Layers Panel, though, I'm going to rename this guy. I'm going to call this guy Text. Of course this guy's going to hold some text for us in just a short while. I'm going to do one more here with you and that is a Text Layer, or a text area for the Feature Story. So what I'm going to do is I'll twist shut the Story 1 Group, twist open the Feature Story - go ahead and Ctrl-click or Command-click on this fella here, the Feature Story Layer's Thumbnail. Go ahead and create your new Layer and let's go and use our Transform Selection Command - Select and then down to Transform Selection. Now we want this guy to be 320 pixels in Width, which he already is, by just 40 pixels in Height and he's going to be at the top of the Feature Story area, so something like this is, I think, what we want. Perfect. Enter to lock that in. Fill him in with your Foreground color there, Option-Delete or Alt-Delete over on the Windows side. Go ahead and deselect. OK, good stuff. So, again, go ahead and rename Layer 1 inside your Layers Panel and, as I mentioned just a moment ago, I'm going to leave it up to you to finish off the Story 2, 3 and 4 Text Layers.
Tutorial Information
| Course: | Adobe Photoshop CS4 for the Web |
| Author: | Geoff Blake |
| SKU: | 34089 |
| ISBN: | 1-936334-01-1 |
| Release Date: | 2010-02-25 |
| Duration: | 7 hrs / 105 lessons |
| Work Files: |
Yes |
| Captions: | Available on CD and Online University |
| 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 