Smashing Magazine we smash you with the information that will make your life easier. really.
Web 2.0 Tutorials Round-Up
March 10th, 2007 in Tutorials | 163 Comments
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.
Visual effects
1. Three girls posing in the night Illustration
2. Adobe Software - Adobe Photoshop
3. Adobe Software - Adobe Photoshop
4. Create a software box - Photoshop Tutorial
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
25. How Web 2.0 Logos are Drawn
26. Flickr Photo Download: LOGO2.0 part I and II
Text Effects
30. 3D Text Professional Tutorial
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
36. Create a Shiny 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
43. Photoshop Buttons Create glossy button for web 2.0 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
48. Design a Web 2.0 tab with Photoshop
49. PXLGFX- Perfect Pixel Patterns
51. Banner Navigation Tutorial
52. Shadowness / Tutorials - Website Header Tutorial #3 by Rinn
53. Shadowness / Tutorials - Professional Looking Website Header by Rinn
54. Sleek and Spicy website header Tutorial
55. Vista Style Layout - Talk Mania Forum
56. Web 2.0 “STYLE” web layout - Free Psd
57. Web 2.0 Layout - Tutorial Kit
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 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
masone (March 10th, 2007, 2:34 am)
veery similar to those on drweb.de…
Link [www.drweb.de]
internet (March 10th, 2007, 3:11 am)
идите нахуй со своим дванолем
Skakunov Alex (March 10th, 2007, 4:40 am)
2 internet:
интересно, а чего такие нервы?
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!!
Baz (March 10th, 2007, 6:50 am)
This is now my most read RSS feed…keep it up guys!
TheMacThinker (March 10th, 2007, 7:15 am)
Great stuff guys, thanks for compiling this for us. It is like web2.0 demystified.
————-
Link [www.mostofmymac.com]
rats (March 10th, 2007, 7:35 am)
Does anyone know where I can get DIN Schriften for free (the font)?
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.
Mink (March 10th, 2007, 7:54 am)
Great list. Thanks. Adding Smashing Magazine to my google home page RSS feeds.
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.
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.
criticalerror (March 10th, 2007, 10:06 am)
five stars selection, i think your work it’s great…
please continue….
—————————-
Link [antoniocampos.no-ip.com]
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.
J David (March 10th, 2007, 10:37 am)
Too bad my tutorials didn’t make it… I guess not many people use Fireworks anymore…
Binny VA (March 10th, 2007, 12:04 pm)
A collection of tutorials on how to create Web 2.0 Graphics using the open source Gimp application…
Link [binnyva.blogspot.com]
Benjamin A. Wendelboe (March 10th, 2007, 6:19 pm)
This is perfect! Thank you! A lot of great inspiration here!
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..
Leandono (March 10th, 2007, 8:32 pm)
Great! and thanks for the P.S!
Leandro D´Onofrio
eburhan (March 10th, 2007, 8:39 pm)
Awesome !!! Thank you very much.
Cennetteyim sanki :)
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!
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!
yul (March 12th, 2007, 5:27 pm)
any good tutorials about how to design original and never-seen websites? ;)
Víctor (March 13th, 2007, 12:55 am)
que buenos tutoriales, son increibles!!!
Dogen (March 13th, 2007, 7:17 pm)
Юзеров можа и заебали, а простому дизигнеру подспорье, авторам респект!
reynan (March 17th, 2007, 5:26 am)
You Guys Rock!
btw here’s my version of the Web2.0 Designr I.D
Link [www.deviantart.com]
Laurens (March 19th, 2007, 3:20 pm)
great list! thanks.
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.
mohammed (April 11th, 2007, 10:46 pm)
thank 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 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..
Cengiz (April 23rd, 2007, 12:15 am)
thanks,
Robert (April 23rd, 2007, 8:10 am)
Binny VA and Chris,
Link [binnyva.blogspot.com]
Koalajoe (April 24th, 2007, 12:09 am)
Good collection,
thank you.
Webice (May 7th, 2007, 5:22 am)
Very impressive list.
I found Photoshoplab a great resource.
Valentine ofili (May 22nd, 2007, 6:56 pm)
This is simply amazing. All these tutorials Rock. Thank you all. Thank God for you all
treedy (May 25th, 2007, 11:10 pm)
Thanks for links.
AlexSpb (June 1st, 2007, 5:12 pm)
Thank you very much / Большое спасибо!
Deen (June 26th, 2007, 9:00 pm)
thanks for the links, they are great
HD Ready TVs
Smith (July 17th, 2007, 2:29 pm)
Thanks for links!
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!!!
jay (July 25th, 2007, 10:50 pm)
Link [www.photoshop-pack.com]
Max (August 3rd, 2007, 2:52 am)
Very helpful list!
Thank you!!!
Painter (August 15th, 2007, 6:39 pm)
I’ll now try to use No.35…
Thanks for links!
kale kasa (September 1st, 2007, 12:07 am)
Thanks I love you Web 2.0
site ekle (September 1st, 2007, 8:27 pm)
very useful tutorials you are great! thanx
Kirill Gurbanov (September 3rd, 2007, 4:45 am)
Great post, thanks! Really nice collection!
zeynep (November 6th, 2007, 10:47 pm)
Thanks.
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 … :)
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.
Alberto (November 22nd, 2007, 3:37 am)
Excelent information about web 2.0.
contentgrrl (December 1st, 2007, 2:27 am)
Bittbox has a vector 2.0 logo tutorial, Link [www.bittbox.com].
There’s also one more raster 2.0 logo tutorial for Fireworks, Link [firetuts.com].
Link [contentgrrl.wordpress.com]
Easy Task (December 27th, 2007, 10:23 pm)
Номер 25 легко делается :) Просто выделить надпись по цвету букв, а затем расширять выделение и заливать :) надо на заметку взять :)
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.
youtube (January 6th, 2008, 4:17 am)
thanks
msn nickleri (January 6th, 2008, 4:18 am)
thanks very nice infos
hazal kaya (January 6th, 2008, 4:07 pm)
thanks a lot
php indir (January 9th, 2008, 5:12 am)
thanks
J Browning (January 12th, 2008, 11:43 pm)
I’ve been on this site for 3 days now trying the tutorials. Thanks alot man
Lesli (January 15th, 2008, 3:55 pm)
Interesting info. about web 2.0 badges.
thefreewebstuff.com (January 17th, 2008, 12:37 pm)
Online free button maker
Link [www.thefreewebstuff.com]
bartın (January 20th, 2008, 4:44 pm)
cia
Roxanne (January 21st, 2008, 9:25 am)
Thanks for the list. This is great stuff and extremely helpful. =)
Mucize Sigara (February 4th, 2008, 1:13 am)
Link [www.mucizesigara.com]
Dali (February 4th, 2008, 1:15 am)
Link [www.dalisalyangozkremi.com]
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!
indir (February 17th, 2008, 9:09 pm)
Link [www.bolindir.com]
kurt (February 18th, 2008, 11:53 am)
very nicee
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!
Film indir (February 22nd, 2008, 8:53 am)
Thanks.
tanicos web 2.0 design (February 24th, 2008, 3:08 am)
great tutorials thanks
Download (February 24th, 2008, 3:12 pm)
dssd
meenjoy (March 7th, 2008, 3:32 am)
спасибо за замечательные туториалы
Address Design (March 12th, 2008, 3:56 pm)
Best from the best ! I’like it. Web2.0 design rulez !
Thanks for tuts!
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.
genc akım (March 25th, 2008, 6:40 am)
very nice text..
Ali (March 25th, 2008, 10:01 pm)
Very nice
Thank You .
Ty Maier (March 26th, 2008, 9:57 am)
Thank you!
Excellent work!
ctraltdel (March 26th, 2008, 8:47 pm)
I was thinking web 2.0 is based on someone skills,
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.