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
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).
