GRAFPEDIA 70.000+ resources graphics & tutorials for only $49

Grafpedia » Templates » Psd Themes » Create a photorealistic web layout – CSS/XHTML available

25
Sep

Create a photorealistic web layout – CSS/XHTML available

Psd Themes, Templates, Tutorials, Web layouts
23 Comments

photo-realistic-layoutIn 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.

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

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

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

  • Sign up for Grafpedia VIP
Suscribe to Grafpedia's RSS feeds!

© 2011 | Grafpedia is proudly powered by Wordpress edited by GrafikNetwork

.