35 Tutorials for Creating Website Layouts in Photoshop

Photoshop is an excellent tool for creating attract websites. Fortunately, if you’re looking to brush up your skills or learn some new tricks for creating layouts and designs in Photoshop, there are plenty of tutorials specifically for this purpose.

The 35 tutorials featured here will each take you through the process of creating an example website design in Photoshop. The are all different types of websites and styles of design represented, so you should certainly be able to find some useful tutorials from this group.

You may also be interested in the following collections of Photoshop tutorials:

Create a Sleek, High-End Web Design from Scratch

Sleek layout

Create a Dark Themed Web Design from Scratch

Dark layout

Carbon Fiber Layout

Carbon Fiber Layout

Making Your Own Portfolio Web Page

Making a portfolio page

Design a Cartoon Grunge Website Layout

Cartoon grunge website

Hand Drawn Layout

Hand drawn layout

 

How to Create a Grunge Web Design in Photoshop

Grunge layout

Photo Portfolio Web Page Layout

Photo portfolio layout

Photography Portfolio Layout

Photography portfolio layout

Creative Studio Web Page Layout

Creative studio layout

Online Photo Portfolio Layout

Online portfolio layout

Sound System Studio Website Layout

Studio layout

Car Layout

Car layout

Design a Unique Grungy Website Layout

Unique layout

 

Stylish Web Studio Layout

Stylish layout

Professional Web Layout for Business Solutions

Professional layout

Computer Store Web Layout

Computer Store

Professional Layout for Business Company

Business layout

Making a Template in Photoshop

Making a template

Web Layout for Italian Restuarant

Italian Restaurant

Web 2.0 Vector Layout

Web 2.0 layout

Design Studio Layout

Design studio layout

Personal Portfolio Layout

Personal layout

Business Layout

Business layout

Nature Portfolio Layout

Nature portfolio layout

Hosting Layout

Hosting layout

WordPress Mockup Layout

WP mockup layout

Photographer Portfolio Layout

Photo portfolio layout

Web Design Layout Tutorial

Design layout

Software Layout

Software layout

Design a Clean Business Layout

Clean business layout

Old Paper Layout

Old paper layout

Interior Design Layout

Interior design layout

Gaming Layout

Gaming layout

Video Sharing Layout

Video sharing layout

For even more Photoshop tutorials, please see:

Published November 2nd, 2008 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

123 Responses

Comments are now closed on this post.

  • Tom Ross, November 2, 2008

    Thanks for featuring 2 tutorials from PSDFAN. Great list you have here!

  • Craig Farrall, November 3, 2008

    Great list here, its perfect for beginners, because thats how I started out with these tutorials.

  • Vandelay Design, November 3, 2008

    Tom,
    You’re welcome. Thanks for the great tutorials.

    Craig,
    Agreed. These are great for newer designeers.

  • Teknoloji, November 3, 2008

    Great list you have here!

  • Nestor, November 3, 2008

    Neat list, bookmarked for future reference.

  • empa7hy, November 3, 2008

    Awesome tutorials. :)
    Thanks.

  • highblood, November 3, 2008

    Thank you very much for sharing this Vandelay Design. I’m new to web designing.. This would really be a big help! Great job!

  • Dainis Graveris, November 3, 2008

    huh, lovely list as always – bookmarking this one, because I’m really interested in these kind of tutorials..creating websites :)

  • Paul L, November 3, 2008

    Lovely selection. Cheers.

  • Danh ba web 2.0, November 4, 2008

    Great list. Thanks for share
    Keep it up !

  • Babies R Us Coupons, November 4, 2008

    Great Post…!

    How you know that I am looking for Tutorials for Creating Website Layout…

    Thanks for sharing.

  • Rachel, November 6, 2008

    Wow. This is a great collection of sites to look through. Thanks for posting.

    Rachel
    AllGraphicDesign.com

  • renantech, November 6, 2008

    This amazing in Photoshop you can create a website.. Thanks for this information..

  • Kristian Liebrand, November 8, 2008

    This blog offers another excellent list of design resources – 35 Tutorials for Creating Website Layouts in Photoshop, whih is marvelous. Each layout has step-by-step instructions on how it was created, and some have Photoshop file.

  • SEO Singapore, November 11, 2008

    thanks for the good reference tutorial..

  • zasilenie, November 12, 2008

    I bookmarked this post. Great link with usefull tutorials.

    thx!

  • Conrado, November 18, 2008

    excelente!!! good tutorials…

  • Addy, December 7, 2008

    Great list
    thanks :)

  • Abdul, January 29, 2009

    Thanks a lot for all these great resources.

    Is there anything advanced? cause i see everyone says it’s good for beginners!

    • Vandelay Design, January 29, 2009

      Abdul,
      The ones from PSDTUTS are probably the most advanced.

  • wow amazing ….thanksthis isa very informative site..

  • Jens, March 7, 2009

    a cool collection

  • Francis, March 11, 2009

    I wish I had visited this site 2 years ago. Could’ve jump started my career.

  • Bob, April 2, 2009

    I am really in trouble now. I cant stay away from your website. Very well done and loads of neat stuff. Thanks

  • Tom, May 14, 2009

    Attempting any of these in CS4 makes me want to gouge my eyes out with a rusty spoon. So many things have changed in Photoshop since these were written they’re almost completely uninteliigible and following step by step creates a result that makes you want to put your fist through the monitor. Very good tutorials for sure but not for CS4.

  • Webrecsol Optimizer, May 19, 2009

    wow! your are really professional website templates designers..thanks for lots of information..

  • fatjon, July 5, 2009

    very very good tutorials thnx

  • yasna, July 22, 2009

    hi friends.
    Tankhs for them very very .. much . it’s the best collection i found .

  • Create a Website, August 25, 2009

    Excellent work. Amazing designs. Thanks for sharing the information.

  • traktoriai, September 1, 2009

    I like this photo portfolio, nice one.

  • Web Design SG, September 19, 2009

    well, i have been subscribed to the newsletter for over a year now. Have to say im impressed. :)

  • legOstaRwArs, November 5, 2009

    Nice list for awesome tutorials!
    Thanks : )

  • srisoftwarez, November 28, 2009

    hey thanks for this tutorial. its very useful for me.

  • sakura hasegawa, December 23, 2009

    Thanks for posting the layouts and sharing them with us. I have a few layouts of my own from business catalyst development. not sure if you’ve heard of that though. :)

  • honour chick, December 30, 2009

    excellent compilation of tutorials ;)

  • Ross, February 11, 2010

    Nice man,

    Its so hard to find a resource online for tutorials on professional ps web layouts. I’ve always wanted to find something that could show me how to design graphics to the same level as template monster templates and now I have, just keep em comin.

    PEACE

  • Magic Mailstrom, February 18, 2010

    What i am looking for is a tutorial on creating a one page website in PS CS4 how it works what sort of coding i will need etc, i understand multi page sites to a degree but im fascinated by the complexities of the single page site as i feel this is the way i want to go.

    Thanks
    Magic

  • Checker24, April 8, 2010

    Hello, very nice tutorial collection.I liked it, my favorit it is “Grunge Web Design in Photoshop”. thank you

  • chicago web design, April 9, 2010

    Great layouts, A must watch for all photoshop lovers. Will definitely try it out for myself.

    Thanks

  • web page designers, May 26, 2010

    Hi, Thanks for this tutorial. Is is a amazing design created by photo shop. Nice creation

  • sanal şirket, June 2, 2010

    its groups shairng verry best….

  • john, June 6, 2010

    It’s a nice list, but I think you should update it because must of the design are old and ugly!

  • Banners Austin, July 2, 2010

    I especially liked the Italian restaraunt design

  • Michael, July 28, 2010

    REally nice set of turorials — thaks a ton for putting it all together.

    Cheers
    Michael

  • Web Design Hippo, August 2, 2010

    There are some interesting website ideas here, Thanks.

  • NANCY, August 3, 2010

    these designs are really nice. thank you so much.

  • Pirat, August 5, 2010

    Great selection. Thank you for sharing with us this information

  • FreeSoft, August 13, 2010

    I liked very much, as done “Photographer Portfolio Layout” – the only thing in my opinion the camera itself and the grass should be more explicitly treated in the style of technical design and have in mind.

  • Web Designer, Leicester, September 5, 2010

    Fantastic list of tutorials, great to improve my graphic design skills.

  • web design in Maidstone, September 7, 2010

    Wow.. really nice collection of photoshop tutorials. thank You for sharing :)

    … looks like you are a fan of hv-designs? ;)

  • Martha the Premade Scrapbook Lady, September 14, 2010

    I’ve used Photoshop to help create my scrapbook designs, but never considered it for website design. This is great information.

    And thanks for posting all the tutorial links, too!

  • Paul, September 26, 2010

    wooo tutorial links ! my favourite !

  • jeiboy, October 13, 2010

    I love photoshop.
    In our company We prefer to use photoshop than to other software.

  • freesoft, October 14, 2010

    I liked very much, as done “Photographer Portfolio Layout” – the only thing in my opinion the camera itself and the grass should be more explicitly treated in the style of technical design and have in mind.

  • Carol, October 22, 2010

    The sound system studio tutorial was well written and easy to follow

  • Marty, October 23, 2010

    These are great tutorials for beginner to intermediate users :) I’m a php developer but cant even draw a decent circle at the min. Been looking for a site to help me add a little colour and design to my applications and this site looks perfect.. Thanks Alot – I will be working through all of these in the next few weeks :)

  • dreamincolor, November 15, 2010

    Very good ideas there!
    Don’t forget to include this great Single-Page Portfolio http://www.dreamincoloronline.com/design-code-cool-single-page-portfolio-part2/

  • Shumi, December 20, 2010

    Well its really a good collection of website layout for creating website. It will be helpful for the beginner as well as the experts.

  • vv, December 20, 2010

    awsome !!!
    ,,,,,,,,,,,,,can i use some ? or is it copyright reserved?

    • Vandelay Website Design, December 20, 2010

      vv,
      You would have to check with the authors of the specific tutorials, but in most cases when a tutorial is published it is intended to be used for commercial purposes.

  • rafael john, January 21, 2011

    wow these are really cool, I understand how this designers put their heart on these tutorials, I know, cause I also just made one

    create a retro-grunge web design in photoshop.
    http://flame-idea.blogspot.com

    thanks. I hope I will be featured in one of your posts someday.someday

    God bless

  • Nela, January 25, 2011

    Hello,
    I would like to know is it possible to “stretch” the photoshop design to 100% of the user screen?
    I have my own site in photoshop: jones.hr
    and now I am in the process of creating a site for a friend:
    timesharegoneforever.com

    Any ideas?
    I have CS2 installed.
    Thanks
    Nela.

  • Code Guru, February 1, 2011

    Nela you can rescale all if the pictures in photoshop but they will most likely loose quality if increased size. Normally they are designed for the shape at the time just simply follow the tutorial but do everything on a larger scale.

  • Nela, February 3, 2011

    Thanks for the answer. There are so many photos, some of them very small (like a line or a square, or just a little sort of icon…), then I am afraid I will totally lose the original design…
    Hmmm
    I will have to think about it. Maybe will try to play around with it this weekend.
    However, one thing is not clear again.
    The monitor at home, where I work from , is small.
    The monitors elsewhere are far bigger. How would I know how much to resize?
    And it would still be “certain size” – it will not get smaller on a smaller monitor and bigger on the bigger monitor (no percentage increase obviously, but actual size).

    What would be the best solution…… maybe like the writing – a link on the top right corner “bigger window, smaller window” , like for the font on the screen “bigger font or smaller font” and let each user decide. Between only two options.

    What do you think?

    Nela.
    P.S. my client´s website is timesharegoneforever.com by the way.

  • Nela, February 3, 2011

    and – I have upgraded, software at least :-)
    I now have CS4
    (But a very old Win2000 PC, with only 500 RAM, so – very slow.)

  • Liam Kenneth, April 14, 2011

    Some Great stuff here thanks :)

  • jinny, April 26, 2011

    Some great layout.. really liked the idea and concepts… Thanks :)

  • Stacy Summers, October 31, 2012

    WOW! Great collection! Thanks for sharing )

  • Kev, January 5, 2013

    Nice article. I think it’s a little outdated now.

    A great place to check out website templates is templatz.co. They have HTML5 and CSS3 website templates available and all are built using responsive web design.

    Sites Created With Latest Technology, HTML5 and CSS3

    http://templatz.co/templates.php

  • ululf01, February 18, 2013

    Amazing set. Thanks

  • Lu, July 8, 2013

    Thanks for sharing this resources! Very useful!