达芬奇画:Photoshop Button Maker

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

Step 1:

Start by drawing in a colored background. I’ve used dark brown/greyshere and used a subtle radial gradient. Then in a new layer, draw acircle 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 typesof Inner Shadow (one using Inner shadow and one using Inner glow). Alsowe 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 atthe edges curving away and a radial gradient to make it look like lightis hitting the middle. The satin is just to add a bit of extrasomething!

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 islonger horizontally than it is vertically (as shown). Create a new layerand draw a radial gradient from white to transparent in it. Note thatyou want to drag the gradient so that total transparency occurs outsideof the selection (i.e. the white part has a bit of a sharp cut off whenthe 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 visibilityoff for a moment so you can see what you’re doing, and then hold downCtrl and click on the second highlight layer to select its pixels. Thenhit the down and left arrows a few times and press delete. This shouldleave you with a thin bit of highlight (as shown).

Step 6:

Switch your first highlight layer back on. Then duplicate the secondhighlight and rotate it down the bottom left as shown. And now you haveyour 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 youmake it 0% Fill, the layer styles are still visible. This is perfect forus because we get rid of the green, but still have everything we needto 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 toselect that sized circle, then press Shift+Ctrl+I to invert theselection, go to the flag layer, and hit delete. And you’re done! Onebutton!

Step 10:

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

Sample PSD