Design a realistic website layout in photoshop

Design a realistic website layout in photoshop

in Tutorials, Web layouts by Razvan on May 21st, 200935 Comments

In this tutorial I will show you one more time how powerful are stock images and textures. I will try to recreate an office burro with different stationery elements. A few days ago I’ve showed you that you can create a layout without images: Hosting layout , now i will show you one more time how easy is to create nice layouts if you have the right images.

Preview full size layout

Apply for VIP to download all PSD layouts for each tutorial including this one. A Vip account will allow you to download our entire collection of premium downloads.

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

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

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

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

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

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

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

This is my result

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

And on the right side I will add a nice pencil

I will add some text on the notebook

You can see that with a few images you can create a very nice layout. Now I will show you a modified version. If you don’t have already this set of texture you can apply for a VIP and download this set of Parquet textures

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

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

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

Apply for a VIP account and you can download the layered PSD file for this tutorial, and also the XHTML/CSS website. Also you can download all our previous layouts, and premium downloads

Apply for VIP to download this layout

Get out hosting service and register domain for free. We have number of dedicated server packages to suit you needs. Thousands for free web design are also free for registered users.

Responses to “Design a realistic website layout in photoshop”

FreelancerCrowd 22.05.2009 um 2:52 am
What about the different screen sizes, resolutions and stretching the browser window around?
Francis 22.05.2009 um 4:19 am
hello. This is my first post here, but i have to admit this is one of the best tuts i have seen lately. I have applied for a VIP account and i really like the XHTML/CSS website from this tutorial. Please let me know if i can use it for my own website.
admin 22.05.2009 um 4:23 am
You will not having problem with this. You can have different screen resolution. the background image will fill all the browser. You can apply for a VIP to see how this repeated pattern was made, or search over the internet how to repeat a pattern in css
admin 22.05.2009 um 4:24 am
Yes you can use it. Please let me know when your website is ready. i wan to see how it looks.
Olybop 22.05.2009 um 5:22 am
hi, where can i found your leaf ? it’s very nice.
Thx !
joyologo design shop 2.0 22.05.2009 um 7:23 am
I like this layout, thanks for the tut..
admin 22.05.2009 um 10:18 am
In a few days we will release a set of leaf images for our VIP members
wiphone 22.05.2009 um 11:14 am
awsome tut! thanks!
Jack T. 22.05.2009 um 5:26 pm
Nice layout but have fun slicing this one up and bringing into Dreamweaver. Anything can be created in PS, but bringing it into DW and slicing it up is a diff story . .for me, at least . .lol
admin 23.05.2009 um 12:12 am
sometimes you don’t have to use dreamweaver to create this website template
Matt 24.05.2009 um 6:57 pm
I agree with the admin. You should never have to slice up a template if you know what you’re doing, and it’s much better and cleaner to create the XHTML + CSS layout from scratch and insert the images through code.

Nice layout too, finally something to get me back into making templates, ^_^.
Deea 25.05.2009 um 7:58 am
I don’t believe you offer so many in this blog for such a small fee. This layout is very valuable for me
Brochure Printing 25.05.2009 um 7:24 pm
This is wonderful! I really love the wood texture that was used in the background. Very attractive design and layout. The leaf and the butterfly add a nice touch of nature and the outdoors to the whole design. This was really fantastic, thanks so much!
Aneslin 30.05.2009 um 12:48 pm
awesome tutorial,
thanks a lot
CgBaran Tuts 1.06.2009 um 8:51 am
Great layout thanks
Philip Hastings 2.06.2009 um 11:40 am
We have a word for this kind of design:

Swanky.
Iva 8.06.2009 um 4:46 pm
It’s not “desiderate”, it’s “desaturate”. Just thought I’d point that out.

Otherwise, a very beautiful idea!
admin 9.06.2009 um 2:26 am
@ Iva – I’ve changed the typo. thank you
George 18.06.2009 um 6:43 am
Very interesting… thanks.
agnes 20.06.2009 um 11:42 pm
great tutor!!
iren 25.06.2009 um 8:16 am
This is by far the most incredible set of resources in one place I have ever come across. Well done and thank you so much
Nandro 14.07.2009 um 7:30 pm
Hi, thanks a million for this fantastic tutorial. It helped me improving my skills a little bit more. It is at all times excellent to get some newly inspiration and I hope to find more of such posts here in future because no one will ever stop learning new stuff. Keep on
Adam 17.07.2009 um 6:53 am
I will be a designer yet. Thanks for another great tutorial.
naresh 24.08.2009 um 6:00 am
Hi,

I am a Designer I really thanks you for creating such great resource page.
Here is much services are mentioned. I find some useful sites with a great variety of website resource for Layout Design.

Continue your project….

Thanks
Naresh Sharma
jaipur web world Team
Moorfy85 1.09.2009 um 3:53 am
cooool theme! Thanks!
IlmShn 11.11.2009 um 4:27 am
Its really a great and colorful tutorial.