Posts Tagged ‘tutorial how to make quick easy custom shapes buttons thetalentshowcase design graphic’

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.


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.


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