Creating an Icon
Best Practices
The icon for a Lens should depict the content of the Lens in the most simplistic way. Below are some best practices to use when creating your Lens's icon:
- Create icon elements using vector shapes
- Use simple forms that are easy to visualize at low resolution
- Work in an illustrated, cartoon-like style
- Work in bright and clear colors
- Use sharp lines and clearly recognizable shapes
- Avoid photos and screenshots
- Deliver icons as a 320x320 PNG and use the standard frame found in the icon template
Photoshop Template
Download the Photoshop Lens icon template below to create your Lens' icon.
You can use the PHOTOSHOP - Lens Icon Template to get started.
Open the template within Adobe Photoshop. Replace the content in the layer labeled [REPLACE ME]
. This will mask your content within a circle. Additionally, you can tune the background color by adjusting the Color Overlay
effect on the Color BG
layer.
To export your icon, select File -> Export -> Export As...
and select PNG
as the export format.
Illustrator Template
Download the Illustrator Lens icon template below to create your Lens's icon.
You can use the Illustrator - Lens Icon Template to get started.
Open the template within Adobe Illustrator. Replace the content in the layer labeled [REPLACE ME]
. This layer has a clipping mask which masks the content to a circle. Additionally, you can tune the background color by adjusting the color of the Frame BG
layer.
To export your icon, select File -> Export -> Export for Screens
and select PNG
as the export format.
Adding the Icon to the Lens
The icon is added to the Lens via the Project Info
settings window. For more information on editing project info, please refer to the Configuring Project Info guide.
When an icon is imported into Lens Studio, the white border is automatically added and the image is cropped to a circle. If you don't have Photoshop or Illustrator, you can still create a Lens icon. Create a 320 x 320 pixel PNG in the image editing software of your choice. The border and circle shape will be applied automatically after importing the square image as the icon