tripwire magazine

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. I have previously created quantitative lists trying to list any tutorials available that is worth following fx. 185+ Web Design Tutorials using Photoshop, CSS, HTML etc. 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 its 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 can’t resist trying out!

Design a Beautiful Website From Scratch

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

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

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

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

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

Related posts

1. 185+ Web Design Tutorials using Photoshop, CSS, HTML etc. Designing web sites is a highly creative process and...
2. 20+ Highest Quality Photoshop Typography Effect Tutorials With Photoshop you can turn plain text into awesome...
3. Creating a Clean and Elegant Blog Design with Photoshop, Part 3 This post pick up on the previous two parts...
4. Creating a Clean and Elegant Blog Design with Photoshop, Part 1 Creating a great looking blog design isn’t as hard...
5. 35+ Stunning Photoshop Smoke Effect Tutorials and Brushes This Article provides a collection of high-quality Photoshop smoke...

Please remember to share this post!