digg

Join DiggAbout

Discover and share the best of the web!
Learn more about Digg by taking the tour.

How To Create Web 2.0 Effects With Photoshop

sitepoint.com — Using Photoshop, I'll show you how to add Web 2.0 graphic goodness to your site design using non-destructive techniques. It may even take your site from boring to trendy!

Bury
show profanity settings
expand all
  • Oatmeal, on 12/28/2007, -2/+108Here's a better title for this article: How to substitute creativity with design clichés from 2 years ago:
    http://www.modernlifeisrubbish.co.uk/article/8-web ...
    • darnit, on 12/28/2007, -0/+15For all their animosity about the web 2.0 aesthetic, that site sure has a lot of the design features he supposedly loaths.
    • TofuMatt, on 12/28/2007, -0/+1That's actually a really great article/site, and the article links to some pretty cool pages, a couple which I hadn't seen 'til I read it forever ago. There's a 2007 out too, though it's not as scathing, more just observation of some trends.
    • theodenking, on 12/28/2007, -0/+3Here's a better body for this article:
      "Use the gradient tool"
  • scrumpy, on 12/28/2007, -1/+40Why not try some web 3.0 techniques that we haven't seen 1000 times before.
    I'm thinking web 3.0 should have a crumpled paper bag look - something akin to Derelique.

    It may take your site from boring to boring and typical.
  • scrumpy, on 12/28/2007, -1/+50I haven't read the article but I'm guessing gradient and reflection; with, a small beta logo in a star shape and drop shadow.
  • Scheissen, on 12/28/2007, -15/+5go die
  • altgeeky1, on 12/28/2007, -0/+26Web 2.0 means a lot of things, but they all basically revolve around user interactivity NOT "glass effects".
    Note to her boss: She's making fun of you by deliberately misusing terminology.

    For starters, Web 2.0 means user-driven site interactivity, like digg, youtube etc. What she means to say is "glassy effects I saw on a Mac" AKA "Aqua", but when no suitable buzzword exists, show creativity by confusing one that already exists!
    • rusty_g, on 12/28/2007, -0/+2Thank you... i'm glad someone can clarify this, the poor bastard doesn't even know...
    • falafelkiosken, on 12/28/2007, -0/+2Exactly my thoughts, people talking about a "2.0-look" have given web 2.0 a bad reputation as a buzzword that doesn't mean anything
    • copypasterepeat, on 12/28/2007, -0/+1I knew of the true meaning first, but it's only recently that I've realised that when people, (in my case, clients) say "... kind of Web 2.0..." they actually mean "... the glassy look Mac use (and everyone else abuse)...". I reply with, "YouTube links? Digg and RSS functions?" and I get "Oh yeah, those too." Sad that a certain look has become so wide-spread that it's stopped people from designing bespoke sites.
    • petemorley, on 01/23/2008, -0/+0Nice one altgeeky1. You saved me having to type that, I cringe every time I hear the phrase "Web 2.0" used to describe this uninspiring, tired design cliche.
  • mrblue182, on 12/28/2007, -8/+4yes, because all the popular web 2.0 sites look like that...
  • slib, on 12/28/2007, -4/+15This article is useful if you want your website to look like a Mac application from eight years ago. Otherwise, this article is a waste of space, and its author a pedophile/serial killer.
    • goldenratiophi, on 12/28/2007, -0/+1you know who else was a pedophile/serial killer?
      • Rammsteined, on 12/28/2007, -0/+3Your mum?

        Oh god... please shoot me.
  • Frostman3D, on 12/28/2007, -3/+13Web 2.0 really looks like a candy ass internet if you ask me. I'd rather have animated gifs of dripping blood than this *****.
    • jonshipman, on 12/28/2007, -0/+2hooray ripping .WAD files!
    • saisumimen, on 12/28/2007, -0/+7"Web 2.0" is the metrosexualization of the Internet.
  • fluffyturtle, on 12/28/2007, -4/+15Web 2.0 doesn't exist, it's a idiotic term someone who knows nothing about websites pulled from their ass.

    "Our site is NEW and improved with Web 2.0 goodness!"

    When webpages started having flash, that was web version X, when we started seeing pictures appear more commonly that was web version X, when those awesome websites started hijacking your cursor with something annoying, that was web version X (thankfully that version died).

    I am | | close from digging down any articles that even mention web 2.0.
  • fLUx1337, on 12/28/2007, -2/+8The "Web 2.0" was only good when we were in the Web 1.5 era, and people were using overly simple css for the styling, and not taking much care of the letter-spacing and so on.....

    As soon as we started to get very simple designs, like Digg, it was crap. Does anyone even like reflective stuff used everywhere? I can see how it looks good when you have a DVD case on a black marble texture and its reflecting down, but for logos, I don't think it looks good at all.

    I just hope "Web 3.0" becomes a phrase for describing accessibility and simplifying design to create a site which works naturally. But I guess we already have that now with sites like Digg.

    I'm not a web designer, I'm crap at design, I just know what I like, and glossy in most cases is just an excuse for your poor design skills and the lack of ability to get help.
    • mediaspree, on 12/28/2007, -0/+1Its a constant strugle with CEO's who demand "web 2.0" as a buzzword in design and those who understand its a fad and NOT good design. Sure, I can design the best "2.0" design which will look like crap in a year. Or I can design based on simple, clean layouts which scale from year to year. Help me?
  • jtbandes, on 12/28/2007, -8/+1...
  • spect3r, on 12/28/2007, -2/+1So web 2.0 is basically, everything?
    • saisumimen, on 12/28/2007, -1/+3Not even close. You haven't been using this "Internet" thing for very long, have you?
  • felipenunez, on 12/28/2007, -2/+1All I wanted to see was the "View better with Netscape/IE" animated gift back in this article...
  • goldenratiophi, on 12/28/2007, -0/+10thankfully I've got the Web 3.0b and trust me, it has NONE of these overused effects!
    • Midnitte, on 12/28/2007, -2/+0I think the interwebs was updated to 3.1 last night
      • MtheoryX, on 12/30/2007, -0/+1That's only if you're running edge web.
  • LoveYouSomeEric, on 12/28/2007, -0/+13Why are you people digging this? Have all 110 of you never seen a gradient before? Buried for being ***** lame.
  • josho, on 12/28/2007, -2/+25http://*****.com
    all i gots to say.
  • TheWorm, on 12/28/2007, -0/+1Web 2.0 is tired. I would digg this if it was something we haven't al seen done a million times. The web needs some new design trends; It's a good time for creative tech people to lead the pack.
  • Subiejon, on 12/28/2007, -1/+2I'm sick of the web 2.0 logos. Be creative and make something new!
  • ufia, on 12/28/2007, -1/+8Web 2.0 is the animated GIF and embedded MIDI of the new century. In a few years you will look back at your ***** page design, and you will regret every pixels of it.
  • petershizzle23, on 12/28/2007, -5/+6THIS WILL BE GR8 FOR MY PORN SITE!
    • georgetds, on 12/28/2007, -1/+1porn.2 you meant to say, of course.
    • goldenratiophi, on 12/28/2007, -3/+1you're getting dugg down, but meh. I lol'd, so you get +1.
  • Skanadian, on 12/28/2007, -0/+1Yea, just what we need, more Web 2.0.
  • asurroca, on 12/28/2007, -0/+3This is one of the worst thing ever submitted to Digg... but hopefully it gets Dugg up enough for the Digg effect to make the site's server explode...
  • crackintosh, on 12/28/2007, -0/+3I almost want to digg this to see the site go down.
  • benjony, on 12/28/2007, -0/+1As a designer I think this trend is over! It is a trend that had it's run. Designers should be creative and use a functional design which is determined by the type of site. It's called target marketing. And if as a designer, you rely on trends then you lost the principal of branding. Branding lets a product, site, box whatever have it's own identity. It's just plain stupid to keep making graphics that look like this unless they fit the demographic you market to.
  • pulyx, on 12/28/2007, -1/+1wow
    that tutorial overcomplicates stuff to the max.
  • porterfield, on 12/28/2007, -4/+4Buried for use of the term "Web 2.0"
  • Swarms, on 12/28/2007, -0/+2I always love when these design tutorial sites have the ugliest design.
  • LightSpeed4, on 12/28/2007, -0/+5how to create web 2.0 effects with photoshop: type in BETA in everything, put gradients, add reflections, ***** text, and delete vowels from all words
  • chsonNU, on 12/28/2007, -0/+7Can't wait for part 2. "Rounded corners"
  • Takuro, on 12/28/2007, -0/+6Digg doesn't have gradients. Oh noes it's not duh 2.0ness.

    Nice tutorial, but it's ridiculously simplistic. You'll learn more advanced Photoshop tricks just by playing around with the program for 15 minutes. On your own, you could probably figure out how to make gradients (and all the billions of possible "effects" you can make with them) in about 3 minutes.
  • jeexbit, on 12/28/2007, -0/+0well, at least the BLINK tag is back in action... =P
  • solid12345, on 12/28/2007, -0/+1Let's just hope we can bury the 2.0 trend from corporate logos, starting with the UPS shield and going back to the package and the string.
  • blueness, on 12/28/2007, -0/+1Oh please, what we need is another web 2.0 style on the internet.
  • gothicform, on 12/28/2007, -0/+2Pity they can't create a how to not time out website that displays its graphics properly.
  • spectre_25gt, on 12/28/2007, -1/+3Those examples look a little more web 1998 than web 2.0.
  • reddevil3, on 12/28/2007, -0/+1I'm tired of seeing gradients and reflections all over the place. Keep it simple like digg.
  • webtroy, on 12/28/2007, -0/+35 STEPS, 30 SECONDS TOPS, minus the *****...

    TYPE TEXT ---> CTRL-SHIFT drag text to baseline ----> right-click-FLIP-VERTICAL ----> ADD VECTOR MASK ----> gradient tool -50% to baseline...... voila!
  • GunnerMcGrath, on 12/28/2007, -0/+6Web 2.0? More like Photoshop 2.0. This just shows how many digg users are completely out of touch with a) the most basic graphic design and b) slightly less basic (but still pretty basic) terminology like Web 2.0.

    The (stupid) term was coined to describe sites that thrive primarily off of user submitted content (like digg, youtube, myspace, etc.) and not a small collection of set authors. It has absolutely nothing to do with any graphical style and you should be quick to note that few, if any, of the major web 2.0 sites actually make use of these styles.

    So if you're 14 years old and looking to play with your illegally downloaded copy of photoshop for the very first time... no this article is still useless, sorry.
  • riomx, on 12/28/2007, -0/+4Understanding that "Web 2.0" actually refers to community-driven websites, services, applications, etc., if there is still anyone out there that wants to "keep up with the Joneses" in design trends, there is a better tutorial here: http://photoshoplab.com/web20-design-kit.html.

    The one in this story sucked so much balls that I can't believe this girl somehow has a design book out.
  • thejamabides, on 12/28/2007, -0/+1This is stupid. Sorry wanna write more but I'm falling asleep...
  • eanbowman, on 12/28/2007, -0/+1This article is pretty lame. If you couldn't figure out these "effects" on your own then what are you doing in web design? That and they're so overdone now that it's not very "fresh" to center a design around them anymore.

    I usually like Sitepoint but this one is a miss...
  • DjArcadian, on 12/28/2007, -0/+2Am I the only one who noticed that there was no finished product on her webpage?
  • Heidenreich12, on 12/28/2007, -0/+2how can this have so many diggs? This is ridiculous
  • jenshik, on 12/28/2007, -0/+1Oh wow, another Web 2.0 article! This one I can't miss.

    ...I should invent Web 3.0.
    • falafelkiosken, on 12/28/2007, -0/+1if everyone is going to use "web 2.0" as something static w/o adding own ideas, soon someone has too
  • CrushThemTorg, on 12/28/2007, -0/+2I'm glad we caught this Web 2.0 candy-design thing at the very peak of its popularity.
  • halfgook, on 12/28/2007, -0/+13 pages to explain 3 self-explanatory things?
  • hhiroyuki, on 12/28/2007, -0/+2this sucks totally!!!!!!!!!!!
    she cant design for ***** either, all she does is template rubbish!!! WEB2.0 IS NOT REFLECTIONS AND GRADIENTS DAMMIT!!!!
    you are one of those responsible for killing the Web2.0 name and you should be thrown in jail
  • olbap, on 12/28/2007, -0/+2Terrible article. If anything, it should have been titled, "Basic Photoshop Tips for Web Site Graphics." There isn't even a completed "project" at the end. Just a few examples of mind-numbingly easy ***** to do in Photoshop.
  • tommgunn, on 12/28/2007, -0/+1I find it funny people think this is something new.
  • colonelbuckshot, on 12/28/2007, -0/+2Buried as lame. She has no idea what "Web 2.0" means. She has no idea what creativity means either.
  • Fetching more discussions...
    Show 51 - 80 of 80 discussions
  •  

    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.