Smashing Magazine we smash you with the information that will make your life easier. really.

Web 2.0 Tutorials Round-Up

By Smashing Editorial, March 10th, 2007 in Tutorials | 198 Comments | Forum

Web 2.0 is 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

2. Adobe Software - Adobe Photoshop

3. Adobe Software - Adobe Photoshop

5. Retro lines in Photoshop?

6. Splash Page Tutorial

7. Gradient Styles & How To Make Dashes

8. Creating a page curl in Photoshop

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

9. Creating patterns in Photoshop CS2

10. Realistic photo print

11. Circles, Circles, Circles

Logos, Logotypes

12. Jelly Remake

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

17. How to create 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

22. Pimp My Ride - Logo

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

24. web2logo.com

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

Text Effects

27. Custom Chrome Text Effect

28. Photoshop Reflections

29. The Shiny Floor Effect

31. Text Kerning

Text Kerning

32. The Glossy TEXT web2.0 style

33. Photoshop Tutorials: Texteffect

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

38. Web2.0 Badges

39. Glossy web 2.0 badge with rounded corners

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

44. Web 2.0 style buttons

45. Glossy Button Video Tutorial and PSD

46. Creating flexible buttons using Photoshop shapes and styles

47. Web Badges: Video Tutorial

Web 2.0 Layouts, Gradients, Headers

50. A Gradient Tutorial

51. Banner Navigation Tutorial

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

54. Sleek and Spicy website header Tutorial

55. Vista Style Layout - Talk Mania Forum

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

59. Irish Content Box Tutorial

60. Web 2.0 Design Kit | Photoshop Lab

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

Web 2.0 Round-Up

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

65. The visual design of Web 2.0

66. Web 2.0 how-to design style guide

67. Disenar a lo Web 2.0, la lista definitiva

68. Tutorials - Search for Tutorials - Pixel2Life

Published in Tutorials, March 10th, 2007
Tags: badges, buttons, layouts, references, Tutorials, web 2.0

1.

kiro (March 10th, 2007, 1:33 am)

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.

Anthony (March 10th, 2007, 5:41 am)

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.

Baz (March 10th, 2007, 6:50 am)

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

rats (March 10th, 2007, 7:35 am)

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

Jon (March 10th, 2007, 7:50 am)

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

Mink (March 10th, 2007, 7:54 am)

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

D.B. (March 10th, 2007, 8:03 am)

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.

bgates (March 10th, 2007, 10:02 am)

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.

Chris (March 10th, 2007, 10:31 am)

Wow. This is a ton of great information.

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

J David (March 10th, 2007, 10:37 am)

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

Benjamin A. Wendelboe (March 10th, 2007, 6:19 pm)

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

Benjamin A. Wendelboe (March 10th, 2007, 6:20 pm)

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

Leandono (March 10th, 2007, 8:32 pm)

Great! and thanks for the P.S!

Leandro D´Onofrio
14.

eburhan (March 10th, 2007, 8:39 pm)

Awesome !!! Thank you very much.

Cennetteyim sanki :)
15.

Pedro (March 11th, 2007, 4:21 am)

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.

Surething (March 11th, 2007, 4:38 am)

You copied the entire post from here >> Link [www.drweb.de] (and yes, they had it first).

Shame, shame!
17.

yul (March 12th, 2007, 5:27 pm)

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

Laurens (March 19th, 2007, 3:20 pm)

great list! thanks.
19.

lawton chiles (March 30th, 2007, 6:01 am)

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

mohammed (April 11th, 2007, 10:46 pm)

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

Clay (April 18th, 2007, 5:02 am)

…I love you.
22.

Sasha cute (April 22nd, 2007, 8:06 am)

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

Koalajoe (April 24th, 2007, 12:09 am)

Good collection,
thank you.
24.

Webice (May 7th, 2007, 5:22 am)

Very impressive list.
I found Photoshoplab a great resource.
25.

Valentine ofili (May 22nd, 2007, 6:56 pm)

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

treedy (May 25th, 2007, 11:10 pm)

Thanks for links.
27.

AlexSpb (June 1st, 2007, 5:12 pm)

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

Smith (July 17th, 2007, 2:29 pm)

Thanks for links!
29.

Jeff Adams (July 23rd, 2007, 6:20 am)

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

Max (August 3rd, 2007, 2:52 am)

Very helpful list!
Thank you!!!
31.

Painter (August 15th, 2007, 6:39 pm)

I’ll now try to use No.35…

Thanks for links!
32.

kale kasa (September 1st, 2007, 12:07 am)

Thanks I love you Web 2.0
33.

Kirill Gurbanov (September 3rd, 2007, 4:45 am)

Great post, thanks! Really nice collection!
34.

Sandman (November 19th, 2007, 12:37 am)

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

pcf (November 20th, 2007, 6:37 am)

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

Alberto (November 22nd, 2007, 3:37 am)

Excelent information about web 2.0.
37.

Easy Task (December 27th, 2007, 10:23 pm)

Номер 25 легко делается :) Просто выделить надпись по цвету букв, а затем расширять выделение и заливать :) надо на заметку взять :)
38.

Jeff Adams (January 2nd, 2008, 2:17 pm)

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

J Browning (January 12th, 2008, 11:43 pm)

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

Lesli (January 15th, 2008, 3:55 pm)

Interesting info. about web 2.0 badges.
41.

Roxanne (January 21st, 2008, 9:25 am)

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

Benji (February 5th, 2008, 1:57 am)

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

kurt (February 18th, 2008, 11:53 am)

very nicee
44.

Ring (February 20th, 2008, 6:44 am)

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

meenjoy (March 7th, 2008, 3:32 am)

спасибо за замечательные туториалы
46.

John Raul Joven II (March 18th, 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.
47.

genc akım (March 25th, 2008, 6:40 am)

very nice text..
48.

Ali (March 25th, 2008, 10:01 pm)

Very nice
Thank You .
49.

Ty Maier (March 26th, 2008, 9:57 am)

Thank you!

Excellent work!
50.

ctraltdel (March 26th, 2008, 8:47 pm)

I was thinking web 2.0 is based on someone skills,
51.

chaoman (May 1st, 2008, 7:51 am)

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

I agree (June 5th, 2008, 11:34 pm)

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

Lee (July 25th, 2008, 11:11 am)

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

hicran (August 4th, 2008, 11:31 am)

MSN NICK
55.

HiCRaN (August 4th, 2008, 11:34 am)

Ask Siirleri
56.

Calvin (August 4th, 2008, 7:22 pm)

nice. this will be a great source for me to convert PS tutorials to Fireworks.
57.

Chelsea (August 7th, 2008, 2:26 pm)

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

MsTrisBeats (August 12th, 2008, 11:21 am)

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

kandagatla (August 12th, 2008, 5:03 pm)

this is very useful materials to us

thank u
60.

mp3 (August 13th, 2008, 4:44 am)

Link [www.forumgenclik.net]

thanks
61.

forumgenclik (August 13th, 2008, 4:44 am)

Link [www.forumgenclik.net]
62.

www.sanal-arsiv.com (August 21st, 2008, 1:01 pm)

thanks

Link [www.sanal-arsiv.com] [www.sanal-arsiv.com]
63.

eduardo (August 27th, 2008, 8:48 am)

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

Abe (August 27th, 2008, 10:59 am)

^ I think you’re right, but this is a very impressive list!
Thanks for sharing!

Trackback from Link [www.abeontech.com]
65.

Dr.Gonzo (September 3rd, 2008, 1:01 pm)

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

Aşk-ı Memnu (September 10th, 2008, 1:01 am)

thank you
67.

leoo (September 28th, 2008, 12:52 am)

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

Neetu (October 21st, 2008, 9:05 pm)

mind blowing —-))
KEEP IT UP!!
69.

Laura (November 2nd, 2008, 1:50 pm)

Awesome list! Very much appreciated!!
Link [undercovercomputergeek.com]
70.

aşk sözleri (November 5th, 2008, 4:08 am)

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

Shelley (November 14th, 2008, 4:32 am)

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

web hosting (December 3rd, 2008, 3:10 pm)

very nice collection.. its very helpful for never heard Link [] 2.0
73.

nosher (December 20th, 2008, 10:07 am)

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

volkan (December 23rd, 2008, 12:02 pm)

As Çağdaş Paslanmaz we are in your service with rustproof metals and brass decoration Works.

With different product categories we are proud to render highest level quality services to you, our esteemed customers.
Link [www.cagdaspaslanmazmetal.com]
75.

Amitav (January 1st, 2009, 4:41 am)

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

SOUAN (January 7th, 2009, 1:10 am)

REALLY THANKS REAL GOOD STUFF
77.

Benny (January 11th, 2009, 5:40 am)

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

ilyas (January 16th, 2009, 5:54 am)

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

web dizayn (February 25th, 2009, 7:10 am)

really really thanks for that!
80.

ppat (February 26th, 2009, 12:47 pm)

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

ppat (February 26th, 2009, 12:56 pm)

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

airbagtamiri (March 18th, 2009, 1:14 pm)

Link [www.airbagtamiri.net]
83.

sume (March 18th, 2009, 9:53 pm)

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

ask siirleri (March 21st, 2009, 2:28 pm)

Http://www.hicran.net Seocu Ferhat
85.

solexy (April 23rd, 2009, 9:35 am)

thx, fine list
86.

lily (May 10th, 2009, 7:49 am)

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

ba (May 10th, 2009, 4:57 pm)

.

.
88.

www.gelkeyfim.com (May 17th, 2009, 5:00 am)

thank you
89.

Tharik (May 25th, 2009, 3:33 am)

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

osuss (May 31st, 2009, 10:00 pm)

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

monir (June 20th, 2009, 9:18 am)

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