Home
Photoshop
Web Layout
Drawing Template
Part 3: The Body
The Body - Covers how to design the body and structure of the template.
1. First off, we are going to make our browse menu. So get your rectangular marquee tool (m) and make a rectangle under your first ad bar you had made in the previous tutorial section, make sure you align the width of it with the same width as the ad bar, and fill it with white, like the following screen shot:
2. Next, apply the following layer style settings to the layer:
3. Now add a green line on top of the layer, you should already know how to do this, i will not bother explaining this, because we did it in the previous part, here's a screen shot if your confused:
4. We now are done the Browse menu, i added some text and a bit of extra things to spice it up.
5. Now we are going to work on the little Newsletter menu bar. So make a new layer and using your rectangular marquee tool (m) make a rectangle below the browse menu, make sure the width of the selection is the same as the browse menu and fill it with white.
6. Next, use the same style we used for the Browse menu rectangle, you should be saving the styles we do, as they will be useful for you in the future. After you have applied the layer style settings, we are going to add a small header for this bar. So make a new layer and using your rectangular marquee tool (m). Make a selection on top of the previous selection we made but make sure its like the following:
7. Once you've made your selection, fill it with #727272 and apply the following layer style settings:
8. Looks good eyh? Well, next you should add a green line, i hope i don't need to explain that anymore because we've made quite couple in this tutorial, and i added a shine and some text, and your now done the newsletter bar!
9. Now we are going to work on the content bar. So make a new layer and make a rectangle using your rectangular marquee tool (m) as big as this one:
10. After you have made your selection, fill it with white and use the same layer style as the previous bars. Next we are going to make a header the same style as we did with the Newsletter bar header, so make a new layer and make a selection over the bar we just made as a bg for our content bar.
11. Once you've made your selection fill it with #727272 and then use the same layer style as the newsletter header bar. After that, add the green line that we've made tons of times and you should know how to make from pervious parts (look at Part II if you don't know how).
After your added the green line, spice it up, with a shine and some text and your done with this part!
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials