The most versatile section of the Photoshop tutorials, it includes guidelines on drawing and editing of different objects in Photoshop.  Home Photoshop Drawing Techniques Web 2.0 Button II

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:

image 1

Step 2: Make it stand out

Apply the following settings:

image 2

image 3

image 4

image 5

image 6

(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

image 7

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:

image 8

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

image 9

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

image 10

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

image 11

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:

image 12

The Final result:

Web 2.0 Button II Tutorial: Final Result

Download the PSD file here.



Author's URL: Pulse GFX
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Web 2.0 Button II"

Only registered users can write comment

No comments yet...