Welcome to the Metruvia Content Creator Series Iconography and Safezones Guide. In the PC environment, a player sits two feet away from a high-resolution monitor, utilizing a precision mouse pointer. UI elements can be tiny, text-heavy, and packed tightly into the corners of the screen.

When you check the “Console Compatible” box for Mod.io, that paradigm shatters. Your UI must now survive the “10-Foot Experience.” The player is sitting on a couch, looking at a television that may be aggressively upscaling a 1080p signal to 4K, navigating with the imprecise flick of a gamepad thumbstick. If your custom vehicle icons are blurry, your text is unreadable, or your custom construction menus clip off the edge of the television screen, the player’s logistical workflow is broken.

This masterclass will deconstruct the strict visual engineering required for console UI compliance. We will explore the mathematics of overscan boundaries, the required pixel dimensions for every menu state, the strict format rules separating 3D textures from 2D UI art, and the design principles that ensure your assets look professional on any television screen.

1. The 10-Foot Experience and Legibility

Designing for a television requires a fundamental shift in artistic philosophy. You are no longer designing for a monitor; you are designing for distance.

1.1 The “No Text” Rule

The most common mistake amateur modders make is writing the name of their train or building directly onto the UI icon (e.g., typing “Metruvia Heavy Freight” in 8pt font across the thumbnail).

The Console Reality: At ten feet away, on a 55-inch television, that text becomes a blurred, pixelated smear. It creates visual clutter and looks distinctly unprofessional.

The Solution: Let the game’s internal strings.lua dictionary handle the text rendering in the menu panel. Your icon should be a clean, high-contrast, text-free graphical representation of the asset.

1.2 High Contrast and Silhouettes

Because televisions vary wildly in color calibration and brightness, subtle grayscale shading in an icon will be crushed into pure black on cheaper TVs. Your icons must rely on strong silhouettes and high color contrast. A player scrolling rapidly through a depot menu with a controller needs to instantly differentiate between a boxcar and a passenger carriage based on shape alone.

2. Console Safe Zones: The Overscan Threat

Unlike PC monitors, which display every single pixel generated by the GPU perfectly to the edge of the bezel, many televisions still utilize a legacy technology called Overscan. To hide broadcast artifacts, the television physically zooms the image in by 2% to 5%, cropping off the outer edges of the picture.

2.1 The Title Safe Area

Sony and Microsoft have strict certification requirements regarding overscan. Crucial interactive elements cannot be placed on the absolute mathematical edge of the 1920×1080 or 4K canvas.

While you cannot inject custom UI panels into the console version of Transport Fever 2 (as discussed in Article 5), this safe zone principle still applies if you are designing preview banners or campaign mission overlays.

The Rule: Keep all critical visual information (logos, focus points of the thumbnail) within the inner 90% of your image canvas. The outer 10% should be considered “bleed” that may be cropped off by a player’s television.

3. The Mathematical Dimensions of Iconography

Transport Fever 2 expects specific icon resolutions for specific menu states. If you upload a 2048×2048 high-resolution render and force the game engine to scale it down to a 116×85 depot menu slot, the real-time downsampling algorithm will create massive aliasing (jagged edges) and waste GPU memory.

You must manually scale and export your icons to the exact pixel dimensions the game requires.

3.1 Vehicle Depot Menus

When a player opens the train depot to purchase your vehicle, the game looks for this file:

res/textures/ui/models_20/vehicle/train/my_locomotive.tga

Required Resolution: Exactly 116 x 85 pixels.

Background: Must be fully transparent.

3.2 Vehicle Management UI (The “Small” Icon)

When the vehicle is actively driving on a line, it appears in the line management menu. This requires an even smaller icon:

res/textures/ui/models_small/vehicle/train/my_locomotive.tga

Required Resolution: Exactly 58 x 43 pixels.

Background: Must be fully transparent.

3.3 Construction and Station Menus

If you are uploading a modular station or a custom asset building, the build menu utilizes a different aspect ratio:

res/textures/ui/construction/station/rail/my_custom_station.tga

Required Resolution: Exactly 160 x 120 pixels.

3.4 The Mod.io Preview Banner

This is the main storefront image players see before downloading. image_00.tga (Located in the root folder of your mod).

Required Resolution: Exactly 320 x 180 pixels (16:9 ratio).

Design Note: This is the only image where text is acceptable, as it acts as your marketing banner. Ensure any text remains inside the Title Safe Zone.

4. Format Requirements: The TGA Exclusivity

In Article 10, we established that all 3D material textures (Albedo, Normal, MGA) must be compressed .dds files.

UI icons are the absolute exception to this rule.

4.1 Uncompressed .tga (Targa)

All UI elements in Transport Fever 2 must be exported as uncompressed 32-bit .tga (Targa) files.

Why not .dds? Block compression (BC1/BC3) creates mathematical artifacts. On a massive 3D train model, the lighting engine hides these artifacts. On a flat, 2D UI icon, the block compression artifacts look like terrible JPEG compression.

The 32-bit Mandate: You must export at 32-bit to include the 8-bit Alpha Channel. If you export a 24-bit .tga, your icon will render in the game menu with an ugly, solid white or black square behind it, blocking the game’s native UI background.

4.2 The “Missing Icon” Crash

If you misspell the file path for your UI icon in your .mdl or .con file, or if you accidentally save the icon as a .png, the console game will attempt to load a nil image. In the depot menu, this often results in a solid blue or gray placeholder box, but rapidly scrolling past a missing UI reference with a controller can occasionally trigger a UI thread crash.

5. Automated Icon Generation vs. Hand-Crafting

For vehicle creators, generating these tiny icons for a 20-train Megapack can be tedious. Urban Games provides an automated tool in the Model Editor to generate icons, but relying on it exclusively for a console release is dangerous.

5.1 The Model Editor Output

The in-game Model Editor has a screenshot tool that instantly generates the models_20 and models_small .tga files with a transparent background.

The Problem: The automated tool uses the game’s internal lighting engine. If your vehicle is dark, the resulting icon will be virtually invisible against the dark-gray background of the vanilla console UI.

5.2 The Hand-Crafted Polish

Professional creators use the automated tool to generate the base silhouette, but then open the .tga in Photoshop to manually adjust the contrast.

Levels Adjustment: Boost the mid-tones so the vehicle “pops” on a television screen.

Edge Clean-Up: The automated transparency mask often leaves a 1-pixel gray halo around the vehicle. Manually erase this halo so the edges are perfectly crisp.

Drop Shadow Ban: Do not manually bake a drop shadow into your .tga. The game engine’s UI layer handles shadows dynamically; adding your own will make the icon look muddy.

6. Summary: The Pre-Publish UI Audit

Before you submit your mod to the Mod.io validation pipeline, run your res/textures/ui/ folder through this strict visual hygiene checklist:

Format Exclusivity: Are all UI elements strictly saved as 32-bit .tga files (not .png or .dds)?

Dimensional Accuracy: Do the models_20 icons equal exactly 116×85, and the models_small equal exactly 58×43?

Transparency Verification: Do all vehicle icons have a perfectly clean alpha channel without hard-coded background colors?

Text Eradication: Have you removed all tiny, unreadable text from the in-game icons to preserve 10-foot legibility?

Safe Zone Compliance: For your main image_00.tga banner, is your core logo contained within the inner 90% of the 320×180 canvas to survive TV overscan?

By treating your UI icons with the same mathematical precision as your 3D meshes, you ensure your mod integrates seamlessly into the native console experience, looking less like a third-party add-on and more like an official expansion pack.