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

Browse Button


1. Create a new document (200*200) and fill the background with #000000 using the paint bucket tool. We're going to make a browse button for a proxy template for example... The text in the button can be changed and so it can be used for everything. A download button, upload button, submit button, etc...

image 1

2. Now use your custom shape tool with the shape shown in the first screenshot and insert it on your design so you end up with something like (second screenshot) after this step is finished. The foreground color isn't really important since we're going to adjust the blending options later on and add a gradient overlay. But make sure you press your shift button while adding the shape so it has a nice symmetric and round shape...

image 2

image 3

3. This step is easy, just go to the blending options (layer - layer style - blending options) and adjust all the settings like shown in the 4 screenshots below...

image 4

image 5

image 6

image 7

image 8

4. Now use your elliptical marquee tool to select a round shape like shown below. This is where we'll add the gloss for the button to make it more attractive. Also create a new layer (layer - new layer) for this shiny effect.

image 9

5. Grab your gradient tool and use the settings from picture 1 to create a gradient like shown in picture 2... Make sure the new layer from step 4 is selected!

image 10

image 11

6. Now go to your custom shape layer and right click on it to rasterize this layer or go to (layer - rasterize - layer). Then use you magic wand tool to select the shape and go to (select - inverse). Now make sure you switch back to the layer with the shine on it and press delete!

image 12

7. Now you can just add some text (microsoft sans serif with a size of 24px and the blending mode set on overlay). You can use this for a download button, upload button, submit button, etc... You can also insert this neat button into a proxy design or anything else!

Browse Button Tutorial: Final Result



Author's URL: PhoNuts.org
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 "Browse Button"

Only registered users can write comment

No comments yet...