Soushi | Free Adobe Photoshop Tutorials

Create a smooth white web design.
Tutorial Updated: 27/12/08 (added missing inner shadow)

Alright, today we’re gonna be working on an once modern website layout.

1. Let’s start off by creating a new canvas. I usually like to start off at 800×600, but for the purpose of the tutorial we’ll use 700×600px.
2. Now fill in your layer with white (if you created a transparent canvas). You can do this by flicking white as your Background colour and then press CTRL+Backspace.
3. Create a new layer name it “header”.
4. Select the Rectangular Marquee Tool and use these settings.
   
5. Now click on the canvas to bring up your selection and move it so that it is inside the canvas. Fill in the selection with black.
6. Deselect the selection by pressing CTRL+D.
   
7. Now press CTRL+A to select all your canvas. Now press CTRL+X to cut your header.
8. Press CTRL+V to paste in your header block. It should now be exactly in the center of your canvas. Press V to bring up the Move Tool.
   Now hold Shift and press your Up arrow on your keyboard a few times to move the box 10 pixels each time. When you arrive near the top release shift and move it just using the Up arrow.
   
9. Create a new layer and name it “menu”. Select the rectangular marquee tool again and use these settings.
   
10. Now do the same as for the header. Fill the selection with black, and bring it just under the header box so that they are just touching. You should now have what looks like a larger rectangle.
    
11. Create a new layer, name it “bar” and again select the rectangular marquee tool. Use these settings.
    
12. Fill the selection with black and move it to the left of the header and menu.
    Next duplicate that later by pressing CTRL+J whilst having the “bar” layer selected. You can name this layer “bar2”, it’s up to you.
    Now move this bar to the right of the header and menu. You should now have something like this.
    
13. Now we’re going to start giving the menu and the bars some looks because at the moment it looks pretty dull!
    Select your “bar” layer and in the layer palette either click the little “fx” button and choose gradient, or just right click the layer and choose “blending options”
14. Go to the gradient tab, and use these settings.When you insert the grey colour in the gradient, make sure you select the colour, then click the little point in the middle of the gradient like shown above. Set this point to 40%.
    

    

15. Right click the “bar” layer and select copy layer style
16. Right click your second bar (“bar2”) and select apply layer style
17. Now on layer “bar2” click the gradient overlay style. Now check the Reverse box and close.
18. Right click your “menu” layer and select apply layer style.
    You should now have something looking along those lines.
    
19. What we’re going to do now is actually just give our header some colour. Now you may deviate from the tutorial and use an image or something of your own. Because of a lack of ideas for a header at the moment of writing this tutorial (I actually spent a good 45 minutes wondering what to use), I’m just going to use a simple gradient. You can use this too if you’ve got nothing to use for the moment.

20. Select the “header” layer and go to the blending options. Select gradient overlay and use any colour you like. I’ll be using blue for my example.
    Stroke:
    
    Gradient:
    

    

21. You should now have something which looks like this.
    
22. Okay it all looks a little more joyful right now so we’re going to start adding in the header piece and footer.
23. Now we’re going to quickly create a layer which will help us out in the next few steps. So just create a layer, you don’t have to name it anything. Now select the pencil too, or the brush tool. Select a small brush size like 1px or 2px.
24. Now on this layer just hold shift and draw a vertical line a few centimetres long in your canvas.
    Do the centering trick: Select it all using CTRL+A then cut it with CTRL+X, now paste it with CTRL+V. It will now be perfectly centred.
    Now select the move tool and move up it up around the header area by holding shift and using the Up arrow key. DON’T MOVE IT LEFT OR RIGHT, JUST UP! Now leave it here for now.
    
    
25. Create a new layer and name it “hpiece”.
    Select the Rounded Rectangle Tool. Now go to the top toolbar and use exactly everything you see in this picture.
    
26. Now you want and click and hold your left mouse button so that you can move the rounded rectangle outline around. Move it to the header area, try and move it so that it fits between the two bars. It doesn’t need to be perfect, if it’s one or two pixels out don’t worry. This will help us in the next step.Here is a screenshot to help you out if you got confused. I’ve put the rounded rectangle between the bars, and we have that black line in the center we made earlier.
    
27. Right click the Pen Tool and select the Add Anchor Point Tool. Now, this is where our black line helps us out.
    Click on the rounded rectangle line and the black line meet. You should now have a fairly centred point.
28. Right click the Pen Tool again and select the Remove Anchor Point Tool.
    Click and remove the two circled points in the screenshot.
    
29. Now right click the Path Selection Tool (the one which looks like a mouse pointer), and choose the Direct Selection Tool (white one).

30. Select the point shown in the screenshot. We’re gonna move this point now. With the direct selection tool still selected, hold shift and press the Down arrow 3 times. This will nudge our point 30 pixels down.
    
31. Now do this for the same point to the right.
32. Make sure you have your “hpiece” layer selected. Right click within the lines of the rounded rectangle and select Make selection… and press OK in the next dialogue.
33. Now fill this layer in with black, so we can see it on the white background.
34. Use CTRL+D to deselect. You can now delete that black line we created before.
35. We’re going to give that layer some style now. Right click the “menu” layer and copy layer style.
36. Paste the style on the “hpiece” layer, and open up the blending options.
    Then go to the inner shadow tab, and add this inner shadow.
    

37. Now select the move tool, and use the keyboard arrows to nudge the “hpiece” layer left or right so that it is perfectly within the two bars.
    If you’ve done this correctly, the stroke from the “hpiece” layer should overlap perfectly on the strokes from the two bars. If not, do the rounded rectangle steps again. Making sure you: Add the point first, remove the two points, and then nudge the two other points. While writing this tutorial I actually encountered this problem and by doing it again it worked out.
38. Now this is up to your own liking, it’s perfectly centred, all that is left is to nudge it up. So with the move tool and the arrow keys, nudge it up to your liking. This is how I placed mine.
    
39. Also please note, if your “hpeice” appears darker than mine, it is probably because of the gradient. Make sure that the white part of the gradient faces downwards. If it doesn’t simply hit the Reverse box.

40. Alright we’ve got quite a bit done now, but we’re not over yet. We still need to create the footer.
41. Create a new layer and name it “footer”. Now select the rounded rectangle tool and use these settings.
    
42. Click on the canvas to create your rounded rectangle outline. Now select the add anchor point tool. Now add two points at the top like shown on the screenshot.
    
43. Now select the direct selection tool and select the point to the right. Hold shift and nudge it down 2 times (20 pixels) Do that for the other two points on the right.
44. Whilst having your “footer” layer selected, right click in the rectangle and select Make selection… Now fill this layer in the black. This is what you should have.
    
45. Place the layer between the two bars and nudge it down till the rounded edges are out of the canvas.
46. Then you want to select the rectangular marquee tool and draw a box around the rounded edges at the top of the rounded rectangle. Fill them in with black; this will lead you with straight edges.
    Take a look at the screenshot to see what you should have.
    
47. Now right click your “hpiece” layer and copy layer style. Paste the style on your “footer” layer and open the blending options. Go to the inner shadow and use these settings.
    
48. Now create a new layer called “footerbar” and place it under your “footer” layer.
    Grab your rectangular marquee tool and draw a rectangle that is at least as long as the space that we made in the “footer”.
49. Right click the header and copy layer style. Paste the style on the “footerbar”. Now you have a blue gradient on your bar, we’ll add a stroke and some shine – go to blending options and use these.
50. Now move that bar in place, aligning the strokes with the stroke of the “footer” and “bar2”
51. CTRL+Click in the layer palette on your “footer” layer to select it.
    Now select your “footerbar” layer by clicking on it in the palette and hit Delete.
    You should have something which looks like this now. Notice how all the strokes are overlapping and fitting perfectly.
    
52. Now select your “hpiece” layer and put it above all layers in the layer palette.
53. Create a new layer and name it “bevel”. Now select the pencil tool, and while holding shift – draw a white, vertical, 1pixel line going from top to bottom of the canvas.
54. Use the move tool and your arrow keys to nudge it to the left side of the “bar” layer. This will create a bevel for the bar. Here is a screenshot to show you where to put it if you don’t understand.
    
55. Now duplicate that letter using CTRL+J, and put it on the right bar, on the right side of the bar.
56. Now merge the two layers, and set the opacity to 75%.
57. Create a new layer and name it “gradient”.
58. Grab your rectangular marquee tool and use these settings to draw a rectangle.
    
59. Now use the gradient tool to draw a black-to-white gradient inside the selection. Drag the gradient from the top of the selection to the bottom.

60. Now use the move tool and your keyboard arrows to move it just under the menu. You can leave it one pixel away to create another kind of effect.
61. Lower the opacity to 10%, here’s what you should have now.
    
62. You now have your basic layout done! All that’s left to do is add in all the text for the logo, the menu, the footer copyright, the content, and all the other little details you may want to add to your menu or header!
    
63. To create the effect used in the menu, type your links using the colour #787878.
    Next duplicate your layer. Now colour your original text in white using colour overlay in blending options.
64. Grab the move tool, and with the arrow keys, nudge it right one time, and down one time.
    You’re done! Here’s what I came up with in the end.

    Fonts Used:
    Logo: Nasalization
    Content: Verdana
    Menu/Footer: Silkscreen
    You’ll find all these fonts easily at dafont.com.