Tutorial: How to make a game coin – UI/Game Art for Beginners

 

Welcome to the fifth tutorial of the UI/Game Art for Beginners series. In this tutorial we will be learning how to make a game coin in Adobe Illustrator.
BACKGROUND

  1. Create a new document that is 600 pixels wide and 600 pixels high
  2. Use the Rectangle Tool (M) and draw out a rectangle 600 pixels square
  3. Remove the border
  4. Fill the rectangle with a dark gray (#2b2b2b)
  5. Open the Layers Panel and rename Layer 1 as “background” and lock the layer

COIN

  1. Make a new layer above the background layer and name it “coin”
  2. Select the Ellipse Tool (L) and click on the Artboard
  3. Make an ellipse 400 pixels wide and 400 pixels high
  4. Open the Gradient Panel and apply a linear black and white gradient to the ellipse
  5. Double-click on the white swatch and change the color to RGB 252 238 33 (third swatch from the right – first row)
  6. Double-click on the black swatch and change the color to RGB 251 176 59 (fourth swatch from the right – first row)
  7. Change the angle of the gradient to -30o
  8. Click once on the right color stop and change the location to 55%
  9. Center the ellipse on the background
  10. Add an Inner Glow to the ellipse (Effect > Stylize > Inner Glow)

Mode: Multiply

Color: #333333

Opacity: 100%

Blur: 10 pixels

Edge

  1. Copy the ellipse (CTRL + C) and paste it in front (CTRL + F)
  2. Offset the inner ellipse (Object > Path > Offset Path — -45 pixels)
  3. Use the Star Tool and draw out a star from the center of the inner ellipse (Hold down the SHIFT key so the star will be straight up and down)
  4. Open the Gradient Panel
  5. Double-click on the left color stop and click on color (palette icon)
  6. Change the RGB colors to 252 177 15
  7. Double-click on the right color stop and click on color (palette icon)
  8. Change the RGB colors to 252 112 0
  9. Click on the right color stop and change the location to 85%
  10. Add an Outer Glow to the star (Effect > Stylize > Outer Glow)

Mode: Multiply

Color: #333333

Opacity: 100%

Blur: 5 pixels

Share

Leave a Reply

<