Creating a Slick and Clean Button in Photoshop

Setting Up and Shape

The first step is to find a good resource for styles that you can explore. The downloaded resource zip file should be uploaded in Photoshop. To demonstrate more clearly here, specific dimensions will be used. The button here will have a width of 250px and a height of 50px. To fit both the “idle” and “rollover” positions, double the size (100px). Move a guide to the 50px mark to make a clear line between the top half of the document and the bottom half. Go to View and see that ‘Ruler’ is checked to ensure that Rulers are turned on. Then, drag a horizontal line from the Ruler to the middle of the page (50px marker).

Start by setting the radius of the rounded corners to 3px and turn on the Rounded Rectangle Tool. Move the shape so that it covers the top half of the page. As you’ll soon see, it doesn’t matter what color the shape is. This shape’s width should be 250px, and its height should be 50px. You can select the area around the rounded rectangle shape by holding down Ctrl and clicking on the shape layer. Make a new layer and call it “Idle” while the selection is still on. Then you can fill the selection by going to fill in Edit while the new layer is active.

Back To Top

Layer Styles and Gradient

Now it is time to add some layer styles by double-clicking on the idle layer in the layer stack. Include a Gradient Overlay in your image to access the Layer Styles dialogue box. To access the Gradient Editor Dialogue box, double-click on the Gradient that you want to edit. You can set your required Color Stops for the right, left, and midpoints by adjusting. You can also add inner shadows and edit blending and opacity. For this guide, the Blending will be set to Normal and Distance and Size to 2px.

You can enhance it even more by adding gradients. Make a new layer above the Idle layer and call it, let’s say, radial gradient. Change the color of the background. By holding down Ctrl and clicking on the Idle layer, you can make a selection around the rounded rectangle shape. Then go back to the layer called radial gradient. Then, use the Gradient Tool and change the style of the gradient to a radial gradient. When you click on the gradient, the Gradient Editor box will appear. Select the Foreground to Transparent Preset in the Gradient Editor dialogue box. Make sure that the rounded rectangle shape is still selected and that the Radial Gradient layer is the active one. Once again, check to see if Rulers are on. Drag from the top of the selection to about 30px below it while the Gradient Tool is selected. Lastly, set the Radial Gradient layer’s opacity to your desired level.

Back To Top

Creating Rollover State

To create the rollover state shape, first duplicate the Idle and radial gradient by clicking on each one while holding down the Shift key, then right-clicking to open the context menu. Choose Duplicate Layers from the drop-down menu. Click on the duplicated layers in the Layers palette and then use the Move Tool to move them to the bottom half of the document.

They should be renamed, for instance, Rollover for Idle copy and radial gradient rollover for the radial gradient layer. Everything will stay the same except for the colors. Double-click the Rollover layer, and the Layer Styles dialogue box will appear.

The penultimate step is to add the text. You can choose the font style, size, alignment, and added effects. After duplicating the text layer for the rollover state, you will be done with creating the button on Photoshop!

Back To Top