Photoshop Art Production Guidelines

Welcome to the VectoUI Photoshop art production guidelines! To turn your design file into a complete Unity UI with one click, follow these simple rules while creating your artwork. The core principle is: the way your layers look in Photoshop is the way the nodes will look in Unity.

1. Basic guidelines

• Use a consistent resolution: Agree on one fixed canvas size for the entire project, such as 1920x1080, and do not change it arbitrarily.
• Use English names: All layer, group, and slice names must use only English letters, numbers, and underscores (for example, btn_confirm_01). Never use Chinese characters or special symbols, because the engine will not be able to recognize them.
• Remove discarded work: After the design is finalized, make sure to delete all hidden and discarded layers and keep the Layers panel clean. Otherwise, those layers will also be generated by the engine.

2. Structure and groups (parent-child relationships)

• Organize content into groups: Develop the habit of using groups. A "Group" in Photoshop becomes a "parent node" in Unity. For example, place a popup's background, button, and text inside a group named Popup_Bag.

3. Merge complex elements (Smart Objects)

• Merge visual effects: If a button or badge is composed of several stacked layers or clipping masks, select them and convert them to a Smart Object.
• Unsupported blend modes: Unity does not support complex Photoshop blend modes such as Overlay and Color Dodge by default. Convert layers that use these effects together with their base image into a Smart Object and export them as one complete image.

4. Slices and transparent bounds (important ⚠️)

• Prevent unwanted cropping: When Photoshop and Lanhu create slices by default, they automatically crop transparent pixels around the image. This can make the image smaller and shift its position after it enters Unity.
• Correct approach: If an image contains glow or shadow effects, or needs to retain a specific transparent border, manually define a fixed slice area with the selection tool when marking the slice in Lanhu. This ensures that the slice dimensions exactly match the design dimensions.

5. Fonts and text

• Keep font names consistent: The font names used in Photoshop should match the font names imported into the Unity project as closely as possible. VectoUI automatically recognizes them and converts them into Unity Text or TextMeshPro components.
• Use fixed text boxes: For multiline text, create a fixed-size text box in Photoshop and do not allow the text to overflow.

6. 9-slice assets

• Replace manually: Stretchable panels that use 9-slicing currently still require the stretch area to be configured manually in Unity. Keep solid-color straight edges clear when creating slices so they are easier to adjust later.