Web 2.0 Button II

Step 1: Creating the Workspace:

Start with a 300 x 100 Document and fill in the background with a nice white (#FFFFFF)

Make a new layer and grab your rounded rectangle tool (U) and set the radius to 7px, make a selection like so:

Step 2: Make it stand out

Apply the following settings:

(Take note of the text above) If you do not have the pattern file scroll down to the download section and download the .zip file, you will find the pattern file and instructions on how to install the pattern inside

Step 3: Installing the pattern file (Only follow if you do not have this pattern file)

The following instructions are located in the readme.txt file that will be within the .zip file but they are included in this tutorial so you don't have to stop half way through it all:

To load the pattern into your Photoshop Application:

1. Go to the Pattern Overlay Option on Blending options

2. Where it shows a preview of the pattern click the little arrow to show the entire menu of patterns.

3. Look for a smaller arrow which will be within a small circle button.

4. Click it and it display a menu of options. Select load pattern.

5. If you haven't already unzip the .zip archive that came with this tutorial and extract the pattern file to somewhere on your computer.

6. Once extracted On the Load patterns window specify where the pattern is located and click OK. The pattern should then be loaded in!

7. Go back to Step 2 and complete the pattern overlay setting

Step 4: Add to the web 2.0 effect

Now you have got all the styles sorted, it's now time to add to the web 2.0 effect. Hold Ctrl on your keyboard and click on the buttons layer thumbnail in the layers panel and grab your rectangular marquee tool and set it to Subtract from Selection. Make a selection over the button like so:

After making your selection you should end up with something like this:

Make a new layer and fill it in with a neutral white #FFFFFF with the paint bucket tool:

Lower the opacity to 18% on the layer to get this effect:

Step 5: Getting that web 2.0 text feel:

Finally for the finishing touch use a web 2.0 type text to give it that web 2.0 feeling. For this tutorial I am using Trebuchet MS, Bold setting, Size 18 Pt with text color as #FFFFFF, add whatever text you like onto your new button:

The Final result:

Download the PSD file here.