Web 2.0 Tutorials Round-Up
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
2. Adobe Software – Adobe Photoshop
3. Adobe Software – Adobe Photoshop
7. Gradient Styles & How To Make Dashes
8. Creating a page curl in Photoshop
9. Creating patterns in Photoshop CS2
Logos, Logotypes
12. Jelly Remake
15. 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
19. Web 2.0 Logo | Designphase
20. Web 2.0 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
31. 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
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
42. Toxiclab.org – Photoshop – Web buttons tutorial
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
51. Banner Navigation Tutorial
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
63. The Web 2.0 Secret Weapon – Thoughts and errata from Miles Burke.
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
kiro
March 10th, 2007 1:33 amNo, 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
Anthony
March 10th, 2007 5:41 amSmashing Magazine really needs to stop kicking so much ass. You make all the other design blogs look bad.
Great work!! Keep it up!!
Baz
March 10th, 2007 6:50 amThis is now my most read RSS feed…keep it up guys!
rats
March 10th, 2007 7:35 amDoes anyone know where I can get DIN Schriften for free (the font)?
Jon
March 10th, 2007 7:50 amIt’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.
Mohamed
July 22nd, 2010 3:31 amNo 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
Mink
March 10th, 2007 7:54 amGreat list. Thanks. Adding Smashing Magazine to my google home page RSS feeds.
D.B.
March 10th, 2007 8:03 amAll 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.
bgates
March 10th, 2007 10:02 amIf 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.
Chris
March 10th, 2007 10:31 amWow. This is a ton of great information.
I just wish someone would make something similar, but for GIMP instead of photoshop.
J David
March 10th, 2007 10:37 amToo bad my tutorials didn’t make it… I guess not many people use Fireworks anymore…
Benjamin A. Wendelboe
March 10th, 2007 6:19 pmThis is perfect! Thank you! A lot of great inspiration here!
Benjamin A. Wendelboe
March 10th, 2007 6:20 pmJ David, I’d like to see them! I live in Fireworks..! The cooles app ever..
Leandono
March 10th, 2007 8:32 pmGreat! and thanks for the P.S!
Leandro D´Onofrio
eburhan
March 10th, 2007 8:39 pmAwesome !!! Thank you very much.
Cennetteyim sanki :)
Pedro
March 11th, 2007 4:21 amI 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!
yul
March 12th, 2007 5:27 pmany good tutorials about how to design original and never-seen websites? ;)
Laurens
March 19th, 2007 3:20 pmgreat list! thanks.
lawton chiles
March 30th, 2007 6:01 amDoes 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.
mohammed
April 11th, 2007 10:46 pmthank u for all the great effort may god bless you all
Clay
April 18th, 2007 5:02 am…I love you.
Sasha cute
April 22nd, 2007 8:06 amThis 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..
Koalajoe
April 24th, 2007 12:09 amGood collection,
thank you.
Webice
May 7th, 2007 5:22 amVery impressive list.
I found Photoshoplab a great resource.
Valentine ofili
May 22nd, 2007 6:56 pmThis is simply amazing. All these tutorials Rock. Thank you all. Thank God for you all
treedy
May 25th, 2007 11:10 pmThanks for links.
AlexSpb
June 1st, 2007 5:12 pmThank you very much / Большое спасибо!
Smith
July 17th, 2007 2:29 pmThanks for links!
Jeff Adams
July 23rd, 2007 6:20 amwow! 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!!!
Max
August 3rd, 2007 2:52 amVery helpful list!
Thank you!!!
Painter
August 15th, 2007 6:39 pmI’ll now try to use No.35…
Thanks for links!
kale kasa
September 1st, 2007 12:07 amThanks I love you Web 2.0
Kirill Gurbanov
September 3rd, 2007 4:45 amGreat post, thanks! Really nice collection!
Sandman
November 19th, 2007 12:37 amReally useful data. Thank you very much to bring this to us ! I have some work to do now … :)
pcf
November 20th, 2007 6:37 amMany 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.
Alberto
November 22nd, 2007 3:37 amExcelent information about web 2.0.
Jeff Adams
January 2nd, 2008 2:17 pmi 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.
J Browning
January 12th, 2008 11:43 pmI’ve been on this site for 3 days now trying the tutorials. Thanks alot man
Lesli
January 15th, 2008 3:55 pmInteresting info. about web 2.0 badges.
Roxanne
January 21st, 2008 9:25 amThanks for the list. This is great stuff and extremely helpful. =)
Benji
February 5th, 2008 1:57 amAll 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!
kurt
February 18th, 2008 11:53 amvery nicee
Ring
February 20th, 2008 6:44 amRecently 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!
John Raul Joven II
March 18th, 2008 7:03 pmVery 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.
genc akım
March 25th, 2008 6:40 amvery nice text..
Ali
March 25th, 2008 10:01 pmVery nice
Thank You .
Ty Maier
March 26th, 2008 9:57 amThank you!
Excellent work!
ctraltdel
March 26th, 2008 8:47 pmI was thinking web 2.0 is based on someone skills,
chaoman
May 1st, 2008 7:51 amGreat list. Bookmarking this page for my future reference. There are some really interesting designs. Maybe it’s time to redesign my site.
I agree
June 5th, 2008 11:34 pmI 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.
Lee
July 25th, 2008 11:11 amSome 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?
Chelsea
August 7th, 2008 2:26 pmHaha, 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!
MsTrisBeats
August 12th, 2008 11:21 amMy oh My!~ This is a great site..I’ll be stuck here for hours :-)
Thanks for sharing all this!~ I’ve subscribed for sure
kandagatla
August 12th, 2008 5:03 pmthis is very useful materials to us
thank u
eduardo
August 27th, 2008 8:48 amweb 2.0 is mucho more than glossy icons… infortunatly, smashing desapointed me at this time…
Dr.Gonzo
September 3rd, 2008 1:01 pmweb 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.
Aşk-ı Memnu
September 10th, 2008 1:01 amthank you
leoo
September 28th, 2008 12:52 amI have been looking for this information for days. Thanks a lot.
Neetu
October 21st, 2008 9:05 pmmind blowing —-))
KEEP IT UP!!
aşk sözleri
November 5th, 2008 4:08 amharıka olmus elınıze saglık super
Shelley
November 14th, 2008 4:32 amVery cool..very clear…excellent stuff – thanks for sharing!
web hosting
December 3rd, 2008 3:10 pmvery nice collection.. its very helpful for never heard Web 2.0
nosher
December 20th, 2008 10:07 amsorry, 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.
Amitav
January 1st, 2009 4:41 amthis 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.
SOUAN
January 7th, 2009 1:10 amREALLY THANKS REAL GOOD STUFF
Benny
January 11th, 2009 5:40 amI 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.
ilyas
January 16th, 2009 5:54 amthank you very much for this amazing websites :) this will help me so much mith websites design, and the new wave of web2.0
web dizayn
February 25th, 2009 7:10 amreally really thanks for that!
ppat
February 26th, 2009 12:47 pmthese are some amazing tutorials i m trying them out for my website, headers and icons great stuff thanks..
ppat
February 26th, 2009 12:56 pmi have been trying out some logos for my site and these tutorials are awesome. thank you
sume
March 18th, 2009 9:53 pmGr8 collection & useful data.
Thank you very much to bring this to us !
solexy
April 23rd, 2009 9:35 amthx, fine list
lily
May 10th, 2009 7:49 ambarf. I almost entirely skip a website with “web 2.0″ style. lack of originality. great list! y’all rock.
www.gelkeyfim.com
May 17th, 2009 5:00 amthank you
Tharik
May 25th, 2009 3:33 amwow! 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!!!
osuss
May 31st, 2009 10:00 pmgreat stuff guys!! you guys rock as usual it will be even better if you have more about fireworks I’m becoming a fireworks fan…
monir
June 20th, 2009 9:18 amkhub useful information….bhalo ..it helped me a lot.
GoodMorningArts.com
September 3rd, 2009 2:28 pmSimply Amazing Article . . . Thank you and God Bless!
Webdesign@Posh-Creation
September 29th, 2009 6:47 amvery 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~
tejpal singh
October 24th, 2009 7:03 amit’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
Danny
October 24th, 2009 8:31 pmThank you so much for gathering up all these tutorials in one page. A nice reference !
dekoratif aynalar
December 12th, 2009 11:58 amdekoratif ayna
dekoratif aynalar
Jax
March 25th, 2010 4:24 pmGreat list, thanks for posting dude this really help me a lot to get some ideas. Keep it up.
Richard Graham
May 11th, 2010 8:20 amGreat list, love your site!!
Tara
June 8th, 2010 12:12 pmWow, I feel behind. This was posted 3 years ago???!!! Oh well, still useful and relevant =]
www.em-do.com
June 10th, 2010 12:57 pmThanks mem
David
August 3rd, 2010 6:45 amThis 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
Harry
August 19th, 2010 2:26 amNothing new here… :(
Joe
January 8th, 2011 2:04 pmI like it. it’s great to work with web 2.0
Hemant Vyas
January 28th, 2011 12:01 amGreat list, thanks for posting dude this really help me a lot to get some ideas.
SexySky
February 9th, 2011 4:07 pmThis 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.
Jodie St. John
July 26th, 2011 9:31 amHi
I know web design, HTML, CSS, JAVASCIPT and PHP. What is Web Design 2.0
Saurabh Chaudhary
November 1st, 2011 3:31 amnice tutorials