digg

Join DiggAbout

The Digg Crew wants to hear your thoughts!
Please take our short survey about Digg and potential feature ideas.

How To: Design for Web 2.0

photoshoplab.com — This Photoshop tutorial will show you how to easily create some of the more popular "Web 2.0" design effects.

show profanity settings
expand all
  • progolferyo, on 10/12/2007, -30/+3Sweet, awesome tutorial...
    • chris9902, on 10/12/2007, -4/+32yeah because nothing says "i'm on the cutting edge of technology" when your site looks like everyone elses.
    • adidax, on 10/12/2007, -2/+23if by awesome, you mean stupid. (start sarcasm) I mean, how can you call it a Web2.0 tutorial without rounded corners??? (end sarcasm)

      How many more tutorials on making gradients and reflections are going to get pushed to the front page?
    • soogy, on 10/12/2007, -4/+5Yeah, awesome, because according to this story, "the glass effect" was popularized by Apple.

      This "article" is a joke. "How to Design a Header and Sound like a Moron While Doing it" would be more appropriate.

      By the way, legbend has been trying to spam his site for a while. Nothing useful, thus far.
    • rasterbator, on 10/12/2007, -3/+13Oreilly and Associates just called. They want their trademark back. ;-)
    • affanjam, on 10/12/2007, -2/+1Coralized

      http://www.photoshoplab.com.nyud.net:8090/web20-design-kit.html
  • BamaStangGuy, on 10/12/2007, -13/+1Digg.t
  • strictnein, on 10/12/2007, -3/+16No... I want it to be easier! Can't someone just create a Web 2.0 web site creator so I can just click a button and make my website all AJAXed and pretty? With lots of curved corners!!!
  • dave_colorado, on 10/12/2007, -3/+16so web 2.0 effects are basically two-toned menus, a logo with a reflection, and a bright star that says "New!".

    the VC's are going to get seriously burned over this.
    • dime, on 10/12/2007, -3/+14The Vietcong are designing these days? Persistent little buggers...
    • dclowd9901, on 10/12/2007, -4/+1[anime reference] I think he meant Victoria Turdeski. Wait... that's a 'T'... [/anime reference]
    • M4v3R, on 10/12/2007, -0/+7You forgot the "beta" in right corner of logo of every web 2.0 site.
  • dvdjon, on 10/12/2007, -8/+9Mirrors : http://www2.shrani.si/files/a593273.png | http://upitfree.com/v2/out.php/i1175_a.png

    Already digg *****/sloooooowwwwed
    • hijinks, on 10/12/2007, -0/+2why are people flagging his mirror as negative.. sure its images but its a mirror
  • r2d7, on 10/12/2007, -3/+7How does this relate to the web 2.0'ness that is AdSense, BitTorrent, WikiPedia, cpc, syndication or web services?

    Until you've read what web 2.0 is don't write about it. It has absolutely nothing to do with design trends.

    http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
    • chris9902, on 10/12/2007, -0/+5"content management systems --> wikis".... how are they even the same things?

      O'Reilly is so hung up on changing everything to make some money from it. What do they say, "the only way to make money from the future is invent it"
    • biffbobfred, on 10/12/2007, -1/+0I don't really think it relates to web 2.0 (web 2.,0 to me means a level of interactivity that the first web sites didn't use) but it's not just what o'reilley said either. They didn't make Google, they didn't make Flickr. They don't define what's cool in this world.
    • brandizzle, on 10/12/2007, -0/+3This isn't Web 2.0 at ALL. These are the trends that came around the same time as the term "Web 2.0"...the design does NOT make the website. I really wish people would stop calling their website new and innovative because they added a shiny gradient to it.... in this case, a really ugly shiny gradient.
  • scinju, on 10/12/2007, -1/+2Aren't all of these just a _little_ to overused? I've found them a little cliche now. And do we really need another tutorial for it? Most of it seems pretty intuitive. I don't use Photoshop much, I've only played around with it a little, but I've made nearly the exact same thing on my own without a tutorial.

    And also, as r2d7 said, does this really help anyone with making a new, unique, and creative Web 2.0 site? If you've got the idea, it can't be that hard to get a high schooler to make such a simple logo/banner for $20.
  • flap, on 10/12/2007, -2/+6I can't stand the wy this site / tutorial is layed out...and how is this web 2.0 and dear god why are we stil using the term web 2.0!
    • r2d7, on 10/12/2007, -2/+4It's not web 2.0, but kids who think web 2.0 = design trends will say so anyway.
  • davidmcbrown, on 10/12/2007, -9/+0http://www.apponcell.com/
  • aplusplus, on 10/12/2007, -1/+9So, basically all I need to create a web 2.0 site is common sense and a copy of photoshop? Wow!
    • flap, on 10/12/2007, -1/+7I think you need to know how to spell AJAX as well, but thats about it.
    • aplusplus, on 10/12/2007, -5/+8AXAJ?

      edit:
      *****
    • tiptone, on 10/12/2007, -3/+2Nope, just a copy of photoshop. :)
  • Aurarch, on 10/12/2007, -3/+19MAKE IT STOP PLEASE MAKE IT STOP
  • SuperGhost, on 10/12/2007, -3/+4This is sad, it is in no way related to "Web 2.0" *cough* AJAX *cough* - AJAX could care less about how your images look or are created in Photoshop. Bad post *thumbs down*
  • noahhoward, on 10/12/2007, -0/+2For any kid reading this thinking who seriously want to be a web designer do yourself a favor and ignore this. Part of being a designer is being original. Following a tutorial on overkilled effects is anything but.

    Now sure you can use this as a stepping stone and get more creative with it but please. There are too many sites like this already.
  • JiveTurkeyPunk, on 10/12/2007, -0/+10uh...wow... reflective text... i'll wait for Web 3.0 effects
  • Gravytrain, on 10/12/2007, -6/+2Look you guys, You are obviosuly not artists. these are basic effects used in alot more things than websites. Knowing how to do these will help you, knowing around PS's tools will allow you to fool around and make effects without tutorials next time. It doesnt say "How to MAKE A WEB 2.0 SITE. it says how to design. It doesnt say "HOW TO MAKE A COOL SITE DIFFERENT THAN EVERYONE ELSES!!!" Nope.
    You all love to pick stuff out like this and yell and scream about it.

    Well done tutorial.
    • paradoxic, on 10/12/2007, -3/+0There are some good tips here. All too often on this site people just complain about common terms (web 2.0, internet 2.0, ajax, etc etc.).

      Just because you spend all day reading news and get sick of hearing the same technology terms doesn't mean this content is bad. It's a decent tutorial, which provides some techniques that any designer can add to their pallette (or make some varients of).
    • noahhoward, on 10/12/2007, -0/+0Your out of your mind. This photoshop tutorial tells you how to make a few gradient effects. Even when taken out of it website context it is STILL not original or amazing.

      For your information I am a designer.
  • rasterbator, on 10/12/2007, -0/+8Same post in 1992:
    How to Make Drop Shadows Like the Pros
  • dime, on 10/12/2007, -2/+4
    I actually just threw up in my mouth a little bit.


  • magicjj, on 10/12/2007, -3/+2if that's web 2.0, i'm not enthused.
  • TheKidd, on 10/12/2007, -0/+5Going forward I am ignoring all Web 2.0 tutorials because I don't want to be sued for copyright infringement.
  • rabiddogma, on 10/12/2007, -0/+5Umm I thought the Web 2.0 thing was more about functional interactivity and less about graphic design. Any graphic designer can make something LOOK all Internet trendy, but it's a whole other thing to create a great web application. This is LAME.
    • sinfony, on 10/12/2007, -0/+1I hope Web 2.0 is about graphic design as much as about "functionality," because it doesn't matter how functional something is if it looks like *****.
  • joaob, on 10/12/2007, -4/+0dugg it. nothing innovative but cool nonetheless.
  • wolver1ne, on 10/12/2007, -1/+1Just a Photoshop tutorial of some trendwhore-ish stuff. Nothing to do with Web2.0.
  • oskob, on 10/12/2007, -0/+4Eeeeww! What is it with you diggers? Coding geeks and design just doesn't make a good match. How could someone even bother to make a tutorial for this? The author just picked the worst shades ever of two very beautiful colors. No feeling whatsoever. This guy is to the designing world what those terrible singers on pop idol are for the music world. How can you say that this is good design?!
    "Oh my god! Gradients, reflections and a lime star! I just covered it all! And the star says 'NEW!' for no good reason. It's bullet proof!"
    There's more to it than that! If you just can't tell what makes this design effort suck, maybe you should just leave it to the professionals. Now beat it!
  • jokerr, on 10/12/2007, -0/+7For the love of all that you consider holy please stop with the "Web 2.0" tutorials. This is getting rediculous! "Look at my site everyone, I've got rounded corners." "Hey everyone we've got Web 2.0(TM) here." "Here it is everyone, the world's best Web 2.0 site out there." PLEASE STOP!!!!
  • hijinks, on 10/12/2007, -2/+2i like how they used gimp.. i've been a photoshop user for ages and also a big linux user so I was dealing with photoshop in crossover office but a year ago decided to use gimp and i really like it for my needs..
    • raccettura, on 10/12/2007, -0/+2I'd second that.

      Since web 2.0 is partially about budget.
  • waxpoet, on 10/12/2007, -1/+0it's been dugged to death...could someone post a mirror link? mucho libre appreciated
  • v3xt0r, on 10/12/2007, -2/+1fanboy, fanboy, put the link down!!
    fanboy, fanboy, you look like a clown!!
  • marcuschi, on 10/12/2007, -1/+0hahaha aw man this was ***** hilarious...
  • Cynoclast, on 10/12/2007, -0/+5The term "Web 2.0" should be banned from digg. It's just a new buzzword for a collection of old technologies.
    • oskob, on 10/12/2007, -0/+0Well, yes? Someone thought different?
    • tzmguitarist, on 10/12/2007, -0/+3It's about to be a TRADEMARKED buzzword, too - if O'Reily has anything to say about it.
    • av4rice, on 10/12/2007, -0/+1Ban "AJAX" too. If a site uses it well, say it is nicely scripted. If it's mediocre or it sucks and you need to slap the AJAX label on it to make it sound better, it doesn't deserve to be around.

      Similar situation with the Web 2.0 label. If it's a good site, it's a good site. It shouldn't need special buzzwords to inflate its value.
  • cbeach, on 10/12/2007, -2/+1MAKE IT STOP!
  • particlewave, on 10/12/2007, -1/+2There are new people on this site every day, hell every hour. Stop being so self-righteous just because you sit at you computer all day and know "everything there is to know" about web design and all the new catch phrases. This tutorial might actually inspire someone who is new to this whole thing and cause them to create the next great looking/working website. And I think that we all agree that the inter-web as a whole could use a facelift, even if it is just making look "web 2.0". In other words, stop all the elitest b.s. and make room for the noobs. geez!
    • brandizzle, on 10/12/2007, -0/+2If they follow anything in this tutorial I guarantee their website won't be anywhere close to great looking.
    • neondiet, on 10/12/2007, -0/+2
      @particlewave

      "And I think that we all agree that the inter-web as a whole could use a facelift"

      Hahahahaha, so I guess by noobs you're talking about yourself then! Here's what Wikipedia has to say about people who use the term "inter-web":

      http://en.wikipedia.org/wiki/Interweb
      " Interweb thus implies ignorance of the most basic terminology"

    • particlewave, on 10/12/2007, -0/+1oooo, burn!
  • sblowes, on 10/12/2007, -0/+1Hey, photoshop tutorial... cool with me. Learning to mimic what's currently hot is a step towards innovating new design techniques. And like it or not, Web 2.0 has been defined by this graphic style by the masses.
  • pedrovalente, on 10/12/2007, -0/+1I think you're being unfair and didn't get the underlying sarcasm. That tutorial is obviously a joke. ;)
    • particlewave, on 10/12/2007, -0/+0Fair enough, I bit. I just don't like all the sarcasm, there's enough of that in everyday life without it infesting the Diggnation. Can I get an Amen!?!
  • AquaCurve, on 10/12/2007, -0/+1If only you knew what Web 2.0 was..
  • neondiet, on 10/12/2007, -0/+1
    You forgot that first you need a Lobotomy 2.0, followed by a new chip implant Model 2.0 and a firmware upgrade to Marketing ***** 2.0, before you can properly Design for Web 2.0

  • tizz66, on 10/12/2007, -0/+1Is this for real?

    Excluding all the discussion about about web 2.0 etc. etc., this tutorial is basically showing you how to make a gradient and star in Photoshop? Seriously? Who, that has paid $100's for Photoshop, doesn't know how to do this?

    This is below beginner level.
    • Ellord, on 10/12/2007, -0/+0How many people have actually paid $100s for Photoshop?
  • mathew_bug, on 10/12/2007, -0/+1Wow, this really sucks. And it's lame.
  • cybersonic, on 10/12/2007, -1/+0Not a bad tutorial. Why is Digg becoming so much like slashdot in its comments, sure this doesn't have to be on the front page, but its a good design tutorial none the less.

    Yes, gradients et al have been overused but its a good guide for the designers at work to incorporate a trend (remember a lot of orange, grey and black sites back in the late nineties?) to their designs.
  • Cine, on 10/12/2007, -0/+1Please say this is a joke. Because you've got to be colorblind to actually think that the limegreen star and the dark blue header goes together.

    And, wow, uber talent! He did gradients and reflection. GASP. :O
  • imack, on 10/12/2007, -0/+0I know and use these this allready, but I digg it nonetheless because it's rare to see a photoshop tutorial site that isn't flooded with Bewel and Emboss.
  • alivesurf, on 10/12/2007, -0/+0I think this is a well done tutorial as well. yeah, it is pretty basic but it does help you get the creative juices flowing and you never know when you might want to use one of those effects... who cares if its not the "web 2.0" that you want it to be... get over it.
  • mahalie, on 10/12/2007, -0/+0I'm glad this tutorial uses 'web 2.0' in the title - that's how I found it (via Google) and it delivered exactly what I was looking for. Hasn't anyone here ever heard of irony? The writer just noticed that a lot of newer so-called web 2.0 sites look a LOT alike. He shows you how to create a trendy-looking site. I was looking for quick inspiration to throw together some mockups for a blog and I included a 'web 2.0' theme as a joke. This totally helps, I don't do GUI all the time and I forget a lot of stuff like creating patterns and shotcuts.
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.