Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Web 2.0 Photoshop Layout Tutorial

Web 2.0 Photoshop Layout Tutorial


Open a new document with the following size: 960 x 900 pixels, then with Rectangle Tool, add some rectangles

image 1

For the layer number 2 and 4 (see image from above) I will add the following layer styles

image 2

image 3

For the first layer, I will use the following color: #d57a1a, and for the layer number 3 I will use the following color: #e5e1de. This is my result so far. Please click on the image to see the real size layout

image 4

On the body of this layout I will add a white shape with Rounded Rectangle Tool. I will set the corner radius to 6 pixels

image 5

For this white shape I will add the following layer styles

image 6

image 7

image 8

image 9

This is my result so far

image 10

It is nothing to fancy. The details on this layout I will add later in this tutorial.
Now I will duplicate this layer. To duplicate a layer you need to select it first in your layer palette, then press on CTRL+J
Right click on this copy, and choose Rasterize Layer.

image 11

The next step is to Grab Rectangular Marquee Tool, and you have to create a selection like in the following image

image 12

Now hit Delete on your Keyboard, then press on CTRL+D. This is my result

image 13

I will choose Rectangle Tool and I will create 2 shapes in the middle of this layout

image 14

It doesn't matter what color you choose in the next step I will add a layer style for both black shapes

image 15

image 16

image 17

image 18

This is what I have so far

image 19

With Rounded Rectangle Tool I will create a navigation bar at the top

image 20

I will add the following layer styles

image 21

image 22

image 23

image 24

image 25

image 26

This is how my navigation bar looks like. I will place some text buttons over it. I will use the following font:
Bookman Old Style, Bold, 16 pt, Crisp

image 27

Under this big button, I will create a shape with Ellipse Tool

image 28

Then go To Filter > Blur > Gaussian Blur, and add use my settings

image 29

Lower the opacity for this shape to 50 %. This is how my navigation bar looks like

image 30

In the middle of our layout I will add 3 shapes

image 31

For all this red shapes I will add the following layer styles

image 32

image 33

image 34

image 35

This is my result

image 36

In the middle of this shape I will add an image. I will use the image with my last tutorial:
Draw an awesome surreal dragon

I will also add some arrows with Custom shape tool

image 37

The next step is to add some text on your layout with Horizontal Type Tool

image 38

With Line Tool I will add some horizontal lines. All my lines will have 1 pixel

image 39

I will add 2 buttons like in the following image

image 40

I will create a new layer on top of all layers, and with Brush Tool, I will add a single point right above the logo

image 41

I will change the blending mode for this layer to Soft Light, and the opacity value to 50 %
This is my final layout. Please click on the image to see full size layout. If you want to play with settings, please apply for a VIP Subscription , and you will be able to download this PSD layout , together with all our resources and other PSD layouts

iComplete Guide to Photo Sharpening in Photoshop



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: