The Blog

6 awesome web design tutorials you shouldn’t miss

Being a web designer, I found myself often in the position of searching for tutorials on how to achieve a certain effect or how to create a certain graphic element for my designs. Now, there are loads of tutorial websites out there, but I check 2 of them regularly since they have such professional content: WebDesign Tuts+ and PSD Tuts+, the latter being focused solely on Photoshop tutorials.

In my long quest for finding the tutorials I needed, I came across some awesome ones that didn’t necessarily fit my search criteria, but were teaching some pretty awesome techniques. So, I’ve decided to look back a bit through my bookmarks and share with you 6 of the most awesome ones I had saved.

1. Design An Innovative Portfolio Site Using Alternative UI/UX

Design An Innovative Portfolio Site Using Alternative UI/UX

Tutorial written by Paul J Noble for Webdesign Tuts+

In this tutorial, Paul J Noble shows us the steps to creating a unique and awesome looking portfolio page that takes advantage of some great jQuery trick, including jQuery Hotkeys. From the looks of things, he agreed to make another tutorial for Net Tuts+ showing us how to code the theme.

Check out the full tutorial →

2. Create a Clean and Minimal Portfolio Design (Plus a Free PSD!)

Create a Clean and Minimal Portfolio Design (Plus a Free PSD!)

Tutorial written by Curt Ziegler for Webdesign Tuts+

Curt Ziegler wrote this tutorial showing us how to design a simple, minimal portfolio page in Photoshop.

Check out the full tutorial →

3. The Making of CoffeeAddict: An Illustrative Wood Design (Free PSD and HTML!)

The Making of CoffeeAddict: An Illustrative Wood Design (Free PSD and HTML!)

Tutorial written by Ryan Scherf for Webdesign Tuts+

This is a great tutorial for a great end product. I like so many things on this design: the color scheme, the elements, the authentic look of the napkin, it’s great.

Check out the full tutorial →

4. Create a Leather-Textured, Realistic Briefcase Icon

Create a Leather-Textured, Realistic Briefcase Icon

Tutorial written by Andrea Austoni for PSD Tuts+


Moving on to PSD Tuts+, this tutorial was one of the first I saw on this site and it blew me away. I was amazed at how easy it is to create very good looking icons.

Check out the full tutorial →

5. How to Create a Photo Realistic Camera

How to Create a Photo Realistic Camera

Tutorial written by Mohammad Jeprie for PSD Tuts+


I was actually in search of a tutorial about a camera when I found this. Even tho it’s a bit longer and aimed towards the more advanced people in terms of Photoshop knowledge, it’s still a great resource and it sure came in handy when I needed it.

Check out the full tutorial →

6. How to Create an Envelope Icon in Photoshop

How to Create an Envelope Icon in Photoshop

Tutorial written by Asher Abbasi for PSD Tuts+


Here’s another tutorial that’s shows how very simple techniques can be used for great results. I’ve actually used a similar envelope in a recent project.

Check out the full tutorial →

3 Comments

Got something to say? Feel free, I want to hear from you! Leave a Comment

  1. Do you care if I put part of this on my site if I post a link to this site?

  2. web design says:

    Great Post. Good collection. Great selection :)

Leave a Comment

Let us know your thoughts on this post but remember to place nicely folks!