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:
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


0 comments:

Post a Comment

Web Stats

AddFreeStats.com Free Web Stats!Web Stats
Twitter Delicious Facebook Digg Stumbleupon Favorites More