Becoming a #Gamedev

Tutorial: How to make a magic potion

Welcome to the seventh tutorial of the UI/Game Art for Beginners series. In this tutorial we will be learning how to make a magical potion 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 that is 600 pixels wide and 600 pixels high
  3. Remove the border
  4. Fill the rectangle with a dark gray (#353535)
  5. Open the Layers Panel and rename Layer 1 as “background” and lock the layer

FLASK

  1. Make a new layer above the background layer and rename it “flask”
  2. Choose the Ellipse Tool (L) and click on the Artboard once
  3. Make an ellipse that is 300 pixels x 300 pixels and fill it with white
  4. Choose the Rectangle Tool (M) and click on the Artboard once
  5. Make a rectangle that is 100 pixels x 50 pixels
  6. Align the rectangle to the top-center of the ellipse (half above and half below the ellipse)
  7. Send the rectangle to the back (Object > Arrange > Send to Back)
  8. Choose the Ellipse Tool (L) and click on the Artboard once
  9. Make an ellipse that is 125 pixels x 25 pixels
  10. Make a copy of the ellipse (CTRL + C) and paste it in front (CTRL + F)
  11. Move the copied ellipse up 60 pixels
  12. Choose the Rectangle Tool (M) and click on the Artboard once
  13. Make a rectangle that is 125 pixels x 60 pixels
  14. Move the rectangle between the two ellipses
  15. Choose the Ellipse Tool (L) and click on the Artboard once
  16. Make an ellipse that is 100 pixels x 10 pixels
  17. Change the color to a light gray (#e2e2e2)
  18. Position the gray ellipse below the bottom of the bottom ellipse (step #13)
  19. Select the original ellipse and make a copy of it (CTRL + C) and paste it in front (CTRL + F)
  20. Make a second copy of the original ellipse (CTRL + C) and paste it in front (CTRL + F)
  21. Move the second copy to the left 30 pixels
  22. Select both copies of the ellipse
  23. Open the Pathfinder Tool and choose Minus Front (second icon from the left under “Shape Modes”
  24. Change the size of the highlight to 130 pixels x 250 pixels
  25. Change the color to a light gray (#e2e2e2)
  26. Change the Opacity to 50%

CORK

  1. Select the top-ellipse and make a copy of it (CTRL + C) and paste it in front (CTRL + F)
  2. Offset the inner ellipse (Object > Path > Offset Path ….. -7 pixels)
  3. Fill the inner ellipse (potion) with a brown color (#b27b32)
  4. Move the bottom of the cork up 5 pixels
  5. Make a copy of the ellipse (CTRL + C) and paste it in front (CTRL + F)
  6. Move the copied ellipse up 40 pixels
  7. Choose the Rectangle Tool (M) and click on the Artboard once
  8. Make a rectangle that is 101.767 pixels x 40 pixels
  9. Move the rectangle between the two ellipses
  10. Choose the top ellipse and make it a lighter color (#c6873c)
  11. Select all three sections of the cork
  12. Open the Pathfinder Tool and select Merge (third icon from the left under “Pathfinders”)
  13. Make a copy of the cork (CTRL + C) and paste it in front (CTRL + F)
  14. Move the copied cork down 60 pixels
  15. Change the opacity of the copied cork to 50%

POTION

  1. Select the original ellipse and make a copy of it (CTRL + C) and paste it in front (CTRL + F)
  2. Offset the inner ellipse (Object > Path > Offset Path ….. -7 pixels)
  3. Fill the inner ellipse (potion) with a blue color (#009995)
  4. Choose the Add Anchor Point Tool (+)
  5. Add two anchor points just above the middle anchor points (one on each side)
  6. Choose the Direct Selection Tool (A)
  7. Select both of the new anchor points and delete them
  8. Select the Ellipse Tool (L) and click on the Artboard once
  9. Make an ellipse that is 285 pixels x 55 pixels
  10. Align the ellipse to the top-center of the inner-ellipse (half above and half below the inner-ellipse)
  11. Change the color of the top ellipse to a lighter blue (#00a59d)
  12. Choose the Direct Selection Tool (A)
  13. Choose the top-center anchor point of the top ellipse
  14. Move the right handle down and to the right to give the top ellipse an “s” shape
  15. Select the cork and the top of the flask and group them (CTRL + G)
  16. Align the cork and the top of the flask to the bottom of the flash
  17. Select all the parts of the flask and group them together (CTRL + G)

Tags
#Art #tutorial design fantasy game design #gaming #2D game development game art Illustrator Game Asset Digital Design Graphic Design Game UI Game UX UI Design UX Design Level Design Magic Potion
Show More

Jen S Abbott

Jennifer S. Abbott is a multidisciplinary designer and artist who works across many design disciplines – including graphic design, 3D Art, Game Design and UI/Web Design. I am a contributor to Indie Watch (https://indiewatch.net/) and Blender Nation (https://www.blendernation.com/). I also love to teach and commune with nature. I am open to working with individuals, small businesses, non-profit organizations, and educational organizations in order to fill their design needs. I became a digital designer and artist in order to not only pursue my passions but also to assist others in expressing themselves or their business/organization in a creative manner. I believe in creating great design that fits the context and needs of the client.

Related Articles

We want your opinion! Go ahead and say something!

Close