40 Useful Photoshop Web Layout Tutorials
Adobe Photoshop is the industry-standard when it comes to creating web page layouts. Photoshop’s versatility, robust set of tools, and excellent workflow management make it the web designer’s preferred application when creating designs for the web.
In this collection, you’ll find 40 high-quality tutorials on creating web layouts from scratch using Photoshop. This article contains a copious variety of tutorials to help you learn and master the various techniques involved in creating beautiful web layouts.
1. Corporate WordPress Style Layout
Create a dark, clean, and usable blog style layout.
2. Old Paper Layout
Learn how to create an elaborate and decorative design with paper textures.
3. Making the ‘Clean Grunge’ Blog Design
In this tutorial, you’ll see how to make a clean/grungy layout.
4. Create a Sleek, High-End Web Design
This tutorial goes over how to create a dark-themed, classy web design.
5. Clean Website Layout
Learn how to create a simple and modern web layout using Photoshop.
6. How to Create a Grunge Web Design in Photoshop
In this tutorial, you’ll read a detailed discussion on creating a grungy web design.
7. Photoshop Paper Texture Grunge Design
You will learn how to create a paper texture and then how to use it in a web design layout.
8. How a Simple Layout Can Be Mixed ‘n’ Matched
You’ll be creating a simple web layout that can easily be changed.
9. Five Looks, One Layout
Learn the process of creating a versatile web layout that can embody a variety of design themes.
10. Design a Cartoon Grunge Web site Layout
Mix the illustrated look and the popular grunge design trend in this web layout tutorial.
11. Professional Magazine Web Layout
Create a clean and functional "magazine-style" web layout in Photoshop.
12. Web Design – Journal
Learn how to create an aged journal web layout.
13. Modern Web 2.0 Web Layout
Create a modern, clean, and usable web layout by following along this tutorial.
14. White Notebook Style Web Template
Learn how to design an elegant and fancy notebook style web layout.
15. Design a Unique Grungy Website Layout
In this Photoshop tutorial, you’ll learn how to create a grungy-themed web layout.
16. Simple Night Style Website Layout
In this tutorial, you’ll learn how to create a night-themed web layout.
17. Professional Design Studio Web Template
This tutorial goes through a process of designing a professional web layout.
18. Design a Clean Business Layout
Create a clean, web 2.0 style web layout in this Photoshop tutorial.
19. Create a Dark Themed Web Design
This Photoshop tutorial goes over the methods involved in designing a dark-themed web layout.
20. Portfolio Design Part 1 and Portfolio Design Part 2
Create a stylish porfolio by following along this two-part Photoshop tutorial series.
21. Portfolio Gallery Layout
Learn a process for creating a sleek online photo album.
22. Business Layout #3
This tutorial will show you how to design a clean business web layout.
23. Dark Style Web Template
In this Photoshop tutorial, you’ll be creating a beautiful dark-themed web layout.
24. Create a Vibrant Modern Blog Design in Photoshop
Learn the techniques involved in creating a high-impact blog layout in Photoshop.
25. Full Web Template
In this step-by-step tutorial, you’ll learn how to create a beautiful web layout.
26. Car Layout
This tutorial goes over the creation of a web layout for car enthusiasts.
27. Full Photoshop Website Design
Learn how to create a web layout that’s perfect for graphic and web designers.
28. Environmentally Friendly Layout
Create a clean and green web layout by following along this Photoshop tutorial.
29. Architecture layout
Create this architecture-themed, brown-colored web layout by following along this Photoshop tutorial.
30. Design Layout
Learn the process of creating this sleek and dark-themed web layout in Photoshop.
31. Creative Studio Web Page
In this tutorial, you’ll learn how to create a dark-themed portfolio site.
32. Website Design Studio
Create a bright and high-impact web layout by following along this Photoshop tutorial.
33. Carbon Fiber Layout
Learn how to use carbon fiber textures in your web designs in this Photoshop tutorial.
34. Creating Business Style Template Design
Learn how to make a dark-themed, clean web layout in this tutorial.
35. Model portfolio layout
In this Photoshop tutorial, you’ll learn how to make a beautiful portfolio web layout that has a textured background.
36. Clean Business Layout Tutorial
This tutorial will show you the techniques involved in creating an eye-catching business themed layout.
37. Premium WordPress Photoshop Layout
Learn how to create a "premium" WordPress web layout from scratch by reading through this Photoshop tutorial.
38. Portfolio Layout #9
This Photoshop tutorial goes over the techniques involved in creating a clean, blue-themed portfolio site.
39. Design Studio Layout
This tutorial shows you how to create a website layout that has metallic gradients.
40. Nature Portfolio Layout
Create a nature-inspired web layout by following along this Photoshop tutorial.
Got a tutorial to share?
If your favorite tutorial isn’t listed above, why don’t you tell us a little bit about it and drop us a link in the comments.
73 Comments
Matthew Heidenreich
February 2nd, 2009
woot! Nice to see one of mine mentioned first. Nice list
Tom Ross
February 2nd, 2009
Really awesome list here! Thanks for including 3 tutorials from PSDFAN.
Stumbled :)
Raymond Selda
February 2nd, 2009
I can see some new layout tutorials here. Very nice list. Thank you.
Roshan Bhattarai
February 2nd, 2009
Wow….these days I’m very keen in learning photoshop and this list will be awesome for my weekend…thanks for sharing this… bookmarked…
insic
February 3rd, 2009
awesome list. Old Paper Layout by talk-mania is the best for me.
Rik Weber
February 3rd, 2009
This will keep me going for weeks – thanks!
carol rivello
February 3rd, 2009
what an useful post, thanks!
Foodess
February 3rd, 2009
This is a great resource! Thanks.. i think i need some more polishing on my site.. this helps!
husien
February 3rd, 2009
Great Collection that’s need good time to surf i will check them …thanks a lot ^_^
Nick
February 3rd, 2009
Inspiring collection and great variety! I will definitely have a go at a couple of these tutorials. Thanks!
Janko
February 3rd, 2009
Great roundup, there are some really interesting layouts I haven’t seen before.
Mustafa
February 3rd, 2009
Great post. Looks like being on twitter so much let me get the first comment.
Designer
February 3rd, 2009
STUNNING DESIGNS!!!!!!!!!
Timothy
February 3rd, 2009
This is a really great collection! Annnnnd del.icio.used!
Jamie
February 3rd, 2009
Great collection of tutorials! Would be cool if next time you post some tutorials that assist with converting the layouts into usable web pages. But once again, many thanks!!
ThemeLib
February 3rd, 2009
Awesome post. Thanks a bunch :)
ravenscar
February 3rd, 2009
nice nice sites.. hope this have a part 2
Colin Wright
February 3rd, 2009
Amazing how the majority of modern sites can be fit into so few categories. Nice list!
guru
February 4th, 2009
Want some natural layouts
Dietmar
February 4th, 2009
wow, cool list, gonna check those tutorials out!
Jacob Gube
February 4th, 2009
Thanks for the excellent feedback everyone.
@Jamie: Great idea, basically PSD to CSS/HTML tutorials? I’ll definitely consider that as a future post, thanks for the suggestion!
Matthew Heidenreich
February 4th, 2009
yeah, and i plan on working on in the future having all my template tutorials turned into coded tutorials as well as that seems to be a popular request
iDevelopThings
February 4th, 2009
Sweet, love the web design journal..
Kayla
February 5th, 2009
One of the most useful showcases I’ve ever found. Great job…all of these will come in handy.
arm
February 6th, 2009
Very nice !!!
Webdesigner Depot
February 6th, 2009
All wonderful – the “White Notebook” was especially fun. The simple business layouts are probably the most useful in the bunch. Thank you!
Shilpi
February 12th, 2009
Good Post!
themisfit
February 22nd, 2009
great list and some awesome inspiration!
Danh ba web 2.0
February 22nd, 2009
Great collection. Thanks you very much
it’s very useful for me !
HirenModi
February 25th, 2009
Awesome stock of tuts, Thanks
Mark Scerri
February 27th, 2009
One of the greatest collection on the web
charles
March 3rd, 2009
HI..
All the templates r nice, but if u provide layout with graphics banner which contains (abstract background or images) it would be better
Nonim99
March 27th, 2009
Definitely one of the most useful resources for newbie web designers i have ever seen
Thanks for sharing this with us, hope you do more stuff.
Rahul Kumar
May 20th, 2009
Great collection of tutorials.Thanks you.
Slumberg
May 29th, 2009
Nice tutorials! Hopefully it will help me at work. Slumberg (aka Turtles Slumberg)
Shital Patil (dada)
June 7th, 2009
Great collection of tutorials! Would be cool if next time you post some tutorials that assist with converting the layouts into usable web pages. But once again, many thanks!!
Hannah
June 11th, 2009
Thank u!
Vibha
October 21st, 2009
Great Collection…. Thank you…
Blaine Bullman
October 27th, 2009
Sweet Tutorials!!!
This is by far the best list I’ve seen so far.
kelowna photographer
November 2nd, 2009
Wow! This is exactly what I was looking for!
Pretush
December 22nd, 2009
nice list, most of this can be used in any kind of website with little modifications. i specially liked pixelmag theme.
iMatt
January 3rd, 2010
Very Very nice stuff! Will come handy 100%!!
Nikhil
January 3rd, 2010
Nice collection!
Murtuza
January 28th, 2010
Nice collection of websites
Rajesh Cherai
February 19th, 2010
Wow Awesome!!! love pixelmag theme. Thanks
ktown
March 16th, 2010
nice tutorials, thanks!
Aivea
March 23rd, 2010
Hi,
Very nice tutorials for web designer.
Thanks
Anil Kumar Panigrahi
March 25th, 2010
Hello,
Awesome collection, and very useful for web designer
Thank you very much for sharing …..
rakesh
May 3rd, 2010
Great collection of tutorials! Would be cool if next time you post some tutorials that assist with converting the layouts into usable web pages. But once again, many thanks!!
kangaroodesign
June 13th, 2010
nice tutorials
PsdTuts
June 25th, 2010
Great list! I love wordpress layouts!
Jean
July 7th, 2010
Muchas gracias por los tutoriales, estan buenisimos… Ahora a practicarlos.
Saludos
udhaya kumar
July 7th, 2010
A very good collection of tutorials!
mustafa
August 13th, 2010
Nice web tutorials use full best design
Zac Lawrence
September 15th, 2010
THIS IS SHIT!!
thinzar
September 22nd, 2010
very good, thanks
Dularam Choudhary
November 11th, 2010
Very well!the largest sea of tutorials,thanks.
ketsarin
December 14th, 2010
thks a lot for ur kindness =]
WeBigma
February 7th, 2011
Nice web tutorials!
very good, thanks
moreo
February 7th, 2011
so nice ! collection of tutorials..give some good idea and many inspiration..development of design come by idea and inspiration…i hope this site always countinue…never stop
Robbie Douglas
February 9th, 2011
Brilliant list of tutorials!!
QuiNzZApeX
February 22nd, 2011
Hey nice layout tuts. but could you make one for a youtube layout… i’m just asking you might have one but the names of the tuts are kinda not under youtube…. so if you could make one that would be great!
THANKS.
hari
March 21st, 2011
it’s a nice car it’s layout is simple
achmad husaini
May 23rd, 2011
hi guys, how to create navigation always move to over where scrolling???
help me pleaseeeeeeeee,
sent its on my email.
thanks
rampradeep
June 8th, 2011
thanks mate…………….
anojs
June 22nd, 2011
cool layouts thanks a lot….
shiva
June 25th, 2011
very nice sample designs
snyxius
July 13th, 2011
Nice design that helps the new blog creators to maintain good design. The design is the main in the blog for the look of blog. Like first impression is the best impression…….
Azad
July 19th, 2011
Very nice…….. i am not expect how it is… keep it up…
Max Manus
August 22nd, 2011
I love them all! thx
tashi
September 22nd, 2011
I m not able to open the 2nd tutorial i.e old-page-layout of talk-mania.
plz help me!!!
Avinash
September 28th, 2011
nice layout to see
Irshad Ahmed
November 3rd, 2011
Nice guidance, lushpush layouts!
Leave a Comment