...Page One
Learning how to Create Your First web Template (Page two)
15. The next step in this lovely tutorial is making the bars that separate the text on the navigation. Press “D” to reset the foreground and background colors. Once they are reset, take your line tool and drag a line from the top to the bottom of your navigation bar. It doesn’t matter what color you do this in. (Just make sure it’s black or white). Next, let’s duplicate the line layer and set the color of it to the opposite color of your first line. Move this duplicated layer one pixel over to the left or right. (Whatever you think looks best) Set the white line to blend mode “Soft Light”. Your result should look like this:
17. Duplicate your black and white lines 4-5 times and seperate the evenly across the navigation bar. Add text between the navigation bar lines. I’m using Verdana at size ten. You should end up with something like this:
18. Now that the top part of our template is complete, we need to make our content box. We’re first going to define where the top part of our navigation is going to be. Let’s just say you’re going to want to place advertising on this site, so we’ll put it down about 75 pixels below the navigation. Once you’ve spotted where you want your content box, we’re going to lay down the top part of it. This will look similar to our navigation bar. Take your rectangle marquee tool and make a long rectangle. About 33 pixels high. Once you’ve done that, create a new layer and fill it with the color “#395d6f”. Deselct your selection once you’ve filled. In the blending options, (double click on the layer) apply a stroke of 1px black. Create a new layer. Again, take your rectangle marquee tool and from the top of your blue bar, drag halfway down, and all the way across. Fill the selection with white and set the blend mode to “Soft Light” with an Opacity of 21%.
19. Create a new layer under your glossy blue bar, this is where the content is going to go. Directly under your blue bar, take your rectangle marquee tool and drag the length of the bar, and almost all the way down to the bottome of the template. (We want to save room for the footer.) Fill this selection with “#e1e1e1”. Apply a stroke of 1px black.
20. Now we’re going to make a place for our subtitles. Create a new layer, above the content box. Take your rectangle marquee tool and create a skinny rectangle below your glossy blue bar. The bar should be about 15 pixels high. Fill it with color “#424242”. Once you’ve done that, deselect your selection and get the custom shapes tool. Make a small white arrow on the left. Just to the right of this is where your subtitle will go.
21. Just to add a little more pizzazz to the content box, we’re going to put some scanlines in. Use the same technique as before, but make your scanlines black. When you’ve done that, create a new layer just under your subtitle bar. Take the rectangle marquee tool and make a skinny rectangle, about half the height of the subtitle bar. Fill in your selection with the black scanlines and set the blend mode to “Soft Light”.
View Full Size
22. We’re getting close! Let’s make a place on the left for login box and affiliate boxs. We’ll start by using the same method to create our glossy blue bar that is just above the Subtitle bar. But this time we’re going to use our subtitle color (#424242). Once your brown glossy bar, make a subtitle bar under it, but use the blue color of your glossy blue bar. (#395d6f)
23. We’re going to need a place to put content on the left content bar, so we’ll use the same method which we made our Main content box. Make sure you do this on a new layer below your subtitle box. If you would like, you can put scanlines like we did in the main content area on the left content area. However, that step is optional.
24. Now that we’ve got a space for our login information, let’s make it! We’ll start by taking our rectangle marquee tool and making a rectangle almost the width of the left content area and about 25 pixels high. On a new layer, fill the selection with white. In the blending options, but a stroke of 1px black. And a drop shadow with the following settings:
Above the box type “Username:”. Then below it type “Password:”. Duplicate your Username box and move your dupicated one below your “Password text”.
25. So what happens when you type your username and password? You have to click Login of course! So let’s make a login box. To do this first create a new layer. Take your rectangle marquee tool and make a box about 67 pixels wide by 20 pixels high. Fill the selection with white. Next bring up the blending options. Put a stroke of 1px black on the box. Then put a Gradient Overlay with these settings on it:
26. After you’ve made your login box, we need a place to put our affiliates. Duplicate all of your left content bar. (Glossy brown, blue sub bar, and scanlines if you chose them.) Move these duplicated layers below your login button. Now you’ve got a place for your affiliates!
27. Now we’re going to make the footer. To make this, create a new layer, above all others. Start it just below where the main content and left content ends and drag to the end of the template. Use your rectangle marquee tool for this. Next, fill the selection with “395d6f”. Apply a gradient overlay with your foreground color (395d6f) and white. Set the Scale to 150% and Opacity to 50%. Put some text in your footer. Usually a copyright or navigation goes in the footer. It should look like this:
28. This is our last step. Fill your template with some fake text to see how it would look if it was filled with content. I like to get fake text from www.lipsum.com
Your template should look like this (click for full size)
Thank you for using this tutorial. We hope that you'll join us in the community forums. Please register and support BlindMansGFX! :)
Comment on this tutorial