So, I think that's looking pretty good. We can go ahead and get started with our mess over Behaviors and that's going to take place in the navigation. So I am going to add another layer in our Navigation group. So I'll go ahead and click on the New layer button and we'll call this, rollover_bg. I am going to select my Marquee Tool by pressing M and we'll go ahead and make the selection in our Navigation area that covers the Skateboarding link.
So what we'll do is, we'll actually select black as our rollover color and I am going to bring that back to the foreground by pressing D and that selects our default black and white colors and I am going to press Alt+Backspace to fill that selection, okay, great! So that takes care of our rollover.
The next thing I want to show is, how the drop-down menu is going to look. So I'll go ahead and create another layer and we'll select the Marquee Tool again and we'll draw another selection right underneath the skateboarding item, that looks pretty good and for this color, I am, actually, going to use a gray instead of black. So we'll go ahead set the Foreground Color, click on it and I am actually going to take this darker gray that we have up here, that looks pretty good to me, click OK and press Alt+Backspace again to fill this, okay. I am going to rename this layer to dropdown_bg, click Enter and now, I am just going to put in some text. So we are going to switch over to Notepad. So we'll press Alt+Tab and this is the last of the text that we've got in our Notepad file, we'll select it, press Ctrl+C to copy, we'll switch over to Photoshop, press the T key to highlight the Text Tool and we'll go ahead and click on our canvas and press Ctrl+V to paste the text, okay. So our text has come in, but we obviously need to format it, so I can just select all of it, we'll change the color to white. We'll also make the alignment Left Aligned and in our Character and Paragraphs Palette, I am going to change the Leading to 22 pixels, perfect! We'll press Ctrl+Enter to accept these changes, we'll press V for our Move Tool, we'll go ahead and just move the text to the right place and that looks pretty good.
So what we are going to do now is just add some div lines and we're done with our Rollover behavior. So I am going to create a new layer, I am going to select my Pencil Tool and for my Foreground Color, I am going to select white again, okay, and just to make sure that I am not coloring outside the lines, I am going to select the Magic Wand Tool and just select the drop-down background that we created before and we'll go ahead and select our new layer and the Pencil Tool and we'll just start drawing this out and again, we'll just do this, kind of by high, so click, hold Shift down, draw that out, do that again, click, Shift, draw that out, click, Shift, draw that out and again, I am letting go off Shift every time that I do this, okay, one more, okay. So that's pretty good. We'll just press Ctrl+D to Deselect and we are going to change the Opacity, change it to about 50% or so. So that looks pretty good. We'll just double click on the layer name and we'll rename it to dropdown_divs, okay, perfect!
The last thing we want to do is make sure that we've got our layers grouped appropriately. So I'll go ahead and select all of the Rollover layers and I am going to go back to our Layers Panel Menu, select New Group from Layers and we'll call this, Dropdown menu, click OK or press Enter to accept and that about does it.
So now, what we can do is we can switch back and forth to see what our page would look like with a drop-down or we can remove that and we can also see what our page would look like without an inside page and rather the homepage. Let's get rid of the Character and Paragraph Palette there so we can get a good look at our site and we are going to go ahead and save this masterpiece. So we'll press Ctrl+S to save and there you have it. We've gone ahead and completed a complete a Web Layout in Photoshop, we've created a layout for the Homepage, we created a layout for the inside page and we also added some mock up mess over Behaviors so we can use that in building our HTML page.
Transcription by:
Scribe4you Transcription Services