In this tutorial you will learn how to design Stickers and Frames for the applications: PhotoFun and Scenes (available in Premium, White Label and Corporate plans).

General considerations

All the images for stickers and frames should be PNG format, which is the recommended option as it allows transparency or JPG format for full background and squared stickers without transparency. If you want to use full background, the users should not be able to upload their own photo because it will be placed beneath the frame and will, therefore, be invisible.

It's important that you create the images in RGB mode in a standard color space, preferably sRGB, or AdobeRGB. Any other configuration will change how the colors are seen on a screen as the default color space of the screen (sRGB) will be applied and therefore the colors will appear differently.

The resolution must be 72 ppi.

How to upload the stickers and frames

In the PhotoFun editor, in the Stickers and the Frames tabs, you will see a green link in the top right corner to add your own stickers and frames:

When you click on this link, a pop-up will open where you can upload the images:

Tip! You can add more than one image at a time by dragging the files or the folder (containing only the images) to the upload field.

1. Stickers

To avoid that the stickers look pixelated, the images for the stickers should be 20% bigger than the maximum size that you want the users to be able to make them in their PhotoFun composition.

We've seen that the size 450 x 450 px maximum works well in different kinds of compositions. You can also make the stickers vertical or horizontal, for example 200 x 400 px or 400 x 300 px. You can make them bigger, for example 500 x 500 px, but the users will eventually make them the size they want for their composition and they will only add unnecessary image size.

It's a good idea (depending on the campaign) to add a small white (or black) frame around the sticker's profile to make it stand out more above the background by giving it the look of a real sticker. This effect works better on illustrated stickers rather than on real images.

It's also recommended to leave a bit of transparent space around the image so that the borders of the image don't reach the borders of the file. This way you avoid unwanted image cutoff and it helps to separate the scaling and rotation tools in the promotion, showing the whole sticker without interference.

Tip! The application detects the name of the file to get the name of the sticker. This can be changed afterward, but we still recommend naming the files coherently and not of the type: "IMG_1234.png" o "sticker_001.png". A file named "pink-mask.png" will be imported as "PINK MASK".

2. Frames

The format of the frame will always be square, and we recommend uploading frames designed to a size of 800 x 800 px.

If you want the frame to only cover a specific area of the composition, you should create the file in the same total size and leave the area that shouldn't be covered in transparent mode.

Tip! The application detects the name of the file to get the name of the frame. This can be changed afterward, but we still recommend naming the files coherently and not of the type: "IMG_1234.png" o "sticker_001.png". A file named "party.png" will be imported as "PARTY".