Photoshop Button Maker

In this simple tutorial, we’re going to create a clever little way of making little buttons using a couple of layers and one interchangeable image layer. As always you can download the sample PSD at the bottom of the tutorial to follow along and copy layer styles out of.


Step 1:

Start by drawing in a colored background. I’ve used dark brown/greys here and used a subtle radial gradient. Then in a new layer, draw a circle and fill it with a color. It doesn’t matter what color you use; I’ve used green here.


Step 2:

Next we are going to apply some layer styles. We’re using two types of Inner Shadow (one using Inner shadow and one using Inner glow). Also we have a subtle Gradient Overlay and a Drop Shadow and a bit of Satin. I’ve chosen these to try to make the object look 3D by using shadows at the edges curving away and a radial gradient to make it look like light is hitting the middle. The satin is just to add a bit of extra something!

Anyhow, rather than going through the exact settings, just download the source and right-click the layer to Copy Layer Style.


Step 3:

This is what the circle looks like with the layer style applied, kind of cool!


Step 4:

Next using the Circular Selection Tool, we draw an ellipse which is longer horizontally than it is vertically (as shown). Create a new layer and draw a radial gradient from white to transparent in it. Note that you want to drag the gradient so that total transparency occurs outside of the selection (i.e. the white part has a bit of a sharp cut off when the selection area ends).

When you’re done, rotate the ellipse by about 30 degrees. This is our main highlight.


Step 5:

Now duplicate the highlight layer. Switch the first one’s visibility off for a moment so you can see what you’re doing, and then hold down Ctrl and click on the second highlight layer to select its pixels. Then hit the down and left arrows a few times and press delete. This should leave you with a thin bit of highlight (as shown).


Step 6:

Switch your first highlight layer back on. Then duplicate the second highlight and rotate it down the bottom left as shown. And now you have your button style!


Step 7:

So next we want to make the button interchangeable. To do that, we simply get the main green layer and set the Fill to 0%

Fill is a bit like Opacity except that if you make something 0% Opacity then you make the layer styles transparent too, whereas if you make it 0% Fill, the layer styles are still visible. This is perfect for us because we get rid of the green, but still have everything we need to make our buttons. Now all we need to do is slot something underneath.


Step 8:

So I grabbed a British flag and you can see it here underneath the button and how the 0% Fill is working.


Step 9:

All you need to do is hit Ctrl and click on the circle layer to select that sized circle, then press Shift+Ctrl+I to invert the selection, go to the flag layer, and hit delete. And you’re done! One button!


Step 10:

I then created a few extra buttons using some random pictures. Oh and the "Button Maker" font I used is called "Dynamoe" in case you are wondering!

Others

Circle Hover Effects CSS3
Circle Hover Effects with CSS3 Transitions
Radial Blur
Create attractive effect from photoshop of your photo.
Draw a Mobile ΓΆ€“ Photoshop Tutorial
Draw a Realistic Samsung Galaxy S2. To follow this tutorial, you will need the following resources...
Clean and Stylish CSS3 Form
This article is about creating a form using some of CSS3 properties. You can easily customize the style.

SIGN UP FOR NEWSLETTER

Sign up to received our free newsletter!
Name:
E-mail ID:

MOST READ

Views: 4945 Times
Photoshop Button Maker READ MORE
Views: 2640 Times
Met Police to extract suspects mobile phone data READ MORE
Views: 2737 Times
Apple and Samsung bury differences over iPad launch READ MORE
Views: 5477 Times
Three mistakes I made with my last laptop READ MORE
Views: 7000 Times
How To Enable/Disable Usb Port? READ MORE

Home|IT News|Computer Tips|Video Tutorials|Download Softwares|Subjects|Contact Us
Copyright © 2018. Jumbo Education (Information Technology). All rights reserved.
Free counter and web stats

Large Visitor Globe