Creating Awesome Photoshop Buttons

September 23, 2010

Every designer needs to know how to create awesome Photoshop buttons that they can add to their designs. Buttons are especially essential to web designers as they are used all over the web. Just how exactly do designers create these fancy Photoshop buttons? Today, I am going to teach you the steps in this intermediate Photoshop tutorial. If you get lost anywhere along the way, I have also included a short video tutorial at the end of this post. Good luck and have fun!

Step 1: The basis

Create a new document in Photoshop that is 500px by 250px. Fill the background with a dark grey colour (#acacac). Create a new layer, set your foreground colour to a light grey (#e4e4e4) and select the Rounded Rectangle Tool (U) from your toolbox. Set the radius to 70px and draw out a light grey rounded rectangle on your stage.

Step 1: creating awesome photoshop buttons

Step 2: Adding styles

You are going to set the Drop Shadow, Inner Shadow, Gradient Overlay and the Stroke all in the Layer Styles dialogue box. To open this dialogue box, go to Layer -> Layer Style -> Drop Shadow in the main menu. Click on Drop Shadow and set Opacity=65%, Distance=2px and Size=2px.

Drop Shadow

Click on Inner Shadow and set Opacity=15%, Distance=0px and Size=5px

Inner Shadow

Click on Gradient Overlay. Leave all the default settings as they are however, change the gradient so that it is like that pictured below. Set the colours to #dedede, #f6f6f6 and #ffffff, from left to right. Click on 'New' to add this custom gradient to the presets section. We will need it again for the stroke.

Gradient Overlay

Click on Stroke and set the Size=1px, Position=inside and Fill Type=Gradient. Select the same gradient that you used in the gradient overlay section however, set the angle to -90.

stroke

Step 3: Adding some shine

Create a new layer. Command+click on the button layer so that the button shape is selected. Go back to your new layer. Using the Rectangular Marques Tool (T), hold down the Alt key and subtract half of the selection area. Only half of the buttons shape should now be selected. Select your gradient tool, set the default black-and-white foreground-background colours. Pull out a gradient from the bottom to just above the top of the button. Set the layer mode to Screen and the layer Opacity to 20%. This adds a little shine to the top half of your button.

Step 4: Adding text

Select your text tool and add your text to your button. You can also add some graphics to your button here if you would like. That's it! This is what you should end up with:

Awesome Photoshop Button Final

Here is a tutorial video to help guide you through the steps outlined above:




Also in Pixellogo blog archive

Adobe launches Document Cloud, Acrobat Mobile and Fill & Sign Apps

March 19, 2015

Adobe is one of those great companies out there that is constantly pushing the envelop, testing new ideas and reinventing the way that we interact with technology and our environment. The people at Adobe are ambitious, creative and inventive. The newly unveiled Document Cloud by Adobe is a testament to this fact. Adobe has done it again and this time with Document Cloud, they are...

Read More

6 Free Color Resources for Logo, Graphic and Web Designers

March 06, 2015

Color is very important in every project. Designers use color to captivate their audience, convey emotions and establish associations. Color is often what attracts users to a design and it is a vital component in every design. Color excites us, stimulates us and draws in our eyes. Color is everywhere and it subtly moves us every day.

Designers are very aware of the power of color....

Read More

20 Creative & Inspiring Workspaces

February 04, 2015

If you are a creative person then you definitely need a creative workspace. It is important that you have a very special sanctuary in which you can conduct your business. Your workspace should be inspiring and motivating. It should spur you to action, spark your imagination and and trigger originality. Your workspace should be personal and it should be...

Read More