Draw vector potion bottles

Learn how to draw a potion bottle in Inkscape, step by step. You'll draw a round glass bottle with a cork, add shadows and highlights, and fill it with a colorful potion. Along the way, you'll learn the basics of vector drawing in Inkscape.

Potions show up in almost every game. A red one for health, a blue one for mana, and a green one you probably shouldn't drink. In this tutorial, you'll draw one in a flat vector style, with a few simple shapes and some transparency. You don't need any drawing skills. If you can drag a circle, you can draw this bottle.

Here's what you'll make:

Set up Inkscape

Inkscape is a free and open-source vector graphics editor. It runs on Windows, macOS and Linux, and you can download it from inkscape.org. It looks a little less fancy than, say, Adobe Illustrator, but it has most of the same tools, and it doesn't cost a thing. That makes it a great choice if you're just starting out with vector graphics.

So what makes vector graphics different? A photo or a digital painting is made of pixels. A vector drawing is made of shapes, and each shape is a path: a few points with lines or curves between them. You can scale a vector drawing up as much as you like, and it stays sharp. That's why vector graphics are so popular for logos, icons and game graphics.

This tutorial uses Inkscape 1.4. Every tool has a one-letter shortcut, like E for the Ellipse tool. The shortcuts from older versions, like F5 for the same tool, still work too. When you're all set up, open Inkscape and create a new document.

Draw the basic bottle shape

Start with the round body of the bottle. Pick the Ellipse tool (E) and drag on the canvas. Hold Ctrl while you drag to get a perfect circle.

Next up is the neck: a short tube with a rim that sticks out at the top. Grab the Pen tool (B), which is also called the Bezier tool. You draw the outline of the neck point by point, and Inkscape calls these points nodes. Click on the canvas to place a node, and click again to place the next one. Every click adds a corner. Click and drag instead, and the line to the new node becomes a curve.

Made a curve by accident? Press Shift+L to turn it into a straight line, or Backspace to remove it. To finish the shape, click on the first node again. That closes the path.

Don't worry if your shapes don't have these colors yet. You'll add them a bit later. The top of the neck doesn't have to be perfect, because the cork will cover it. As you can see in the example image, it's pretty wobbly, but that won't show in the end result.

To move a shape, switch to the Selector tool (S). Click a shape to select it, and drag it to move it. To select more than one, hold Shift while you click, or drag a selection box around them. Now drag the neck onto the top of the circle.

The shape you drew last ends up in front, so the neck covers the top of the circle. That's just what you want here. If you ever need a different order, select a shape and use Object > Raise or Object > Lower, or press Page Up or Page Down.

You can always change a shape later. Double-click it, or switch to the Node tool (N), and drag the nodes around until you're happy with it.

Add color to the glass

Chances are the neck has a thin black outline and no fill. That's the default style of the Pen tool, and you're about to change it.

Select the circle and open Object > Fill and Stroke (Ctrl+Shift+F). At the top of the panel, there are three tabs: Fill, Stroke paint and Stroke style. The fill is the paint inside a shape, and the stroke is the line along its edge. Both are optional. Fills and strokes aren't just an Inkscape thing. Every vector image is built from them.

On the Fill tab, click the Flat color button and pick a light blue. You can also type a color code in the RGBA field. RGBA stands for red, green, blue and alpha, and the code has two characters for each. Each pair goes from 00 to ff, counting 0 to 9 and then a to f. The bottle in this tutorial uses d5f6ffff. The last two characters are the alpha, which sets the opacity: ff is solid, 80 is half see-through and 00 is invisible. You'll need that later for the shadows.

Do the same for the neck, but pick a slightly darker blue, like aaeeffff. The glass is thicker there, so it lets less light through.

Then get rid of the strokes. On the Stroke paint tab, click the X to set it to no paint. Strokes can easily make a drawing look cartoonish, and that's not the look you're going for here.

Draw the cork

The cork has two parts: a base that goes into the neck, and a top that sits on it. Grab the Pen tool (B) again and draw the base. Make it a bit wider at the top, and give it a light brown color, like 784421ff. Then draw the top over it, in a darker brown (502d16ff). Let the top overlap the base a little, so there's no gap between the two.

To make the cork look a bit worn, add a few cracks. Draw some thin triangles that start at the lower edge of the top and point down into the base, and give them an even darker brown (28170bff). The darker the color, the deeper the cracks look.

Now for a little trick. Draw a shape over the lower part of the base, the part that will be inside the neck, and fill it with a transparent light blue, like aaeeff80. This makes it look as if you're seeing the cork through the glass. Then select all the parts of the cork and drag them onto the top of the neck. Now the top of your bottle is done.

Add shadows and highlights

Right now, your bottle looks totally flat. This is the step that makes it come to life. Shadows and highlights show where the light comes from, and they make the glass look round.

Put them on a layer of their own, above the rest of the drawing. Layers work like a stack of clear sheets. Everything on a higher layer covers the layers below it. A new document starts with one layer, Layer 1, and that's where your bottle is now. Pick Layer > Add Layer, name it Shadows and choose Above current as the position. To see all your layers, open Layer > Layers and Objects (Ctrl+Shift+L). There you can rename layers, drag them into a different order, and hide or lock them while you work on something else.

With the new layer selected, draw the shadow. Use the Pen tool (B) to draw a shape over roughly the right third of the bottle, with a curved left edge. The curve is what makes the glass look round. Keep the right edge just inside the glass, so the shadow doesn't stick out. Fill it with a transparent black, like 0000001a (10% opacity).

Then add the highlights in a transparent white, like ffffffb3 (70% opacity). Draw a curved shape along the upper left of the bottle and a small one on the neck. That's where the light hits the glass. The shapes don't have to be perfect: you can adjust them later with the Node tool (N). Your bottle already looks a lot less flat and more like a real bottle.

Fill the bottle with a potion

And now the fun part: the potion itself. Select the Shadows layer, pick Layer > Add Layer again, name it Potion and choose Below current. Now the Potion layer sits between the bottle on Layer 1 and the shadows. That way, the shadows and highlights cover the liquid too, just like they would on real glass.

The liquid has to follow the curve of the bottle exactly, or it won't look like it's inside. This is a case where a perfect fit matters, so let Inkscape do the cutting. Copy the bottle's circle with Ctrl+C, select the Potion layer and paste it in the same spot with Ctrl+Alt+V. Make the copy a little smaller, so there's room for the thickness of the glass. When you select a shape, small arrows appear around it. If you hold Ctrl+Shift while you drag one of the corner arrows, the copy shrinks toward its center.

Then draw a rectangle with the Rectangle tool (R) over the bottom part of the copy, up to where the liquid should end. Select both shapes and pick Path > Intersection. What's left is the liquid, in exactly the right shape.

Give it a color, like 3caa85ff for a green potion. Then draw an ellipse in a darker shade over the top edge: that's the surface of the liquid. Add a few blobs in lighter and darker shades, and some small circles for bubbles. A few bubbles can float above the liquid, too. Want a thicker potion, or a more see-through one? Change the alpha of the liquid, the last two characters of its color code.

Make a whole set of potions

One potion is nice, but a game usually needs more than one. To copy the whole bottle, pick Edit > Select All in All Layers (Ctrl+Alt+A) and press Ctrl+D to duplicate it. Each copied shape stays on the same layer as the original. Drag the copy to the side, and hold Ctrl to keep it at the same height.

Now give the copy a different potion. In the Layers and Objects panel, click the lock icons next to Layer 1 and the Shadows layer, so only the liquid can be selected. Drag a selection box around the copy's liquid, and pick Extensions > Color > HSL Adjust. Drag the Hue slider and click Apply. All the shades of the liquid change color together. Red for health, blue for mana, green for... well, you decide. When you're happy with the color, click the lock icons again to unlock the layers.

Want even more variety? Change the shape of the bottle too: a tall, thin vial, a square flask or a bottle with a long neck. You'll have to draw the glass differently, but the rest works the same way: transparent shadows and highlights on top, and a liquid shape that you cut to fit the glass.

Export your potion for a game or website

Inkscape saves your drawing as an SVG file. A browser can show an SVG directly, so for a website, that's often all you need. First save your drawing as a normal Inkscape SVG with File > Save As. That's the file you keep for yourself, so you can still edit your layers later. Then choose File > Save a Copy and pick Plain SVG as the file type. The copy leaves out the extra data that only Inkscape uses.

For a game, you'll often want a PNG. Drag a selection box around one bottle and open File > Export (Ctrl+Shift+E). Choose Selection, set the width in pixels and click Export. The background stays transparent, so the bottle works on any background. Because it's a vector drawing, you can export the same bottle at any size: an icon just 64 pixels wide for an inventory, or a big version for the title screen.

Want to use your potion in an HTML5 game? The tutorial on drawing images and sprite animations shows you how to put an image like this one on an HTML5 canvas. And if you'd rather draw shapes with code, check out how to draw lines, shapes and text on the HTML5 canvas.

Common questions about drawing potion bottles

Is Inkscape really free?

Yes. Inkscape is open source, so you can download it for free and use it for anything you like, including commercial work. There's no paid version and no subscription.

Why does my shape have a black outline?

That's the stroke. The Pen tool draws with a thin black stroke and no fill by default. Select the shape, open Fill and Stroke (Ctrl+Shift+F) and click the X (no paint) on the Stroke paint tab.

How do I make the glass look more realistic?

Use a gradient instead of a flat color. Select the bottle's circle and click the radial gradient button in Fill and Stroke. By default, the color fades to transparent toward the edges. In the gradient editor that appears, you'll see the stops: points along the gradient that each have their own color. Select the last stop, the transparent one at the edge, and give it a slightly darker blue instead, so the glass is lighter in the middle and darker at the edges. For extra shine, add a small dot of solid white (ffffffff) inside the highlight in the upper left.

Can I draw a potion bottle without Inkscape?

Sure. The same steps work in any vector editor, like Adobe Illustrator or Affinity Designer: a circle, a neck with a rim, a two-part cork, transparent shadows and highlights, and a liquid that follows the curve of the glass. They even work on paper. Shade the right side of the bottle and leave a white spot on the upper left. Using Affinity Designer? We have a free set of pen brushes for Affinity Designer.

Your own vector potion bottles!

You're done! You've drawn your own vector potion bottle in Inkscape, and you know how to turn it into a whole set. From here, you can experiment with differently shaped bottles and fill them with other kinds of potions. If you have any questions, feel free to ask them in the comment section.