Adobe Illustrator’s artboard feature is a powerful tool that artists and designers can use to rapidly create, preview, and iterate on 2D game assets. In this article, I’m going to briefly share how I use artboards and linked files to get things done faster while maintaining a consistent standard. This is especially useful when creating and revising button designs.
First, a brief overview: Illustrator’s artboard tool is located in the last group on the standard toolbox, and looks like a box with some bits sticking out from the side:
Clicking on it puts the entire screen in artboard mode. Switching back to any other tool (such as the selection tool) automatically exits the screen from artboard mode. Advanced users who are used to hotkeys will find it easy to transition into artboard mode using Shift+O.
Artboards are discrete areas in an Illustrator document that represent a “page” of content, almost as if the contents of each artboard were a file all on its own. Doing this allows the user to create different versions of a design, and quickly swap versions for evaluation in another document via the linking feature. Here’s a quick example of this:
I have three different artboards in one Illustrator file. By embedding one of these buttons into another document as a linked file, I can add text to it without the risk of altering the button itself. I can also try different text in another version of the linked file on a separate artboard if I so desire:
Linking is done using the File > Place comment, or Shift + Ctrl + P on Windows. Linking a file simply places the first available artboard on the source file, so make sure the Show Import Options option is checked:
Linked files cannot be edited directly, so there’s no risk of accidentally altering the graphic.
Here’s another example. In one Illustrator file, I have a collection of layers for different kinds of soup graphics — the first three in this example are the soups themselves, and the last two are the bowls:
In my other Illustrator file, I have these layers assembled to help me visualize how they will appear when the graphic is “assembled” in the game. The files are linked, so any alterations I make to the first Illustrator file will apply on the second automatically:
This allows me to preview the entire graphic and edit the individual layers without:
- Having to keep moving or copy-pasting layers back and forth.
- The risk of accidentally editing the wrong layer (linked files cannot be edited directly).
- Worrying about getting the coordinates wrong — replacing a linked image with another preserves its coordinates.
When it’s time to create a new soup graphic, I simply have to alt+drag one of the soup artboards in the first Illustrator file to duplicate it, and then make edits (change colors, add elements, tweak gradients) to create a new graphic.
Once I’m ready, I simply have to hit Export in the first Illustrator file and I can have all the artboards automatically export as individual pngs, ready to be placed into the game.
This is not a new trick, but it’s something that new 2D game artists will find worth learning and integrating into their workflows. The artboards feature has been a part of Illustrator for several years now, so there’s a wealth of further reading that can be done on the subject. It’s been a staple for me ever since I began working extensively with 2D graphics, and I hope you can make the feature work effectively for you as well.