How to create a UI button in Photoshop

Adobe Photoshop tutorials provide you with easy steps to create different types of effects in this software.
In this tutorial, however, we will show you a simple and easy method to create a User Interface button from scratch. Here we will also discuss some innovative color combinations, text alignments and blending modes which all together create a nice and simple UI button. In this series, you will also learn to use the button on the web page by entering its HTML codes and completing a whole menu with same technique.
Follow this step by step guide to learn how to create a UI button in Photoshop.


Step # 1 – Drawing a Button Shape

In the first step, select the “Rounded Rectangle” tool amongst the different Photoshop shapes from the menu and set its “Radius” to “5 px”. Now draw a box of “150 px” width and “50 px” height on the blank page. Change this layer’s name to “Base Shape” and double click on it to open the “Blending Options” panel.

Insert a button shape

Step # 2 – Adjusting the Gradient Overlay

Now move over to the “Gradient Overlay” tab and change the “Blending Mode” to “Normal. Once done, set the “Opacity” to “100 percent”, “Style” to “Linear”, “Angle” to “90 degrees” and “Scale” to “100 percent”.

Change the gradient overlay

Step # 3 – Choosing a Gradient Color

In the next step, click on the “Gradient” option and choose the color by entering its code as “2877ac” at the “Location” of “0 percent”. Now choose the color as “87bfs6” at the “Location” of “95 percent” and “c2def1” at the “Location” of “100 percent”. Click on the “OK” button to save these settings and exit.

Select a gradient color

Step # 4 – Adjusting the Stroke Settings

Now move over to the “Stroke” tab and set its “Size” to “1 px”. Once done, choose the “Position” to “Inside”, “Blend Mode” to “Normal” and “Opacity” to “100 percent”. Once done, select the color by entering its code as “2877ac” and click on the “OK” button to apply it.

Change the stroke settings

Step # 5 – Inserting the Label

Now select the “Text” tool and choose the “Fonts” as “Verdana”, “Size” to “30 pt”, “Anti-Aliasing” method to “Sharp”. Once you have selected these settings, choose the “Color” as “White” and enter the button’s text. Now adjust the placing of the text according to the button.

Add a button’s label

Step # 6 – Adjusting the Drop Shadow Settings

In the next step, double click on the layer name to open its “Blending Options”. Now move over to the “Drop Shadow” tab, change the “Blend Mode” to “Multiply” and choose the “Color” by entering its code as “2877ac”. Set its “Opacity” to “100 percent” and set the “Angle” to “120 degrees”. Once done, set the “Distance” to “1 px”, “Spread” to “0 px”, “Size” to “2 px” and click on the “OK” button to apply it.

Change the drop shadow settings

Step # 7 – Inserting an Arrow Shape

Now select the “Custom Shape” tool, choose the “Arrow” shape and draw it on the canvas. Place it next to the text over the button and keep it in the same size as of the lower case text used. Once done, change this layer’s name to “Arrow”, right click on the text layer, select the “Copy Layer Style” option and paste it on the “Arrow” layer. Now select all layers except the “Background” layer and press “Ctrl+G” keys from the keyboard to group them and change its name to “Normal”.

Add an arrow shape

Step # 8 – Duplicating the Button

Once done, duplicate the group by choosing its name as “Hover” and place it below the original image. Now maximize the group and double click on the “Gradient Overlay” option of the “Base Shape” layer.

Create a duplicate layer

Step # 9 – Choosing a Different Gradient

Now click on the “Gradient” option and choose the color by entering its code as “87bfe6” at the “Location” of “0 percent”. Choose the color “2877ac” at the “Location” of “95 percent” and “4c9fd7” at the “Location” of “100 percent”. Once done, click on the “OK” button to save these settings and apply it on the image.

Select a gradient color

Step # 10 – Cropping the Button Image

Now click on the “Rectangular Marquee” from the menu to select the image, to outline the shape made from the rounded rectangle tool selected from the Photoshop shapes. After selecting it, go to the “Image” menu and click on the “Crop” option from the list.

Using the crop option

Step # 11 – Saving for Web and Devices

Once you have cropped the image, go to the “File” menu and select the “Save for Web & Devices” option from the list.

Save the button for web

Step # 12 – Choosing a PNG Format to Save

In the final step, choose the “PNG-24” option from the menu and click on the “Save” button to save this image and you’re done.
You can view other Adobe Photoshop tutorials as well to understand how to create more illustrations in this software.

Select a png format