Skip to main content
TikTok Effect House Platform Logo
Download
Accedi
Publishing

Thumbnail creation

Are you ready to submit and publish your effect? First, you’ll need a thumbnail that visually represents your effect to the public. Feel free to design your own thumbnail or simply use a still frame from your effect demo that best embodies your work.

Thumbnail best practices

As you design your thumbnail, remember to follow our best practices below to ensure that your design is eligible to be published.

While the size of your full design canvas will be 162 x 162 px, your safe design area will be the central 144 x 144 px.

  • File format: PNG
  • Safe area: 144 x 144 px
  • Export size: 162 x 162 px
Note
Note

When you upload your thumbnail, Effect House will help to crop and optimize it with a round corner and transparent blend zone.

Thumbnail templates

For your convenience, we’ve provided a package of design templates that you can use to begin creating your thumbnail.

↓ Thumbnail_Template.psd

↓ Thumbnail_Template.ai

Visual design

Focus on the effect

Focus on the essence of each effect and redesign it in your thumbnail. The goal is to communicate an effect quickly and clearly. You don’t need to include all the effect details; pick one to three key features and design elements that best describe what the effect does.

Simplicity and readability

Don’t overcomplicate or overfill the design with unnecessary details. You also don’t need to fill the entire content area. Capture the effects’ intent in a way that’s readable at a small size.

Graphics and illustration style

The thumbnail style is based on a flat vector graphic approach and generally uses solid shapes with subtle gradients and drop shadows. Don’t include photographic details and avoid using different illustrative styles.

Note
Note

Exceptions to graphics guidelines can be made for Branded Effects that require a certain visual style or photos in their thumbnails.

Consistency is key

Try to be consistent in your choice of design elements. You want to ensure that users recognize and understand your thumbnails. Don’t try and reinvent the wheel when there’s already an existing design that represents a specific idea or action.

Gradients

Use gradients for background and large solid shapes. They’re a great way to add depth into the thumbnail design, creating a clean and refreshing look. To avoid visual noise, we recommend using no more than three colors in a gradient; two-color gradients often provide the best balance for thumbnails.

Recommended gradient metrics: Angle: 60° or 120° | Type: Linear


Analogous colors work best

Complementary colors become muddy in the middle

Don’t overdo it. Keep a consistent linear gradient.

Shadows

Shadows can help emphasize an image and lift it from the background. Use image shadows to add dimension to and highlight flat shapes.

Recommended shadow metrics: Opacity: 70% | X and Y Offset: 2px | Blur: 2px

Typography and copy

Use text in thumbnails only when it is an essential part of the effect. Use minimal text and make sure it is easy to read on a small scale. Use the word “TEXT” to represent effects that include any text edits.

Cropping your thumbnail

You will upload your new thumbnail when you are ready to submit your effect. See Submit your effect for more details on how to do so.

Click on the Effect House icon to select your thumbnail from your local drive.

After selecting your thumbnail, the submission window will be replaced with the cropper window. You will be able to preview the updates live while resizing the crop area. Drag the interactable handles on the size and corners of the crop window to resize the thumbnail.

Click Apply to go back to the submission window and display the icon. Clicking Cancel or the red X at the top left will you back to the submission window without applying any changes.

References

Submit your effect