To upload screens manually, open your project and, at the top right, click the pink plus button. Click Upload Screens and select the files you want to add as screens.
You can also drag and drop any PNG, JPG, GIF, or PDF file over an open space in the screens tab.
To replace an existing screen, drop a new file over the existing screen. If the new screen name is identical to the existing screen, the new screen will replace the existing screen. If the new screen name is not identical, it will be uploaded, but the original screen will remain.
Screen sizes for desktop and web
When designing for desktop or web, you can either size your screens for a specific target resolution or take advantage of features like auto-stretch backgrounds, scaling of screens down to browser width, and the screen alignment options to make your screen suitable for a variety of resolutions.
If designing for a target resolution, these two external resources can be helpful:
Remember, mobile prototypes can scroll, so the screen heights listed below are simply minimum heights for your designs. When deciding what size screen to use, you should note that large screens may appear blurry when viewed in Safari on iOS. For more information, check out this article: Why are my images in iOS blurry?
Including the status bar in iOS
Because many designers leave space at the top of their designs for a device's status bar, InVision by default overlays the status bar on the design.
The following are iOS status bar heights that you may need to account for:
iPhone X: 44px height
iPhone 6 Plus: 60px height
iPhone 4–6: 40px height
non-retina iPhones: 20px height
Retina iPads: 40px height
Non-retina iPads: 20px height
You will need to edit your images before uploading or replacing your screens in InVision.
If you don't include extra space in your design and your mobile screens appear cut off at the top, you can adjust the starting point of your screen. To learn more, check out this article: Why are my screens cut off at the top?
Including the status bar and nav bar in Android
Just like with iOS prototypes, InVision overlays a status bar on the design by default. You can adjust your screen sizes accordingly, or you can start your designs below the status bar.
For some Android devices, you might also need to account for the height of the nav bar in your design.