Web 2.0 Button

Step 1: Creating the Workspace:

Begin with a 200 x 100 Pixel document and fill in the background color as white (#FFFFFF)

Step 2: Creating the base layer:

Make a new layer and make a selection with your rectangular Marquee tool like this:

Then go to Select > Modify then choose Smooth. Set the radius as 7px like so:

After this your shape selection should look like this:

Finally as a temporary thing, right click within the dotted outline and select fill. You can fill in the shape any colour at this point as the colour of the shape will be changed to a final colour later on in the tutorial. I'm going to choose black as the temporary colour!:

Step 3: Give your base layer some colour:

Okay so now we have our button shape at it's basic stage. Now like I said this black colour was only going to be temporary and now we are going to add what will be the final colour to the button so on the shape of the button layer right click Blending Options and select the tick box on Gradient Overlay and apply this gradient setting:

Set everything exactly how my gradient settings are. Take note of the opacity make sure you also set that to 70%. The lowered Opacity setting will be explained later on in the tutorial. After all this our button should now look like this:

Step 4: Give the button a stroke setting:

Next it's time to apply a stroke setting to the button so again right click on the shape layer and click Blending Options and then go to Stroke and apply these settings:

Our button should now look like this:

Step 5: Apply some filters:

Next to make it more button like were simply going to add in a Inner Shadow and Drop Shadow. So once again right click on the shape layer and for the....

Inner Shadow apply these settings:

The Quality setting which is cut off on this screenshot image doesn't need to be changed so no need to worry about that setting!

Drop Shadow Settings:

Again the Quality setting for the drop shadow doesn't need to be changed therefore it is not shown.

After all of this our button should look like this:

Step 6: Downloading/Creating/Adding the Pattern File

Now the button as it is now could be used as a button in website but to make it truly Web 2.0 we're going that step further! Now this next bit requires you to have a pattern saved in your Photoshop application which is this:

If you don't have this pattern in your pattern overlay area then your going to need to create it. So for step 5 this will be telling you how to create the pattern. If you already have the pattern then go straight to step 6!

Okay so for the people that don't have this pattern. Go to File > New Document and then create a new 6 x 6 document and zoom in on your new 6 x 6 document as far as the zoom will go like this:

Once your 6x6 document is zoomed in at maximum grab your pencil tool and make sure the pencil size is at 1px. Then start adding you pencil mark from top right hand corner and then head down from the left in a diagonal fashion and keep going until you reach the bottom left hand corner. You should end up with something like this:

Once you have that pattern it's time to save it. So go to Edit > Define Pattern and then it will ask you to name your pattern your saving. I called mine Scanline 6x6 but you can call your whatever you want! Once you've named your pattern click OK!:

So now the pattern is saved in your Photoshop Application. You can now close the 6x6 pattern document because we no longer need the actual document, and because we have it saved forever in the pattern's area.

Okay so this step is for either the user that already has this pattern in there Photoshop Application or for the person that has just created it in step 5!

Okay so lets go back to our button shape layer and right click on the layer and select Blending Options and go to Pattern Overlay and should now see the pattern we just created in the selection area like this:

Once you've located the pattern double click the thumbnail of it and then it should appear in the bigger image where the Pattern: text is. Once that's done apply these settings to the pattern!:

After that click OK and our pattern will be present on our button and should look like this:

The pattern overlay was the main reason for all of the lower opacity levels. So if you were wondering why the opacity levels were being changed then that's why!

The final step is to add a simple duplicate shadow underneath our button now to do this right click on our button layer and then click Duplicate Layer so you have two layers in your layers panel. Like this:

Step 7: Adding a nice reflection effect:

Now on the Duplicated layer go to Edit > Transform then go to Flip Vertical. Your duplicated shape will have flipped vertically, now this change won't be visible because the duplicated layer is in the shape proportion as the normal layer. So on the duplicated layer nudge the duplicate shape down to about this length:

I slightly nudged the normal shape up a bit so more of the duplicate shape could fit into the document area. once your happy with this positioning of the shape lower the opacity of the duplicate layer to about 19% like this:

After that has been done right click on the duplicated layer and go to Blending Options one more time and de-select the Stroke, Inner Shadow and Drop Shadow settings and then click OK. So now the layer only have the Gradient and pattern Overlay pattern on. Once you've done this your duplicate shape should look like this:

And finally grab your Eraser tool and select the brush as a blur one like this:

Then on the duplicated layer shape drag your eraser blur brush across the shape slightly. For the best result hold the shift key on your keyboard and brush across the shape but go across the shape near the end rather than the top of the shape otherwise you'll end up rubbing out most the shape altogether. After the eraser blur brushing I got this result:

The Final Result:

Download the PSD file here.