Designing 2D UI Elements for Game Graphics
Icons, buttons, frames, health indicators, inventory panels—all this is UI graphics. Its quality either immerses the player in atmosphere or hinders. A poorly drawn sword icon in RPG destroys impression more than average wall texture because players look at icons hundreds of times per session.
UI element design for games differs from web design in several fundamental parameters: format and resolution requirements are different, work is strictly within engine technical constraints, and final result is evaluated not in browser but on different screens with different dpi.
Technical Constraints That Define Style
Sprite Atlas (Sprite Atlas)—basic tool for packing UI graphics in Unity. All icons, all interface elements are packed into one or several atlases to minimize draw calls when rendering Canvas. One atlas = one batch. If icons scattered across separate textures—each icon on screen = separate draw call.
This creates atlas size and count limits: usually 2048×2048 max for mobile, 4096×4096 for PC. All UI on one screen—in one atlas. This means designer must know in advance: do all inventory icons fit in 2048×2048? At 64×64 pixels per icon—1024 icons. At 128×128—256. Atlas planning starts at technical spec stage, not after final art.
Export formats: PNG uncompressed for sources, inside Unity textures convert depending on platform (ETC2 for Android, ASTC for iOS, DXT5 for PC). Alpha channel—separate PNG or via RGBA in single file, depends on project settings. Transparency via separate mask channel sometimes gives better quality under compression.
Layers and overrides in Figma—standard for UI art prep. Each element—separate component with state variants (normal, hover, pressed, disabled). On final export all variants auto-slash via Figma plugins like Spriter Pro or manual export via Assets → Export.
What's Included in UI Element Design
Icons—most labor-intensive type. RPG games often have 200–500+ item icons. Standard pipeline: style guide on 10–20 reference icons → approval → serial drawing by template. Each icon with serial production takes 30–60 minutes, unique "showcase" icon—2–4 hours.
Frames and Panels—decorative borders for windows, dialogs, inventory. 9-slice (NineSlicedSprite in Unity) support is critical: frame must scale correctly without stretching decorative corner elements. When drawing, corners and edges must occupy exactly the pixels needed for 9-slice rule—documented in handoff materials.
HUD Elements—health bar, mana bar, timers, markers. Readability during animation is key: filling health bar must be visible even during fast movement. Test at real target platform resolution, not Figma preview.
Buttons and Navigation Elements—all states (normal/hover/pressed/disabled/focused for gamepad). Focused state often forgotten when drawing for mobile, remembered only on console port.
Case Study: 300-Icon Inventory Redesign
One project redesigned item system for action RPG: style shift from realistic to stylized. 312 icons, 6-week deadline. Solution via templating: developed 8 base silhouette shapes (sword, shield, bow, potion, armor, accessory, resource, quest item) and style guide with color overlay, highlight, shadow rules. Each icon built on silhouette with detail variation. This cut average drawing time from 45 to 25 minutes while maintaining stylistic unity.
Icon Readability on Different Backgrounds
Icon must be tested not just on neutral gray Figma background. In game it appears on inventory panel background, on dynamic scene via semi-transparent HUD, on dark and light theme variants if game supports multiple color schemes. Icon perfect on dark background may completely vanish on light.
Standard technique—outline (outline) with contrasting color. For dark icons—light outline 1–2 pixels. For light—dark. But outline via standard uGUI Outline component generates extra mesh copies and works poorly with TextMeshPro. For icons better to bake outline directly to texture or use SDF approach via ShaderGraph: icon renders as SDF texture, outline added via shader parameter without mesh change.
Another technique—Drop Shadow under icon. Soft shadow diameter 4–6 pixels separates icon from any background. One of most reliable methods for UI with dynamic background (when HUD icons overlay game environment).
Interaction With Programmers and Artists
UI graphics always done in tight contact with programmer styling the interface. Before drawing begins we agree: atlas sizes, file naming rules (convention for Sprite Atlas auto-packing), multi-resolution support (x1/x2/x3), source handoff format.
Size and shape changes after styling begins—costly revisions. So final spec document (dimensions in pixels, 9-slice rules, color codes) approved before export, not after.
| Work Volume | Timeline |
|---|---|
| 20–50 icons (serial drawing by style) | 1–2 weeks |
| Full UI kit: buttons, frames, icons (up to 100 elements) | 3–5 weeks |
| 200–400 item icons | 6–12 weeks |
| Redesign existing UI with new style | 4–8 weeks |
Cost calculated individually based on element count, uniqueness, quality requirements.