BallinKit Docs
Back to Site

Asset Layers

The core rendering concept of BallinKit relies on a four-layer canvas architecture. This ensures clean visual separation for print-ready generation while maintaining realistic preview mockups.

The Four-Layer Workflow

Prepare your product templates with the following layers in the designer panel:

1. Base Layer

The background product layout mockup that serves as the foundation for the design.

  • Typically a blank garment image (t-shirt, jersey, cap, etc.)
  • Should be high-resolution (minimum 1500x1500px)
  • Can have multiple variants for different colors
  • Should be in PNG format with transparent background
  • File naming: base_front.png, base_back.png, etc.

2. Print Area / Mask Layer

A vector box path that limits the design area boundaries.

  • Defines the printable area where customer designs can appear
  • Design elements inside this mask get clipped to prevent overflow
  • Should be a solid shape (rectangle, oval, or custom path)
  • Typically black on transparent background
  • File naming: mask_front.png, mask_back.png, etc.

3. Design Canvas Layer

The interactive canvas layer where customer designs are rendered.

  • Houses cliparts, custom text, uploaded decals, and customer mockups
  • Supports layer ordering (bring to front, send to back)
  • Handles text warping, rotation, scaling, and positioning
  • Supports SVG, PNG, and JPG file uploads
  • Real-time preview generation using ImageMagick/GD2

4. Shadow & Highlight Overlay Layer

A transparent overlay containing realistic effects for photorealistic mockups.

  • Adds shadows, wrinkles, folds, and light highlights
  • Makes digital designs look like they are printed on fabric
  • Should be semi-transparent PNG
  • Applied on top of the design canvas layer
  • File naming: overlay_front.png, overlay_back.png, etc.

Layer Composition Process

The server-side compositing engine (KIT_Composite class) processes layers in the following order:

  1. Load base layer image
  2. Apply color fill if color variant is selected
  3. Apply pattern if pattern is selected
  4. Render customer design canvas
  5. Clip design to mask layer boundaries
  6. Apply shadow/highlight overlay
  7. Generate final composite image

File Upload Guidelines

  • Format: PNG with transparency (recommended)
  • Resolution: Minimum 1500x1500px for high-quality prints
  • File Size: Maximum 10MB per file
  • Naming Convention: Use descriptive names with view suffix
  • Color Profile: sRGB for web, CMYK for print (optional)

Multi-View Support

BallinKit supports multiple views per product:

  • Front View: Primary design area
  • Back View: Secondary design area (jersey numbers, logos)
  • Side Views: Left and right profiles
  • Custom Views: Add any additional views as needed

Benefits of Layer Architecture

  • Print Accuracy: Output stays restricted to print dimensions
  • Realistic Previews: Mockups retain natural fabric appearance
  • Flexible Design: Easy to swap base layers for different products
  • Color Variants: Same design works across multiple colors
  • Print-Ready: Clean separation ensures professional output
Previous Creating Products Next Designer Settings