topwebdesigntuts

Tutorials on how to create Web designs in tools like Photoshop have increased rapidly in numbers recently and as always, there are some that are better than other is. I have previously created quantitative lists trying to list any tutorials available that is worth following e.g. this collection of 95 web design tutorials. In this article, I have put a significant effort into picking only a few but some of the best available. This should make your life easier and it is not too overwhelming to plan going through them to sharpen your skills and be inspired. I have based my assessment on the quality of the design itself, appearance of interesting and useful tip/techniques and on the detail and quality of the individual tutorial steps. Stay tuned as I will scan through more tutorials and provide more web design tutorials you cannot resist trying out! If you are looking for more web design inspiration or a quick start for a project, you should also have a look at some WordPress themes collections. Themes for building websites with intensive use of photography are quite popular.


ElegantThemes
ThemeForest

Advertisement

Design a Beautiful Website From Scratch

web-design-tuts

Type: Business Website
Published: April 2009
Tool: Photoshop
Steps: 34
Text: Good explanations, enough text
Images: Large, relevant, enough
Notes: Grid based 960.gs, cool button techniques
Materials available: No
PSD Available for download: Yes but not free
Markup and CSS: Yes but not free

Create a Web Layout with 3D Elements using Photoshop

web-design-tuts

Type: Business Website
Published: September 2009
Tool: Photoshop
Steps: 51
Text: Good explanations, enough text
Images: OK size, relevant, enough
Notes: Interesting Photoshop techniques for creating 3D effects
Materials available: No
PSD Available for download: Yes 3d-ribbon-layout.zip
Markup and CSS: No

How To Create a Clean and Colorful Web Layout – Photoshop Tutorial

web-design-tuts

Type: Business Website
Published: June 2009
Tool: Photoshop
Steps: 43
Text: Good explanations, enough text
Images: Large, relevant, enough, a lot of effort put into this
Notes: Very interesting and unique Photoshop techniques for creating backgrounds
Materials available: Yes  leafs pixelated blue rectangle
PSD Available for download: Yes but not free
Markup and CSS: Yes but not free

Create a Clean Modern Website Design in Photoshop

web-design-tuts

Type: Business Website
Published: May 2009
Tool: Photoshop
Steps: Not organised into steps
Text: OK explanations, enough text
Images: Large, relevant, enough, a lot of effort put into this
Notes: Grid based 960.gs, Interesting Photoshop techniques using Gradients and noise for background, coding tutorial also available
Materials available: No
PSD Available for download: No
Markup and CSS: Yes a full high quality tutorial exists

Design a simple, modern web template

web-design-tuts

Type: Business Website
Published: November 2009
Tool: Photoshop
Steps: 6 sections, not organised into sub steps
Text: Good explanations, enough text
Images: Large, relevant, enough, a lot of effort put into this
Notes: Interesting Photoshop techniques using Gradients, PSD available for free
Materials available: No
PSD Available for download: Yes
Markup and CSS: Yes a full high quality tutorial exists

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares