How To: Make Quick & Easy Buttons using Custom Shapes

Posted: August 11, 2010 by xlr83r in Tutorials
Tags:

TutorialEver needed a good button for your site? Running out of ideas?

Take a look at the Custom Shapes menu. While many of them look quite cheap

in black and white, it’s a simple matter to turn them into awesomely modern, professional buttons.

First off, create a new document with the measurements below. You can click any of the pictures to see a close-up.

dimensions

Next, you obviously open the custom shape tool. For those of you who are new to the Photoshop scene, you will have to click and hold your mouse on the rectangle tool, and a pop-up menu will appear. You can then open the shape selector. I chose a rather simple forward/play button, which, as you will see, can be spiced up immensely. After that, while holding shift to constrain proportions, draw the shape.

img 1-custom shape

img2-custom shape

Now it’s time to split our image into multiple layers, so we can handle each aspect differently. You can separate the arrow from the circle, but make sure you do nothing else. Pressing Ctrl+Shift+J (Cmd+Shift+J for mac users) extracts a selected area to a new layer, so go ahead and use the Magic wand tool to select, and then the key combination to extract. But make sure you rasterize the layer first by right clicking on the layer and selecting Rasterize, or else Photoshop won’t let you do anything to it.

img3-rasterize and separate layers

Now we’ll start with the circle layer. Choose two nice red colours, and select them as your foreground and background colours. I used # 850404 and # cb0000.  Choose the inside of your circle area with the magic wand tool. Select the gradient tool, and fill the centre with a smooth gradient.

img4 aplly red gradient

After that, we can move on to the arrow. Repeat the same steps as before, select the area, and apply a smooth gradient, only this time use a black-to-grey one. I chose #00000 and # 272626. Make sure you apply it diagonally.

img5 apply black arrow gradient

Time to move on to the black circle. Yet again, we will do exactly the same thing as the last step, with the same gradient as well, except for the direction of the gradient, which should still be diagonal, only going the other way.

img6 - complete

Now we have an insanely awesome, yet simple button that gives  a quality, professional look. Great for flash.

final

You can download the source files, JPG and PSD, from the downloads widget in the sidebar.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s