Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create a Photorealistic Web Layout CSS/XHTML Available

Create a Photorealistic Web Layout CSS/XHTML Available


For this tutorial we will need a nice texture. Click on the following thumbnail, and download this texture to your computer.

Img

Open the image inside Photoshop and then go to Edit - Define pattern. Choose a name for this pattern and click OK.
Create a new document with the following size: 960 width and 900 pixels height
Select Paint Bucket Tool, and in the option bar choose the pattern you just created

Img

Click over your layout with Paint Bucket Tool. You will have something like this

Img

Set the foreground color to #49290a and with Rounded Rectangle Tool create a shape, and place it in the middle of the layout

Img

Add the following layer styles

Img

Img

You will have to add other shape over this brown shape. This time please use white color

Img

Please use the same layer styles you have used a few seconds ago.

Img

Img

This is the result

Img

On the bottom right side of the layout I will add some stock images with a flower pot and a sofa.

Img

Under the layer with the sofa I will create a round shape with Ellipse Tool

Img

I will go to Filter - Blur - Gaussian blur and I will use the following settings

Img

In this way you will have a real shadow under the sofa

Img

On the left side of the layout I will create some boxes with Rectangle Tool

Img

All shapes have the following layer styles

Img

Img

I will add some text and the images

Img

On the right side I will add some banners

Img

I will create a dashed line between the posts.

Img

To create the dashed line you need to use Horizontal Type Tool and use the following font and settings

Img

My last step is to create a logo and some text buttons.

Img

This is my final layout. I hope you like it. As you can see it was done very easy, and requires only some good stock images.

Img



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: