ps simply
Home
Photoshop tutorials
Dreamweaver tutorials
Photoshop Plugin
Downloads
Contact us
 

Full Grey Web Layout
 Home > Photoshop tutorials > Full Grey Web Layout

 

 

 

Full Grey Web Layout
Click to view full size

Learn to create a cool style web template. In this tutorial use grey for color of this template. PSD file is available for download in step 7.

 

 

 

Full Grey Web Layout

- Create a new document 780*600
- Fill color #686352 into background.
- Create a new layer.
- Grab Rectangular Marquee Tool, create a selection width 770 pixel height 504 pixel.
- Fill color #C4BDAB into selection.

 

 

 

Full Grey Web Layout

Creating Navigation
- Create a new layer
- Grab Rectangular Marquee Tool, create a selection 770*26 pixel.
- Fill color #C4BDAB.
- Right click on layer, select Blending Option.
- Select Bevel and Emboss.

Full Grey Web Layout

now, you have a bar next step you have to make a shiny bar

Full Grey Web Layout

Shiny
- Create a new layer.
- Create a selection a little bit bigger than your bar just like an image above.
- Grab Gradient tool, set white as foreground color, select Foregroud to tranparect gradient, select linear gradient, then drag gradient tool from top to the bottom of selection.
- Now, you've got a shiny navigation.
- Click back on the button layer, CTRL+ Left Click on the layer to call selection.
- Go to Select > Invert, then click on a shiny layer and hit delete key on your keyboard.

Add Menu and Line
- Create a new layer.
- Select Pen tool, draw 2 line like an image, fist line color #4F4C40, second line color #FFFFFF and decrease opacity to 50%.
- Type some text (I used font Arial size 12), you've finished your navigation.

 

 

 

Full Grey Web Layout

Preview
- Now, you layout shoud look like this.
- Next step we will create content boxs.

 

 

 

Content Box - Head of content box use the same technique as creating navigation bar.

Full Grey Web Layout

2 Style boxs 3 size
- First, Duplicate navigation bar layer.
- Create a new layer.
- Grab Rounded Rectangle Tool, set radius =5, then create a shape width 196 height 166 pixel.
- Right click on the shape, select menu Make Selection, a selection will appear.
- Click on navigation bar layer that you've duplicated, go to Select > Invert.
- Hit delete key on your keyboard to delete the part that we don't want, then go to Select > Invert again.
- Go to Edit > Stroke set value as shown in an image above (color #4F4C40)
- You're finished, but don't forget to draw a 2 pixel line under head of content box.
- Another one width 172 pixel height 166 pixel.

Center content box
- use the same technique as last step but use color #A6A08F instead and width 762 height 322.

Full Grey Web Layout


- View full image and see where you have to put these content boxes

 

 

 

Full Grey Web Layout

Header
- Add your website name.
- I create 2 line on header , the first one size 770*2 pixel color #999079 and other one size 770*4 pixel color #686352.

 

 

 

Full Grey Web Layout
Click to view full size
Final result!
- Add your own image or change content header to what you want.
- Download PSD file (269 kb)

- Download ready to use HTML Coded File $2 only, pay by Paypal
-
You will be able to download immediately after transaction completed.
More Tutorials
© 2006 Adobe Creative suite, Photoshop, Dreamweaver tutorials