Web 2.0 Tutorials Round-Up

Advertisement

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

Badges

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

Buttons

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

Footnotes

  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 top Tweet itShare on Facebook

Co-Founder and former CEO of Smashing Magazine. Sven is now writing the Conterest Blog about Blogs, Content and Publishing - in german language.

Advertisement
  1. 1

    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
  2. 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
  3. 103

    this is very useful materials to us

    thank u

    0
  4. 154

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

    0
  5. 205

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

    thank you

    0
  7. 307

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

    0
  8. 358

    mind blowing —-))
    KEEP IT UP!!

    0
  9. 409

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

    0
  10. 460

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

    0
  11. 511

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

    0
  12. 562

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

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

    REALLY THANKS REAL GOOD STUFF

    0
  15. 715

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

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

    really really thanks for that!

    0
  18. 868

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

    0
  19. 919

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

    1
  20. 970

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

    0
  21. 1021

    thx, fine list

    0
  22. 1072

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

    0
  23. 1123

    www.gelkeyfim.com

    May 17, 2009 5:00 am

    thank you

    0
  24. 1174

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

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

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

    0
  27. 1327

    GoodMorningArts.com

    September 3, 2009 2:28 pm

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

    0
  28. 1378

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

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

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

    0
  31. 1531
  32. 1582

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

    0
  33. 1633

    Richard Graham

    May 11, 2010 8:20 am

    Great list, love your site!!

    0
  34. 1684

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

    0
  35. 1735

    Thanks mem

    0
  36. 1786

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

    Nothing new here… :(

    0
  38. 1888

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

    0
  39. 1939

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

    0
  40. 1990

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

    Hi

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

    0
  42. 2092

    Saurabh Chaudhary

    November 1, 2011 3:31 am

    nice tutorials

    0
  43. 2143

    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