An Easy Recipe for Simple Buttons

Need to make buttons for your website, iOS app, or presentation icons? Thanks to Artboard’s powerful stacked styles, you can make perfect vector buttons every time.

Final Image

Below is the final image we will be working towards:

Tutorial Details

Program : Artboard 1.3+ for Mac OSX
Difficulty: Beginner
Topics Covered: Style Inspector
Estimated Completion Time: 5 minutes

ATTENTION: As of Artboard 1.7, “shared” styles are no longer part of the default workflow, therefore, references to “New” and “Clone” in this tutorial are no longer current. As of Artboard 1.7, the “New” button in the Format Bar and Style Inspector becomes the “Reset” button. See the Users Guide for more information about shared styles.

Step 1

We’ve started with a new document using the default drawing units (centimeters). Click “New” in the Format Bar (above the ruler) to create a new style. With the Round Rectangle tool, hold the SHIFT-ket and draw a rectangle about 3-cm x 3-cm square (it will be different if you are using a different drawing units). Holding the SHIFT-ket constrains the aspect ratio to make a perfect square. As needed, you can adjust the size in the Geometry pane. Change the corner radius to 0.5-cm.

Step 2

Let’s add a gradient fill to give a glossy surface. Use the Select[s] tool to select the square and open the Style Inspector. With the shape shape still selected, click onto “Fill” in the components list then click the “-” button to remove the component; click onto “Stroke” in the components list then click the “-” button to remove the component. Click the “+” button in the Style Inspector and add a “Gradient Fill” style component. Click twice the “+” on the gradient slider to add two more color stops to the slider. Click onto each gradient slider to change its color and slide to adjust its position as shown below. We are using a green color scheme (we’ve used RGB 156,206,112; 72,162,54; 34,89,43; and 52,135,52 respectively). You can use different colors – just note the progression of color from lightest on the bottom, to medium, to dark, to light at the top. In the gradient-well, hold the SHIFT-key and move the rotation handle so the gradient angle is -90-degrees (holding the SHIFT-key constrains the angle to 15-degree increments).

Wow, you could stop here and you already have a clean looking button with a bit of gloss. In the next steps we’ll add an outline to give it even more depth.

Step 3

A medium-dark outline will add a slight convex appearance to your button, as if it were a little pillowy. Click the “+” in the Style Inspector and add a “Stroke” style component. Click onto the color-well to change the color to a medium green color (HINT: use the magnifying glass in the Colors palette to “pick up” a color from the existing shape). Adjust the line width as needed to about .1-cm or .15-cm. You could stop here – that’s a nice button too! (Or try something different and rotate the gradient to make the light color on top – experiment!)

Step 4

Add one more light-colored stroke to give your button more of a concave appearance, as if the rim of the button were raised and the middle was slightly sunken. Click the “+” in the Style Inspector and add a “Stroke” style component. Click onto the color-well to change the stroke color to match your lightest color in your gradient. Adjust the line width as needed to about .05-cm. This stroke is inset a toward the middle of the shape by adjusting the Offset to about -.05-cm.

Final Image

Congratulations! You know how to make three different styles that can be easily applied to any shape to make simple buttons. As desired, name and save styles in your User Library for later use. Now you can dress up your buttons with icons or text. We’ve added a clip art from the built-in Artboard library with a new style applied (white fill; no stroke).

2 replies
  1. Alan Bateman
    Alan Bateman says:

    Hi the tutorial is good from a process point of view however to create iOS Icons for iOS 7 you need to create a base image this is 1024×1025 point. the application does allow a radius getter than 56pt which doesn’t seem to be enough.
    Can you redraft the tutorial or provide the setting required for full size icons.

    • mapdiva
      mapdiva says:

      Hi Alan,
      Thanks for the suggestion! We’re always looking at new and updated tutorial ideas and will look into it. To create your base image, set your drawing canvas to the required canvas size (e.g., 1024×1025). If at any time you need double-sized graphics, you can scale on export to 200% (for example, for Retina graphics). – Jill

Comments are closed.