Button User Interface

Photoshop Basics: Button User Interface Design Tutorial

For beginner, creating Buttons is easy way to learn Photoshop. Today, I want to show you how to create web button using Adobe Photoshop. This tutorial will teach you how to create your own buttons for your website or your mobile application interface. I hope you will like this button user interface design tutorial and feel free to share your opinion with us.

Other useful photoshop tutorials:

Button User Interface Design Tutorial: Final Preview

Button User Interface Design Tutorial

Tools and Resources

Tools and Resources

Tools

These following photoshop tools are used in this tutorial.

  • Text Tool
  • Rounded Rectangle Tool

Lets start to create our web button,

Step 1

Open Adobe Photoshop, and create a new Photoshop document. I am going to create a new document of 520 x 520 px with White color #ffffff background.

Web Button Tutorial

Step 2

Using the Rounded Rectangle Tool create a rectangle with white color and name it layer Base. Rectangle size is 170px by 70px and Radius size 10px.

Go to Layer > Layer style and add a stroke with #b6b1b1 on the base layer as shown in preview.

Using the Rounded Rectangle Tool

Step 3

Using again the Rounded Rectangle Tool to create an other rectangle on base
rectangle with #a280a5 color. Rectangle size is 60px by 60px and Radius size 10px.

Create a Web Button

Now we are applying some Blending Options on this layer follow these steps.

Inner Glow

Inner Glow

Bevel and Emboos

Bevel and Emboos

Gradient Overlay

Gradient Overlay

Stroke

Stroke

After applying these blending options in which result we get a amazing effect as shown in preview below.

Applying Blending Options

Step 4

In this step we select the Type tool or Text tool (T) and type any text as you like, but I have written Home text with Cabin font and font size is 20 as shown in preview below.

Type Home Text

Step 5

Now we are applying Drop Shadow to this text layer. Go to Layer > Layer style and add a drop shadow with #6e3972 color.

Drop Shadow

Wawo! Finally, we have successfully create a cool web button.

Final Preview

Button User Interface Design

I hope you have enjoyed this button user interface design tutorial and look forward to your comments. Don’t Forget to Follow TutorialChip on Twitter or Subscribe to TutorialChip to Get the Latest Updates on Giveaways, Tutorials and More for Free.

email

Related Posts

Separator Line 200x200
Icon
Making of Work Makes One Free
Icon

Interesting Posts

About abie

I am a blogger, web designer, graphic designer, and overall art lover!