Web 2.0 Tutorials Round-Up


Web 2.0 can be beautiful. In fact, many designers manage to create really amazing1, particularly dark2 and fresh3 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’ Onofrio4, 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 Illustration5

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

2. Adobe Software – Adobe Photoshop97

Photoshop Tutorial - Adobe Software - Adobe Photoshop8

3. Adobe Software – Adobe Photoshop97

Photoshop Tutorial - Adobe Software - Adobe Photoshop10

5. Retro lines in Photoshop?11

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

6. Splash Page Tutorial13

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

7. Gradient Styles & How To Make Dashes15

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

8. Creating a page curl in Photoshop17

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

9. Creating patterns in Photoshop CS219

Photoshop Tutorial - Veerles blog | Creating patterns in Photoshop CS220

10. Realistic photo print21

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

11. Circles, Circles, Circles23

Photoshop Tutorial - Adobe Software - Adobe Photoshop24

Logos, Logotypes

12. Jelly Remake25

Photoshop Tutorial - Jelly Remake - Tutorials 2.026

13. Web 2.0 Style Logo27

Photoshop Tutorial - Web 2.0 Style Logo28

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 Logo29

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

17. How to create a WEB 2.0 style logo31

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

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 Logo33

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

22. Pimp My Ride – Logo35

Pimp My Ride - Logo36

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

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

24. web2logo.com39

Photoshop Tutorial - web2logo.com40

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

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

Text Effects

27. Custom Chrome Text Effect43

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

28. Photoshop Reflections45

Photoshop Reflections46

29. The Shiny Floor Effect 47

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

31. Text Kerning

Text Kerning

32. The Glossy TEXT web2.0 style49

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

33. Photoshop Tutorials: Texteffect51

Photoshop Tutorial - Photoshop Tutorials52

34. Web 20 Shiny Floor Effect – video tutorial53

Photoshop Tutorial - Web 20 Shiny Floor Effect - video tutorial54


35. Web 2.0 Badge Photoshop Tutorial

Web 2.0 Badge Photoshop Tutorial

37. Supermarket Stickers Tutorial – Visualdesigncore.com55

Photoshop Tutorial - Supermarket Stickers Tutorial - Visualdesigncore.com56

38. Web2.0 Badges57

Web2.0 Badges58

39. Glossy web 2.0 badge with rounded corners59

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

40. A Glossy Starburst Tutorial61

A Glossy Starburst Tutorial62


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

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

42. Toxiclab.org – Photoshop – Web buttons tutorial65

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

44. Web 2.0 style buttons67

Web 2.0 style buttons68

45. Glossy Button Video Tutorial and PSD69

Photoshop Tutorial - Glossy Button Video Tutorial and PSD 70

46. Creating flexible buttons using Photoshop shapes and styles71

Creating flexible buttons using Photoshop shapes and styles72

47. Web Badges: Video Tutorial73

Photoshop Tutorial - Created by Camtasia Studio 374

Web 2.0 Layouts, Gradients, Headers

50. A Gradient Tutorial75

Photoshop Tutorial - A Gradient Tutorial 9rules Network Official Blog76

51. Banner Navigation Tutorial

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

54. Sleek and Spicy website header Tutorial77

Photoshop Tutorial - Sleek and Spicy website header Tutorial78

55. Vista Style Layout – Talk Mania Forum79

Photoshop Tutorial - Vista Style Layout - Talk Mania Forum80

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

Photoshop Tutorial - Web 2.0 Layout82

59. Irish Content Box Tutorial83

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

60. Web 2.0 Design Kit | Photoshop Lab85

Photoshop Tutorial - Web 2.0 Design Kit | Photoshop Lab86

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

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

Web 2.0 Round-Up

62. Web 2.0 Colour Palette89

Photoshop Tutorial - Web 2.0 Colour Palette90

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.091

Photoshop Tutorial - Great Fonts for Web 2.092

65. The visual design of Web 2.093

The visual design of Web 2.094

66. Web 2.0 how-to design style guide95

Photoshop Tutorial - Web 2.0 how-to design style guide96

67. Disenar a lo Web 2.0, la lista definitiva97

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

68. Tutorials – Search for Tutorials – Pixel2Life99

Photoshop Tutorial - Tutorials - Search for Tutorials - Pixel2Life100


  1. 1 http://www.smashingmagazine.com/2006/12/19/50-beautiful-css-based-web-designs-in-2006/
  2. 2 http://www.smashingmagazine.com/2007/01/13/30-dark-designs-you-shouldve-seen/
  3. 3 http://www.smashingmagazine.com/2007/03/05/45-fresh-clean-and-impressive-designs/
  4. 4 http://www.leandrodonofrio.com/recursos/dise%F1o/dise%F1ar-a-lo-web-2.0-la-lista-definitiva/
  5. 5 http://www.adobetutorialz.com/articles/2153/1/Three-girls-posing-in-the-night-Illustration
  6. 6 http://www.adobetutorialz.com/articles/2153/1/Three-girls-posing-in-the-night-Illustration
  7. 7 http://www.adobetutorialz.com/categories/Adobe-Photoshop/?Page=2
  8. 8 http://www.adobetutorialz.com/categories/Adobe-Photoshop/?Page=2
  9. 9 http://www.adobetutorialz.com/categories/Adobe-Photoshop/?Page=2
  10. 10 http://www.adobetutorialz.com/categories/Adobe-Photoshop/?Page=2
  11. 11 http://www.roscripts.com/forum/discussion/17/retro-lines-in-photoshop/#Item_3
  12. 12 http://www.roscripts.com/forum/discussion/17/retro-lines-in-photoshop/#Item_3
  13. 13 http://www.designphase.net/?q=splashpage
  14. 14 http://www.designphase.net/?q=splashpage
  15. 15 http://www.photoshopsupport.com/tutorials/cian/gradient-styles-dashes.html
  16. 16 http://www.photoshopsupport.com/tutorials/cian/gradient-styles-dashes.html
  17. 17 http://veerle.duoh.com/blog/comments/creating_a_page_curl_in_photoshop/
  18. 18 http://veerle.duoh.com/blog/comments/creating_a_page_curl_in_photoshop/
  19. 19 http://veerle.duoh.com/blog/comments/creating_patterns_in_photoshop_cs2/
  20. 20 http://veerle.duoh.com/blog/comments/creating_patterns_in_photoshop_cs2/
  21. 21 http://www.pstut.com/tutorial-realistic-photo-print.html
  22. 22 http://www.pstut.com/tutorial-realistic-photo-print.html
  23. 23 http://www.adobetutorialz.com/categories/Adobe-Photoshop/?Page=2
  24. 24 http://www.adobetutorialz.com/categories/Adobe-Photoshop/?Page=2
  25. 25 http://tutorials20.com/design/jelly-remake/
  26. 26 http://tutorials20.com/design/jelly-remake/
  27. 27 http://www.lineartutorials.com/Tutorials/Web20logo/
  28. 28 http://www.lineartutorials.com/Tutorials/Web20logo/
  29. 29 http://www.nicora.net/index.cfm?method=article&blogID=C88F54CC-D998-BFC0-D995-3823E52FA483
  30. 30 http://www.nicora.net/index.cfm?method=article&blogID=C88F54CC-D998-BFC0-D995-3823E52FA483
  31. 31 http://www.dreamdealer.nl/?action=viewTutorial&id=37
  32. 32 http://www.dreamdealer.nl/?action=viewTutorial&id=37
  33. 33 http://www.fxdesigning.com/web2txt.php
  34. 34 http://www.fxdesigning.com/web2txt.php
  35. 35 http://www.adobetutorialz.com/categories/Adobe-Photoshop/
  36. 36 http://www.adobetutorialz.com/categories/Adobe-Photoshop/
  37. 37 http://www.fontshop.com/fontfeed/archives/web-20-logos.cfm
  38. 38 http://www.fontshop.com/fontfeed/archives/web-20-logos.cfm
  39. 39 http://www.web2logo.com/
  40. 40 http://www.web2logo.com/
  41. 41 http://flickr.com/photo_zoom.gne?id=101793494&size=o
  42. 42 http://flickr.com/photo_zoom.gne?id=101793494&size=o
  43. 43 http://www.tipclique.com/tutorial/photoshop/custom-chrome-text-effect/
  44. 44 http://www.tipclique.com/tutorial/photoshop/custom-chrome-text-effect/
  45. 45 http://www.tipclique.com/tutorial/photoshop/photoshop-reflections/
  46. 46 http://www.tipclique.com/tutorial/photoshop/photoshop-reflections/
  47. 47 http://photoshopit.wordpress.com/2006/09/06/the-shiny-floor-effect-or-the-very-cool-reflection-effect/
  48. 48 http://photoshopit.wordpress.com/2006/09/06/the-shiny-floor-effect-or-the-very-cool-reflection-effect/
  49. 49 http://photoshopit.wordpress.com/2006/09/04/the-glossy-text-web20-style/
  50. 50 http://photoshopit.wordpress.com/2006/09/04/the-glossy-text-web20-style/
  51. 51 http://www.avivadirectory.com/photoshop/index.php?cat=3&tut=3
  52. 52 http://www.avivadirectory.com/photoshop/index.php?cat=3&tut=3
  53. 53 http://photoshopit.wordpress.com/2006/12/12/web-20-shiny-floor-effect-video-tutorial/
  54. 54 http://photoshopit.wordpress.com/2006/12/12/web-20-shiny-floor-effect-video-tutorial/
  55. 55 http://www.visualdesigncore.com/tutorials/photoshop/Supermarket-Stickers/
  56. 56 http://www.visualdesigncore.com/tutorials/photoshop/Supermarket-Stickers/
  57. 57 http://freephotoshopguides.com/interface-elements/web20-badges/
  58. 58 http://freephotoshopguides.com/interface-elements/web20-badges/
  59. 59 http://photoshopit.wordpress.com/2006/10/09/psd-of-the-day-glossy-web-20-badge-with-rounded-corners/
  60. 60 http://photoshopit.wordpress.com/2006/10/09/psd-of-the-day-glossy-web-20-badge-with-rounded-corners/
  61. 61 http://photoshopit.wordpress.com/2006/09/19/a-photoshop-tutorial-on-starbursts-badges-web20-style/
  62. 62 http://photoshopit.wordpress.com/2006/09/19/a-photoshop-tutorial-on-starbursts-badges-web20-style/
  63. 63 http://www.designphase.net/?q=badge_n_button
  64. 64 http://www.designphase.net/?q=badge_n_button
  65. 65 http://www.toxiclab.org/tutorial.asp?ID=49
  66. 66 http://www.toxiclab.org/tutorial.asp?ID=49
  67. 67 http://iris-design.info/photoshop/web-20-style-buttons/
  68. 68 http://iris-design.info/photoshop/web-20-style-buttons/
  69. 69 http://photoshopit.wordpress.com/2006/12/14/glossy_button_web20/
  70. 70 http://photoshopit.wordpress.com/2006/12/14/glossy_button_web20/
  71. 71 http://veerle.duoh.com/blog/comments/creating_flexible_buttons_using_photoshop_shapes_and_styles/
  72. 72 http://veerle.duoh.com/blog/comments/creating_flexible_buttons_using_photoshop_shapes_and_styles/
  73. 73 http://www.aggropixel.com/tutorials/photoshop_web_badge/web_badge.html
  74. 74 http://www.aggropixel.com/tutorials/photoshop_web_badge/web_badge.html
  75. 75 http://9rules.com/blog/2006/08/a-gradient-tutorial/
  76. 76 http://9rules.com/blog/2006/08/a-gradient-tutorial/
  77. 77 http://photoshopit.wordpress.com/2006/10/03/sleek-and-spicy-website-header-tutorial-web-20-style/
  78. 78 http://photoshopit.wordpress.com/2006/10/03/sleek-and-spicy-website-header-tutorial-web-20-style/
  79. 79 http://www.talk-mania.com/showthread.php?t=7108
  80. 80 http://www.talk-mania.com/showthread.php?t=7108
  81. 81 http://photoshopit.wordpress.com/2006/09/17/photoshop-tutorials-are-on-the-way-but-first-a-sleek-web-20-lookin-header-and-web-page-layout/
  82. 82 http://photoshopit.wordpress.com/2006/09/17/photoshop-tutorials-are-on-the-way-but-first-a-sleek-web-20-lookin-header-and-web-page-layout/
  83. 83 http://www.upupmedia.com/tut/pho/14.html
  84. 84 http://www.upupmedia.com/tut/pho/14.html
  85. 85 http://www.photoshoplab.com/web20-design-kit.html
  86. 86 http://www.photoshoplab.com/web20-design-kit.html
  87. 87 http://www.photoshoplab.com/web-20-design-kit-part-2.html
  88. 88 http://www.photoshoplab.com/web-20-design-kit-part-2.html
  89. 89 http://www.modernlifeisrubbish.co.uk/article/web-2.0-colour-palette
  90. 90 http://www.modernlifeisrubbish.co.uk/article/web-2.0-colour-palette
  91. 91 http://www.modernlifeisrubbish.co.uk/article/great-fonts-for-web-2.0
  92. 92 http://www.modernlifeisrubbish.co.uk/article/great-fonts-for-web-2.0
  93. 93 http://www.f6design.com/journal/2006/10/21/the-visual-design-of-web-20/
  94. 94 http://www.f6design.com/journal/2006/10/21/the-visual-design-of-web-20/
  95. 95 http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm
  96. 96 http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm
  97. 97 http://www.leandrodonofrio.com/recursos/dise%F1o/dise%F1ar-a-lo-web-2.0-la-lista-definitiva/
  98. 98 http://www.leandrodonofrio.com/recursos/dise%F1o/dise%F1ar-a-lo-web-2.0-la-lista-definitiva/
  99. 99 http://www.pixel2life.com/search/4/Web%202/1/
  100. 100 http://www.pixel2life.com/search/4/Web%202/1/

↑ Back to topShare on Twitter

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


Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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

  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!!

  3. 3

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

  4. 4

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

  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


  6. 6

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

  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.

  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.

  9. 9

    Wow. This is a ton of great information.

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

  10. 10

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

  11. 11

    Benjamin A. Wendelboe

    March 10, 2007 6:19 pm

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

  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..

  13. 13

    Great! and thanks for the P.S!

    Leandro D´Onofrio

  14. 14

    Awesome !!! Thank you very much.

    Cennetteyim sanki :)

  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!

  16. 16

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

  17. 17

    great list! thanks.

  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.

  19. 19

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

  20. 20

    …I love you.

  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..

  22. 22

    Good collection,
    thank you.

  23. 23

    Very impressive list.
    I found Photoshoplab a great resource.

  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

  25. 25

    Thanks for links.

  26. 26

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

  27. 27

    Thanks for links!

  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!!!

  29. 29

    Very helpful list!
    Thank you!!!

  30. 30

    I’ll now try to use No.35…

    Thanks for links!

  31. 31

    Thanks I love you Web 2.0

  32. 32

    Great post, thanks! Really nice collection!

  33. 33

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

  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.

  35. 35

    Excelent information about web 2.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.

  37. 37

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

  38. 38

    Interesting info. about web 2.0 badges.

  39. 39

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

  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!

  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!

  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.

  44. 44

    very nice text..

  45. 45

    Very nice
    Thank You .

  46. 46

    Thank you!

    Excellent work!

  47. 47

    I was thinking web 2.0 is based on someone skills,

  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.

  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.

  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?

  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!

  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

  53. 53

    this is very useful materials to us

    thank u

  54. 54

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

  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.

  56. 56

    thank you

  57. 57

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

  58. 58

    mind blowing —-))
    KEEP IT UP!!

  59. 59

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

  60. 60

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

  61. 61

    very nice collection.. its very helpful for never heard Web 2.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.

  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.

  64. 64


  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.

  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

  67. 67

    really really thanks for that!

  68. 68

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

  69. 69

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

  70. 70

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

  71. 71

    thx, fine list

  72. 72

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

  73. 73


    May 17, 2009 5:00 am

    thank you

  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!!!

  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…

  76. 76

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

  77. 77


    September 3, 2009 2:28 pm

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

  78. 78


    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~

  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

  80. 80

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

  81. 81
  82. 82

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

  83. 83

    Richard Graham

    May 11, 2010 8:20 am

    Great list, love your site!!

  84. 84

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

  85. 85

    Thanks mem

  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,

  87. 87

    Nothing new here… :(

  88. 88

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

  89. 89

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

  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.

  91. 91


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

  92. 92

    Saurabh Chaudhary

    November 1, 2011 3:31 am

    nice tutorials

  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

↑ Back to top