What are the best practices when working on images for your app?
Your app’s artwork is a vital component in making your app look awesome and appealing to your user base.
Not only have we done the heavy lifting for you by providing you with several layouts per feature, but we’ve also created a file that contains all the necessary templates for your app icon, loading screens, background images, image carousels, and feature icons which you can download here:
Download templates for your app artwork here.
You can use those templates in any image editing software such as Photoshop, Illustrator, InDesign, Corel Draw, or PaintShop Pro. The templates are already sized for you, so you don’t need to worry about resizing those images.
What are the recommended image sizes for our system?
If you want to make the artwork for your app by scratch, here’s the image sizes that we recommend for the different areas of our system:
App Icon
1024 x 1024 px.
App Loading Screens Sizes
640 x 960 px.
1242 x 2208 px.
1536 x 2048 px.
1600 x 2560 px.
Image Carousel (All Features)
1200 x 675 px.
Folder Feature Icons - when you use a layout displaying them as squares
1024 x 1024 px.
Folder Feature Icons - when you use a layout displaying them as horizontal bars
Between 1200 x 300 px. and 1200 x 675 px. depending on the layout you use.
Folder Feature Background
750 x 1334 px.
Home Grid Layout Launcher Background Sizes
1600 x 2560 px.
1536 x 2048 px.
1242 x 2208 px.
640 x 960 px.
Home Grid Layout Launcher Icons
1024 x 1024 px.
Image Gallery & Info Slider PluginWhen displaying as Wide Screen - 1200 x 675 px.
When displaying as Full Screen - 1600 x 2560 px.
What are some Pro Tips you should know about to take your app to the next level?
When you’re working on artwork for your app, here’s some Pro Tips to keep in mind:
Pro Tip 1: You Can Get Free High Quality Photos
If working on images for your app is scary thought, or if you don’t have the time to invest in working on images for your app, you can get amazing free photos that you can use in your app at the following links. They update and upload new images regularly so check back often for new photos.
Pro Tip 2: Take the Extra Time on your Artwork’s Design
The better the quality the images, the better the first impression that your users will have for your app. If you already have them, you can use paid programs such as Photoshop or Illustrator, but these programs can get expensive and can be daunting to use for people who don’t already have experience with them. Because of this, we’ve found a simpler and free alternative to Photoshop out there which is called Canva and is totally free to use! You can access it here:
Pro Tip 3: Get Familiar with the Media Library
When working with images in your app, you’re going to be utilizing the Media Library quite a bit. So make sure to check out the dedicated article that we have for it here.
Pro Tip 4: Add Extra Border Space
It’s impossible to account for every possible phone screen size when it comes to app images, especially for newer phones where the screen display goes all the way to the phone’s edge. This is why we suggest adding a margin of 10-20 pixels to each side of your images which will create a border around the edge of the image that allows for flexibility when displaying your images. This should give you enough of a safe space to help prevent the image from being too zoomed in and cutting the image’s content off from fully displaying.
Pro Tip 5: Think about the Image’s Resolution (or DPI) and File Size
While you can use gorgeous images with a high resolution in your app, they will end up having a larger file size. This can affect the loading times of the images in your app. Because of this, we recommend finding a good balance between the file’s resolution and file size. We recommend that you don’t go any higher than 72 dpi when working on an image, and shoot for a file size that’s lower than 1 MB. If you need help with compressing image files there’s some great free online tools that will help you lower the file size for your images:
Pro Tip 6: JPG vs. PNG
You may be wondering what’s the difference between a JPG and an PNG file, and when you should use one image format over the other. The main difference is PNG images can have transparencies in them, while JPG images can’t. This means that PNG files tend to have a larger file size, so we recommend that you only use PNG when you want to have transparency in the image. If you don’t need a transparency in the image, then we recommend you use a JPG instead.
Related Articles
In addition to this article, we recommend checking out the following related articles so that you have a better insight into how to use the system to its fullest advantage:
Still have questions? No problem! Reach out to us and we’d be happy to help :)