Welcome to web 2.0 Blog

The Last news of the web Development from the world master's

Create a photorealistic web layout

Posted by web2.0 Design resourse Wednesday, October 28, 2009 0 comments







In this tutorial I will show you how to create a simple photo realistic website in just a few steps.
I know it is hard to believe that a website like this can be converted into a real website.
VIP members will be able to download the PSD layout and also the css/xhtml code.

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

127
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

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

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

413

Add the following layer styles

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

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

57

67
This is the result
87

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

97

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

107

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

In this way you will have a real shadow under the sofa
128
On the left side of the layout I will create some boxes with Rectangle Tool
137

All shapes have the following layer styles

147
157

I will add some text and the images
166
On the right side I will add some banners
177
I will create a dashed line between the posts.
187
To create the dashed line you need to use Horizontal Type Tool and use the following font and settings
196
My last step is to create a logo and some text buttons.
206
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.
2111

counter

free counters