Web 2.0 Buttons Are Really Really Easy

April 17th, 2008 by admin

ok, this is basically a tutorial. I’m just going to demonstrate how easy it is to get this “Web 2.0″ style.

This is the gimp, but it shouldn’t be much harder in photoshop(heck, I bet you could do it in paint if you wanted to!)

ok, so let’s make a new image.

Then we’ll fill it with whatever background color we want (I’ll use black because it matches my theme)

Now we’ll add some text just for effect.

Now comes the web 2.0 part. There’s a few different styles, so I’ll go through them right quick.

Make a new layer. Layers > New Layer make the height half the height of the image.

Now here’s the styles you can do:

Quick And Easy
Gradient
Curved

Quck And Easy

Fill the top layer with white.

Now go in to the layers menu. Main Gimp Window > File > Dialogs > Layers.

Then adjust the opacity of that top layer to less (I put mine at 25)

And finally, put your text on top.

Gradient

ok, now for this method, just select the gradient tool.

Next we’ll select “FG to Transparent”

Then make sure you’re in your new layer.

Then run the gradient tool from the bottom of the IMAGE top the top of the image.

Then go to the layers menu (Main gimp window File > Dialog’s > Layers) and then reduce the opacity of that layer to less than it is. (I used 65)

And then, finally, put the text layer on top.

Curved

Now we’ll do web 2.0 curved style.

Fill your layer with white.

take the elipse tool.

make the layer taller by about 20 pixels, then select it just like this.

ctrl+X should erase it.

Then you want to go in to the layers panel. (Main Gimp Window File > Dialogs > Layers) and lower the opacity of this layer to less than it is (I used 30).

And there you have it. Try it with the gradient too.

As you can see, all of the buttons simply require lowering the opacity to create an illusion of depth.

Yep, that’s everything!

Comment if you want :)

-Zech

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Sponsored