|
|
|
|
 |
 |
|
|
|
 |
|
|
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.
Content box
- Font for header of content box, I used verdana size 14px and color #C1BCBC.
- Learn how to create dotted line here
Now, you have all part, it's time for you to add content and move to position that you want or click to view full image and see guideline.
|
|
|
|
|
|
|
|
|
| © 2006 Adobe Creative suite, Photoshop, Dreamweaver tutorials |
|
|
