40+ Tutorials on Photoshop Website Design and PSD to HTML

June 18, 2013 · 92 comments

by Lars

In this article tripwire magazine provides you with more than 40 high quality Website Photoshop Tutorials that you just have to investigate. Further this article provides you with Tutorials surfacing the secrets you need for converting your Photoshop Designs into web pages that you can publish on the Internet.



Introduction Photoshop webdesign tutorials

The Photoshop Tutorials in this article will help you design the website look and feel you have been dreaming of. If you can’t find the tutorials that perfectly matches your needs you should try to look for elements that you would like to add to your website design. The tutorials will help you understand the techniques needed to create these elements ready to go onto your website. Another interesting think to master is Photoshop text effects. Whether you’re looking for techniques or inspiration for a full web site redesign or just ideas for adding new good looking element all you need to get started should be collected here.


The article has been organized into the following sections:

Section 1: Photoshop Website design Tutorials

Section 2: Photoshop Tutorials for creating elements for your web design

Section 3: Converting PSD to HTML, CSS…Website template

Photoshop Website design Tutorials

Create a Professional Portfolio Design in 17 Easy Steps

This tutorial teaches you how to create a professional looking portfolio design using very basic techniques. The majority of online portfolio’s appear amateur, yet it really isn’t very difficult to produce a simple design, very quickly that can portray a professional image online.

This tutorial hopefully shows how a few simple techniques can bring great results.


Making your own portfolio web page


View full size here.

Grungy / Textured

Tutorial on creating a simple paper texture from scratch in Photoshop then marrying it with a web layout to create a neat design.

It’s a grungy looking, textured design based on a simple, solid, underlying layout. What we’re going to do is take that underlying layout and treat it like a coathanger, swapping different styles in and looking at why each look works.


Tutorials on alternative themes based on Manialla above:



How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

It’s pretty amazing how much colour and background can change the look and feel of a website. In this tutorial we’re going to put together a quick, simple but effective layout and then create variations using backgrounds, photos and patterns. We’ll also look at how to make seamless tiled backgrounds out of a photo, methods for ending a single photo and simple ways to create pixel patterns. In short it’s a jam packed tutorial!

Simple Layout

Simple Layout2

Simple Layout3

Creative Studio Web Page

In this detailed tutorial we will learn how to create impressive layout for Creative Studio.

creative studio

Online Photo Portfolio

This tutorial will show you how to create a clean looking layout for your portfolio.

photo portfolio

Sound System Studio Web Layout

In this tutorial you will learn how to create a nice looking layout.


Design a Clean Business Layout

For this tutorial Psdfan is going to show you how to make a professional, clean business layout. This kind of design is perfect for companies or business related blogs.


Car Layout #3


Cartoon Grunge

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.

Cartoon Grunge

Create a Sleek, High-End Website Design from Scratch

It’s quite an elegant design, which would probably suit a designer portfolio-type site, but really could be altered for all sorts of purposes. It relies on having elegant typography, a structured layout, and a visually interesting background.

The real power of this design is to show you what can be accomplished by keeping it simple.


Making a ‘Clean Grunge’ Blog Design

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.


Design a Unique Grungy Website Layout

This tutorial will teach you how to create a unique grungy website design. Many of the techniques involved are fairly basic, but through the tutorial I’ve tried to explain my thought process behind certain design decisions as well as outlined how to get the most from your grunge designs.


How to create a design studio – web page layout


View full size here.

How to Create a Grunge Web Design in Photoshop

This time we’re going to create a full web design in grunge style using Photoshop and a lot of stock images. As this is a intermediate to advanced level tutorial it will skip the explanation of some basic steps.


Create a Dark Themed Web Design from Scratch

his tutorial covers the key areas to focus on when creating a Web site design. This is a blog-style design, but the techniques and strategies used in this design could be applied elsewhere across the Web as well. Learn how to create a colorful design set against a dark background.

Dark Themed

Create a Design Agency Layout


Photo Portfolio Web Page Layout

This tutorial will show you how to create a clean looking web layout for your portfolio.

Photo Portfolio Web Page Layout

Design a Web photshop Template using the “960 Grid System”

Learn how to use the 960 Grid System to design a website template in Photoshop. You will be practicing layer styles to for effects and positioning elements based on the 960 Grid System.


Carbon Fiber Layout

Carbon Fiber Layout

Computer Store Web Layout

This task we’ll see how to create a Web Layout for Computer Store


Professional Web Layout for Business Solutions

Make a stylish and clean professional layout for your Business Solutions site.


Stylish Web Studio Layout

A complete tutorial on how to make a stylish webstudio web layout.


View full size here.

Make it work

Make it worn

Design Studio Layout


Making a Template in Photoshop


Create a Magic Night Themed Web Design from Scratch in Photoshop

Here’s a tutorial for you, an artistic web design depicting a “Magic Night” concept.

Magic Night

Photography Portfolio Layout

Awesome photography portfolio design with a lot of content boxes and an attractive look.

Photography portfolio

Business Layout #4


WordPress Layout #3


Design Lab Layout


Business Layout


Website Design Mockup Tips

This tutorial will show you a few tips, tricks and techniques you can use when mocking up your next website. When mocking up a website design, there are a few design elements and styles that are really easy to create in code, but may not be as obvious when working in Photoshop.


Photoshop Tutorials for creating elements for your web design

Clean White Navigation Bar

Clean White Navigation Bar

Blue on Black Navigation Bar

Blue on Black Navigation Bar

Design a Glossy Download Icon

The difficulty in designing web graphics is not so much in the actual execution of the design, but more in the planning of it. At the same time you want the graphic to be eye-catching, yet smooth and small enough so it doesn’t dominate your layout. This tutorial will teach you how to create a graphic that does just that.


Creating A Cool 3D Web Design Effect

In this tutorial I will show you some very easy techniques, using gradients and layer styles, that we can use to produce nice subtle 3D effects in our web designs.

Cool 3D Web Design

Handy Web 2.0 Icons In Photoshop

When we are working on a Web design project, we quite often need icons to show commands like add, delete, or edit. With the Web 2.0 trend, the use of badges and subtle 3D has become very popular. In this tutorial, I will show you how to create a really easy and very nice 3D effect to be used in either buttons and icons or elements that need some depth.

web20 icons

Web 2.0 Design Kit

Web 2.0 is a term coined by O’Reilly describing the new trends in design and development appearing across a flood of innovative websites. This tutorial will show you how to create some of the more popular “Web 2.0? design effects using Photoshop.

Web 2.0 Design Kit

Create A Textured Tag For Your Website

In this tutorial, we are going to create a textured tag that you can use in your website designs. Adding textured elements to modern web designs is a current trend. Learn how to create your own texture and then apply it to your design element.

website tag

Converting PSD to HTML, CSS…Website template

From PSD to HTML, Building a Set of Website Designs Step by Step

This tutorial is going to take you through a entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!






Anxious about 640-461 exam prep? We offer up-to-dated PW0-104 practice questions and 650-251 dumps with 100% exam pass guarantee.

Want to keep on surfing? Have look at these Drupal 7 Themes maybe this is what you’re looking for.

Hold on! Do you have a Facebook page? With one of the good looking Facebook Skins you social profile and presence will improve. Have a look!

{ 37 comments… read them below or add one }

urban novel publishers May 28, 2013 at 8:41 pm

Simply wish to say your article is as surprising. The clarity
in your post is simply great and i can assume you’re an expert on this subject. Fine with your permission let me to grab your feed to keep updated with forthcoming post. Thanks a million and please keep up the gratifying work.


KHOKON November 8, 2012 at 2:49 pm

Awesome post that I was searching. Thanks for sharing us. There has little graphic design tutorial too that you may visit.


John November 3, 2012 at 8:40 am

textures are very useful in web designing.
” Grungy / Textured”

this tutorial is very useful to me… thanks for sharing the collection…



the guestlist london October 2, 2012 at 3:42 pm

Hello friends, its fantastic post on the topic
of cultureand completely explained, keep it up all the time.


zamshid November 25, 2011 at 12:43 pm

most useful for new web designer best job


KennethRules November 24, 2011 at 9:22 am

Thank you for sharing this tutorial collection, hope I will find what i need here.. thanks


aishalal October 8, 2011 at 3:20 pm

Nice collection and useful tutorial. Really helpful.. :)


harpreet June 14, 2011 at 7:04 pm

Nice but how to convert psd to html,css


Data Entry Service May 20, 2011 at 8:31 am

great tutorials……..keep it up


cheap custom jerseys May 19, 2011 at 9:05 am

Tutorials on Photoshop Website Design and PSD to HTML


boot verhuur loosdrecht April 19, 2011 at 6:46 pm

It is actually an excellent and important piece of advice. I’m happy you provided this very helpful info with us. Please keep us informed this way. Great sharing.


Endyst April 8, 2011 at 11:10 am

Good collection and interesting design, thank you!


hanabi April 6, 2011 at 4:20 pm

thank for vailuable information ^^ it’s verry useful
nice and perfect collection
thank you so much


Sandra Guerrero Sanmartí April 4, 2011 at 12:47 pm

Really nice article! I have written also an article with 70 PSD templates ready to download! Visit my blog at http://www.sandraguerrero.net/2011/04/70-plantillas-de-photoshop-listas-para-descargar/


TemplatesRule.com March 31, 2011 at 11:15 am

Many people, especially beginners have been asking for interesting photoshop tutorials source, and this page is the treat. Very nice collection indeed.


Lacy March 19, 2011 at 7:29 pm

Nice collection, thx for sharing!


Adina Duane March 6, 2011 at 2:47 am

I have been looking around for an organized set of tutorials on photoshop and web design…and I found it very single one of them are well written and easy to understand especially the PSD to HTML/CSS tutorial, thanks so much


Lars March 6, 2011 at 9:49 am

You are welcome Adina


Charlie February 9, 2011 at 2:06 pm

interesting layouts, thank you


html5 tutorial January 10, 2011 at 9:31 pm

useful info. thanks..soon html5 will take over the web :)


dreamincolor November 15, 2010 at 11:24 am

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/


raised print business cards November 15, 2010 at 5:59 am

Great tutorials, thanks.


Ravi November 9, 2010 at 10:55 am

Thanks for sharing such a valuable info. Great Work


Parveen October 15, 2010 at 2:33 pm

Hi!Thanks for sharing very important and useful tutorials about the web designing and i get help allot form your post so i am thankful to you sharing your post!


John September 30, 2010 at 9:32 am

Thanks for the heard work.


wordpress September 29, 2010 at 7:03 pm

too useful tutorials


Leather Skirts September 5, 2010 at 4:06 pm

Very useful and interesting tutorials. I especially like tutorial converting psd to html and css. Thanks for sharing this collection, and making quite an effort.


Leather Skirts September 5, 2010 at 3:59 pm

Great collection nice desgin, really like your designs. Thanks for sharing.


steven smith September 4, 2010 at 6:58 am

great looking list. I actually started to add coding tutorials on my site as well.


camron September 3, 2010 at 2:11 pm

am a newbie to web design using photoshop.this has really helped.i a have a question for you:
do you usually start your web design projects from photoshop or dreamweaver?


farfasiar August 31, 2010 at 7:16 am

I like the black navigation bar


Jennifer R July 3, 2010 at 9:25 am

Very nice collection for design in Photoshop, thanks you


cam mozaik May 24, 2010 at 2:46 pm

Thanks a lot! Php and this was very easy to follow and helped a lot.
You really took time to explain every little bit.
Thanks again…


Master April 30, 2010 at 10:47 am

Great list but there is another one site having top page rank professional Photoshop layout tutorials website
see link below

Hope it’s helpful!


Broadway Seo April 27, 2010 at 8:12 pm

Great tutorial, i have read a few and this seems to be the most descriptive, thanks for the share…will save.


Checker24 April 8, 2010 at 7:55 pm

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


yodda April 3, 2010 at 10:26 pm

Great collection, thanks


Leave a Reply

Your email address will not be published. Required fields are marked *

{ 4 trackbacks }

Previous post:

Next post:

Web Analytics