20 High Quality Photoshop Web Design Tutorials

By / Mar 16, 2010 / Tutorials

Photoshop is the tool of choice for web designers. With that in mind, we’ve rounded up 20 of the latest Photoshop tutorials for designing websites. The end results produced by these tutorials are great looking designs, but keep in mind that it’s not meant for you to reproduce an exact copy and use it as your own. Instead, follow the tutorials and learn new techniques to incorporate into your own designs.

Create a Clean and Classy Web Design in Photoshop

web design tutorials

Create a Gnarly Snowboarding Themed Web Design

web design tutorials

Awesome Portfolio Design

web design tutorials

RocknRolla Blog Design

web design tutorials

How to Create a Unique WordPress Theme

web design tutorials

Web Design Layout 11

web design tutorials

Web Design Layout 14

web design tutorials

How to Create a Clean Web 2.0 Style Web Design in Photoshop

web design tutorials

Design a Beautiful Website From Scratch

web design tutorials

How To Create a Clean and Colorful Web Layout

web design tutorials

How to Make a Vibrant Portfolio Web Design in Photoshop

web design tutorials

Create a Professional Web 2.0 Layout

web design tutorials

Create a Grungy, Translucent Web Portfolio Design

web design tutorials

How to Create a Unique Colorful Site Layout

web design tutorials

Web Design Process: Zee Site

web design tutorials

Create a Clean Modern Website Design in Photoshop

web design tutorials

How to Make a Highly-Textured Site Layout in Photoshop

web design tutorials

How to Make a Creative Blog Layout

web design tutorials

Create a Watercolor-Themed Website Design with Photoshop

web design tutorials

Create a Promotional iPhone App Site in Photoshop

web design tutorials

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

  • Keiron

    Great list!
    I really like the elune one

  • http://www.totalfootballmadness.com Live Football

    The Watercolor one is truly amazing!

  • http://www.crearedesign.co.uk Daniel Long

    Some really nice web designs here. I like how the Rock’n’Rolla blog has styled the posts very differently. The picture sits in the top of the post really well and the whole thing is styled creatively. I will definitely give this one a go to give me some ideas about styling blogs in the future.

  • http://www.vunkyblog.net Vunky

    Nice list,

    I like the iPhone promotional APP site. Very clean and full of small details.

  • http://www.alan-horne.com Alan

    Great selection of tutorials, thanks very much.

  • http://weapic.com Edmeral

    Wow! Nice list ๐Ÿ˜‰

  • http://www.marcaurelegeffroy.com Marc-Aurรจle GEFFROY

    Very useful ! Thanks !

  • http://usarzewicz.org Nathan

    Isn’t design about creativity, not learning? ๐Ÿ˜‰

    • http://trancefish.de/blog Marc Shake

      Well, I consider myself being creative but tutorials help me to get my ideas to psd :)

      (I know what I want but not how to reach it)

      So – design is creativity and learning? ๐Ÿ˜‰

      • http://www.mickeylozano.com Mickey Lozano

        Always! I have a few years on my back as a Designer, and new technologies are tough to follow for an Old dog like me. But I can always get my way with young friends and students from my teaching years… Keep on!

    • Chris Olerich

      No, you are thinking about Art. Design may have art in it, but they are two very different things. Show me a successful graphic designer that has never learned anything from anybody and I’ll show you a big fat liar.

      Seriously, Design is all about seeing how someone did something, and then using and integrating that process into your own workflow. The day you stop learning is the day you die.

  • http://www.jordanwalker.net Jordan Walker

    Real nice tutorials for psd layouts.

  • http://lava360.com lava360blog

    RocknRolla. great texture and design

  • http://resourcehive.com jc

    Great list…some really nice site ideas here. THX!

  • http://3circlestudio.com/ Justin Carroll

    Good collection. I would also recommend taking designs that you’re in love with and trying to recreate them in Photoshop. It will have you making moves with tools you’ve never thought about.

    • Muhammed

      and try to code them too that is very use-full
      great collection

    • tulip

      gr8 collection …really helpfull thanx

  • http://www.bestfreewebresources.com/ BBL

    Nice psd tutorial

  • http://www.thomascraigconsulting.com Thomas Craig Consulting

    Very nice collection, thanks for sharing.

  • http://www.crazyegg.net ankido

    great collection Thanks …

  • http://ndrw.me Andrew

    Wow, I’m surprised there are so many tutorials out there. And this list is just time since I was just starting to dabble in start-from-scratch web design rather than working off of templates.

  • http://www.eg-design.net peter

    very nice, thanks for sharing

  • http://www.xcellence-it.com/ Xcellence IT

    Great design tutorial..

  • http://www.adobefamily.com roohullah

    Great Post, Thanks for sharing

  • http://www.sgdoeschwitz.de BigM75

    great sites, the styles are nice

  • http://www.kresnotic.deviantart.com Kresna Ahmadi

    Bookmarked it!

  • http://www.tommybrophy.com Tommy

    Good Round Up, it’s great to see some new examples of photoshop web design tutorials as a lot of these round ups end up using the same examples.
    This one is different though, Well done.

  • http://vandriessche-interieur.be/ keukens

    Useful, thanks

    I just spent about two days just to follow the ‘Highly texturized website’ tutorial !!

  • http://www.flodesign.co.uk Russell Poulter

    Great round up. Bookmarked!


  • http://devisefunction.com Matthew Heidenreich

    thanks for including my “Create a Clean and Classy Web Design in Photoshop”. You should check out the others from my own site as well.

  • http://www.mkhaled.com Mahmoud

    Nice round-up!
    Thanks for featuring my tutorial “Create a Professional Web 2.0 Layout ” I’m truly honored! :)

  • http://www.tennisfile.com Mark G

    thanks for taking the time to share this. some of these tuts are great. cheers!

  • J Thom

    Very cool designs, and very informative tutorials.

    However, it seems to me that it would be very difficult to make most of these designs effective in all browsers or get them up to typical web standards… I can’t even imagine how search engines would treat most of them. Just sayin’.


  • http://www.wowodesign.com Mickael Pinto

    Thank’s for the post!

  • http://liriktube.blogspot.com/ lirik

    great list.. thanks

  • http://www.creativeman.nl Martin Risseeuw

    Great list :-)

  • http://www.kongtechnology.com/ Kitkat

    Those web designs are superb! Too bad my skills are limited. Can’t learn much from that. :(

  • http://www.fabian-irsara.com/blog/ Fabian Irsara

    Pretty neat list, very interesting stuff!

  • http://designbeep.com Arshad Cini

    Really good selection of tutorials

    Thanks Henry

  • http://www.kamyabi.us/en Iman

    thanks .
    It was so usefull .

  • http://www.uitmuntend-webdesign.nl J. Hendrix

    Great list! Can’t wait to start on some of these tutorials :)

  • http://www.alvipixels.com Web Design Huddersfield

    Thanks for sharing, nice collection. There is something for everyone.

  • http://silkydesigns.com/ Tahseen Dilbar

    Thanks for sharing my Tutorial: “Create a Watercolor-Themed Website Design with Photoshop”
    i am very grateful ! :)