Learn to design a web template, in this tutorial will show you how to design a white border web template. You can apply some techniques for your website.
Header
- Open a new document 780*620 pixels.
- Create a new layer.
- Select Rounded Rectangle Tool, set radius = 5.
- Draw a shape width 772 and height 84 pixels.
- Right click and select "Make Selection"
- Fill white into selection.
- Go to Select > Modify > Contract...by 4 pixels, then hit delete key.
- Right click on this layer in layer panel, choose Blending Option...
- Set Bevel and Emboss and Drop Shadow
as shown below.
- Now, you have a border for web header, then add images that you like and related your niche.
- This zone is for your own ideas, here are my sample. Images from stock.xchng
Navigation
- Create a new layer.
- Grab Rectangular Maquee Tool, then draw a selection width 90 pixels height 30 pixels.
- Fill white into selection.
- Apply Blending option as same as creating web header.
- Duplicate this layer 8 times, you'll have 8 buttons, then move all buttons like an image above.
- Add your menu.
Border
- Create a new layer.
- Select Rounded Rectangle Tool.
- Draw a shape width 772 height 500 pixels.
- Right click on this shape, then choose Make Selection.
- Fill white into selection.
- Go to Select > Modify > Contract...by 4 pixels, then hit delete key.
- Right click on this layer in layer panel, choose Blending Option...
- Set Bevel and Emboss and Drop Shadow as same as creating web header but change only opacity from 30 to 15%.
Now, you have web header navigation bar and border put all together like and image as shown below or view full image size
Frame
- Create a new layer.
- Select Rounded Rectangle Tool, set radius =5, then draw a shape width 70 pixels height 55 pixels.
- Right click on this shape, then choose Make Selection.
- Fill white into selection.
- Go to Select > Modify > Contract...by 2 pixels, then hit delete key.
- Right click on this layer in layer panel, choose Blending Option...
- Set Bevel and Emboss and Drop Shadow as same as creating web header.
- Put your images under frame layer.
