The resurgence of pixel art in the modern games industry has sparked an explosion of interest in the art form. While there are certainly a plethora of reasons for that, I’ve chosen to work with pixel art because it seems the perfect compromise between precision, simplicity and, of course, accessibility. I’m working on a lengthier post about the relative merits of pixel and other art forms for game development, but for now I just wanted to elaborate about the task of creating a rich and clear GUI (graphical user interface) with pixel art.
Here’s the sprite sheet I’ll be making today.
There aren’t many resources out there about the use of pixel art to create user interfaces - components of a game that are meant to be interacted with, to display or gather data, and I thought I’d give my two cents on the idea.
This blog post has been supported by BenQ - check out their innovative and minimalist Screenbar Plus!
The Video
Some Thoughts
Start off with a large canvas and leave everything on it. Use the background grid for a size reference.
- Do this to keep your style consistent: eg. Rounded or Sharp corners? Shaded or Flat? 3D or 2D? Perspective angle?
Create a checklist of UI elements and icons beforehand. Here’s a good starting place from usability.gov
Try vertical crosshatch-style shading instead of dithering!
Create a 3D effect with a darker, cool-hue-shifted line of pixels underneath your sprite
Use outlines and dropshadows to make your UI stand out from the rest of the scene
- Tint the outlines and dropshadows, don’t make them pure black/grey
Use non-pixel art references, and abstract your way to a pixel art piece from combining them with pixel art techniques. You can get icon ideas from FlatIcon.
Ultimately, the point of a user interface is to facilitate interactions between your user, or player, and the system they’re interacting with. Work to make things clear, and consider that form follows function, but try to also inject some interesting theming and unique pixel art elements, like strong outlines, crazy palettes, and hyperabstract features where the user can fill in the gaps with their imagination. Don’t try to make too much detail, and play to the strengths of pixel art - its precision and unparalleled clarity - to make your user interface stand out.