40 Useful Photoshop Web Layout Tutorials

Feb 2 2009 by Jacob Gube | 73 Comments

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

Corporate WordPress Style Layout - screen shot.

Create a dark, clean, and usable blog style layout.

2. Old Paper Layout

Old Paper Layout - screen shot.

Learn how to create an elaborate and decorative design with paper textures.

3. Making the ‘Clean Grunge’ Blog Design

Making the ‘Clean Grunge’ Blog Design - screen shot.

In this tutorial, you’ll see how to make a clean/grungy layout.

4. Create a Sleek, High-End Web Design

Create a Sleek, High-End Web Design - screen shot./

This tutorial goes over how to create a dark-themed, classy web design.

5. Clean Website Layout

Clean Website Layout - screen shot.

Learn how to create a simple and modern web layout using Photoshop.

6. How to Create a Grunge Web Design in Photoshop

How to Create a Grunge Web Design in Photoshop - screen shot.

In this tutorial, you’ll read a detailed discussion on creating a grungy web design.

7. Photoshop Paper Texture Grunge Design

Photoshop Paper Texture Grunge Design - screen shot.

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

How a Simple Layout Can Be Mixed 'n' Matched - screen shot.

You’ll be creating a simple web layout that can easily be changed.

9. Five Looks, One Layout

Five Looks, One Layout - screen shot.

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

Design a Cartoon Grunge Web site Layout - screen shot.

Mix the illustrated look and the popular grunge design trend in this web layout tutorial.

11. Professional Magazine Web Layout

Professional Magazine Web Layout - screen shot.

Create a clean and functional "magazine-style" web layout in Photoshop.

12. Web Design – Journal

Web Design - Journal - screen shot.

Learn how to create an aged journal web layout.

13. Modern Web 2.0 Web Layout

Modern Web 2.0 Web Layout - screen shot.

Create a modern, clean, and usable web layout by following along this tutorial.

14. White Notebook Style Web Template

White Notebook Style Web Template - screen shot.

Learn how to design an elegant and fancy notebook style web layout.

15. Design a Unique Grungy Website Layout

Design a Unique Grungy Website Layout - screen shot.

In this Photoshop tutorial, you’ll learn how to create a grungy-themed web layout.

16. Simple Night Style Website Layout

Create a Dark Themed Web Design - screen shot.

In this tutorial, you’ll learn how to create a night-themed web layout.

17. Professional Design Studio Web Template

Professional Design Studio Web Template - screen shot.

This tutorial goes through a process of designing a professional web layout.

18. Design a Clean Business Layout

Design a Clean Business Layout - screen shot.

Create a clean, web 2.0 style web layout in this Photoshop tutorial.

19. Create a Dark Themed Web Design

Simple Night Style Website Layout - screen shot.

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

Portfolio Design Part 1 and Portfolio Design Part 2 - screen shot.

Create a stylish porfolio by following along this two-part Photoshop tutorial series.

21. Portfolio Gallery Layout

Portfolio Gallery Layout - screen shot.

Learn a process for creating a sleek online photo album.

22. Business Layout #3

Business Layout #3 - screen shot.

This tutorial will show you how to design a clean business web layout.

23. Dark Style Web Template

Dark Style Web Template - screen shot.

In this Photoshop tutorial, you’ll be creating a beautiful dark-themed web layout.

24. Create a Vibrant Modern Blog Design in Photoshop

Create a Vibrant Modern Blog Design in Photoshop - screen shot.

Learn the techniques involved in creating a high-impact blog layout in Photoshop.

25. Full Web Template

Full Web Template - screen shot.

In this step-by-step tutorial, you’ll learn how to create a beautiful web layout.

26. Car Layout

Car Layout - screen shot.

This tutorial goes over the creation of a web layout for car enthusiasts.

27. Full Photoshop Website Design

Full Photoshop Website Design - screen shot.

Learn how to create a web layout that’s perfect for graphic and web designers.

28. Environmentally Friendly Layout

Environmentally Friendly Layout - screen shot.

Create a clean and green web layout by following along this Photoshop tutorial.

29. Architecture layout

Architecture layout - screen shot.

Create this architecture-themed, brown-colored web layout by following along this Photoshop tutorial.

30. Design Layout

Design Layout - screen shot.

Learn the process of creating this sleek and dark-themed web layout in Photoshop.

31. Creative Studio Web Page

Creative Studio Web Page - screen shot.

In this tutorial, you’ll learn how to create a dark-themed portfolio site.

32. Website Design Studio

Website Design Studio - screen shot.

Create a bright and high-impact web layout by following along this Photoshop tutorial.

33. Carbon Fiber Layout

Website Design Studio - screen shot.

Learn how to use carbon fiber textures in your web designs in this Photoshop tutorial.

34. Creating Business Style Template Design

Creating Business Style Template Design - screen shot.

Learn how to make a dark-themed, clean web layout in this tutorial.

35. Model portfolio layout

Model portfolio layout - screen shot.

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

Clean Business Layout Tutorial - screen shot.

This tutorial will show you the techniques involved in creating an eye-catching business themed layout.

37. Premium WordPress Photoshop Layout

Premium WordPress Photoshop Layout - screen shot.

Learn how to create a "premium" WordPress web layout from scratch by reading through this Photoshop tutorial.

38. Portfolio Layout #9

Portfolio Layout #9 - screen shot.

This Photoshop tutorial goes over the techniques involved in creating a clean, blue-themed portfolio site.

39. Design Studio Layout

Design Studio Layout - screen shot.

This tutorial shows you how to create a website layout that has metallic gradients.

40. Nature Portfolio Layout

Nature Portfolio Layout - screen shot.

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.

Related content

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!

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

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

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

Subscribe to the comments on this article.