I use Inkscape for all of my game design artwork. It is relatively easy to use and is vector based, so I can make things larger or smaller as needed without any loss in picture quality.

I’ve done a couple other Inkscape tutorials about game design artwork. You can check those out:

• Prototype Art: Cubes in Inkscape
• Prototype Art: Icons in Inkscape

Today I want to focus on one specific tool within Inkscape: Alignment.

If you don’t have the software, you can download it from their website: inkscape.org.

Let’s Line Things Up!

The tool I find I use the most within Inkscape is the alignment tool. I use it for every piece of artwork or graphic design that I make in Inkscape.

When you are working in Inkscape and desire to line things up, look for this icon: 

Clicking that will open the Alignment options, which will look like this:

Control Panel of Alignment

Let’s run down what those options are. Here is a new version of that image:

Instead of running through each of those things listed above I am going to provide a couple examples. At the end of this article you will find a the Inkscape file that I used for these examples. Feel free to download it and use it to get familiar with the alignment tools.

Anchors Away!

When aligning things the most important thing is understanding which object is the anchor. The anchor is the object that will not move when the command is applied. You can choose the anchor with the options from the “RELATIVE TO” box at the top, which are the following options:

• Last Selected
• First Selected
• Biggest Object
• Smallest Object
• Page
• Drawing
• Selection

The three that I use the most are “Last Selected,” “First Selected,” and “Page.”

When selecting multiple items, if you chose the anchor last, then you should set RELATIVE TO to “Last Selected.” That way when you choose the alignment function, the anchor will appropriately stay put and the other objects will move.

Likewise, the “First Selected” option will cause the anchor to be the first object you select. Both of these options are nice because you can make sure you’ll know which object won’t be moving.

Using the “Page” option will align things with the page. The Page is represented by the black box in the middle of the canvas when opening a new document. I use this a ton when designing artwork for cards since it allows me to center things on the page. This one can come in very handy. You can align things to the center of the page by using these two alignment functions:

Alignment Examples

I’m going to use a circle and a block and show you how several of the functions work. After centering the block on the page I’ll be using the block as the anchor for the remaining alignments.

For the very last example, step 10, I had to use the “Treat Selection As Group” option. If I had not used it the result would have been to stack all three circles on the vertical axis of the block:

By treating the three circles as a group it allows for the whole group to be aligned without adjusting the relative locations of the objects in the group. Often I’ll just group objects myself before aligning them and then ungrouping them after the alignment. But feel free to do it however you like.

That’s Basically It

I have found that these alignment tools are very useful when making prototype artwork for my game designs. It allows you to consistently place things in the same spots. It allows you to make things line up correctly. And it allows Inkscape to help design your awesomeness!

Here is the file: BoardsAndBarleyAlignmentExample.svg

It is located in Google Drive and to get it to work you’ll have to download it. Please let me know if you have any questions. Thanks for reading.