Splash Loading Screen: Overview & Tips

Last Updated: Aug 04, 2016 08:49AM PDT

Splash loading screens are great, easy-to-create images that can help expand your brand. As the first image a user sees when they launch an app, a splash loading screen can serve as a great marketing tool, and should be used tactfully.

These splash loading screen images are uploaded in the Publish Step. Since they can't be changed without an update after the app goes live, it's crucial your screenshots are exactly as you'd like them when you publish your app. If you'd like to update them later, the standard $50 update fee will apply for iOS.

Make sure splash loading screens are high-quality, don't include references to smartphone companies (Apple, Android, Windows, etc.), and are below about 700 KB for optimum loading time.


Splash Loading Screen Dimensions

  • Phone: 640x1136px
  • Tablet: 1536x2048px
  • iPhone 4: 640x960px



Splash Loading Screen Tips

  • Do use high-quality images that are below about 700 KB in size for optimum loading time.
  • Do include your app company logo/name if your customer has granted you permission to do so. This is a great way to promote your services.
  • Don't include references to smartphone companies (Apple, Android, Windows, etc.). This can lead to an Apple rejection.
  • Don't include any copyrighted material not owned by you or your client.

​​
Photoshop How-To
 

1. In Photoshop go to File > New

Then, create a new image, sized correctly:

  • Phone: 640x1136px
  • Tablet: 1536x2048px
  • iPhone 4: 640x960px




2. Grab the image you'd like to use from the business' website. You can always take a screenshot of an aspect of the site. Get creative with it!

For example, I want to take this business' logo, as well as an image of their food, to incorporate in the splash loading screen.

 




3. Use screen capture on Mac (command+shift+4) or PC (CTRL+ALT+PRNTSCRN). That's how I took the two images I want to use for my splash loading screen.

4. Now, drag the image or images you want used onto the 640x960px image you created in Photoshop. Play with the sizing until you get it where you like and then "Place" the image!




5. Now you can add "Loading" or any other type of text you like by clicking the " T " on the toolbar!




6. After you're happy with the way your image looks, go to File > Save for Web and then click Save. This saves the image as a PNG file.






7. That's all! Make sure to upload your splash loading images for each size under the Publish Step. Keep in mind, this is one Publish element that can't be changed without updating/republishing, so it's important to confirm it's exactly as you'd like it before publishing.