Smashing Magazine - we smash you with the information that will make your life easier. really.
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
The Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Author of several books. Runs the business.
(1 votes, average: 5.00 out of 5)
Loading ...- 81 Comments
- 1
- 2March 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!!
- 3March 10th, 2007 6:50 am
This is now my most read RSS feed…keep it up guys!
- 4March 10th, 2007 7:35 am
Does anyone know where I can get DIN Schriften for free (the font)?
- 5March 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.
- 6March 10th, 2007 7:54 am
Great list. Thanks. Adding Smashing Magazine to my google home page RSS feeds.
- 7March 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.
- 8March 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.
- 9March 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.
- 10March 10th, 2007 10:37 am
Too bad my tutorials didn’t make it… I guess not many people use Fireworks anymore…
- 11March 10th, 2007 6:19 pm
This is perfect! Thank you! A lot of great inspiration here!
- 12March 10th, 2007 6:20 pm
J David, I’d like to see them! I live in Fireworks..! The cooles app ever..
- 13March 10th, 2007 8:32 pm
Great! and thanks for the P.S!
Leandro D´Onofrio
- 14March 10th, 2007 8:39 pm
Awesome !!! Thank you very much.
Cennetteyim sanki :)
- 15March 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!
- 16March 12th, 2007 5:27 pm
any good tutorials about how to design original and never-seen websites? ;)
- 17March 19th, 2007 3:20 pm
great list! thanks.
- 18March 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.
- 19April 11th, 2007 10:46 pm
thank u for all the great effort may god bless you all
- 20April 18th, 2007 5:02 am
…I love you.
- 21April 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..
- 22April 24th, 2007 12:09 am
Good collection,
thank you. - 23May 7th, 2007 5:22 am
Very impressive list.
I found Photoshoplab a great resource. - 24May 22nd, 2007 6:56 pm
This is simply amazing. All these tutorials Rock. Thank you all. Thank God for you all
- 25May 25th, 2007 11:10 pm
Thanks for links.
- 26June 1st, 2007 5:12 pm
Thank you very much / Большое спасибо!
- 27July 17th, 2007 2:29 pm
Thanks for links!
- 28July 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!!!
- 29August 3rd, 2007 2:52 am
Very helpful list!
Thank you!!! - 30August 15th, 2007 6:39 pm
I’ll now try to use No.35…
Thanks for links!
- 31September 1st, 2007 12:07 am
Thanks I love you Web 2.0
- 32September 3rd, 2007 4:45 am
Great post, thanks! Really nice collection!
- 33November 19th, 2007 12:37 am
Really useful data. Thank you very much to bring this to us ! I have some work to do now … :)
- 34November 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.
- 35November 22nd, 2007 3:37 am
Excelent information about web 2.0.
- 36January 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.
- 37January 12th, 2008 11:43 pm
I’ve been on this site for 3 days now trying the tutorials. Thanks alot man
- 38January 15th, 2008 3:55 pm
Interesting info. about web 2.0 badges.
- 39January 21st, 2008 9:25 am
Thanks for the list. This is great stuff and extremely helpful. =)
- 40February 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!
- 41February 18th, 2008 11:53 am
very nicee
- 42February 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!
- 43March 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.
- 44March 25th, 2008 6:40 am
very nice text..
- 45March 25th, 2008 10:01 pm
Very nice
Thank You . - 46March 26th, 2008 9:57 am
Thank you!
Excellent work!
- 47March 26th, 2008 8:47 pm
I was thinking web 2.0 is based on someone skills,
- 48May 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.
- 49June 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.
- 50July 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?
- 51August 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!
- 52August 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 - 53August 12th, 2008 5:03 pm
this is very useful materials to us
thank u
- 54August 27th, 2008 8:48 am
web 2.0 is mucho more than glossy icons… infortunatly, smashing desapointed me at this time…
- 55September 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.
- 56September 10th, 2008 1:01 am
thank you
- 57September 28th, 2008 12:52 am
I have been looking for this information for days. Thanks a lot.
- 58October 21st, 2008 9:05 pm
mind blowing —-))
KEEP IT UP!! - 59November 5th, 2008 4:08 am
harıka olmus elınıze saglık super
- 60November 14th, 2008 4:32 am
Very cool..very clear…excellent stuff – thanks for sharing!
- 61
- 62December 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. - 63January 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. - 64January 7th, 2009 1:10 am
REALLY THANKS REAL GOOD STUFF
- 65January 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.
- 66
- 67February 25th, 2009 7:10 am
really really thanks for that!
- 68February 26th, 2009 12:47 pm
these are some amazing tutorials i m trying them out for my website, headers and icons great stuff thanks..
- 69February 26th, 2009 12:56 pm
i have been trying out some logos for my site and these tutorials are awesome. thank you
- 70March 18th, 2009 9:53 pm
Gr8 collection & useful data.
Thank you very much to bring this to us ! - 71April 23rd, 2009 9:35 am
thx, fine list
- 72May 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.
- 73May 17th, 2009 5:00 am
thank you
- 74May 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!!!
- 75May 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…
- 76June 20th, 2009 9:18 am
khub useful information….bhalo ..it helped me a lot.
- 77September 3rd, 2009 2:28 pm
Simply Amazing Article . . . Thank you and God Bless!
- 78September 29th, 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~ - 79October 10th, 2009 8:08 pm
Если не сложно… хочу сайт про яхты сделать. У тебя вроде сайт на вордпрессе – не мог бы подсказать где морских шаблонов взять? Плиз – скажи тут (я на рсс подписался) или кинь линку на мыло Hafodax(гав-гав)gbail.com
Заранее спасибо – пост грохни если чо :) Сорри что не в тему. - 80October 24th, 2009 7:03 am
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
- 81October 24th, 2009 8:31 pm
Thank you so much for gathering up all these tutorials in one page. A nice reference !
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- @ilmv oh ok then ;)
- @ilmv no, the SM Book will not be out of date :) We made sure it contains universal design, usability and marketing principles.
- Apple ad bombing Windows 7 on Google - http://bit.ly/28ctPq
- Atatonic - a fresh CSS framework - http://bit.ly/4oOV2w (via @umutm)
- @HrvojeKC yes, that's an interesting idea. Maybe when the waiting is over, we'll write a detailed post about it.
- @benbeltran thanks, Ben, your support means a lot to us.
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