GRAFPEDIA 70.000+ resources graphics & tutorials for only $49

Grafpedia » Templates » Psd Themes » Design a realistic website layout in photoshop

21
May

Design a realistic website layout in photoshop

Psd Themes, Templates, Tutorials, Web layouts
55 Comments

200-layout1In 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
139

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

230

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

328

411

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

511

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

610

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

710

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

810

This is my result

910

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

1010

And on the right side I will add a nice pencil

1115

I will add some text on the notebook

1211

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

1310

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

149

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

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

We offer certified 1Y0-A17 material including 000-152 practice questions and answers to help you pass 70-291 exam with highest score.

Download

Responses to “Design a realistic website layout in photoshop”

  1. FreelancerCrowd 22.05.2009 um 2:52 am

    What about the different screen sizes, resolutions and stretching the browser window around?

  2. 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.

  3. 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

  4. 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.

  5. Olybop 22.05.2009 um 5:22 am

    hi, where can i found your leaf ? it’s very nice.
    Thx !

  6. joyologo design shop 2.0 22.05.2009 um 7:23 am

    I like this layout, thanks for the tut..

  7. admin 22.05.2009 um 10:18 am

    In a few days we will release a set of leaf images for our VIP members

  8. wiphone 22.05.2009 um 11:14 am

    awsome tut! thanks!

  9. 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

  10. admin 23.05.2009 um 12:12 am

    sometimes you don’t have to use dreamweaver to create this website template

  11. 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, ^_^.

  12. 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

  13. 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!

  14. Aneslin 30.05.2009 um 12:48 pm

    awesome tutorial,
    thanks a lot

  15. CgBaran Tuts 1.06.2009 um 8:51 am

    Great layout thanks

  16. Philip Hastings 2.06.2009 um 11:40 am

    We have a word for this kind of design:

    Swanky.

  17. 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!

  18. admin 9.06.2009 um 2:26 am

    @ Iva – I’ve changed the typo. thank you

  19. George 18.06.2009 um 6:43 am

    Very interesting… thanks.

  20. agnes 20.06.2009 um 11:42 pm

    great tutor!!

  21. 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

  22. 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

  23. Adam 17.07.2009 um 6:53 am

    I will be a designer yet. Thanks for another great tutorial.

  24. 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

  25. Moorfy85 1.09.2009 um 3:53 am

    cooool theme! Thanks!

  26. IlmShn 11.11.2009 um 4:27 am

    Its really a great and colorful tutorial.

  27. Checker24 8.04.2010 um 2:23 pm

    Great instructions, very like the design myself. I am also in the process of creating such a layout, I find it most difficult are the proportions of the various elements. But I’ll do it already. Thank you

  28. chelsea 14.05.2010 um 11:42 pm

    I’m not a member or anything, but this is a nice “idea” for a website layout.. It gave me a unique idea for the one I’m going to create. :)

  29. mohit 19.05.2010 um 1:12 pm

    nice tutorials ..thnx to share with us…….

  30. Coral Springs Printing 3.09.2010 um 12:10 pm

    This is actually perfect for a client we are doing print job for on some menu’s as well as their website so we can make it look the same throughout. Sometimes you see this with the Flash sites and it’s impossible to tell where you should be clicking on and just leave.

  31. CSSReX 13.09.2010 um 6:08 am

    So simple and elegant..

  32. Sergejpinka 11.10.2010 um 5:15 am

    Hi!

    where i can found more realistic office pictures photographed from top?

    P.S. sorry for my english… :-)

  33. abercrombie milano 29.12.2010 um 4:19 am

    I will be a designer yet. Thanks for another great tutorial.

  34. Friends Social Network 13.04.2011 um 3:24 pm

    Great tutorial . Nice work done :) thanx alot

  35. xYSMN 7.05.2011 um 6:13 am

    How do you slice this layout in dreamweaver?

  36. sawebdesigns 9.05.2011 um 9:39 am

    Simple and yet so cool great job and great tutorial

Trackbacks

  1. Best of the Web - May 2009 - News ums Netz
  2. Best of The Web - May 09 | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver
  3. FreeDownloadSecrets.com » Blog Archive » 45+ Stunning Tutorials, Inspirations And Resources For Designers To Discover The Best Of The Web In May
  4. 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites | Dzine Blog
  5. 30 tutoriali z layoutami | webdesign.stripes-design.pl
  6. Web Design Tutorials: The Ultimate Roundup | How-To
  7. The Most Popular Photoshop Tutorials of all Time
  8. Create a realistic web design with Photoshop | ARTEgami in English
  9. 60 Realistic Tutorials with Adobe Photoshop - Hungred.com
  10. 25 Helpful Photoshop Tutorials for Web Designers | [Re]Encoded.com
  11. Web Tasarımcıları İçin 25 Faydalı Photoshop Dersi | Tasarim8.com
  12. Round-up of some 50 Best Layout Photoshop Tutorials « Andrei Melencovici Graphic and Web Design Blog
  13. 35 Creative Photoshop Layout Tutorials For Web Design | Design | Webdesign, website & webshop maken portfolio
  14. Round-up of some 50 Best Layout Photoshop Tutorials | Design Blog
  15. Round-up of some 50 Best Layout Photoshop Tutorials | Bitmag
  16. printcurve.com | Round-up of some 50 Best Layout Photoshop Tutorials
  17. 50 Truly Eye-Catching And Detailed Web Layout Tutorials | Free and Useful Online Resources for Designers and Developers
  18. 50 Truly Eye-Catching And Detailed Web Layout Tutorials
  19. 55 extremely smashing web layout design tutorials in details « 68Design – (68ds.com) Creative Design Transmitter

Leave a reply

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

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

.