Join over 55,891 Subscribers Today! FREE UPDATES!
Get The Only Freelancer crash course you will ever need to read!
I am continuing my research and this time I thought I’ve never done Photoshop layout tutorial roundup and wanted to become better in this matter. One of the reasons I didn’t make this kind of list, because I saw there are already many of similar articles.
But as always to stand out I invested two days in this article, collecting only really high quality tutorials and also ordering them all by date. Maybe such measure isn’t right – but I am sure you are tired of lists featuring old tutorials you have seen over and over again. I was searching only for Year 2009/2008 tutorials and was surprised myself, how many of them I found, which I really enjoyed and was high-quality ones.
Keep updated because this article was created also to study already created tutorials and get inspired to create my own layout tutorials trying to teach you what I already know about web-design! As always – hope you enjoy this work!
Created in 2009, August
Created in 2009, August
Created in 2009, August
Created in 2009, August
Created in 2009, August
Created in 2009, August

Created in 2009, August
Created in 2009, July
Created in 2009, July
Created in 2009, July
Created in 2009, July
Created in 2009, July

Created in 2009, July

Created in 2009, July
Created in 2009, July

Created in 2009, July
Created in 2009, July
Created in 2009, July
In this tutorial you will learn how to create a colorful yet elegant portfolio layout.
Created in 2009, July
In this web design tutorial, you’ll find a way to create a 3D space/futuristic gallery layout with Photoshop. Tutorial covers several methods such as drawing with the Rectangular Marquee Tool and using the Perspective Transform Tool.
Created in 2009, July
Created in 2009, July
Created in 2009, July
In this article, you will learn how to create a modern looking Photoshop design for your web design company.
Created in 2009, July
Created in 2009, July
Created in 2009, July
Created in 2009, July
In this web design tutorial, you’ll learn how to create a beautiful, green, and sleek layout in Photoshop. You’ll learn popular design techniques such as creating a 3D ribbon and professional-looking color gradient effects.
Created in 2009, July
Created in 2009, June
Created in 2009, June
Created in 2009, June
Created in 2009, June
Created in 2009, June
In this Photoshop web design tutorial, we are going to create a beautiful, dark, and sleek website mock-up centered on an elegant navigation menu that lends itself easily to CSS background sprites.
Created in 2009, June
This tutorial will show you how to create a clean and effective product design in Photoshop.
Created in 2009, June
Created in 2009, June
Created in 2009, June
Learn how to create an effective and contemporary web layout for your design studio.
Created in 2009, June
In this tutorial, you’ll learn how to design a “Premium” blog layout in Adobe Photoshop, from A to Z.
Created in 2009, June
In this tutorial, you’ll learn to create a modern, clean and classy blog layout in Adobe Photoshop using some basic techniques.
Created in 2009, May
Created in 2009, May
This tutorial will guide you through the process and ideas behind the designing a professional web 2.0 website.
Created in 2009, May
Created in 2009, May
In this tutorial I will show you how to create a nice looking Photographer portfolio layout.
Created in 2009, May
Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements.
Created in 2009, May
In this tutorial you will learn how to make a clean layout for your design company.
Created in 2009, May
In this tutorial, you’ll learn how to create a textured “worn paper” web design theme using some basic Photoshop techniques. The design incorporates some free stock images to let you create a beautiful layout in a jiffy.
Created in 2009, May
Created in 2009, May
Created in 2009, May
In this Photoshop web design tutorial, you’ll learn, step-by-step, how to create a stunning and clean web layout. You’ll be using some basic to intermediate-level techniques to build your very own sleek “Web 2.0″ style web design that uses the 960 Grid System.

Created in 2009, April
[ad#bildes-ads]
Created in 2009, April
Learn how to add a worn look that works well with cartoon-style graphics. Different flavors of grunge styles are popular all over the Web right now. Learn a unique approach to wear and tear that you can incorporate into your next Web site design.
Created in 2009, April
Created in 2009, April
In this Photoshop web design tutorial, you’ll learn how to create a full web page layout that combines the sleek and textured look-and-feel using a combination of beginning to intermediate Adobe Photoshop techniques.
Created in 2009, April

Created in 2009, April
Created in 2009, March
Created in 2009, March
In this tutorial you will learn how to make a Design Lab layout for your portfolio by making it look as if your work is being displayed on a TV.
Created in 2009, March

Created in 2009, March
Created in 2009, February
Learn how to create a professional portfolio design using basic steps and a little creativity.
Created in 2009, February
Created in 2009, February
Created in 2009, February
In this tutorial you will learn how to make a layout for your design studio website.
Created in 2009, February
Very detailed and quality tutorial from Alfoart website.
Created in 2009, February
If you don’t know this tutorial, I really encourage to visit it – very well explained one with many interesting and unique techniques used throughout.
Created in 2009, February
Learn how to make professional looking design studio web page layout. Step by step tutorial, easy to follow.
Created in 2009, January
This tutorial will cover the steps of designing the Clean Grunge blog design from scratch. It also discusses the techniques and styles of this kind of web design.
Created in 2009, January
In this tutorial you will learn how to create a corporate wordpress styled layout.
Created in 2008, December
Created in 2008, December
Created in 2008, December
In this tutorial you will learn how to create a modern web 2.0 styled web layout from scratch.
Created in 2008, November
This is a tutorial to show you how to create a magazine web layout.
Created in 2008, October
Created in 2008, October
Created in 2008, October
[ad#krasas-centrs]
Created in 2008, September
Created in 2008, September
Created in 2008, September
Created in 2008, August
Created in 2008, August
This tutorial will teach you how to design a clean, professional business website layout from scratch. Many of the techniques are fairly basic, but it shows the design process in great detail.
Created in 2008, July
Created in 2008, May
Created in 2008, May
Created in 2008, May
Learn how to create a web 2.0 looking web layout tailored to be perfect for a page selling a product. Because of how its laid out, you could even spin it off as a portfolio layout if you wanted to. This tutorial will cover several different gradient types as well as reflecting text and objects and using shading to make certain design elements stand out.
Created in 2008, May
Created in 2008, May
Created in 2008, April
At first create this layout in Photoshop, later check for continue and PSD to Xhtml conversation!
Created in 2008, April
Created in 2008, March
A step by step guide to creating a professional web layout with a dark theme for Web Design Studios
Created in 2008, January
Awesome photography portfolio design with a lot of content boxes and an attractive look.
Created in 2006, October
This is the oldest tutorial I wanted to include, amazing how good it looks still with all current upcoming trends.
Get The Only Freelancer crash course you will ever need to read!
Dainis Graveris is 23 years old blogger and designer, founder of 1stWebDesigner, now more silently managing everything behind the scenes. He usually hangs out in Twitter tweeting design related links and chatting with people. If you have any questions or feedback that's the best place to start! Cheers!
Thursday, January 5th, 2012 21:42
Brutal collection thnx!
Wednesday, October 5th, 2011 15:46
Wow, a nice collection of web layout tutorials. I like no 35 and 53. Some are ok though.
Friday, July 1st, 2011 17:44
Good collection, thanks for sharing.
Thursday, June 30th, 2011 08:32
That’s definitely an Epic Win!
Sunday, March 28th, 2010 02:18
Great collection Dainis, some nice layouts in this group.
Friday, November 27th, 2009 15:27
I love this post. But sorry to say 77.The Art Institute Photoshop Template tutorial not available at the linked location. Plz. plz. upload it for me.
Thanks again.
Thursday, October 1st, 2009 01:10
This is a great list of tutorials. Thanks for posting!
Saturday, September 26th, 2009 23:45
Those are high quality indeed and just what I needed! Thanks!
Friday, August 21st, 2009 13:44
Wohha! Wondered if that list was ever going to end!
Friday, August 21st, 2009 07:53
This is an awesome list. Thanks for sharing!
Monday, August 17th, 2009 22:43
Only a few tutorials are good. The most of them suck. Perhaps you should shorten your list before publish ist under the headline “high quality” layouts. ;)
Friday, August 21st, 2009 14:02
I must agree with Dainis, they are Harsh words. Blog posts take a lot of time and effort to put together, and I must say that this is the best colelction that I have ever seen.
Monday, August 17th, 2009 10:29
Such a huge list but really great stuff here.
Monday, August 17th, 2009 02:12
Huge and beautiful list. Love those from Grafpedia! ;)
Monday, August 17th, 2009 09:07
It’s a really huge list and I really respect your job but (really sorry) I don’t find majority of these designs interesting and worth of repeating (even if it’s just tutorial). Just some of them, like 81 or 66 or 36 or 23. Sorry-sorry :)
P.S. Don’t you mind my bad comment? For all that It’s still your reader’s opinion :)
Monday, August 17th, 2009 07:29
Brilliant!
Sunday, August 16th, 2009 23:57
I am sometime overwhelmed by the volume of your compiled lists. They always give me something to think about in terms of design and are fun to explore.
Sunday, August 16th, 2009 17:41
Very useful list. Thanks for featuring some of my tutorials!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Ionut Ciursa
Sunday, August 16th, 2009 17:41
Very useful list. Thanks for featuring some of my tutorials!
Dainis Graveris
Sunday, August 16th, 2009 17:52
sure, beautiful tutorials you got there!!:) Thanks!
Nastia
Monday, August 17th, 2009 09:07
It’s a really huge list and I really respect your job but (really sorry) I don’t find majority of these designs interesting and worth of repeating (even if it’s just tutorial). Just some of them, like 81 or 66 or 36 or 23. Sorry-sorry :)
P.S. Don’t you mind my bad comment? For all that It’s still your reader’s opinion :)
Dainis Graveris
Monday, August 17th, 2009 10:23
Sure, Nastia – like “not dollar to like everyone” is the same about articles and selections. :)
I selected carefully tutorials and outcomes I thought was worthy, sure if list is this long, there will be similar designs, but I like to scroll through tutorials and always find interesting, new approaches and techniques. That’s just the way I am looking at this article!
To be honest I enjoy your comment more than typical – “very good selection, thanks” – type of comments!:) No worries!
Johnson Koh
Monday, August 17th, 2009 02:12
Huge and beautiful list. Love those from Grafpedia! ;)
Dainis Graveris
Monday, August 17th, 2009 08:36
Thank you, Johnson! Same here, Grafpedia layouts are very professional!
Manuel
Monday, August 17th, 2009 22:43
Only a few tutorials are good. The most of them suck. Perhaps you should shorten your list before publish ist under the headline “high quality” layouts. ;)
Daniel Groves
Friday, August 21st, 2009 14:02
I must agree with Dainis, they are Harsh words. Blog posts take a lot of time and effort to put together, and I must say that this is the best colelction that I have ever seen.
Dainis Graveris
Monday, August 17th, 2009 23:35
Can I ask how many tutorials you did check out, before saying such harsh words?
I really cannot agree with you unless you are highly experienced designer with stunning portfolio you can show us!
But still critique is good thing to have, I really spent my time to search for good outcomes, too bad you don’t like them, I hope others will enjoy it.
Jay
Monday, August 17th, 2009 10:29
Such a huge list but really great stuff here.
Dainis Graveris
Sunday, August 16th, 2009 22:28
I must say you really offer beautiful tutorials, great ideas and very good outcomes! I really respect your work, that’s why I included so much of your tutorials!
Alan
Sunday, August 16th, 2009 20:24
Awesome compilation, thanks for including my stuff! =)
Jay Zuck
Sunday, August 16th, 2009 23:57
I am sometime overwhelmed by the volume of your compiled lists. They always give me something to think about in terms of design and are fun to explore.
Dainis Graveris
Monday, August 17th, 2009 08:37
Oh, mean, thanks:) Yeah, when I really start to research posts grow a little bit big – but hey, still I am hoping everybody is taking the best of it – inspiration, maybe tutorials, designing.
Dainis Graveris
Monday, August 17th, 2009 08:35
Thanks man:)
Amna
Monday, August 17th, 2009 07:29
Brilliant!
Clay Jackson
Friday, August 21st, 2009 07:53
This is an awesome list. Thanks for sharing!
Winston
Thursday, June 30th, 2011 08:32
That’s definitely an Epic Win!
Dhirendra Kumar
Friday, July 1st, 2011 17:44
Good collection, thanks for sharing.
carrie
Wednesday, October 5th, 2011 15:46
Wow, a nice collection of web layout tutorials. I like no 35 and 53. Some are ok though.
John Nicholson
Friday, March 16th, 2012 11:26
desing best thanks
Dacha
Thursday, January 5th, 2012 21:42
Brutal collection thnx!
Hali Yikama
Saturday, August 21st, 2010 16:33
successful and wonderful.
Eric Shafer
Sunday, March 28th, 2010 02:18
Great collection Dainis, some nice layouts in this group.
Daniel Groves
Friday, August 21st, 2009 13:44
Wohha! Wondered if that list was ever going to end!
Michelle
Saturday, September 26th, 2009 23:45
Those are high quality indeed and just what I needed! Thanks!
Sweenie
Thursday, October 1st, 2009 01:10
This is a great list of tutorials. Thanks for posting!
Kinedo
Friday, January 29th, 2010 18:49
Great Post. Even had some design inspiration in there!
hifi
Friday, November 27th, 2009 15:27
I love this post. But sorry to say 77.The Art Institute Photoshop Template tutorial not available at the linked location. Plz. plz. upload it for me.
Thanks again.