Back to the Stickers development page

Step-by-step examples of creating sticker templates

Creating a basic sticker template

Let’s create a sticker template that will add a sunglasses sticker to a user photo (into the eyes area). You can download graphics for this sample template here. The resulting template can be downloaded here.

Open the Template Creator. Select File menu > Create Project.

New Project window will open. Select the Sticker template type and New PSD document. Then set the path to your project.

It is important to select the correct template type. A peculiarity of sticker templates is that a user photo is never cropped. Although you can also add stickers in other template types, a user photo will not be cropped only if you select the Sticker template type.

The Template Creator will generate the correct structure for a sticker template. Let’s look at the layers arrangement.

You should place graphics for your sticker into the Sticker group.

Each individual sticker that you create in the Template Creator should be placed into a separate group whose name starts with the word ‘Sticker’ (e.g.,Sticker 1, Sticker 2, etc.). If your template contains only one sticker, then the name of the only group can be just ‘Sticker’.

The sticker group contains Rectangle 1 - you need it only to be able to reparse your PSD document in case you forgot to add your sticker graphics into the sticker group. It should be deleted as soon as you’ve added your graphics into the sticker group.

All layers a sticker consists of are rasterized inside its group. You can apply a blending mode to a sticker group (see the list of blending modes), as well as apply a mask to it.

The smart object - SQ Frame Region (Do Not Delete!) [uv] - is used for technical purposes only. You can also put test photos inside the Smart Object to try them with your template in Photoshop.

Place the prepared layer with sunglasses into the group named ‘Sticker [uv]’. Delete Rectangle 1.

If there is not enough room in the canvas for the sunglasses layer, expand the canvas so that you could fit the sunglasses graphics in.

Technically, you could leave the canvas size as is, downsizing the graphics layer instead. However, downsizing a sticker in the PSD document may lead to loss in quality during its automatic scaling or creating subsizes.

Now head back to the Template Creator and reparse the PSD.

When reparcing is complete, select the Frame Region and open its filters. Add the Rasterizationfilter. Its role is explained later in details.

The panel on the left will now display the sunglasses sticker.

Let’s now position the sticker. Technically, a sticker positioning is performed with the help of the Rasterization filter: its parameters define the sticker position and scaling size.

To access the parameters of sticker positioning in the Template Creator, right-click the ‘Sticker [uv]’ layer to open the context menu, then select Edit rasterization > SQ Frame Region (Do not delete!) [uv] > Rasterization ‘Sticker [uv]’.

You can also access this dialog if you choose Manage rasterizations… from the same context menu of the sticker layer, or via the Filter settings dialog that can be opened from the context menu of the Frame Region layer.

The sticker position editor will open.

The left part of the window displays sticker settings, while the right part shows preliminary results of its positioning.

Let’s start adjusting the sticker by specifying its center point. In the glasses sticker, it is wiser to position it not in its real center but near the nose bridge.

The initial coordinates of a sticker center point are always x=0; y=0. The reference point is positioned in the geometric center of a sticker image. The x-axis is directed horizontally to the right, and the y-axis is directed vertically upward. The center point is defined by the aim icon on a sticker preview.

Now move the aim marker to the nose bridge area or edit the center point position by changing the Y coordinate to 195. After that, the preview will look as shown below

Note that when you reposition the center point, its position does not change in relation to facial features. Its position changes only relative to the sticker image itself.

Before the center point
has been repositioned
After the center point
has been repositioned

The next step is sticker scaling. Guided by anthropological reasons, it is best to set the scaling size of the glasses sticker relative to the head width. Let’s set the size to 100%.

The sticker scaling size is 100% (of the head width)

The next step after adjusting a sticker center point and its scaling is its positioning.

To position a sticker in a certain face area, you need to select one or several marker points on the face scheme and adjust the force of attraction of the sticker to each of them (at least one marker point must be selected).

The Template Creator offers a set of pre-configured bindings for some typical cases of sticker positioning. These default bindings can be found in a drop-down menu above the face scheme to the right of the marker points check boxes.

These pre-configured settings do not cover all cases of sticker positioning and cannot guarantee quality positioning for all stickers. However, it is advisable to use them as the starting point and then adjust them for a particular sticker.

In this particular case it is better to create a custom binding. Select marker points as shown on the scheme below:

Note that when you select marker points on the scheme they are outlined with lines. The coordinates of the force of attraction aim icon are: X: 0; Y: 20544. This is its default position for the Forehead binding.

You can specify additional marker points inside the resulting polygon, if needed. They will also affect the sticker positioning. In this particular case selecting additional marker points is not needed.

Judging by the previews, the glasses start falling into place.

However, if we have a look at other test photos, we can see that not in all photos the glasses are directly on the bridge of the nose yet:

To place them a little lower, you need to adjust the sticker force of attraction to its marker points.

Pay attention to the aim icon on the face scheme. Contrary to what one might expect, it does not specify the exact place where a sticker will be positioned. The aim icon is used to define and adjust the force of attraction of a sticker center to each specified marker point. The closer is the aim icon to a marker point, the stronger is the force of attraction of a sticker to this point.

You can move this force of attraction aim icon either by using your mouse to drag the icon to the desired position or by entering its coordinates in the corresponding field manually.

The aim icon of the force of attraction is positioned along the horizontal and vertical axes (X and Y). The axes are directed horizontally to the right and vertically upward, respectively. The origin of coordinates coincides with the bridge of the nose marker point.

The Y-coordinate of the the force of attraction aim icon ranges from -40000 to 40000, the X-coordinate ranges from -26800 to 26800. It is allowed to use whole number coordinates only.

Due to such range of coordinates, it is important to understand that changing the aim position by several units will not result in a notable change of a sticker position in photos with small resolution (including the previews in the sticker position editor). However, changes will be notable in photos with big resolution.

For the current template, you should move the aim icon downward as shown in the screenshot below. Its new coordinates should be as follows: X: 0; Y: 12500. When you move the aim icon down, the force of attraction of the sticker center to lateral marker points (on the left and on the right) becomes weaker; at the same time the force of attraction to the lower marker point becomes stronger

Judging by the previews, the glasses sticker is in its proper place now.

Now click OK to save all sticker settings and test the template. You can go back to any step you want to edit sticker settings, if needed.

The resulting template from this section can be downloaded here.

Creating a sticker template with sub-sizes

Experience has proven that the largest user photos processed by templates have 5000 px on the long side. That’s why it is recommended that the sticker original size should be large enough to look good on photos with 5000 px on the long side. For a sticker to look good on smaller photos, you need to create several sub-sizes.

Sub-sizes are usually created by halving the size values. That is, you can create the following sub-sizes for the original size of 5000 px: 2500 px, 1250 px, 625 px. Also, the following set of sub-sizes is commonly used: 3200 px, 1600 px and 800 px. For some templates you may need to experiment with the choice of optimal sub-sizes to achieve high-quality results of user photo processing. The template Creator lets you edit your sub-sizes at any moment.

When a user photo is processed, the closest sub-size is chosen (a bigger or equal size to a given user photo, on the long side). Therefore, if you’ve created a template with 5000 px on the long side and with the following sub-sizes: 3200, 1600 and 800 pixels, they will be applied to different user photos as shown in the table below:

800 px sub-size A photo with the long side up to and including 800 px
1600 px sub-size A photo with the long side ranging from 801 px up to and including 1600 px
3200 px sub-size A photo with the long side ranging from 1601 up to and including 3200 px
Original template graphics (5000 px) A photo with the long side exceeding 3200 px

So, select the Sticker template type in the Template Creator and use the prepared PSD document with a sticker as a PSD document (download it here). The PSD document should be opened before you open the New Project dialogue.

Then, go to the Advanced tab, check the Enable Subsizes checkbox and click the Edit button to open the Subsize Editor.

Use the arrow buttons to the right of the specified size to change its value in increments of 100 pixels. If you need to choose a more specific number (like 1920), you can enter it manually. It is allowed to add up to 5 sub-sizes in a project.

Let’s specify the following sub-sizes in the corresponding block: 800 px, 1600 px and 3200 px.

The next steps are pretty much the same as with other sticker templates.

Reparse the PSD document. The Template Creator will automatically create a set of graphics for each chosen sub-size. A set of graphics with the closest size will be used when processing a user photo.

After you have reparsed the PSD document, you need to position the sticker.

These are recommended position settings:

After you have adjusted all the settings, click OK to save them and close the Sticker position editor.

Then test the template using different test photos. In the upper right corner of the Template Creator there is a checkbox letting you filter photos by size.

When filtering test photos, you can choose filter values that coincide with the sub-sizes specified in your template.

After choosing test photos that match the specified sub-size, you can see results of processing with the specified sub-size.

All test photos have pop-up hints showing the size of the photo in pixels, as well as the sub-size that will be used when processing this photo.

Make sure the sticker is displayed correctly in the template. To do so, apply it to several photos for each sub-size (800, 1600, 3200, original size).

Click the ‘Export Results’ button to save the results and then save the project.

To see the difference between sticker templates created with and without sub-sizes, make a template based on the same PSD document, but without sub-sizes.

Process the same user photos (which you processed with a template that contained sub-sizes) and compare the results:

As you can see, the sticker looks low quality and has jagged edges in a template without sub-sizes.

You can edit / add / remove sub-sizes in your existing sticker templates. To do so, go to the File menu, and select Edit Project.

Make the edits you need in the Sub-sizes Editor dialog and save the changes.

You will be given a message saying that you need to reparse the PSD document.

This has to be done to update the list of sub-sizes and generate the updated resources all over again.

The resulting template from this section can be downloaded here.

Creating a multi-layer sticker template

This section demonstrates how to work with several stickers and blendings. We’ll take the template we created in the previous section as an example.

To add a more realistic look to the template, you should make the glasses lenses transparent. In order to achieve that, it is necessary that your template contains 2 stickers: one with the glasses frame, and the other with the lenses (the Multiply blending mode should be applied to the latter one). These 2 stickers, combined together, will look as a single whole (one-piece sunglasses).

Head to Photoshop, make a copy of the Sticker group and name it ‘Sticker with the lenses’. Then rename the first sticker to ‘Sticker with the glasses frame’.

Add masks to the layers with glasses so that the frame is masked in the first sticker, and the lenses are masked in the second one.

Apply the Multiply blending mode to the sticker with the lenses.

You can see that the two stickers are of different sizes now, because masks have been added to their layers. The sticker with the lenses is now smaller than the sticker with the glasses frame.

The difference in sticker sizes can potentially cause problems when scaling and positioning the lenses sticker. If the two stickers have different original sizes, you cannot apply the same position and scaling settings to them, in order to combine the glasses frame and the lenses into a single whole.

An example of stickers dissimilation: they do not look like a single whole even with the same settings applied to them.

To solve this problem, combine the stickers into a group. To group stickers together in Photoshop, press and hold the CTRL key, select the needed groups of stickers and right-click one of them to open the context menu. Select the ‘Link layers’ command.

After you have grouped the stickers, head back to the Template Creator and reparse the PSD document. After the document has been reparsed, go to user photo region filters. We already have 2 Rasterization filters - one for the glasses frame and the other for the lenses. Since we have combined the stickers into a group, we can open the position editor for either of the two stickers - all the settings regarding the stickers scale, bindings and the force of attraction will be applied to both stickers.

Now go to the sticker position editor. To do so, click the Position parameter in the first rasterization filter.

You will notice that the name of the dialog is now ‘Sticker group position editor’, not the ‘Sticker position editor’. When you make changes regarding sticker scaling size and positioning, they will be applied to both grouped stickers.

If you hover the mouse over the vertical button on the right named ‘Visibility of the group elements’ you will see the control block that lets you manage grouped stickers.

This block lets you control visibility and blendings for the stickers inside the group. If you switch the parameters on and off, all changes will be shown in the previews.

Judging by the test photos in the sticker group editor, the glasses sticker is positioned and scaled correctly.

Click OK to apply changes and process the test photos. If any edits are necessary, go back to any step you need and make adjustments.

You can download and check the resulting template from this section here.

Certain sequences of actions with groups of stickers may lead to conflicts in sticker groups positioning. You can learn what causes these conflicts and how to resolve them here.

Creating a template with symmetrical stickers

Sometimes you need to position stickers symmetrically relative to the vertical axis of the face.

This can be done in two ways:

Method 1: Place both objects into one sticker and position / scale it only once relative to a marker point on the centre line.

This method does not work properly in cases when the face in a user photo is asymmetric (e.g. due to strong facial gestures - eyewink, raised brow, etc). In such cases images placed into one sticker will not be positioned correctly in relation to face features.

Method 2: Place each image into a separate sticker. Position one sticker first, then mirror its position settings in relation to the vertical axis and transfer them to the other sticker.

The 2nd method lacks the limitation mentioned before, as each of the two stickers will be positioned individually, using its own binding points. That’s why this method is advisable.

How to use this method:

  1. Adjust the first sticker center point, set its scaling size, select the marker points and adjust the force of attraction. Save the changes.
  2. When you are content with the results of adjusting the settings mentioned above, open the position editor of the second sticker. Copy the settings using the Copy from... menu.
  3. Set the marker points for the sticker in the mirror image.
  4. Enter the coordinates for the force of attraction of the sticker center to the marker points. Note that the x-coordinate (the horizontal axis coordinate) should be entered with the opposite sign (e.g., if the coordinate was ‘1010’, then you should enter ‘-1010’).
Back to the Stickers development page