Preparing Image Sprites

If there are several similar UI elements (assorted buttons for the main menu), then we recommend saving them together as a sprite file.  A sprite file is a grid of all the different images representing various states or elements of a UI group.  See the examples below.  Figure 3 depicts blue and black color states of the same element, while figure 4 depicts various buttons and icons.  Note each element should have a consistent white or transparent margin around it, and be centered within the grid.

Example of a Sprite for Icon StatesExample of a Sprite of buttons and icons

Recently Updated in Optimizing and Exporting Website Graphics