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: #000000

Pause Button

  1. Copy everything except the triangle and move the shapes to the left
  2. Using the Rectangle Tool make a rectangle 27 pixels wide and 86 pixels high
  3. Fill the shape with a gradient
  4. Set the gradient to -90 degree (black on the bottom)
  5. 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)
  6. Add a drop shadow to the rectangle
    Mode: Multiply
    Opacity: 50%
    X Offset: 7px
    Y Offset: 7px
    Blur: 5px
    Color: #000000

Stop Button

  1. Make a copy of the rectangle
  2. Center both rectangles on the inner shape of the button
  3. Copy the original two shapes and move the shapes to the right of the play button
  4. Using the Rectangle Tool make a square 86 pixels wide and 86 pixels high
  5. Fill the shape with a gradient
  6. Set the gradient to -90 degree (black on the bottom)
  7. 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)
  8. Add a drop shadow to the rectangle
    Mode: Multiply
    Opacity: 50%
    X Offset: 7px
    Y Offset: 7px
    Blur: 5px
    Color: #000000
  9. Center the square on the inner shape of the button