Node Copied to Clipboard!

Overview of the Adobe Illustrator CC Source AI File

The overall design theme can be modified using the Adobe Illustrator CC Source AI file.
Each element is named with a Global Identifier whose shape, style and formatting applies to all the elements of your editor players presentation. Keywords are used to delineate the framework of Layers under each element.

Warning! Do not change the keywords within the source AI file. You may add new properties and change property values, or create new shapes or raster images within the existing structure if necessary.

Below are instructions for how to edit and export a custom design theme.

Layers

Within CustomUI.ai there is a hierarchy of Layers, Shapes, Raster Images and Text (See Window > Layers or press F7 to open the Layers Panel). There are existing tutorials online for How to use Layers in Adobe Illustrator CC.

Tip! To expand all sublayers to display the entire hierarchy Alt-click the expansion triangle.


Shapes

Typically shapes are used as backgrounds or other visual components. The "Make Pixel Perfect" feature of Illustrator is recommended to ensure clean shapes. When appropriate the <Slices> property is used for rectangles with round corners. There are existing tutorials online for How to Draw and Edit Live Shapes in Adobe Illustrator CC.

Tip! Some shapes have the keyword <Bounds> indicating the visual style is ignored but the size of the shape acts as a boundary of the element or sub-element.


Raster Images

Like a Shape a Raster Image is a type of artwork but is made up of pixels, like a jpg or png. There is some information not included with a Raster Image required by certain Types and Properties, so consult the documentation when choosing to use a Raster Image. There are existing tutorials online for How to Import Artwork files in Adobe Illustrator CC.


Text

Text position will most likely be modified based on the Properties of the Text Layer. However, the Fill Color of the text will be exported as assigned. There are existing tutorials online for How to Edit Text in Adobe Illustrator CC.

Warning! Currently the font family is limited to Arial or Myriad Pro and the font style to Regular or Bold.


Export

To export your theme, navigate to the Layer exporter panel.

Local Export: To use the Local Export feature, ensure your Illustrator file is located in the correct directory within your Modest3D Project, for example (Project)/UIExports/Editor

Export to Project: The Export to Project feature will prompt to you to "Select a Project Folder...", meaning the root folder of your Modest3D Project.

Remove "Copy" From Layer Names: When designing your theme it is important not to change the keywords. Remove "Copy" From Layer Names is a utility feature for removing the 'Copy' text from the names of duplicate layers.
In general practice modifying the existing layers is safer than creating new layers or duplicating existing ones. If a required Property is not provided in the CustomUI.ai template be sure to consult the Types and Properties documentation before attempting a change.

Tip! During export your theme will be converted into images and layout information,
and then copied to (Project)/UIExports/Editor/CustomUI (a process which takes roughly 48 seconds).
It is recommended that you save your Illustrator file before exporting.
If your changes do not appear try closing the Editor and re-opening your project.


Next we'll review the Keywords