45 Step-by-Step Tutorials on Web Design with Photoshop

Danny Outlaw on May 28th 2009 with 100 comments

While many web designers create mockups in Adobe Fireworks and Dreamweaver, no design program gives you quite so much control as Adobe Photoshop. The lessons collected here will show you how to create gorgeous and functional complete websites, blogs, layouts, nav menus and headers in Photoshop.

1. Design Your Own Personal Portfolio Page In Photoshop

2. Design a High End Webdesign From Scratch

3. Design a cool Photography Portfolio

4. Unique Desktop Layout

5. Design the Perfect Website in Adobe Photoshop

6. Konvicted Art

7. Vibrant Modern Blog Design in Photoshop

8. Clean Business Layout Tutorial

9. Unique Grungy Website Layout

10. Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!

11. Clean Blue Navigation Box

12. Dark Navigation Box

13. Design Watercolor Effect Menu

14. Curled Corner

15. CSS Menu With Icons

16. Nature Theme Header

17. Stunning Vista inspired menu

18. Design a Cartoon Grunge Web site Layout

19. How to Create a Grunge Web Design in Photoshop

20. Green Navigation

21. Create a Magic Night Themed Web Design from Scratch in Photoshop

22. Modern Portfolio Layout

23. High-Detailed Plastic Navigation Bar

24. Black Website Design

25. Creating A Professional Magazine Web Layout

26. Wii Web Header

27. Modern Web 2.0 Web Layout

28. Dark Style Web Template

29. Make an Elegant Blog Layout in Photoshop

30. How to Create a Sleek and Textured Web Layout in Photoshop

31. How to Create a “Worn Paper” Web Layout Using Photoshop

32. Metallic Header Design

33. Content Box With Orange Banner Heading

34. Hero Header Part 1

35. Hero Header Part 2

36. Blue on Black Navigation Bar

37. Clean White Navigation Bar

38. Design a Unique Bookmark Box

39. Volkswagen Inspired Navigation

40. The Ultimate Grunge Design Tutorial

41. Real Estate Web Design

42. Designing a Clean Photo Portfolio Site In Photoshop

43. Simple Design Studio Layout Design

44. Design a Hand Drawn style Website in Photoshop

45. Stylish Design Agency Layout Tutorial

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Danny Outlaw

Rollover to read this author's bio or click through to see a full list of posts by this author.

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.  

Plus Premium
 
 
Add Comment

Discussion 100 Comments

Comment Page 2 of 2 1 2
  1. Joan Sanchez says:
    June 1, 2009 at 8:31 pm

    This is a great post.

    Reply
  2. Leoslab says:
    June 1, 2009 at 9:25 pm

    great list! Thank you..

    Reply
  3. Kre8iveminds says:
    June 2, 2009 at 2:06 am

    Really cool list. Thanks a lot.

    Reply
  4. Jamie Allsop says:
    June 2, 2009 at 3:22 am

    These are some really nice designs. To create mock ups I have always used Photoshop and then use Fireworks to slice it up and create image rollovers and then I go into Dreamweaver.

    Reply
  5. Meshach says:
    June 2, 2009 at 5:19 pm

    Great stuff, this will help. Thanks.

    Reply
  6. Web design cheltenham says:
    June 3, 2009 at 11:19 pm

    Great resources for any budding or seasoned designers, cheers

    Reply
  7. Alan says:
    June 4, 2009 at 1:36 pm

    Inspiring list, thanks so much for sharing.

    Reply
  8. Jince Thomas says:
    June 5, 2009 at 12:23 am

    I was searching for good navigtions and menu bar… here i got , love it…..

    thanks a lot.

    Reply
  9. g says:
    June 5, 2009 at 12:25 pm

    Thanks a lot! Thanks for sharing!

    Reply
  10. Navdeep Singh says:
    June 5, 2009 at 11:37 pm

    WOW!!!!!!!

    Reply
  11. paul says:
    June 7, 2009 at 8:32 am

    that’ll keep me busy for the next month or two

    thanks

    Reply
  12. Hemanth Kumar says:
    June 7, 2009 at 10:06 am

    Thanks for the cool Design tutorials….I need some of these techniques in designing a website for Hotel….

    Reply
  13. Justin says:
    June 9, 2009 at 9:58 pm

    these template monster sites are so lifeless and boring. they’re all the same really. just a template with a different skin.

    Reply
  14. !DuRarDz says:
    June 10, 2009 at 1:54 pm

    great works .
    very nice thanks ……..

    Reply
  15. Michel S. Alonso says:
    June 11, 2009 at 10:30 pm

    Thanks!! Great Post!!

    Reply
  16. sandeep says:
    June 18, 2009 at 2:51 am

    nice list thanks!

    Reply
  17. Mário says:
    June 19, 2009 at 8:08 pm

    very cool! I like it!

    Reply
  18. Alz says:
    June 20, 2009 at 1:12 pm

    These all look AMAZING! I cannot wait till I join the plus and get more of these :) Thanks for your help over the years!

    Reply
  19. Amy says:
    June 25, 2009 at 11:47 am

    VERY cool!!! Thank you sooo much!

    Reply
  20. sugeng sunaryo says:
    July 4, 2009 at 11:34 am

    Hmmm… It`s very Cool..
    Thank you for your help..

    Reply
  21. Mubarak Ali says:
    July 18, 2009 at 7:19 am

    Subhaan allah!!
    Superb collection
    i’ve gone mad of it
    really superb

    Reply
  22. Jaspal Singh says:
    July 31, 2009 at 2:25 am

    Great collection of Photoshop resources.
    Thanks for sharing.

    Reply
  23. lhoylhoy says:
    August 6, 2009 at 9:57 pm

    these works inspires me to focus on web design! more power!

    Reply
  24. j000 says:
    August 8, 2009 at 2:10 am

    I’m gonna try some for sure. Some cool tutorials here.

    Reply
  25. Mohan says:
    August 20, 2009 at 7:05 am

    Awesome, Awesome & Awesome Effort !!

    Man Nice Collections :)

    Reply
  26. NAV!GAT0R says:
    September 3, 2009 at 6:14 am

    all of thise are very good and so beauty! =)
    thanx a lot!

    Reply
  27. oyunlar says:
    September 30, 2009 at 7:00 am

    great
    thank you verymuc

    Reply
  28. Coldfire421 says:
    October 15, 2009 at 2:52 am

    Great work, got more idea in web design cool thnx

    Reply
  29. webtechnepal says:
    October 26, 2009 at 1:55 am

    Great Collections of web design tutorials. Thanks

    Reply
  30. Tamaboy says:
    November 17, 2009 at 9:32 pm

    Wow… very Awesome web design colections tutorials thx very much

    Reply
  31. rOvIc says:
    November 26, 2009 at 11:18 pm

    These would be a great help for us amateurs in web designing. Long live PSDTUTS+!

    rovic

    Reply
  32. Senthil Ramesh says:
    November 30, 2009 at 2:59 am

    Excellent. If you don’t mind, is did you use any technique in the comments sections. I can see a small triangle like structure that makes look like the person speaks something,

    Reply
  33. Vinod says:
    December 3, 2009 at 11:55 pm

    Great Collection

    Reply
  34. Vikram Thakur says:
    December 12, 2009 at 12:24 pm

    Great collection

    Reply
  35. Tapasya Shukla says:
    December 14, 2009 at 4:02 am

    Very very beautiful collection. Amazing work……….

    Thanks for sharing

    Reply
  36. Web Design from Lyons Solutions says:
    December 19, 2009 at 10:58 am

    I totally agree with you. No tool can beat Photoshop!

    Reply
  37. sumit says:
    June 14, 2010 at 3:58 am

    O man these are great design’s i am speechless.

    Reply
  38. neethu says:
    June 18, 2010 at 5:14 am

    its nice and useful

    Reply
  39. Craig says:
    September 8, 2010 at 5:20 am

    Comprehensive list, great for giving me some new ideas and inspiration, Thanks

    Reply
  40. Lisa Thomason says:
    September 14, 2010 at 6:30 pm

    Excellent tutorials for web design with photoshop, really helpful Thank you!

    Reply
  41. Jeff Jones says:
    September 15, 2010 at 4:23 am

    Great collection of Photoshop resources. Cheers

    Reply
  42. Amanda Smit says:
    September 16, 2010 at 6:04 pm

    Wow! Some really easy to follow tutorials on website design with photoshop, Thank you, really fantastic!

    Reply
  43. zatty says:
    October 24, 2010 at 6:39 am

    awesome-great links & tutts as usual-thanks nettutts-im a beginner & find all the stuff very useful

    Reply
  44. chong tham says:
    June 1, 2011 at 3:33 am

    up. Amazing post !
    Your tutorial gave me alot of experiences in learning PSD.
    Thank alot for sharing, just keep it

    Reply
  45. tannaz says:
    June 14, 2011 at 2:12 pm

    thanks a lot .

    Reply
Comment Page 2 of 2 1 2

Add a Comment