FxFactory Developer

Creating Product Icons

Commercial products should include a custom graphic that will be used on the web and in FxFactory as the product’s icon. Although the icon is always displayed with rounded corners, those are applied dynamically. Please follow these instructions:

  1. Create a square graphic with a resolution of 1024×1024 pixels1).
  2. Add the graphic to your product’s Assets in FxFactory.
  3. Select the graphic as the product’s icon.
  4. Enable the “Rounded Corners” option.

Beginning with FxFactory 6.0.2, it is no longer necessary to use icons with the clapper board overlay when developing products exclusively for Final Cut Pro.

Guidelines

The submitted graphic should not have rounded corners, drop shadows or strong lighting effects. Those features are dynamically applied by the FxFactory application and by our web site depending on the context in which the icon is displayed.

The submitted graphic should not sport a bezel. Bezels do not work well when overlays and other effects are applied. It is also impossible to align the bezel with rounded corners, as the radius may vary slightly from one context to another, or from one version of FxFactory to another.

Avoid putting text in the icon, especially if the text is redundant. For example, the default icon contains the letters “FX” but that icon is just a placeholder, not something to imitate. When is the last time you saw the letters “APP” in an icon on the App Store? Similarly, spelling out the product's name in the icon is redundant: the icon is always displayed with the product’s name.

Prepare for banners! When creating a free product, or if your products goes on sale, etc. FxFactory may automatically add a banner to the product's icon. The overlay is displayed in blue by default, but the color can be customized via a color picker available in the “Product” section. You are encouraged to pick a color that is complementary to the dominant color in your graphic 2).

While products are under development (and only then) FxFactory automatically adds a banner to their icon to help you distinguish between native plug-ins (“PLUG”), Motion Templates (“TMPL”) and 3D Text Styles (“STYLE”).

An Example

If you assign the following graphic as your icon:

…it will be displayed with rounded corners in our app and website:

1)
A resolution of 1024×1024 pixels allows the graphic to be displayed at up to 512×512 points on a Retina display.
2)
…because it looks both cooler and more readable!