20 Mind Blowing Website Layout Tutorials in Photoshop


by Shane Jeffers


One of the most adored tutorials on the web is how to create a website layout from scratch in Photoshop. Not only does it help you build confidence because you are creating something beautiful, but it helps you learn the techniques of Photoshop so you can begin creating your own sites. So I challenge you to try some of these tutorials learn some new techniques and try them out with your own ideas. These are twenty tutorials I have chosen for their quality and the authors ability to explain the process to the reader thoroughly but with simplicity.

1. Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!


2. Design a Beautiful Website From Scratch


3. Web 2.0 photoshop layout tutorial


4. Hosting Layout #2


5. How to Create a “Worn Paper” Web Layout Using Photoshop


6. Create a Clean Modern Website Design in Photoshop


7. Create an awesome portfolio layout


8. Corporate WordPress Style Layout


9. How to Make a Light and Sleek Web Layout in Photoshop


10. Creative Design Layout Tutorial


11. How to Create a Dark and Sleek Blog Design in Photoshop


12. Photo Portfolio Web Page Layout


13. How to Create a Clean Web 2.0 Style Web Design in Photoshop


14. Hand drawn layouts – hottest design trends


15. Create a Sleek, High-End Web Design from Scratch


16. How to Create a Unique WordPress Theme


17. Corporate Business Layout


18. Create an Amazing Layout Using Textures


19. Create a clean PSD layout with a 3D look


20. Create a Very Simple Portfolio Web Layout with Photoshop


Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. I have a unique passion for design trends and tutorials. Follow me on twitter @ThreeStyles

Enjoy this post? Subscribe by RSS or Email


  • Drew

    Links don’t seem to work!

  • John

    Grafpedia has some really nice deigns. great list

  • http://emendelski.com eM

    Hi, nice collection! Thx a lot!
    PS. In 16. link in title is incorrect.

  • http://www.plainshanedesign.com Shane Jeffers

    @ Drew

    The images don’t have links only the text.


    Thanks for the comment! Fixed.

  • http://iantearle.com Ian Tearle

    Some of those links have junk at the end of the URL and therefore do not load, they seem to have %3Cbr%20/%3E in the URI address, which needs removing in order to see the tutorials.

  • http://www.plainshanedesign.com Shane Jeffers


    Yeah wordpress added a random space that threw the URL’s off. Clear your Cache and you should be good!!

  • http://www.parlierdesign.com bpdeeziner

    GREAT POST! Thank you.

  • Pingback: 88 liens sur Wordpress, jQuery, typographie, CSS, webdesign …

  • http://webdesignfan.com Tomas

    Useful list, thanks.

  • http://www.catswhoblog.com Jean-Baptiste Jung

    Very cool round-up Shane!
    And thanks for including some PsdVibe tutorials on here :)

  • Pingback: Converting a Photoshop PSD File to an XHTML & CSS Web Site - Creating Mockups | Resources for Web Development Students @ Robin's Blog

  • http://www.luciuswebsystems.nl joris_lucius

    Very nice collection, thank you very much for sharing!
    .-= joris_lucius´s last blog ..Drupal internationalization (i18n) implementatie =-.

  • Pingback: Photoshop Text Effects + Others

  • http://www.thomascraigconsulting.com Thomas Craig Consulting

    Excellent post Shane. Keep up the working and looking forward to more great articles in the future.

  • http://creativefan.com/ Eric Shafer

    The ones by TUTS+ are probably my favorite ones here, especially since they also cover the xHTML and CSS. Great roundup!
    .-= Eric Shafer´s last blog ..30 Lovely Hand-Picked Flower Desktop Wallpapers =-.

  • http://www.oreillydesign.livejournal.com/611.html Jessica Hostettler

    How do i get updates sent to my email when you update your blog? I been checking your site for a while now and wouldnt mind a heads up.

  • http://www.localmobilemonopoly.net/ Tim Donovan

    the Creativo Web site Layout caught my eye, i am looking to implement something like that for a client. Lets see how my skills are going to overcome this test.

  • http://pixelcurse.com/ Pixel Art

    Great collection Shane, some nice layouts in this group.

  • http://www.netidnow.com Glen

    Pretty collection! Do the templates come for free?

  • http://www.threeland.com Vietnam holidays

    i like the last template ^^, simple and beautiful