First tutorial! Finally. Click images for full size. Result:

1. Create canvas 1200x1500px and fill the background layer with #150806.
2. Set vertical guides at 175px and 1025px.
3. Create a new layer (header). Set horizontal guides at 100px and 300px, then crop the layer within the new guides. Fill it with #802517.
4. Creat a new layer (body). Set vertical guides at 200px and 1000px. Set horizontal guide at 1200px, then crop the layer within the new guides. Fill the layer with #ad928e.
5. Create a new layer (navigation). Set horizontal guides at 325px and 375px, then crop the layer within the new guides. Fill with #802517.
6. Create a new layer (footer). Set horizontal guide at 1400px, then crop the layer within the new guides. Fill with #802517.
7. Create a new layer (header bottom left corner) and crop to 25x13px at the bottom left corner of the header, outside the body. Fill with #671e12.
8. Use a selection tool (eg. path tool) to divide the rectangle into two congruent triangles and delete the bottom left one.
9. Duplicate (header bottom right corner) and flip horizontally, then position at the bottom right of the header.
10. Duplicate the two corners (navigation bottom left corner, navigation bottom right corner) and place beneath the navigation. Do the same for the footer and flip vertically, but place above.
11. Rearrange the layers so that the corners are at the bottom and the footer, navigation, and header is above the body.
12. Create a drop shadow for the body layer.
13. Create a drop shadow for the header layer. Then crop so only the bottom part of the shadow remains. Repeat for the footer and crop so only the top part of the shadow remains. For the navigation, crop only the left and right side.
14. Set horizontal guides at 400px and 1175px, and vertical guides at 225px, 725px, 750px, and 975px. Add filler text (Sans/Arial, 12px, #422925). Add a heading (Sans/Arial, 18px, #9e1905
15. Add the navigation text (Sans/Arial, 20px, #d1bab7).
16. The rest of the text isn’t really important. Create a new layer (border). Make a 1px wide selection to the left of the 750px guide and fill with #977570. Make another 1px wide selection to the left of that and fill with #bfa5a2.
Coming up: Coding: Undefined (Part 2)

















