Create a photorealistic web layout – CSS/XHTML available

Templates, Tutorials, Web layouts 23 Comments

Tweet

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.

Preview full size layout

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

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

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

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

Add the following layer styles

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

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

This is the result

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

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

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

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

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

All shapes have the following layer styles

I will add some text and the images

On the right side I will add some banners

I will create a dashed line between the posts.

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

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

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.

You can download the PSD layout and CSS/xhtml layout. The coding part for this layout was made with the same technique I have used for this tutorial:  Design and code a layout without using slice tool (tutorial available only for VIP members). Do you want to download all our VIP resources including this psd layout? Join our VIP membership.

Download photo-realistic-layout.zip OR Subscribe now to a VIP account

Responses to “Create a photorealistic web layout – CSS/XHTML available”

1. 
   Irfan gallery 3.10.2009 um 10:54 am

   nice totorial,
   I was not expecting anything like this…

   can you make a web school layout?

2. 
   Juss 3.10.2009 um 11:11 pm

   Arranging the design is easy for me, what is difficult for me to create and also to find is those kind of photo-realistic textures and illustrations. Where do you get those or how do you create them?

3. 
   Razvan 4.10.2009 um 1:07 pm

   Soon we will have a section with Stock photos. we will release images so you don’ have to search in other places

4. 
   James Qu 6.10.2009 um 5:43 am

   Very nice and refreshing, btw that sofa is the highlight of the whole theme!

5. 
   Kervie 6.10.2009 um 3:23 pm

   Very cool. Thanks for the tips!!!

6. 
   joyoge bookmark 9.10.2009 um 11:08 am

   cool layout, thanks for the tut..

7. 
   Andy Feliciotti 12.10.2009 um 11:27 pm

   I agree with Juss, the tough part is finding pictures/textures to use

8. 
   Ofigenski 20.10.2009 um 9:14 pm

   Very useful tutorial! Thank you

9. 
   Gordon 22.10.2009 um 11:29 am

   Wow! excellent TuT.
   Need to brush up in PS
   Thanks

10. 
    clippingimages 28.10.2009 um 5:44 pm

    WoW Awesome tutorial to create web layout. Thanks for sharing this nice post.

11. 
    Manuel 28.10.2009 um 6:10 pm

    Thanks for this Tutorial, very helpful

12. 
    BuyiMac27Inch 27.11.2009 um 2:29 am

    nice totorial, i like it.
    very thank

13. 
    Sandip 28.12.2009 um 1:36 am

    Thanks for this tutorials…….

14. 
    Thanga 4.05.2010 um 7:05 am

    very nice

15. 
    Romina 28.05.2010 um 9:43 pm

    Wow! Great tutorial. I’m adding this website to my favorites. Thank you so much!

16. 
    Blake 3.06.2010 um 2:24 pm

    Am I the only one noticing the fact that he misspelled ‘All’ in the All Rights Reserved section?
    Other than that, I love this layout! Quite stunning, I must say.
    Keep up the good work, and I would love to see more PSD/[X]HTML conversions for guests as well!

Trackbacks

1. 网站设计教程汇总 | Booto'Blog
2. 25 kreative Webdesign-Tutorials | FiveMedia
3. 36 Best Photoshop Web Layout Design Tutorials Part 4 |dzinebook.com | DzineBook
4. 36 Best Photoshop Web Layout Design Tutorials | Drawlines
5. Tutoriais de layout em Photoshop Parte II « Upmasters
6. 30 Best Colorful Photoshop Web Layout Tutorials | webdesign14.com
7. Web Designs Layout in Photoshop | VapvaruN | Wp Experts

Leave a reply