40 Quality Photoshop UI Design Tutorials

Oct 29th in Web Roundups by Danny Outlaw

Want to improve your interface design skills? If so, then check out this group of Photoshop tutorials. There are loads of tuts here to get started with basic elements and work your way up to full interface designs, which integrate numerous custom elements. If you're looking to get started with Photoshop UI design or build these skills, then jump into these tutorials right now!

Author: Danny Outlaw

Danny Outlaw is best known for his work at Outlaw Design Blog. Aside from blogging, he also works full time as a Wordpress designer. Danny has freelanced from all over the world and is working on a book and website in which he will share his experience about Freelancing Abroad. Danny also has an unhealthy obsession with toys, LOST, and Sharpie markers.

Enjoy this Post?

We'd love your vote!

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )

Sushimoron October 29th

Now all I need to do is to study codes. O_O bummer.
( Reply )
Bobert October 29th

Some tutorials have an incredibly LOW graphic level.
Ex: 4th, 8th, 24th, 40th.
What’s wrong? Those are for begginers S:
( Reply )
1. Ike October 29th
  
  Some people ARE beginners… Not everyone has been doing this for years and years. We all gotta start somewhere and those seem like decent tutorials for those that are looking for a start.
  ( Reply )
  1. Bobert October 29th
    
    Yeah, but this page is not for beginners.
    Take a look at 3, 4 tutorials and you’ll understand me.
  2. Margaret October 29th
    
    Bobert this is a tutorial page, meant to be a learning tool for everyone, nowhere on the site does it say “advanced photoshop tutorials” and honestly it would be stupid for them to focus only on advanced tutorials as it would alienate a large portion of their readership.
    It’s only in the recent past that the tutorials have become so complex if you go to the first tuts posted by Collis when this site was new you’ll see very helpful tuts designed for users of all levels.
  3. Ryqiem October 31st
    
    It’s a good idea to have low level tutorials, but some of theese tutorials are old! Glass effects isn’t nice on websites anymore!
2. rontz November 5th
  
  plus many of those are years old…
  good point.
  the quality isn’t really there :-/
  ( Reply )
  1. daweisam November 12th
    
    I want to learn the web layout tutorials for game。
3. shtut December 31st
  
  Marget,not everyone is a beginner here, some guys need advanced techniques …so if u r a beginner look for other tutorials please , and stop complainin
  ( Reply )
Bobert October 29th

What do you think about these icons?
http://YaroManzarek.deviantart.com/art/iPhone-style-Weather-icon-136194687
http://YaroManzarek.deviantart.com/art/iPhone-style-iPod-icon-136194517
http://YaroManzarek.deviantart.com/art/iPhone-style-iTunes-icon-133464007
http://YaroManzarek.deviantart.com/art/iPhone-style-Safari-icon-133441823
( Reply )
Peach October 29th

Great list, thanks for sharing. This will come in handy someday
( Reply )
Fredrik October 29th

I don’t like many of these. They are too 2002ish
( Reply )
1. ihasaKAROT October 29th
  
  I 2nd that opinion
  pretty “old” stuff
  ( Reply )
2. Bill Labus October 29th
  
  I agree. Many of them are just bad design to begin with, and others are just poor attempts to recreate good design (i.e. the Weightbot-style interface).
  ( Reply )
3. Nick October 29th
  
  I agree … I was hoping for more stylish / up-to-date UI design tutorials. Can’t find too many of those…
  ( Reply )
4. PrettyStars October 29th
  
  Yeah seen way better stuff than this. Who uses all these “high tech” sci-fi crap? It’s good for some basic photoshop skills but you can’t put this directly in practice, that’ll be a joke.
  ( Reply )
5. Mike B. October 29th
  
  then maybe you can design something new for us, right?
  ( Reply )
6. Paddy October 29th
  
  Wow, some of these are definitely about 8 years old. The fact that number 29 is called a ‘modern web layout’ is pretty ridiculous. What happened PSDTuts?
  ( Reply )
  1. hemant December 15th
    
    yes really
7. Batfan October 29th
  
  I’m afraid I agree as well. This article could use some updated tutorials.
  ( Reply )
  1. Jason October 29th
    
    I think these are all great articles. They do a great job teaching someone how to create specific effects. Then the industrious designer would take that knowledge and create their own stuff.
    Some of these are basic, true. But none of this stuff is embedded in any of you.
    On an unrelated note, I’m really digging this comment form. Awesome implementation!
h1brd October 29th

uau…this is really good learning material compiled right here! Missing all the time to give the right attention to this
( Reply )
Vaclav Krejci October 29th

here is something you will need while designing user interfaces:
http://upiir.deviantart.com/art/GUI-Design-Icons-NEW-FONT-141811404
when looking at the tutorials, I think it´s maybe the right time to write some tutorials about my old user inferfaces?
http://upiir.deviantart.com/art/Car-GUI-preview-75297564
http://upiir.deviantart.com/art/GUI-design-guitar-combo-amp-79102199
http://upiir.deviantart.com/art/F12clock-speedometer-clock-75194981
( Reply )
nelutu October 29th

good tutorials
you have a retweet from me
( Reply )
Muppfel October 29th

10 is copied from Convertbot for iPhone.
( Reply )
Froofie October 29th

I remember doing a good majority of these years ago as a Photoshop fledgling. If I was a paying pro member I’d be concerned about the quality of the content right about now.
( Reply )
richard carpenter October 29th

NUMBER 39 is from http://hv-designs.co.uk/2009/02/10/carbon-style-icon/
why use the link from photoshoplady???????
( Reply )
Danny Outlaw October 29th

Hey Guys !
I agree, some of these are very old school. But, many of them have at least one or two features that could be used in modern interfaces. Please remember that these round ups for beginners as much as experienced users.
On a side note, I URGE you to find better user interface tutorials and share them in the comments here. This list was the result of hours upon hours of browsing the back pages of the web.
There seems to be a real lack of quality user interface tutorials out there.
Why do you think that is?
( Reply )
1. richard carpenter October 29th
  
  Danny NUMBER 39 is from http://hv-designs.co.uk/2009/02/10/carbon-style-icon/
  why use the link from photoshoplady???????
  ( Reply )
2. Paddy October 29th
  
  Hey Danny,
  I think that a list of 10 really top quality tutorials would have been better received than 40 with about half below average or outdated. Fair enough you need to cater to beginners also, but I don’t think there’s a link between out of date tutorials and beginner tutorials. Beginners especially should be taught up to date styles and techniques. Number 22 is really awful.
  Maybe there is a lack of user interface tutorials out there, but that’s a call for PSDTuts to keep creating quality ones instead of listing below average ones.
  ( Reply )
harvesed October 29th

to all of you that badmouth this compilation…
if you don’t like it… make your own “NEW” GUI tutorial and share them here…
i’m a begginer and I’ve discovered TUTs last week, so for me this stuff if very very inspiring and very cool to learn… so… not all of you are experienced and top noch designers…
so…I would really really like to see your point of view, and see what NEW means to you…
no offence
( Reply )
Sergio Alves October 29th

funny that blue orb with the fire emblem is really old and still it looks sharp =)
( Reply )
Skunkie October 29th

Most of this is pretty tacky!
Actually, designing UI’s is not so much about PS skills (everyone can make shape layers with rounded corners and apply two or three layer styles to them).
It is much more about layout and an overall sense of aesthethics and usability. This is stuff you learn in design classes rather tha in PS tuts.
But true – who still wants this Web 1.0 “pseudo-sci-fi let’s put a giant bevel and a solid drop shadow on everything, then it looks kinda spacy” design?
( Reply )
Craigsnedeker October 29th

Aw man! No fantasy GUI’s
Great post =D
( Reply )
David Moreen October 29th

Man most of these are great, I’m going to add a few to my to-do list.
( Reply )
John Samuel October 30th

Quite a useful list. I have bookmarked some of the useful ones. Thanks
( Reply )
Luci October 30th

Some of these are ace… some of them don’t look particularly brilliant (the finished results) but i can’t deny that the skills you can learn from the tutorials are great to add to virtual toolboxes, so thanks!
( Reply )
Discount Mole October 30th

great !
( Reply )
MoonBoy October 30th

Some fo them containg good tehnicks. I would mentiont that not the tutorial it self is useful but the techincs used in these.
Thank you.
( Reply )
Rodney October 30th

Okay maybe the purpose of this whole list was to irritate ppl and get them to start making comments. I think that most of these tutorials was just a bad move on this site’s side.
Obviously they have always given the impression or intend to give the notion that they are an authority on quality psd tutorials. I really like most of the tuts on this site, but seeing this post it makes me wary on signing up for a plus account.
I will say this though: Most of the time I will go through a tutorial regardless of the crap design, simply because of the fact that someone might use a technique or short cut that I have never used before. Which is probably why I will fight my way through these. I will not, however, enjoy them.
I have been thinking about trying to submit a tutorial on everyday design use, that describes how to take a crappy logo sample from a client, scan it, doctor it, and vectorize it for maximum print output quality, anyone interested?
( Reply )
Rodney October 30th

My comment was deleted?
( Reply )
Rodney October 30th

Nevermind. I’m dumb.
( Reply )
yandel October 30th

thanks it will inspirat me a lot, now im gonna do a new template =)
( Reply )
Blue Sail Creative October 30th

Wow this is a real good article.
Thanks!
( Reply )
Shane October 30th

I sometimes think that interface designers go a little over the top with their design. Some might look ‘funky’ or ’slick’ (two adjectives I often hear people associate with this kind of stuff), but if they hamper the interation with the application, then their overall effectiveness is seriously compromised.
( Reply )
Blahargh October 30th

Woah you’ve dug out some real old tuts here, the absolutecross one’s are old as feck, and seriously outdated aswell, when they where made they where pretty good, but not so much anymore… This was kind of a halfarsed compilation if you ask me…
( Reply )
1. Shane November 3rd
  
  lol@old as feck
  ( Reply )
  1. Blahargh November 4th
    
    Your avatar reminds me of kirupas old logo, even though that was a pixel art pic and probably not even the same fruit
hitesh October 31st

thanks for this tuts really all of them are great
( Reply )
BeatShot October 31st

These are awful… seriously not what you’d excpect from PSDtuts, which is known for high quality tutorials. Beginners also want to learn things that actually look good, these outdated tutorials are no use to anyone.
( Reply )
xavier October 31st

What has happened to this site? The content these days is mostly carp. Come on guys, why are we seeing tuts that are three years old and were useful in the Flash Sci-fi interface hype era? You can do better than this.
( Reply )
g3niuz November 1st

the dragon interface tut is my fav ;D
( Reply )
Keith November 4th

Considering the Article Title ‘UI Design’. There are some great tutorials here.
The techniques used are sound, its up to you how good the design is gonna turn out.
( Reply )
alex November 5th

excepting 2 or 3 of this articles, the rest is junk; some are five(or more) years old. T improve you techniques you have to aspire to higher goals.
( Reply )
1. w1sh November 8th
  
  “These are really good tutorials.”
  I’m with everyone else (that is smart) – PSDtuts ain’t what it used to be.
  I just stop by here every month or so and skim through all the “Interviews” (“which are really good and interesting”), and pray there’s a decent tut that isn’t on friggin’ PLUS.
  Eh. Good thing JWay is picking up the slack or Marketplaces might start suffering.
  ( Reply )
basarium November 5th

Great article!!
Just one minor thing
“38. Design Mico Buttons” …. should be “Micro buttons”
( Reply )
Chris Anton November 8th

It is much more about layout and an overall sense of aesthethics and usability. This is stuff you learn in design classes rather tha in PS tuts.Thanks
( Reply )
Mark Carter November 10th

I’d agree with the point made above that you can take specific techniques out of these .. but not necessarily recreate the same perhaps dated looks ….
( Reply )
Eric November 10th

90% of these are awfull! The bewell and emboos on these are just gross
( Reply )
Rameexgfx November 11th

very nice tutorial
( Reply )
Moksha Solutions November 11th

great list thanks
( Reply )
semmy @ minisite design November 16th

Really nice collection..
( Reply )
Eric December 9th

number 5 FORCES you to disable adblock plus (unacceptable) and then it forces you to fill out some stupid survey before it will even show you the tutorial. dont link to sites that do that.
( Reply )
James Headrick December 12th

@Eric – It doesn’t just force you to take a survey..it forces you to register at the survey site.
Completely unnecessary.
( Reply )
Ringo December 27th

For everyone complaining about old spacy crap for beginners. Don’t you get the nostalgia feeling?
And I bet that if you’re good at designing you can merge todays web 2.0ish crap with the old glass orbs and stuff to get some cool design.
Everything doesn’t have to be so trendy. It’s kind of boring that all webpages almost look the same nowadays.
( Reply )