Pixelmator Tip #41 – How To Create UI Buttons – The Basics

Ninja Share:

In this tutorial we show you how to create simple UI buttons using some basic techniques in Pixelmator. This article is part of a new series of tutorials for creating UI/UX designs in Pixelmator.

Preview

We are going to show you how to create the 9 most common types of buttons for UI / web design, so we have split up this article into a number of parts. Here is a preview of the different types of buttons you’ll learn to create. So stay tuned or subscribe to our newsletter, so that you don’t miss the next part.

UI / Web buttons are fundamental to any user oriented design. They are primarily used as “call to action” buttons, and placed in strategic points in UI / Web designs. The key to great button design is to be not only minimal, but attention grabbing, while blending in with the whole design.

The Basic Rounded Button

Rounded buttons are common place in web design. They can range in variety with brightness, colours, and highlights; however the best looking rounded buttons are found in flat designs, which is the trend these days.

part-1-banner

So let’s get started.

Step 1:

Create a new document 640x480px.

1

Step 2:

In order to have a little contrast, so that we can view the buttons better (than over a transparent or plain colour background), we added a very subtle radial gradient to our background layer. The gradient settings are from colour #f3f3f3 to colour #c6c6c6. We just clicked and dragged from the top middle of the canvas to about halfway.

Bonus Tip: hold down Shift to draw the gradient in a straight line.

2

Step 3:

Next we are going to create our base button. Select the rounded rectangle shape from the main toolbar.

3

 

Draw a rounded rectangle in the centre of the canvas of size 300x80px. Set the fill colour to white, and the stroke to 1px and also white colour. Next zoom right into the top left of your rounded rectangle. Grab the blue shape handle, and first drag it all the way to the left, so we get a straight corner, and now move it to the right by 5px to get a nice rounded rectangle.4

Great and now we have our basic rounded rectangle button.

5

Step 4 – Let’s add some colour

Now let’s add some colour to our button. Select the rounded rectangle shape, and open the layer styles panel (select fx to the left of the layer in the layers panel or hit CMD+7).

For both the fill colour and the stroke colour, we set it to a nice radiant blue #28bcfb.

6

At this stage, we have a nice rounded rectangle, but this can also be called a flat button.

7

Finally, we finish off the button by adding in some text. We used Helvetica set to font size 36pt, and colour white and placed the text in the middle of the button. Use the automatic alignment guides to help you centre the text on the button.

8

Now we have our first simple rounded button completed.

button-1a

and remember you can also vary the colour to suit  your overall design. Here is our button in a basic silver grey colour. You can use simple colour variations to create different hover states for buttons.

button-1a-grey

 Step 5 – Shadows and Highlights

Let’s add in some shadows and highlights. In order to make our flat button pop off the page, and give it a little depth, we can simply add some shadows and highlights.

Select the rounded rectangle shape layer, and open the Shape Styles panel. Enable both the Shadow and the Inner Shadow options. For the Shadow, we will use a slightly darker colour blue (you can simply use the colour picker and reduce the brightness of your colour for a darker shade), set the angle to 270 degrees, with an offset of 2px, blur of 1px, and 100% opacity. This will give us a button shadow of 2px directly beneath the button.

Next for the highlight, we actually use the inner shadow option. In this case set the colour to white, angle at 90 degrees, with an offset of 2px, blur of 1px, and 50% opacity. This will give us a highlight at the top of the button as if there was a light source just above the button.

9

Our button now has some more depth.10

and really pops off the page. This is considered a 2D style button or more commonly web 2.0 buttons, which use this traditional format.

button-1b

Remember you can change the colour of your button at any point, so how about this variation with a nice flat orange #f1c40f.

button-1b-orange

Step 6 – Engraved Text Effect

Next we want to make the text look like it is sculpted into the button. The easy way to do this is to add some offset shadow.

Duplicate the text layer, and set the text colour to black (or set it to a really dark version of your button colour).

11

Place the duplicated text layer directly under the original text layer. Once the black text is directly underneath the white text, simply move the black text by 1px up to create a basic offset shadow.

13Our text looks like it has been sculpted into the button.12

And the button looks really cool.

button-1c

Even with a nice basic yellow, the offset shadow makes a difference, and every small detail counts when making an attractive design.

button-1c-yellow

Step 7 – Add some texture for realism

You’ll notice that our buttons still look like simple graphics up to this point; however in some designs they need a more realistic look and feel. A quick way to achieve this is to add some noise texture to your button.

Simply duplicate the rectangle shape (do this only after you are happy with the button colour), align the new shape directly on top of the old shape. The automatic shape guides will help you do this. Right click on the new shape layer, and select Convert To Pixel.

14

Now open up the Effects panel (CMD+3) and select Stylize, and the Noise effect.15

Drag the Noise effect onto the new layer you created and set it to noise amount 1 and select monochrome.16

At this point we also changed the layer blending option to Overlay or Hard Light for the new layer. Play around with the different blending options to get a range of different effects.17

With a basic noise texture, we’ve now given our button a brushed texture effect.

button-1d

and this looks really good in any number of colours depending on your design.

button-1d-green

Step 8 – Adding A Pattern

Another way to add texture/depth to your buttons is to use a pattern.

We chose diagonal noise pattern from Subtle Patterns and placed it on top of our button layer as a new layer.

18

Open up the Effects panel (CMD+3), and then select Tile, and then Affine. Drag and drop the Affine effect onto the pattern layer.19

Set the Affine Tile settings to 0 degree angle, scale of 100, and 100% stretch, and 0% skew.20

This will repeat the pattern and fill the entire layer. 21

In order to restrict this pattern to our button, we simple right-click on our pattern layer, and select Create Clipping Mask. We also set the layer blending option for the pattern layer to Multiply. 22

This will essentially give your button the pattern texture, while also preserving all the other layer styles you have already set. 23

And the pattern texture combined with all the previous effects, give us a really cool textured button.

button-1e

Again feel free to change the colours of your button to suit your overall style.

button-1e-pink

Great, we’ve reached the end of our first UI tutorial in Pixelmator, and now you know how to create you very own basic rounded buttons in a variety of different styles.

part-1-banner

Next time, we’ll explore how to create glossy buttons.

If you don’t want to miss it, follow us on our social networks: facebook, twitter, tumblr, pinterest or simply subscribe to our newsletter.

SIGNUP TO GET NOTIFIED:
Our best content on designing with Pixelmator. Delivered Regularly!
You'll learn exactly how to become a Pixelmator Ninja using our tutorials and templates. We won't send you any spam. Unsubscribe at any time.

Comments

  • April 21, 2016

    […] Tip #48 – How To Create UI Buttons – Metallic Buttons Pixelmator Tip #41 – How To Create UI Buttons – The Basics Pixelmator Tip #46 – How To Design A Simple Sexy Login Form Pixelmator Tip #19 – How […]

Oops. Comments are now closed on this post!