Vandelay Website Design Blog

35 Tutorials for Creating Website Layouts in Photoshop

Thank you for visiting the Vandelay Design Blog! We regularly publish collections of Photoshop tutorials like this one. If you would like to improve your Photoshop skills, please consider subscribing to our feed by RSS or by email so you don’t miss these posts.

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:

Originally Published November 2nd, 2008

41 Responses

  1. Tom Ross | November 2nd, 2008 at 8:53 pm

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

  2. 35个使用Photoshop创建网页布局的教程 | 帕兰映像 | November 3rd, 2008 at 5:25 am

    […] 英文原文/ 35 Tutorials for Creating Website Layouts in Photoshop […]

  3. Craig Farrall | November 3rd, 2008 at 6:23 am

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

  4. Vandelay Design | November 3rd, 2008 at 7:54 am

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

    Craig,
    Agreed. These are great for newer designeers.

  5. Teknoloji | November 3rd, 2008 at 9:42 am

    Great list you have here!

  6. MyBackgrounds Blog » Blog Archive » Be Inspired! Design Tutorials for Photoshop | November 3rd, 2008 at 10:52 am

    […] offers another excellent list of design resources - 35 Tutorials for Creating Website Layouts in Photoshop. Each layout has step-by-step instructions on how it was created, and some have Photoshop file […]

  7. Nestor | November 3rd, 2008 at 10:56 am

    Neat list, bookmarked for future reference.

  8. empa7hy | November 3rd, 2008 at 11:05 am

    Awesome tutorials. :)
    Thanks.

  9. 35 tutoriales para diseñar plantillas web con photoshop | frogx.three | November 3rd, 2008 at 11:31 am

    […] Enlace: 35 tutorials for creating website layouts with photoshop […]

  10. highblood | November 3rd, 2008 at 12:12 pm

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

  11. Robin’s Blog» Blog Archive » 35 Tutorials for Creating Website Layouts in Photoshop | November 3rd, 2008 at 3:01 pm

    […] reading 35 Tutorials for Creating Website Layouts in Photoshop This entry was written by Robin Wood and posted on November 3, 2008 at 8:13 am and filed under […]

  12. Layouts web en Photoshop  | Isopixel | November 3rd, 2008 at 4:33 pm

    […] 35 tutoriales acerca de la creación de Layouts para sitios Web en Photoshop […]

  13. Tommunication.com - marketing, communications and public relations 2.0 » Blog Archive » links for 2008-11-03 | November 3rd, 2008 at 5:02 pm

    […] 35 Tutorials for Creating Website Layouts in Photoshop | Vandelay Website Design (tags: webdesign list design tutorials photoshop inspiration) […]

  14. Dainis Graveris | November 3rd, 2008 at 5:09 pm

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

  15. Paul L | November 3rd, 2008 at 5:58 pm

    Lovely selection. Cheers.

  16. 35 Tutorials for Creating Website Layouts in Photoshop | Vandelay … | buildingwinningwebsites | November 3rd, 2008 at 10:17 pm

    […] 35 Tutorials for Creating Website Layouts in Photoshop | Vandelay … { A collection of the best Photoshop tutorials for creating website designs and layouts, representing a variety of styles and types of sites. Link to the original site […]

  17. Danh ba web 2.0 | November 4th, 2008 at 9:44 am

    Great list. Thanks for share
    Keep it up !

  18. Babies R Us Coupons | November 4th, 2008 at 9:48 am

    Great Post…!

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

    Thanks for sharing.

  19. Webdevelounge Weekly Roundup - Wed Nov 05/08 | WebDevLounge | design, development, SEO and wordpress | articles, discussion and community | November 4th, 2008 at 10:02 pm

    […] [5.] Is there ever a lack of Photoshop tutorials online? Vandelay Design presents a list of 35 more tutorials focused on website layout design. […]

  20. 35 Tutoriales para dise | November 5th, 2008 at 6:12 am

    […] Traducci

  21. 35 Tutoriales para dise | November 5th, 2008 at 6:12 am

    […] Traducci

  22. Hasan Yalçın » Site Şablonu Yaratmak İçin 35 Rehber | November 5th, 2008 at 8:58 am

    […] yeni başlayan veya kendini geliştirmek isteyenler için, 35 site şablonu yaratma rehberi bu adreste […]

  23. Ethan’s Blog » Blog Archive » Yay! | November 5th, 2008 at 1:32 pm

    […] Website Layout PS Tuts […]

  24. links for 2008-11-05 « Where Is All This Leading To? | November 5th, 2008 at 8:02 pm

    […] 35 Tutorials for Creating Website Layouts in Photoshop | Vandelay Website Design (tags: psd layouts photoshop webdesign webdev forbusiness web) […]

  25. Rachel | November 6th, 2008 at 12:32 am

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

    Rachel
    AllGraphicDesign.com

  26. renantech | November 6th, 2008 at 3:08 am

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

  27. Site Şablonu Yaratmak İçin 35 Rehber | | November 6th, 2008 at 4:02 pm

    […] yeni başlayan veya kendini geliştirmek isteyenler için, 35 site şablonu yaratma rehberi bu adreste derlenmiş. Yazıyı Paylaş: Aşağıdaki simgeler kullanıcılarının web sitelerini […]

  28. Tutoriales Photoshop (VIII) - Sitios web (layouts) - yockerland.net | November 6th, 2008 at 10:51 pm

    […] 35 Tutorials for Creating Website Layouts in Photoshop  ¿Te gusto este artículo? Puedes suscribirte al RSS […]

  29. 35 Tutorials for Creating Website Layouts in Photoshop [Vandelay] | November 7th, 2008 at 2:38 pm

    […] Source: Vandelay Design Blog; Date: 2008 / 02 […]

  30. Kristian Liebrand | November 8th, 2008 at 3:48 am

    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.

  31. Tutoriales photoshop para crear paginas web | November 11th, 2008 at 12:17 am

    […] gente de vandelaydesign, se armo una recopilacion de tutoriales de photoshop para crear paginas web. Son mas de 30 […]

  32. SEO Singapore | November 11th, 2008 at 1:00 pm

    thanks for the good reference tutorial..

  33. zasilenie | November 12th, 2008 at 5:24 pm

    I bookmarked this post. Great link with usefull tutorials.

    thx!

  34. Top 10 Tutorials for Converting PSDs to HTML/CSS | November 16th, 2008 at 8:32 pm

    […] For those designers who have not mastered the process of converting a design into a fully coded website, these 10 tutorials are excellent learning resources. (For tutorials on creating layouts in Photoshop, see 35 Tutorials for Creating Website Layouts in Photoshop). […]

  35. Conrado | November 18th, 2008 at 2:34 pm

    excelente!!! good tutorials…

  36. Photoshop tutorials | Blog om webudvikling | November 20th, 2008 at 9:00 pm

    […] 35 Photoshop tutorial til website layout […]

  37. To Be Web Designer You Need This Tutorials. | Skyje | November 23rd, 2008 at 3:57 pm

    […] 35 Tutorials for Creating Website Layouts in Photoshop:- […]

  38. Addy | December 7th, 2008 at 5:39 am

    Great list
    thanks :)

  39. 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design | December 24th, 2008 at 12:35 pm

    […] 35 Tutorials for Creating Website Layouts in Photoshop […]

  40. 40 Tutorials for Creating Wallpaper in Photoshop | Vandelay Website Design | December 24th, 2008 at 2:24 pm

    […] 35 Tutorials for Creating Website Layouts in Photoshop […]

  41. 35 Photoshop Tutorials for Realistic Results | Vandelay Website Design | January 5th, 2009 at 6:47 pm

    […] 35 Tutorials for Creating Website Layouts in Photoshop […]

Leave a Reply