Tutorial: How to make game buttons in Adobe Illustrator

Add to favorites

Welcome to the first tutorial of the UI/Game Art for Beginners series. In this tutorial, we will be learning how to make game buttons in Adobe Illustrator.

Play Button

1. Create a new document that is 900 pixels wide and 600 pixels high
2. Using the Rectangle Tool make a square 200 pixels wide and 200 pixels high
3. Make a second square that is 225 pixels and rotate it 45 degrees
4. Place the second rotated square on top of the original square (make sure it is centered)
5. Select both squares
6. Open the Pathfinder Tool and click on Intersect
7. Center the shape on the artboard
8. Fill the shape with #7F8C8D
9. Change the border color to #586060 and make the stroke 5 points
10. Copy the shape and paste it in front
11. Reduce the copied shape’s size to 150 pixels
12. Fill the new shape with a gradient
13. Set the gradient to -90 degrees (black on the bottom)
14. Change the black color stop to a dark gray (RGB 51, 51, 51) and the white to a lighter gray (RGB 128, 128, 128)
15. Select the inner shape and add an Inner Glow
    Color: #313A3A
    Mode: Screen
    Opacity: 75%
    Blur: 10px
    Edge
16. Choose the Star Tool click once on the artboard
    Radius 1: 25px
    Radius 2: 50px
    Points: 3
17. Make the triangle 74 pixels wide and 86 pixels high
18. Rotate the triangle so the top is pointing to the right
19. Fill the shape with a gradient
20. Set the gradient to -180 degree (black on the left)
21. Set the black color stop to a mid-gray (RGB 179, 179, 179) and the white stop to a light gray (RGB 242, 242, 242)
22. Center the triangle on the inner shape of the button
23. Add a drop shadow to the triangle
    Mode: Multiply
    Opacity: 50%
    X Offset: 7px
    Y Offset: 7px
    Blur: 5px
    Color: 5px
    Color: #000000

Pause Button

24. Copy everything except the triangle and move the shapes to the left
25. Using the Rectangle Tool make a rectangle 27 pixels wide and 86 pixels high
26. Fill the shape with a gradient
27. Set the gradient to -90 degree (black on the bottom)
28. Set the black color stop to a mid-gray (RGB 179, 179, 179) and the white stop to a light gray (RGB 242, 242, 242)
29. Add a drop shadow to the rectangle
    Mode: Multiply
    Opacity: 50%
    X Offset: 7px
    Y Offset: 7px
    Blur: 5px
    Color: #000000

Stop Button

30. Make a copy of the rectangle
31. Center both rectangles on the inner shape of the button
32. Copy the original two shapes and move the shapes to the right of the play button
33. Using the Rectangle Tool make a square 86 pixels wide and 86 pixels high
34. Fill the shape with a gradient
35. Set the gradient to -90 degree (black on the bottom)
36. Set the black color stop to a mid-gray (RGB 179, 179, 179) and the white stop to a light gray (RGB 242, 242, 242)
37. Add a drop shadow to the rectangle
    Mode: Multiply
    Opacity: 50%
    X Offset: 7px
    Y Offset: 7px
    Blur: 5px
    Color: #000000
38. Center the square on the inner shape of the button