Visual Guide to On-Screen Safe Areas (Multi-Resolution Support Template)

When considering support for your mobile app the sheer number of different screen resolutions you need to support can be mind boggling. However, if you see a simple screen ratio image like the one I’ve created here you’ll be relieved to know you really only need to consider a four or five screen sizes and then simply aim to design your app or game screen to fit in a 2133×1440 area! I know that sounds like an odd resolution, in fact you best keep to perhaps make it 2132×1440. Using scaling and a “design resolution”, having assets made for your highest resolution and then scaling down seems to be the way to go. I’m not going into that here though, there are plenty of other places to read peoples views on that. Here is a handy 2560×1600 Photoshop PSD file for you to download and play with:

Download Photoshop Layered landscape Version

Download Photoshop Layered portrait Version

Download Landscape & Portrait JPEG Versions

So What Can I Learn From This

If you are aiming to support all screen ratios, from iPad 3:2 (three by two) screens upto wide screeen 16:10 Android Tablets, then you could learn from the guide that the 2133×1440 area will be shown on all devices, the various coloured boarders will be off screen depending on the device. So if you are say displaying a scrolling platform game, some players will see more horizontally and some will see more vertically.

Supporting Lower Design Resolutions

So you might not want to design your graphics for a resolution of 2560×1600, simply divide down the values. For say a 1280×800 res you simply need to divide by 2. You will find the “Safe Area” is now 1066×720. For say 800×500 res (2560/800=3.2) divide by 3.2.  You will find the “Safe Area” is now 668×450.

Related Useful Links

License

This work by Gavin M Thornton is licensed under a Creative Commons Attribution 4.0 International License.
Based on a work at https://www.gmtdev.com/blog/2014/08/31/visual-guide-to-on-screen-safe-areas-multi-resolution-support-template/.

 

One thought on “Visual Guide to On-Screen Safe Areas (Multi-Resolution Support Template)

  1. Pingback: max

Comments are closed.