4 Page Web Design Layout For PC and Mobile Part1

Sketches:

Enter PhotoshopGreed.com's contest drawing to qualify to will a retail copy of Photoshop CS4 Extended Edition

Note: This tutorial is not intended for beginner Photoshop users.

1. Create a canvas, 1024x800 pixels.
2. Fill the background layer with the color #ECECE3.
3. Use the Rectangle Shape Tool to make a shape that's 1024x155 pixels.
4. Align this shape with the top and left of the canvas.
5. This area will be called Header for the remainder of the tutorial.
6. Open the Header layer's Blending Options then click Pattern Overlay.
7. Open the Pattern Picker and Replace Patterns… with the PhotoshopGreed.pat file.

8. Two patterns will appear in the Pattern Picker. Click the second pattern.
9. Make another rectangle shape 1024x52 pixels.
10. Align this smaller shape with the bottom and left of the canvas.
11. This area will be called Footer for the remainder of the tutorial.
12. Copy the layer style of the Header layer and paste the layer style to the Footer layer.
13. Your canvas should look like this:

14. Open the file picture-frame.png and paste in above the Header layer.
15. Free Transform (CTRL+T) this picture then Set Rotation to -10.
16. Move this layer to the upper left of the canvas.
17. Open this layers Blending Options then select Drop Shadow.
18. Change the color to #330033, Opacity 40% , Angle 135.

19. Use the Horizontal Type Tool with the settings: Font Poor Richard, Size 40pt, Color #006600, Bold.
20. Type PhotoshopGreed.com, positioned to the lower right of the picture layer.
21. Open this layers Blending Options then select Drop Shadow.
22. Change the color to #330033, Opacity 75% , Angle 135, Spread 100%, Size 2.
23. Select Stroke and set Size 3px, Color #000000.
24. Use the Horizontal Type Tool with the settings: Font Poor Richard, Size 20pt, Color #003300, Bold.
25. Type A greed collection of photoshop tutorials , positioned below the logo in the Header.
26. Your logo/slogan area of your canvas should look like this:

27. Make a rectangle shape 468x60 pixels to the right of the logo.
28. With the Rounded Rectangle Tool , change the settings to: Color #003300, Radius 10px.
29. Make a rounded rectangle 696x29 pixels under the slogan.
30. This area will be called Menu for the remainder of the tutorial.
31. Copy the PhotoshopGreed.com layer style , and paste it on the Menu layer.
32. CTRL click the Menu layer to select only rounded rectangle the Menu area of the layer.
33. Create a new layer above the Menu layer.
34. On the new layer, fill the selected area with the color #FFFFFF.
35. With the Rectangle Marquee Tool , delete the bottom half of the white fill layer.
36. Change the layer Opacity to 10%.
37. Your Menu of your canvas should look like this:

38. Use the Horizontal Type Tool with the settings: Tahoma, Size 15pt, Color #FFFFFF, Bold.
39. Type the following text with two spaces between each menu item: News, Tutorials, Contests, Advertise, Contact, My Tutorials, My Ads, My account, Log out.
40. Center alignment for the Menu layer horizontally and vertically.
41. Open the file rss-feed.png and paste to the right and slightly above the Menu layer.
42. Use the Horizontal Type Tool with the settings: Poor Richard, Size 16pt, Color #003300, Bold.
43. Type Subscribe to RSS Feed to the right of the RSS feed icon.
44. With the Rounded Rectangle Tool , change the settings to: Color #FFFFFF, Radius 5px.
45. Make a rounded rectangle 133x16 pixels under the RSS area.
46. Give this search textbox a Stroke Size 2px, Color #000000.
47. Open the file search.png and paste to the right of the search textbox.
48. Your Header area of the canvas should look like this:

49. With the Rounded Rectangle Tool, change the settings to: Color #003300, Radius 10px.
50. Make a rounded rectangle 247x29 pixels under the Header area.
51. This area will be called Page Title for the remainder of the tutorial.
52. Copy the Menu layer style, and paste it on the Page Title layer.
53. CTRL click the Page Title layer to select only rounded rectangle.
54. Create a new layer above the Page Title layer.
55. On the new layer, fill the selected area with the color #FFFFFF.
56. With the Rectangle Marquee Tool, delete the bottom half of the white fill layer.
57. Change the layer Opacity to 10%.
58. Use the Horizontal Type Tool with the settings: Tahoma, Size 15pt, Color #FFFFFF, Bold.
59. Type the following text: All Photoshop Tutorial.
60. Center the text in the Page Title horizontally and vertically.
61. With the Rounded Rectangle Tool, change the settings to: Radius 10px.
62. Make a rounded rectangle 661x121 pixels under the Page Title.
63. This area will be called Tutorial for the remainder of the tutorial.
64. Copy the Header layer style, and paste it on the Tutorial layer.
65. With the Rectangle Tool, change the settings to: Color #FFFFFF.
66. Make a rounded rectangle 661x121 pixels inside the Tutorial layer.
67. Align this tutorial picture centered vertically, and indented slightly from the left.
68. Open the file paper-pencil.png and paste it centered in the tutorial picture.
69. Free Transform (CTRL+T) this picture then Set Rotation to -10.
70. Copy the Header 's picture frame logo layer style , and paste it on this layer.
71. Your Body area of the canvas should look like this:

72. Use the Horizontal Type Tool with the settings: Tahoma, Size 16pt, Color # 330033, Bold , Underline.
73. Type the following text to the right of the pic: Tutorial Title.
74. Use the Horizontal Type Tool with the settings: Tahoma, Size 12pt, Color # 003300, Italic.
75. Type the following text under the title: Submitted by Username on Day, Date Time.
76. Use the Horizontal Type Tool with the settings: Tahoma, Size 12pt, Color # 000000.
77. Type some random text under the submission text. You have four lines to do it.
78. Copy and paste this Tutorial area two times , and separate the tutorials with a 6px gap.
79. Your Body area of the canvas should look like this:

80. With the Rounded Rectangle Tool, change the settings to: Color #003300, Radius 10px.
81. Make a rounded rectangle 177x29 pixels to the right of the Page Title , past the tutorials.
82. Copy the Page Title layer style, and paste it on this layer.
83. CTRL click this layer to select only rounded rectangle.
84. Create a new layer above this layer.
85. On the new layer, fill the selected area with the color #FFFFFF.
86. With the Rectangle Marquee Tool, delete the bottom half of the white fill layer.
87. Change the layer Opacity to 10%.
88. Use the Horizontal Type Tool with the settings: Tahoma, Size 15pt, Color #FFFFFF, Bold.
89. Type the following text: Tutorial Categories.
90. Center the text horizontally and vertically to the layer below it.
91. With the Rounded Rectangle Tool, change the settings to: Radius 10px.
92. Make a rounded rectangle 202x232 pixels under tutorial categories.
93. Copy the Tutorial background layer style, and paste it on this layer.
94. Use the Horizontal Type Tool with the settings: Tahoma, Size 14pt, Leading 21pt, Color #330033, Bold, Underline.
95. Type the following text on separate lines in the rounded box: 3D, Abstract, Animation, Design/Print, Drawing/Painting, Photography, Text, Tools/How To's, Web/Mobile/UI.
96. User the Ellipse Tool with the settings: Color #003300.
97. Hold Shift, the make a circle 8x8 pixels.
98. Copy the Page Title layer style, and paste it on this bullet.
99. Copy and paste eight of these bullets and left align them with the tutorial category names.
100. With the Rectangle Tool, change the settings to: Color #FFFFFF.
101. Make a rectangle shape 200x200 pixels below the tutorial category background.
102. Your canvas should look like this:

103. Open the file camera.png and paste it on the left side of the Footer.
104. Free Transform (CTRL+T) this picture then Set Rotation to -10.
105. Copy the Header 's picture frame logo layer style, and paste it on this layer.
106. Use the Horizontal Type Tool with the settings: Poor Richard, Size 16pt, Leading Auto, Color #003300, Bold.
107. Type the following text to the right of the camera: Pursuit of Web, LLC and photoshopgreed.com are not associated with Adobe, Inc.
108. Type the following text on a new line: Photoshop is a registered trademark of Adobe, Inc.
109. Open the file bookmark.png and paste it on the right side of the Footer.
110. Type the following text under the bookmark: About | Contest Rules | Legal | Advertise.
111. Your finished canvas should look like this:

Web Design Tips:

1. Use solid colors instead of images for solid backgrounds.
2. For gradient backgrounds, use the Single Marquee Tools to extract single pixel images that can repeat across the background.
3. Make your design with CSS in mind first. This will save you some time from having to make CSS multi browser compatible.
4. Don't be afraid to go back to tables. Hybrid table/CSS still works.
5. Optimize down to 60%, or until you can't stand it anymore.

Part 1 | Part 2 | Part 3 | Part 4