Pixel Grid Resolution
This page introduces a standard that helps all designers unify their pixel design.
For pixel style, the number of pixel grids and aspect ratio (hereinafter these two factors referred to as a single concept "Pixel Grid Resolution") used in the picture are important standards. A game screen with inconsistent Pixel Grid Resolution may look like this:
As you can see, the pixel grid resolutions of the character, the star and the environment are inconsistent. Which will cause a horrible experience for players.
Therefore, for the convenience and consistency of collaborative design, here suggests a standard for all designers.
The pixel grid resolution of the game screen is 570x320, e.g. there will be 570 columns and 320 rows of pixel grids in a game screen as shown below.
Remember, the pixel grid resolution is not related to any absolute values such as "px". It's all about the scale and ratio.
This section promotes a recommended process of how you create artwork according to the Pixel Grid Resolution standard.
In general, vector graphics are recommended, because then we can easily adjust the length and width of each pixel grid when exporting. But if you prefer to use bitmaps to create your artwork, please set the length and width of each pixel grid to 9px in advance. Since resizing of bitmaps causes blur.
- Create a sketch of an element
- Put the sketch on the screen grids and resize the sketch until it looks suitable on the screen
- Count the area occupied by this sketch, e.g. how many pixel grids are used in columns and rows. You should get an X by Y rectangle (or square) in this step.
- Pixelise the sketch according to the area you get from step 4.
| Name | Type | Platform |
|---|---|---|
| Adobe Illustrator | Vector | Windows/MacOS |
| Inkscape | Vector | Linux |
| Vectornator | Vector | iPadOS |
| Pixilart | Bitmap | Web |
| Procreate | Bitmap | iPadOS |
This standard is just an initial proposal. Feel free to bring up any suggestions!