Tutorials

The Ultimate Collection Of Brilliant Web Design Tutorials

March 1st, 2010

In this ultimate collection, we bring you a massive selection of great Web design tutorials from all over the design community. All of the tutorials use Photoshop for the main application. By the end, you should have a pretty good idea of where and how to start designing for the Web.

If you’re already an experienced Web designer, don’t ignore this post. Even the most talented and professional designers can pick up tips and tricks from others. After all, design is a field in which no one knows it all.

Web Design Tutorials

Design an Italian Restaurant Web Layout
Use Photoshop’s built-in custom shapes to add depth and interest to your design.

Screenshot

Design an Impressive Web Hosting Layout
Use the perspective tool to change the shapes and angles of otherwise simple objects.

Screenshot

Design a Cartoon Grunge Website Layout
Create a torn-paper effect with the lasso tool.

Screenshot

Create a Sleek, High-End Web Design from Scratch
Create a warm glowing background texture using gradients, textures and brushes.

Screenshot

Design a Clean Business Layout
Use custom shapes to produce your very own icons.

Screenshot

Design a One-Page Portfolio Web Layout
Use some neat typography, combined with some grungy textures, to produce beautiful effects.

Screenshot

Create Your Own Portfolio Web Page
Use the brush tool with custom brush packs to produce pretty swirl patterns.

Screenshot

Design a Portfolio Web Layout
Use a load of great grungy textures in your design to add subtle but powerful effects.

Screenshot

Create a Photo-Realistic Web Layout
Use a gorgeous wood-textured image to produce a photo-realistic design.

Screenshot

Design a Creative Studio Web Page
Create custom patterns to use as borders and separators.

Screenshot

Design a Textured Portfolio Layout
Use textures to create an interesting background and strokes to make certain areas pop!

Screenshot

Create a Photo Portfolio Web Page Design
Use different blending modes to create awesome, colorful effects.

Screenshot

Design and Create a Lifestream of your Online Activities
Use simple techniques and textures to design a quick but gorgeous design mockup.

Screenshot

Design an E-Commerce Website Design
Use one-pixel lines to separate different links in the navigation menu.

Screenshot

Make a Creative Photography Portfolio Web Design
Use blending modes to create stylish buttons with sleek highlights.

Screenshot

Create a Marketplace Theme Layout
Use gradients, drop-shadows and noise to create an awesome background and foreground objects.

Screenshot

Design a Hosting Web Layout
Use layer masks to add sleek reflections to your icons.

Screenshot

Design a Non-Profit Web Layout
Use borders and strokes to create a great abstract photograph pile.

Screenshot

Design a Blog/WordPress Theme Mockup
Use one-pixel borders to add a subtle detail to certain areas of your design.

Screenshot

Design a Personal Portfolio Layout
Use low- opacity block colors to make heading titles easier to spot and read.

Screenshot

Create a Computer Store Web Layout
Use drop-shadows, inner shadows, gradients and strokes to create 3-D buttons.

Screenshot

Design a Professional Business Web Layout
Use drop-shadows and gradients to create a stylish 3-D look.

Screenshot

Design an Online Photo Portfolio Layout
Use patterns to add depth and interest to certain areas of your design.

Screenshot

Create a Hand-Drawn-Inspired Web Design
Use a (Wacom) graphics tablet to produce a hand-drawn effect for things like the RSS icon.

Screenshot

Design a Modern and Sleek Mockup
Use the marquee and free transform tools to create custom shapes and buttons.

Screenshot

Design an Old Paper Portfolio Layout
Create a great navigation menu using torn paper and hue/saturation settings.

Screenshot

Design a Blue Blog WordPress Theme Layout
Create a simple and stylish blog theme, adding interest through gradients, strokes and textures.

Screenshot

Create a Nature-Inspired Layout
Use custom brushes and stock photos to produce a photo-realistic design.

Screenshot

Create a Clean and Colorful Web Layout
Use the artistic film-grain filter to produce awesome background effects.

Screenshot

Design a Colorful WordPress Theme
Use the rectangle and move tools to create a colorful background pattern.

Screenshot

Create a Clean and Modern Website Design
Use guides to properly set up your document for different-sized monitors.

Screenshot

Create a Pure CSS Polaroid Photo Gallery Design
Use a seamless wooden texture to produce a beautiful background.

Screenshot

Create Amazing Layout Textures
Use a seamless pattern and some lighting-effect filters to produce an interesting background image.

Screenshot

Create a Grunge Web Design
Turn custom shapes into patterns to add interest to your design.

Screenshot

Create an Interior Design Web Layout
Use low opacities and strokes to add depth to your design.

Screenshot

Create a Colorful Business Web Design
Use drop-shadows and inner shadows to produce a great letterpress-type effect.

Screenshot

Design a Photographer’s Portfolio Layout
Use professional photo-montage techniques to produce a great header illustration.

Screenshot

Create a Green Corporate Web Design
Use the brush tool to create a great eye-catching background effect.

Screenshot

Create a Clean Portfolio Web Design
Make use of some great high-resolution textures to add depth and detail to your otherwise clean designs.

Screenshot

Create a Dark Gaming Layout
Combine photos, patterns, textures and lighting effects to create elements that are perfect for a gaming website!

Screenshot

Create a WordPress Interface
Use the pen tool to edit anchor points and create custom shapes.

Screenshot

Design a Unique and Grungy Web Layout
Use scans and photographs of paper and other hand-drawn elements to produce an awesome abstract theme.

Screenshot

Create a Stylish Web Studio Design
Use the pen tool to create a design with a ton of funky shapes!

Screenshot

Design and Build Your Own Single-Page Portfolio Website
Use grids and guides to keep your design neat and tidy.

Screenshot

Create a Vibrant and Modern Blog Design
Use high-resolution textures to add depth and detail to your website’s background image.

Screenshot

Create a Grunge WordPress Theme Layout
Use the burn tool to add dark areas to your abstract design.

Screenshot

Design a Corporate WordPress Theme Layout
Use a pattern to add interesting elements to your Web design.

Screenshot

Create an Amazing Consulting Layout
Use typography to create custom shapes and objects.

Screenshot

Design a Creative Cosmetics Layout
Use the pen tool to make a visually appealing header shape.

Screenshot

Design a Breathtaking Portfolio Layout
Combine textures and built-in filters to create a gorgeous background.

Screenshot

Design a Creative Design Studio Layout
Use the warp tool to transform a simple shape into a realistic sheet of curving paper.

Screenshot

Create a Grungy Personal Portfolio Design
Use different blending modes to make clean networking buttons fit in with a grungy design.

Screenshot

Design an Amazing 3-D Hosting Layout
Use a seamless textured pattern to create a visually appealing background image.

Screenshot

Design a Simple and Sleek Web Portfolio
Use drop-shadows and inner shadows to make header text stand out from other parts of the page.

Screenshot

Design a Car Dealer Website Layout
Use the noise filter to quickly and effectively add depth to your Web design.

Screenshot

Create an Apple-Inspired Website Layout
Use Web icons to add depth, interest and professionalism to your design.

Screenshot

Further Resources

You might also be interested in the following articles:

(al)

Callum Chapman is a self-employed blogger and graphic/web designer. He has recently launched a blog dedicated to visual inspiration for designers, photographers and artists called The Inspiration Blog.

Tags: ,

49 comments for „The Ultimate Collection Of Brilliant Web Design Tutorials
  1. Vidit Kothari on March 1st, 2010 at 4:02 am

    Its awesome!!!

    THANK YOU, THANK YOU SO muchhhhh!!!

  2. thebettertwin on March 1st, 2010 at 4:05 am

    massive list
    will have to check them out when im not at work
    i use Gimp so hopefully will still be able to do most of what is shown
    thanks

  3. Joker on March 1st, 2010 at 5:35 am

    I finally decided to write a comment on your blog. I just wanted to say good job. I really enjoy reading your posts.

  4. Peter Lehto on March 1st, 2010 at 5:53 am

    Amazing collection. Bookmarked!

    Thank you.

  5. NooN on March 1st, 2010 at 5:54 am

    Thank you Nora, i’ll start web design soon, so it’ll be very helpful for me
    Great post, thanks again

  6. julio on March 1st, 2010 at 6:07 am

    very awesome post and great pick of tutorials

  7. Amberly | Web Designer on March 1st, 2010 at 6:36 am

    Awesome tutorials.. This is the mother of all tutorial collection.. Thanks for sharing..

  8. Jordan Walker on March 1st, 2010 at 6:49 am

    Great roundup of web site design tutorials.

  9. Alfredo on March 1st, 2010 at 7:11 am

    It’s always the time to learn something new. Thank You for this mine of inspiration!

  10. arnold on March 1st, 2010 at 7:39 am

    damn , grafpedia has hot tuts…thanks for the round up.

  11. Dr. Horowitz on March 1st, 2010 at 8:37 am

    Very cool.

    Will share with students in class today!

  12. zohaib on March 1st, 2010 at 10:53 am
  13. Del on March 1st, 2010 at 1:25 pm

    Great collection here thanks for posting!

  14. Can Aydo?an on March 1st, 2010 at 2:25 pm

    Great collection. Thanks!

  15. bee_mack on March 1st, 2010 at 3:42 pm

    Wow, just what I needed!

  16. Inside the Webb on March 1st, 2010 at 4:49 pm

    These tuts aren’t only just cool, they’re really simple and easy to follow! I think the best trait about a tutorial is how easily the steps can be followed

  17. AlchemyCode on March 1st, 2010 at 10:23 pm

    WOW!! Thanks:) all these articles will surely come in handy in my future projects :)

  18. Andreea on March 2nd, 2010 at 1:42 am

    very good tutorials here. I love some of the tutorials from grafpedia

    i will post here a demo very soon, maybe i will get some constructive feedback.

  19. MadRukus on March 2nd, 2010 at 2:27 am

    Great list of sites, thanks for sharing!

  20. Flowers on March 2nd, 2010 at 7:17 am

    Thanks for the list!

  21. Tutorial Lounge on March 2nd, 2010 at 12:57 pm

    amazing collection of tutorials about website designing.

  22. Grafpedia on March 2nd, 2010 at 2:39 pm

    Thank you for featuring some of my tutorials. After you posted some of my tutorials I was asking myself why my server load is so high.

    Thank you one more time

  23. gmuthanna on March 2nd, 2010 at 4:23 pm

    It’s an amazing, massive collection of blog themes and web design tutorials; thank you so much for sharing.

  24. Le'BEST Web Designer on March 5th, 2010 at 10:46 am

    1st! great post..

  25. Mino BuG' on March 10th, 2010 at 12:02 am

    Wonderful content, thanks so..

  26. Damien on March 10th, 2010 at 5:31 pm

    Thank you for these wonderful tutorials. I spent that last few hours replicating one of the samples using Photoshop. I’m just wondering if there are any instructions on creating a website out of these samples. E.g – How do I create hyperlinks, etc? What format do I save it in after creating it in Photoshop? Any advice would be greatly appreciated. Thanks again.

  27. Tutorials Palace on March 24th, 2010 at 4:41 am

    creative tuts for web designer i hope they can learn many things from these tuts.
    thanks buddy

  28. Bay Area web design on March 30th, 2010 at 4:16 am

    thats really ultimate… nice list. thanks to share!

  29. CSSReX on April 5th, 2010 at 11:02 pm

    I think one can master designing by doing all these wonderful tutorials. Thanks for making this article a learning hub :)

  30. Alec on April 7th, 2010 at 2:17 pm

    Some great web design tips. Perfect for beginners to web design and even some useful tips for design agencies. One thing to mention through is that very heavy use of image based fonts isn’t search engine friendly and quite a few of the designs utilise images for text.

  31. Checker24 on April 8th, 2010 at 10:08 am

    Hello, very nice tutorial collection.I liked it, my favorit it is “Grunge Web Design in Photoshop”. thank you

  32. ekom on April 12th, 2010 at 2:46 am

    I love this post, it’s pretty useful for any kind of web designers, “Create a Grungy Personal Portfolio Design” is awesome.

  33. lola on April 23rd, 2010 at 3:39 pm

    Stunning! it’s very insping, long life to Noupe!!

  34. Orlando website design on May 7th, 2010 at 10:58 pm

    My favorite one was “Design a site that looks like a generic website template”.

  35. CSSReX on May 11th, 2010 at 3:35 am

    Nice List! I am sure one can be a web designer even after practicing on 2 to 3 these tuts. Rest depends upon creativity :)

  36. stellarking on June 28th, 2010 at 7:31 am

    This is a great list of helpful ways to make a design really pop. Thank you. I will remember this and come back to it for my next client’s site.

  37. Kate Johnston on July 12th, 2010 at 10:23 am

    Thanks so much for all of these! I’m experienced in web design and this was still a huge help. I especially like the “old paper” and “grunge” looks.

  38. Austin web design on July 12th, 2010 at 10:24 am

    I loved this post. Even after working in web design for several years, this post was extremely helpful and I got some great new ideas for designs. I’ll definitely come back here as I’m working on my next project. Thanks!

  39. nikos lianeris on July 17th, 2010 at 3:48 am

    thank you for your list!!It is really inspiring and helpfull!! :)

  40. King Griffes on August 1st, 2010 at 3:42 am

    It’s easy to create your ain healthy and downlike homemade Denny’s flapjacks with this easy-to-follow Denny’s flannel cake recipe with healthy ingredients, such as Graham and Canola Oil, served with a dollop of cream cheese and thoroughgoing maple syrup or love, or create your ain healthy pancake toppings.

  41. keith on August 17th, 2010 at 12:30 am

    some nice tutorials on full web design, for a few handy tips check out squidoo.com/webprofitabiltyreport

  42. J. Hendrix on November 15th, 2010 at 9:22 pm

    Thanks for this awesome roundup of tutorials! :)

  43. hanabi on April 7th, 2011 at 11:32 am

    Amazing post!
    I found many useful & creative icons for my web project.
    I bookmarked this article for another reading. Thank for your great work

  44. ramin on April 27th, 2011 at 9:19 pm

    Thanks for this post. Very helpful and informative.

  45. dudettes on June 8th, 2011 at 1:46 pm

    I LIKE IT

  46. Mrinal on February 8th, 2012 at 12:07 pm

    Glad to find out such good list of web design tutorials. Thanks for your hard work.

  47. Umer on July 1st, 2012 at 11:13 pm

    Great collection :)

  48. Saffron on August 10th, 2012 at 4:53 pm

    Nice collection of web design tutorials. You have collected the best of them in one useful package.

  49. Dan Carter on December 13th, 2013 at 7:19 pm

    Many thanks for sharing these great resources. Nice collection of web design tutorials. You have collected the best of them in one useful package.