|
|
|
|
 |
 |
|
|
|
 |
|
|
White Web Layout
This is a very easy and simple tutorial for creating a nice look white color web layout. In this tutorial you'll learn to design a full white web layout and you can download PSD file too. |
|
 |
|
|
- Open a new document 780*600 pixel.
- Fill color #636262 into background.
- Create a new layer.
- Select Rounded Rectangle Tool.
- Make a rectangle width 770 and height 560 pixel at the center of your canvas.
- Right click inside your rectangle, choose "Make Selection".
- Fill white into your selection, press CTRL+D to deselect.
-
Right click on this layer and select "Blending Option"... |
|
 |
|
|
|
Blending Option - Style - Drop Shadow
- Select Drop Shadow and use these setting as shown in an image.
- You'll get result as shown in an image. |
|
 |
|
|
Header
- Grab Rounded Rectangle Tool, make a rectangle width 757 pixel height 56 pixel.
- Right click inside your rectangle, choose "Make Selection".
- Fill white into your selection, press CTRL+D to deselect.
- Right click on this layer and select "Blending Option"...
|
|
|
|
 |
|
|
Creating a Navigation Bar
- Create a new layer.
- Select Rectangular Marquee Tool, create a selection width 134 height 27 pixel.
- Fill white into your selection, press CTRL+D to deselect.
- Right click on this layer and select "Blending Option"...
- Select Bevel and Emboss and Stroke and use setting as same as creating header.
Creating a border
- Select Rectangular Marquee Tool, create a selection width 134 height 516 pixel.
- Go to Edit > Stroke..
- Stoke color #C1C1C1, size 1 pixel at center.
Add menu
- The font I use is Verdana 10 pixel bold color #558CA0.
- Line between menu color #ECEAEA.
Now you have a navigation bar
- Next step, we'll create a drop shadow bar.
- Create a new layer.
- Select Rectangular Marquee Tool, draw a selection width 10 pixel height 516 pixel above right border of your navigation bar, fill white into selection, then apply Drop shadow.
- Draw a selection again at the right boder above your white bar that you've created in previous step.
- Fill white into section, you're finished.
|
|
|
|
 |
|
|
Creating Content Boxs
- Create a new layer.
- Select Rectangular Marquee Tool, create a selection width 202 pixel height 27 pixel.
- Fill white into your selection, press CTRL+D to deselect.
- Right click on this layer and select "Blending Option"...
- Select Bevel and Emboss and Stroke and use setting as same as creating header.
Border
- Select Rectangular Marquee Tool, create a selection width 202 pixel height 198 pixel.
- Go to Edit > Stroke..
- Stoke color #C8C3C3, size 1 pixel at center.
- Deselect by press CTRL+D.
- Move web header, navigation, content box to position as shown in full view image. |
|
|
|
|
|
|
|
|
| © 2006 Adobe Creative suite, Photoshop, Dreamweaver tutorials |
|
|
