Stickers development

A sticker is an image that is applied to a face found in a user photo. A sticker adapts to the face using the marker points found on it; its size is also scaled to fit the size of the face.The original photo is not cropped.

Examples of sticker templates can be found in the Photo Lab (iTunes, Google Play) app in the following categories: Face Photo Props, Flag Face Paint, Hats & Caps Effects and others.

Unlike with frame templates or facial templates, when a user photo is processed with a sticker template, it is not resized because sticker templates do not aim to insert a user photo into a specified area in a template. They just place images called stickers on faces found in user photos.

In order for a template to be properly processed by the Template Creator, it needs to have a certain structure in Photoshop. Read this page for rules and special aspects regarding layers arrangement in a PSD document.

Creating a project in the Template Creator

To work with the Template Creator, you should associate your PSD file containing layers, with a .pttp2 format project file.

The Template Creator lets you generate drafts for any template you want. The Template Creator generates a set of groups and subgroups with valid names, thereby minimizing the chance of error while creating the template structure.

How to start: a step-by-step guide

Open the Template Creator when Photoshop is already launched (if Photoshop is not running, it will start automatically when you open the Template Creator). Go to the "File" menu, and select "Create Project":

A dialog will open, where you need to fill the parameters of your template and save it in a selected directory.

When you are done with the dialog, The Template Creator will generate a new PSD file in Photoshop. This file is associated with a new project and has the necessary structure of groups and subgroups of layers.

If there are open documents in Photoshop, the project creation dialog will allow you to make a project based on an existing document:

Select a PSD document to include into the project and check the Use As Sticker box on the opposite.

You can change the binding of a PSD document to the project at any time by clicking "File > Edit Project"(CTRL + E).

Apart from this, you can also change the project type. Please note that changing the template type can affect the result.

More information about the Template Creator and how to test ready templates can be found in this section.

User photo region

In sticker templates the smart object - SQ Frame Region (Do Not Delete!) [uv] - is used for technical purposes only and does not affect the positioning of a user photo in a template.

You can put test photos inside the Smart Object to try them with your template in Photoshop.

In other template types (e.g. frames and facial templates) the frame region (also called user photo region) plays the leading role.

The Template Creator lets you flip smart objects of the user photo region horizontally or vertically.

To flip a smart object of the face region, use standard Photoshop tools. For example, go to Edit menu > Transform > Flip Horizontal / Vertical.

When you reparse your PSD document, you tell the Template Creator that one or several user photo regions have been flipped. Later, when you process test photos, make notice that images placed into a specified face region are flipped horizontally or vertically.

Flipping works in the same way for all user photo regions regardless of the template type.

Sticker positioning

Marker points

The position of a sticker is defined by the facial points called marker points (the corners of the eyes, the corners of the lips, eye pupils, etc., see the scheme below).

There is a predefined set of marker points used to position a sticker. Each of the marker points has its meaning according to face morphology: the corners of the eyes, points defining head outlines or lips outlines, nose tip, etc

To define a sticker position, you need to select one or several marker points. When a user photo is processed by a sticker template, a face in a photo is analyzed automatically, and the position of each marker point is determined.

Examples of marker points recognition

Then a sticker is positioned in accordance with the selected marker points and their position on the face. A sticker is also automatically rotated according to the face position (its tilt) in a user photo.

Sticker center

When a sticker position has been determined, the sticker center is placed to the found point. A sticker rotation is also performed in relation to its center. That is, when we position a sticker, we position its center, to be more exact.

Marker points are positioned differently in different faces due to anthropological diversity of human faces. That is why a sticker’s position may vary in different photos, as seen in the examples below.

Force of attraction to marker points

A sticker also has the so called force of attraction of its center to the chosen marker points. The stronger is the force of attraction to a chosen marker point, the closer the sticker center will be positioned to that point. So, if you select several marker points, it is important to adjust the force of attraction to each of them accurately for a quality template positioning. The stronger is the force of attraction of one marker point, the less strong is the force of attraction of other points.

The example below demonstrates how the force of attraction to different points affects the position of a sticker center. 4 marker points in the nasolabial area have been used to position this sticker. The marker points have the following coefficients of the force of attraction:

  • the coefficient of the two outer marker points is 1;
  • the coefficient of the lower point is 5;
  • the coefficient of the upper point is 10;

Therefore, the sticker center will be positioned between all 4 marker points, but closer to the upper point (because it has a stronger attraction to the upper point).

Sometimes, when you create a template, you need to set a position of a particular point of a sticker, which is not its center. For instance, if you create a template with a smoking pipe, you need to attach the mouthpiece to the lips corner. Since it is the sticker center that is attached to the specified position, you need to reposition the center placing it to the mouthpiece. Then the mouthpiece (not the visual center of the sticker) will be attached to the lips.

Default position of the sticker center Changed position of the sticker center

Result you will get
with the default position of the sticker center
Result you will get
if the sticker center position has been changed

Sticker scaling

A sticker can be scaled relative to the width and the height of the head . This lets you adjust a sticker size to individual features of different faces.

Therefore, when a sticker is applied to a face, its graphics is upscaled or downscaled in order to fit the face size. This can lead to a loss in quality or appearance of artifacts. So, keep this point in mind and use images of proper quality and size.

Sticker adaptability

Let’s see how stickers can automatically adapt to individual features of different faces in user photos. We’ll look at the moustache sticker template, whose center is attached to facial points in the nasolabial area. The sticker scaling size is set in relation to the width of the face, and the upper marker point has the strongest force of attraction.

In both photos below the sticker is located correctly, in the area where we expect it to be. However, we can see 3 differences if we compare the images.


  1. Different size of faces in photos. The sticker is automatically upscaled or downscaled to fit the face size.
  2. Head tilt. The sticker is rotated automatically by the necessary angle.
  3. Different face expressions. The girl in the first photo is shouting; the girl in the second photo has a neutral facial expression. Because of this the marker points in the two photos are located differently. Nevertheless, the sticker is located in the nasolabial area in both photos.

Keeping all this in mind, it is important to take into account the physical meaning of a sticker (headwear, moustache, beard, etc.) when selecting marker points for it and choose points with the corresponding morphological meaning.

Several stickers in one template

Sticker templates allow you to use several stickers in one template; moreover, you can adjust each of them individually (choose the necessary position, scale, etc.).

Besides, you can use one sticker several times in one template. Each duplicate of the sticker can be positioned and scaled individually.

One and the same sticker, positioned differently, is used in the example above. However, its duplicates look different thanks to the soft_light blending mode applied to all of them. Blending modes are used to add a more realistic look to stickers - e.g. to preserve the skin texture, and more.

One sticker can actually consist of several stickers.

The glasses template below consists of two stickers: the glasses frame and the glasses.

You should apply the Multiply blending mode to the glasses sticker and combine the two stickers by choosing the same marker points, force of attraction and making other position and scale adjustments in order to position the two stickers together properly.

Creating sub-sizes for stickers

User photos that will be processed by templates can be of distinctly different sizes. As we said before, stickers are automatically scaled to fit the size of uploaded user photos.

If the initial size of a sticker is large, but a user photo is small, the resulting image will contain noticeable artifacts due to sticker downscaling - the sticker edges will look jagged.

In the opposite case, if a sticker dimensions are noticeably smaller than the dimensions of a user photo, the sticker will look blurred and low quality because it has been stretched.

If the difference between the original sticker size and its size after scaling is minimal, the artifacts will be insignificant and hardly noticeable.

To minimize the appearance of artifacts during scaling, the Template Creator lets you create sub-sizes for quality sticker scaling.

Each sub-size is actually a copy of the original sticker graphics that has been resized to a specified size using quality image resampling. This option makes it possible to pick the closest sub-size for each user photo, and avoid extensive graphics scaling.

Additional information

Animated templates

This template type can be animated. More information on animated templates development can be found here.

There are some temporary restrictions regarding using animation in templates. Learn more about them here.

Examples of sticker templates development

This page offers several step-by-step examples of sticker templates creation and illustrates some special aspects of their development. We strongly recommend to study that page as it covers many important points.

Examples

Special aspects of development

Important video tutorials

Other video tutorials (e.g. on templates with several user photo areas or work with filters) can be found here.