How To: Make a Simple Web 2.0 Style Button

Posted By: Scott


Web 2.0 is all the rage it seems. It's a very simplistic, easy to use design style that's taking over the web. Today I'm going to show you how to make a Web 2.0 style button for your website using Photoshop.

If you do not want to design your own styles or gradients, you can check out this website for some very nice premade styles. I am going to be using them for this tutorial(it also makes this possible to be done in under 5 minutes).

Start out by creating a new document in Photoshop 300 pixels wide and 140 pixels high. (You can vary the size depending on how big you want the button.)


Create a new layer (CTRL+SHIFT+N) and, using the styles you imported to Photoshop from the website specified, choose a color scheme for your button.


Select the Rounded Rectangle Tool (U) and create a rectangle on the page. Make sure you have the style selected from the top.



Adding Text

Now add some text. You can choose what kind of text you want to use, its up to you. Next, duplicate that text by right clicking it and selecting Duplicate Layer. Press CTRL+T and right click the box to flip it vertically. Align the text up so it is directly underneathe the other text. Now grab the eraser tool and mouse over your text. You will see an error like icon, click anywhere on the text and it will ask you if you want to Rasterize this layer. Choose yes. Basically this turns the layer into plain pixels, rather than the text format. You can edit it just as you would brushstrokes now.



Now, to add the mirror effect, get out the eraser tool and set the Hardness to 0% by right clicking and moving over the slider. Set the size to around 70px. Now hold SHIFT and make a streak across the text, near the bottom to give it a faded effect. Adjust the opactiy of the layer in the Layers menu to around 25-50% depending on how visible you want the mirror effect to be.


For some finishing touches, right click your Original Text and click "Blending Options". From the right menu, choose "Drop Shadow" and add a drop shadow with around 25-50% opacity. Do this with the Button background as well.

There it is! All done, and in no time at all!


Enjoy your shiny new web 2.0 style button! As always, feel free to leave comments, questions, or hit us up with an email at thetechjuice@gmail.com.