Web 2.0 Tutorials Round-Up

Advertisement

Web 2.0 can be beautiful. In fact, many designers manage to create really amazing, particularly dark and fresh web-designs, which are visually appealing and make a great first impression. However, if you are planning on designing a web 2.0-project, you probably should know how and where to start from. Badges, Gradients, Mirror and Shadow Effects as well as Shiny and Glassy buttons are trendy. But do you know exactly how to design them?

We’ve collected over 65 tutorials, references and related resources, which are supposed to help you to create graphics in Web 2.0-Look. It’s nice to have them ready to hand if you need them. It’s nice to be able to look at them if you need a source of inspiration.

P.S: We’d like to thank to Leandro D’ Onofrio, whose efforts inspired us to create this round-up. Links checked: July/29 2008 – several links deleted.

Visual effects

1. Three girls posing in the night Illustration

Photoshop Tutorial - Three girls posing in the night Illustration - Adobe Photoshop - Adobe Graphic Design Software

2. Adobe Software – Adobe Photoshop

Photoshop Tutorial - Adobe Software - Adobe Photoshop

3. Adobe Software – Adobe Photoshop

Photoshop Tutorial - Adobe Software - Adobe Photoshop

5. Retro lines in Photoshop?

Photoshop Tutorial - Programming the web - Retro lines in photoshop?

6. Splash Page Tutorial

Photoshop Tutorial - Splash Page Tutorial | Designphase - Web Design Tutorials

7. Gradient Styles & How To Make Dashes

Photoshop Tutorial - Gradient Styles & How To Make Dashes - Photoshop Tutorial | PhotoshopSupport.com

8. Creating a page curl in Photoshop

Photoshop Tutorial - Veerle's blog | Creating a page curl in Photoshop

9. Creating patterns in Photoshop CS2

Photoshop Tutorial - Veerles blog | Creating patterns in Photoshop CS2

10. Realistic photo print

Photoshop Tutorial - Realistic photo print - Easy to follow photoshop tutorials

11. Circles, Circles, Circles

Photoshop Tutorial - Adobe Software - Adobe Photoshop

Logos, Logotypes

12. Jelly Remake

Photoshop Tutorial - Jelly Remake - Tutorials 2.0

13. Web 2.0 Style Logo

Photoshop Tutorial - Web 2.0 Style Logo

15. How to Make a Web 2.0-Style Logo

Photoshop Tutorial: How to Make a Web 2.0-Style Logo

16. Learn to create your own Web2.0 Logo

Photoshop Tutorial - Nicora | Articles | Learn to create your own Web2.0 Logo

17. How to create a WEB 2.0 style logo

Photoshop Tutorial - DreamDealer v4.0 - How to creat a WEB 2.0 style logo

18. Web 2.0 Logo #2 | Designphase

Photoshop Tutorial - Web 2.0 Logo #2 | Designphase - Web Design Tutorials

19. Web 2.0 Logo | Designphase

Photoshop Tutorial - Web 2.0 Logo | Designphase - Web Design Tutorials

20. Web 2.0 Logo

Photoshop Tutorial - FX Designing :: Tutorials :: Web 2.0 Logo

22. Pimp My Ride – Logo

Pimp My Ride - Logo

23. The Logos of Web 2.0 | The FontFeed at FontShop

Photoshop Tutorial - The Logos of Web 2.0 | The FontFeed at FontShop

24. web2logo.com

Photoshop Tutorial - web2logo.com

26. Flickr Photo Download: LOGO2.0 part I and II

Photoshop Tutorial - Flickr Photo Download: LOGO2.0 part I and II

Text Effects

27. Custom Chrome Text Effect

Photoshop Tutorial - Photoshop Tutorials Af?A,> Custom Chrome Text Effect Af?A,> TipClique Tutorials

28. Photoshop Reflections

Photoshop Reflections

29. The Shiny Floor Effect

Photoshop Tutorial - THE SHINY FLOOR EFFECT so fresh and so clean web2.0 - yummy

31. Text Kerning

Text Kerning

32. The Glossy TEXT web2.0 style

Photoshop Tutorial - The Glossy TEXT web2.0 style AfA'Ac?A!Af?A,< photoshopit

33. Photoshop Tutorials: Texteffect

Photoshop Tutorial - Photoshop Tutorials

34. Web 20 Shiny Floor Effect – video tutorial

Photoshop Tutorial - Web 20 Shiny Floor Effect - video tutorial

Badges

35. Web 2.0 Badge Photoshop Tutorial

Web 2.0 Badge Photoshop Tutorial

37. Supermarket Stickers Tutorial – Visualdesigncore.com

Photoshop Tutorial - Supermarket Stickers Tutorial - Visualdesigncore.com

38. Web2.0 Badges

Web2.0 Badges

39. Glossy web 2.0 badge with rounded corners

Photoshop Tutorial - Psd of the day - Glossy web 2.0 badge with rounded corners. AfA'Ac?A!Af?A,< photoshopit

40. A Glossy Starburst Tutorial

A Glossy Starburst Tutorial

Buttons

41. Badge ‘n Button | Designphase – Web Design Tutorials

Photoshop Tutorial - Badge 'n Button | Designphase - Web Design Tutorials

42. Toxiclab.org – Photoshop – Web buttons tutorial

Photoshop Tutorial - Toxiclab.org - Photoshop - Web buttons tutorial

44. Web 2.0 style buttons

Web 2.0 style buttons

45. Glossy Button Video Tutorial and PSD

Photoshop Tutorial - Glossy Button Video Tutorial and PSD

46. Creating flexible buttons using Photoshop shapes and styles

Creating flexible buttons using Photoshop shapes and styles

47. Web Badges: Video Tutorial

Photoshop Tutorial - Created by Camtasia Studio 3

Web 2.0 Layouts, Gradients, Headers

50. A Gradient Tutorial

Photoshop Tutorial - A Gradient Tutorial 9rules Network Official Blog

51. Banner Navigation Tutorial

Photoshop Tutorial - SigTutorials.com - The best Signature Tutorials!

54. Sleek and Spicy website header Tutorial

Photoshop Tutorial - Sleek and Spicy website header Tutorial

55. Vista Style Layout – Talk Mania Forum

Photoshop Tutorial - Vista Style Layout - Talk Mania Forum

56. Web 2.0 “STYLE” web layout – Free Psd

Photoshop Tutorial - Web 2.0 Layout

59. Irish Content Box Tutorial

Photoshop Tutorial - UPUP Media :: Media :: Photoshop Tutorials :: Irish Content Box Tutorial

60. Web 2.0 Design Kit | Photoshop Lab

Photoshop Tutorial - Web 2.0 Design Kit | Photoshop Lab

61. Web 2.0 Design Kit, Part 2 | Photoshop Lab

Photoshop Tutorial - Web 2.0 Design Kit, Part 2 | Photoshop Lab

Web 2.0 Round-Up

62. Web 2.0 Colour Palette

Photoshop Tutorial - Web 2.0 Colour Palette

63. The Web 2.0 Secret Weapon – Thoughts and errata from Miles Burke.

Photoshop Tutorial - The Web 2.0 Secret Weapon - Thoughts and errata from Miles Burke.

64. Great Fonts for Web 2.0

Photoshop Tutorial - Great Fonts for Web 2.0

65. The visual design of Web 2.0

The visual design of Web 2.0

66. Web 2.0 how-to design style guide

Photoshop Tutorial - Web 2.0 how-to design style guide

67. Disenar a lo Web 2.0, la lista definitiva

Photoshop Tutorial - Disenar a lo Web 2.0, la lista definitiva

68. Tutorials – Search for Tutorials – Pixel2Life

Photoshop Tutorial - Tutorials - Search for Tutorials - Pixel2Life

↑ Back to top

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

  1. 1

    No, please, no! No more Web 2.0 buzzwording. No matter that some of the mentioned tutorials are quite handy many of them were around before(!) all this Web 2.0 hype was around. Although they might have had a strong influence on how the so called second incarnation of the web looks like, I feel the urgent need to run away when somebody mentions “web” and “2.0″ in the same phrase.

    Thank you 2.0

    4
  2. 2

    Smashing Magazine really needs to stop kicking so much ass. You make all the other design blogs look bad.

    Great work!! Keep it up!!

    4
  3. 3

    This is now my most read RSS feed…keep it up guys!

    0
  4. 4

    Does anyone know where I can get DIN Schriften for free (the font)?

    0
  5. 5

    It’s funny…I have been designing webpages for years…and was somewhat confused about “WEB 2.0″. At one point I thought there was a new language being used instead of html..Until I read this…Web 2.0 is actually nothing. haha.

    Web 2.0 = someones idea of using certain fonts and colors and gradients and calling it web 2.0

    lol.

    0
  6. 6

    Great list. Thanks. Adding Smashing Magazine to my google home page RSS feeds.

    0
  7. 7

    All of these and many other things are made so much easier in Illustrator. Why is it that everyone wants to use Photoshop? I have the entire CS2 package and I can tell you that Illustrator is so much easier to use and accomplish the same reults or better. Plus, your image is then vectorized and sizeable.

    0
  8. 8

    If you follow the link the Great Detective provided, you will see it goes to Dr Web magazine, and a piece authored by Vitaly Friedman.

    …and if you click the ‘about’ link on this page (smashingmagazine), you will see the statement, “Smashing Magazine is maintained by Sven Lennartz, the owner of the Dr. Web Magazine and Vitaly Friedman, the creator of The Web Developer’s Handbook – with a little help from Christiane Rosenberger.”

    So ‘thieving’ appears to be entirely mistaken, and ‘moron’…well, it doesn’t describe Mr Friedman, anyway.

    1
  9. 9

    Wow. This is a ton of great information.

    I just wish someone would make something similar, but for GIMP instead of photoshop.

    0
  10. 10

    Too bad my tutorials didn’t make it… I guess not many people use Fireworks anymore…

    0
  11. 11

    Benjamin A. Wendelboe

    March 10, 2007 6:19 pm

    This is perfect! Thank you! A lot of great inspiration here!

    0
  12. 12

    Benjamin A. Wendelboe

    March 10, 2007 6:20 pm

    J David, I’d like to see them! I live in Fireworks..! The cooles app ever..

    0
  13. 13

    Great! and thanks for the P.S!

    Leandro D´Onofrio

    0
  14. 14

    Awesome !!! Thank you very much.

    Cennetteyim sanki :)

    0
  15. 15

    I don´t quite get it… Why is there so many people complainting about stealing the post, instead of enjoying and simply reading the information. It’s a great post, thanks for the information. Thats what the web is all about!

    0
  16. 16

    any good tutorials about how to design original and never-seen websites? ;)

    0
  17. 17

    great list! thanks.

    0
  18. 18

    Does anyone do their logo designs in Illustrator?

    Photoshop is nice, but forgive me, doesn’t it exclude most vector
    capabilities and you cannot resize it really.

    What’s the catch?

    I guess it’s that most of this is designed for the web. If anyone can help me on this, I’d be grateful.

    0
  19. 19

    thank u for all the great effort may god bless you all

    0
  20. 20

    …I love you.

    0
  21. 21

    This article is really rocks coz it has lot of resources of web 2.0 designing kit. I like this site and tutorials inside. I’ve read that most of them are tutorials about designing web 2.0 images with photoshop..can you also write specially for design web 2.0 lay out?..please..

    0
  22. 22

    Good collection,
    thank you.

    0
  23. 23

    Very impressive list.
    I found Photoshoplab a great resource.

    0
  24. 24

    Valentine ofili

    May 22, 2007 6:56 pm

    This is simply amazing. All these tutorials Rock. Thank you all. Thank God for you all

    0
  25. 25

    Thanks for links.

    0
  26. 26

    Thank you very much / Большое спасибо!

    0
  27. 27

    Thanks for links!

    0
  28. 28

    wow! this bunch of tutorials was awesome. im in the process of updating 2 websites using some of the web 2.0 techniques, and have just finished one that looks awesome! Thanks for everything!!!

    0
  29. 29

    Very helpful list!
    Thank you!!!

    0
  30. 30

    I’ll now try to use No.35…

    Thanks for links!

    0
  31. 31

    Thanks I love you Web 2.0

    0
  32. 32

    Great post, thanks! Really nice collection!

    0
  33. 33

    Really useful data. Thank you very much to bring this to us ! I have some work to do now … :)

    0
  34. 34

    Many of us with a print background build in illustrator first particularly because of the scalability, ability to easily edit color and content. As I’m just learning web & 2.0, I’ve purchased vector art (like glass buttons, flourishes, grunge, etc.) online at iStock and picked it apart in illustrator to learned how things are made.

    0
  35. 35

    Excelent information about web 2.0.

    0
  36. 36

    i used the page curl one, that was pretty good. The shadow girls one was prtty good. I think Smashing Magazine shuold try and do more articles like this I loved it.

    0
  37. 37

    I’ve been on this site for 3 days now trying the tutorials. Thanks alot man

    0
  38. 38

    Interesting info. about web 2.0 badges.

    0
  39. 39

    Thanks for the list. This is great stuff and extremely helpful. =)

    0
  40. 40

    All of those who are saying web 2.0 is just made up and has nothing to do with coding but just better graphics. Well you couldnt be more wrong really. Its about accessability and w3 compliant coding for html, xhtml and css. Also how users can interact with your website.

    But great blog anyway, shows you what the real gui side of web 2.0 is like and how to achieve it!

    0
  41. 41
  42. 42

    Recently just started to learn web 2.0 design skills. Found tat it is quite easy and the effect is really really nice. Hope I’m not too late to learn all these… Thanks for the post. It helps a lot!

    0
  43. 43

    John Raul Joven II

    March 18, 2008 7:03 pm

    Very useful indeed. I’ve been searching for this Web 2.0 tutorials. I didn’t see a tutorial on how make a Web 2.0-styled borders for web pages though.

    0
  44. 44

    very nice text..

    0
  45. 45

    Very nice
    Thank You .

    0
  46. 46

    Thank you!

    Excellent work!

    1
  47. 47

    I was thinking web 2.0 is based on someone skills,

    0
  48. 48

    Great list. Bookmarking this page for my future reference. There are some really interesting designs. Maybe it’s time to redesign my site.

    0
  49. 49

    I couldn’t have said it better myself, users and executives love the “WEB 2.0″ buzzword. When I hear someone say that, I know they’re a n00b.

    0
  50. 50

    Some good tutorials, a lot of dead links: all in all, a good presentation of the marketing shite that is Web 2.0. Still, if it means more suckers pay more bucks for more sites, who gives a damn?

    0
  51. 51

    Haha, I asked my IT teacher about Web 2.0 (he owns his own web business and everything) and he didn’t have the sligtest idea!

    Just saw on one site that ‘Web 2.0′ is supposed to be the new still since the internet went bump in 2001. All the sites that made it were apparently styled the same, low and behold ’2.0′… Bull if you ask me to be fair.

    Although I do like the graphical style. All the shapes and colours excite me. I’ll be busy on these, thanks a lot!

    0
  52. 52

    My oh My!~ This is a great site..I’ll be stuck here for hours :-)
    Thanks for sharing all this!~ I’ve subscribed for sure

    0
  53. 53

    this is very useful materials to us

    thank u

    0
  54. 54

    web 2.0 is mucho more than glossy icons… infortunatly, smashing desapointed me at this time…

    0
  55. 55

    web 2.0 = site that allows user to take part , but when used in design terms, it’s geared towards 3d ‘glossy’ effects that make the web look less like a unillustrated book.

    0
  56. 56

    thank you

    0
  57. 57

    I have been looking for this information for days. Thanks a lot.

    0
  58. 58

    mind blowing —-))
    KEEP IT UP!!

    0
  59. 59

    harıka olmus elınıze saglık super

    0
  60. 60

    Very cool..very clear…excellent stuff – thanks for sharing!

    0
  61. 61

    very nice collection.. its very helpful for never heard Web 2.0

    0
  62. 62

    sorry, but Web 2.0 appears to be an enormous con set up by designers looking to fleece their customers out of more money.
    also why page huge amounts of money for some applications when there are so many alternatives out there, i use Image Composer 1.5, Paint.NET, an old copy of FrontPage and notepad 2 for my stuff. okay its only home pages but i can’t see the need for anything else.

    0
  63. 63

    this is a very good list of tutorials. i think it almost covers all the type of design elements that are now a days used in web 2.0 websites.
    simple yet elegant is the way to do it.

    0
  64. 64

    REALLY THANKS REAL GOOD STUFF

    0
  65. 65

    I was searching for a good place for photoshop tutorials and this site really helped me, keep it up guys ! hope you’l add more and more tutorials.

    0
  66. 66

    thank you very much for this amazing websites :) this will help me so much mith websites design, and the new wave of web2.0

    0
  67. 67

    really really thanks for that!

    0
  68. 68

    these are some amazing tutorials i m trying them out for my website, headers and icons great stuff thanks..

    0
  69. 69

    i have been trying out some logos for my site and these tutorials are awesome. thank you

    1
  70. 70

    Gr8 collection & useful data.
    Thank you very much to bring this to us !

    0
  71. 71

    thx, fine list

    0
  72. 72

    barf. I almost entirely skip a website with “web 2.0″ style. lack of originality. great list! y’all rock.

    0
  73. 73

    www.gelkeyfim.com

    May 17, 2009 5:00 am

    thank you

    0
  74. 74

    wow! this bunch of tutorials was awesome. im in the process of updating 2 websites using some of the web 2.0 techniques, and have just finished one that looks awesome! Thanks for everything!!!

    0
  75. 75

    great stuff guys!! you guys rock as usual it will be even better if you have more about fireworks I’m becoming a fireworks fan…

    0
  76. 76

    khub useful information….bhalo ..it helped me a lot.

    0
  77. 77

    GoodMorningArts.com

    September 3, 2009 2:28 pm

    Simply Amazing Article . . . Thank you and God Bless!

    0
  78. 78

    Webdesign@Posh-Creation

    September 29, 2009 6:47 am

    very beautiful! artistic! creative! that’s really nice, u are very good.. i am new here, so i saw ur post at mybloglog.. XD
    nice nice nice~

    0
  79. 79

    it’s great for me. because i am a new in webdesign field and design field so it’s help me so much now read this tutorials i think, i am good designer. thanks thanks very much

    0
  80. 80

    Thank you so much for gathering up all these tutorials in one page. A nice reference !

    0
  81. 81
  82. 82

    Great list, thanks for posting dude this really help me a lot to get some ideas. Keep it up.

    0
  83. 83

    Richard Graham

    May 11, 2010 8:20 am

    Great list, love your site!!

    0
  84. 84

    Wow, I feel behind. This was posted 3 years ago???!!! Oh well, still useful and relevant =]

    0
  85. 85

    Thanks mem

    0
  86. 86

    This is insane! It must have taken days to compile this list of tutorials, thanks for the fantastic resource, i have bookmarked it…

    Thanks again,
    David

    1
  87. 87

    Nothing new here… :(

    0
  88. 88

    I like it. it’s great to work with web 2.0

    0
  89. 89

    Great list, thanks for posting dude this really help me a lot to get some ideas.

    0
  90. 90

    This is a nice collection of Photoshop tutorial. However, for those who does not have Photoshop or knowledge of designer and wants create their own button with easy, I will suggest Cool Button Designer. Cool Button Designer can generate buttons for all three states on the fly, mouse over, mouse pressed and normal states. It gives you ability to control the light and reflection, add icon to your button, to gazillion of shapes, etc… Very nice software to create Web 2.0 style button. Cool Button Designer also generates you the HTML code for you to use. It saves the templates, that you can resize any time without loosing the quality of your button.

    You should try it, its not a joke, and with 3-5 minutes you can build this button from scratch.

    I am using it myself for my projects, and very glad to find it.

    Try it, google for Cool Button Designer. Official website has a free trial, limited with watermark only.

    0
  91. 91

    Hi

    I know web design, HTML, CSS, JAVASCIPT and PHP. What is Web Design 2.0

    0
  92. 92

    Saurabh Chaudhary

    November 1, 2011 3:31 am

    nice tutorials

    0
  93. 93

    No web2.0 isn’t about only look it is about making your site community friendly site. So your clients can have a profile and can share their ideas and thoughts about what you have in the website with their friends, it is about making a long lasting relationship between your site visitors and your self. This is the core of web2.0

    2

↑ Back to top