Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Design a Realistic Website Layout in Photoshop

Design a Realistic Website Layout in Photoshop


Open a new document with the following size: 960 x 900 pixels
Now go to Grafplus.com and download the following texture: Wood Texture

Place the texture on your layout
image 1

Over this great wood texture I will place a stock image with a notebook

image 2

I will create a new layer under this notebook, and with Brush Tool I will create a shadow

image 3

image 4

I will create another layer above the notebook layer, and one more time with Brush Tool I will add a shadow in the middle of my notebook

image 5

On the header of this layout I will add some images with a moleskine notebook, a cup of coffee, a pocket calculator, and a pair of glasses
Please click on the following image to see the full size layout

image 6

Over the Moleskine notebook I will write some text with Horizontal Type Tool. Then I will press on CTRL+T and I will rotate the text until it will look like in the following image

image 7

I have used the following fonts: Segoe Script on the left side and Dillenia UPC on the right side. You can use any font you like
Then I will place some check marks near the text. I have used Custom Shape Tool to place those check marks

image 8

This is my result

image 9

I will continue to add more stock images. On the bottom I will add a nice leaf, and a butterfly

image 10

And on the right side I will add a nice pencil

image 11

I will add some text on the notebook

image 12

You can place one of the texture you like most on your document, then go to Image > adjustments > desaturate. As you can see another texture will transform this layout very much

image 13

Now I will add also another stock image with an old notebook

image 14

Download this PSD layout and you will be able to play with the settings. This is my final PSD layout
image 15



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: