So, that about does it for our Homepage layout. Now, of course, we also want to create a layout in Photoshop for the inside pages and in order to do that, we 're basically going to hide all of the elements of the homepage. So we'll toggle the visibility for the Features area as well as the Subfeatures area, toggle this, the Video Player area and this is, basically, the show of our website and we can design our inside page in this Content area right here.
So our inside pages are going to be relatively straight forward on this site. What we are going to do is create a Subnavigation for each of the sports that our magazine covers. So we'll go ahead and create a horizontal guide, just drag it from the top ruler and that looks about right. Now we are going to go and create a new layer, select the Marquee Tool by pressing M and we are going to select this new area that we've now created. I am going to click the Foreground Color and I am going to enter in the predetermined value, bec056, that's a bit of a brownish-green color that we've got there, we'll click OK and I'll press Alt+Backspace to fill the selection with the foreground color.
Okay. So, now we just need to add our Subnavigation text. Again, we'll switch over to Notepad and we'll just select this text here, this is our Subnavigation, we'll copy it, switch over to Photoshop, select the Text Tool, make sure that it's using white as the color and that it, actually, is coming in as Bold text and at 10 pixels, okay. We'll just click here and press Ctrl+V to paste this, okay. So it looks like it came in centered and we'll just click on the Left-align Text icon to left align it and we'll press Ctrl+Enter to accept that and we'll just move this slightly to the right by pressing the V key to highlight the Move Tool and pressing right, that looks about right, okay. Actually, my text is little bit smaller than I'd like. So again, I can press the T key to highlight the Text Tool and I am going to make this font back up to 11, perfect! Okay, so that is our Subnavigation and what we are going to do next is add some Title text and then add some Body text, may be add an image to show how that might play out in the Content area and then we'll work on mocking up some mess over Behaviors.
So let's get started with the Title and I'll make sure that I have my Text Tool selected and what we'll do is, we'll just click anywhere on our Content area. So for our title text, we'll just type in, Whistler-Blackcomb, British Columbia, okay. We'll just select this text, you want this to be a different color. So we'll go ahead and select the text color and we'll actually use that same red color that we've been using from the header, we'll click OK. For our font, I am going to select Georgia, which is a common web font and we'll go ahead and make this a little bit larger. So we'll go up to 30 pixels or so and we'll stick with Regular style, perfect! So, we'll press Ctrl+Enter to accept that and that will be our title text.
Next we're just going to create our Content text. So we'll press the T shortcut for the Text Tool and we'll just go ahead and create a text area for ourselves, something like that and we'll switch over to Notepad and copy this text that we've got here and it just happens to be placeholder text. We'll go to Edit, Copy, switch back to Photoshop and before I paste, I just want to make sure that I've got the right font selected. So we'll go up and select Arial, Regular Style, 11 pixels, no Anti-Aliasing and I want this to be black text and I'll actually bring up the Character and Paragraph Palette and I'll make the line height about 16 pixels, okay. So now I am ready to paste this. I am going to press Ctrl+V and that pastes our text for us, that looks pretty good. So we'll press Ctrl+Enter and commit our changes.
So the next thing we might want to do is insert an image to show how that might appear in one of our inside pages. So I am going to go ahead and place a new image on to our layout, we'll go to our File Menu, select Place and because the story is about Whistler, we'll actually select our Snowboarding picture from earlier and we'll just place it, okay. So, obviously, the Photo that's come in is a little bit larger than we'd like. So we can go ahead and go to the top right-hand side, hold Shift down and using the Scale Tool, just scale it down, scale a lot smaller, that looks about right, we'll press Enter to commit the changes, we'll press the V key to highlight the Move Tool and we'll just move this image into place and that looks about right and it looks like, we need to create a Quick Mask, so I am going to press the M key to select the Marquee Tool and we'll, actually, just draw a selection right here and press the Add Layer Mask button, there we go.
So with that, that pretty much does it for the inside pages. So before I move onto mock up our mess over Behaviors, we'll organize our layers first. So let's go ahead and Shift+Select all of the layers that belong to the inside page layout and go back to our Layers Panel Menu and select New Group from Layers. We'll call this Inside Page, select OK and there we have it. I am also going to organize my Footer layers. So we'll Shift+Select those two layers, in Layers Panel Menu, New Group from Layers, I'll call this Footer and then what I am going to do is just move the footer down to the bottom and what we'll also do is move this Flash Background layer into the Features Group. I am also going to move the Inside Page group down to about the footer and we're going to rename this layer for the Video Player and we'll double click there and call this video_placeholder. I am going to go to my Layers Panel Menu and select New Group from Layers and we will call this Video Player, okay and we will just twirl that up, okay, prefect! We'll, actually, just toggle the visibility on that.
Transcription by:
Scribe4you Transcription Services