Effect Icon Creation
Are you ready to submit and publish your effect? First, you’ll need a effect icon that visually represents your effect to the public. You can either design a face-based effect icon using Effect Icon Creator, or create your own image separately and upload it as an effect icon. This guide demonstrates both ways of creating an effect icon.
Open Effect Icon Creator
To open Effect Icon Creator, click the Create icon button in the titlebar.
You can also open Effect Icon Creator directly from the submission form by clicking the Add button [+] under Effect Icon.
Use Preselected Portraits from Effect Icon Creator
Use Effect Icon Creator to easily apply your effect to one of many available portraits. This method of effect icon creation is most applicable to face-based effects, like makeup. You can also import images from your computer to use by clicking the Add button [+].
Once you have selected a portrait, you can crop and resize your image.
Design Your Own Effect Icon
You can also create your own effect icon separately. This is most applicable to effects that don't necessarily involve a face. You can use an image processing tool, screenshots, or other illustrative methods to create a design that visually represents your effect.
Open Effect Icon Creator and switch to Upload* image. Click the Add button [+] to select a file from your computer.
Crop and resize the image to your liking. Once you are finished, click Done.
Best Practices
As you design your effect icon, 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
When you upload your effect icon, Effect House will help to crop and optimize it with a round corner and transparent blend zone.
Visual Design
Focus on the Effect
Focus on the essence of each effect and redesign it in your effect icon. 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 over-complicate 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 effect icon 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.
Exceptions to graphics guidelines can be made for Branded Effects that require a certain visual style or photos in their effect icons.
Consistency is Key
Try to be consistent in your choice of design elements. You want to ensure that users recognize and understand your effect icons. 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 effect icon 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 effect icons.
Recommended gradient metrics:
- Angle: 60° or 120° | Type: Linear
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 effect icons 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.
Open the Submission Form
When you are ready to submit your effect, click the Submit button in the titlebar. Your effect icon appears in the Effect Icon section. If you would like to further edit your effect icon, click on it in the submission form to open Effect Icon Creator. Learn more about the effect submission process.
