>_
SudoMock

Smart Objects Guide

Deep dive into how SudoMock handles Photoshop smart objects. Learn about asset placement, transformations, and adjustments.

What Are Smart Objects?

Smart objects in Photoshop are containers that hold image data. They're non-destructive, meaning you can transform, scale, and edit them without losing quality. In mockup templates, smart objects define where your designs will be placed.

When you upload a PSD, SudoMock:

  1. Finds all smart object layers
  2. Extracts their position, size, and transforms
  3. Generates a unique UUID for each
  4. Creates thumbnails showing the smart object location

Anatomy of a Smart Object

Smart Object Structure
1
// Smart object data from upload response
2
{
3
  "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
4
  "name": "Front Design",
5
  "layer_name": "Smart Object 1",
6
  "size": {
7
    "width": 3000,    // Content dimensions
8
    "height": 3413
9
  },
10
  "position": {
11
    "x": 450,         // Position in mockup
12
    "y": 380,
13
    "width": 1200,    // Displayed size (after transforms)
14
    "height": 1400
15
  },
16
  "quad": [           // 4-point perspective (if transformed)
17
    [450, 380],       // Top-left
18
    [1650, 380],      // Top-right
19
    [1650, 1780],     // Bottom-right
20
    [450, 1780]       // Bottom-left
21
  ],
22
  "blend_mode": "multiply",
23
  "required": true
24
}

Size vs Position

size = Original smart object content dimensions
position = Where it appears in the mockup (may be scaled/transformed)

Quad Coordinates

For perspective-transformed smart objects, quad contains the four corner points for precise placement.

Asset Placement

When rendering, you provide an asset (your design) for each smart object:

Asset Configuration
1
{
2
  "smart_objects": [
3
    {
4
      "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
5
      "asset": {
6
        "url": "https://your-cdn.com/design.png",
7
        "fit": "cover",
8
        "rotate": 0,
9
        "size": {
10
          "width": 2000,
11
          "height": 2000
12
        },
13
        "position": {
14
          "top": 0,
15
          "left": 0
16
        }
17
      }
18
    }
19
  ]
20
}

Fit Modes

The fit parameter controls how your design fills the smart object area:

fill

Stretches the design to exactly match the smart object dimensions. May distort if aspect ratios differ.

Best for: Exact size matches

contain

Scales to fit entirely within the area while maintaining aspect ratio. May leave empty space.

Best for: Logos, icons

cover

Scales to cover the entire area while maintaining aspect ratio. May crop edges.

Best for: Most mockups ✓

Recommended

Use cover for most product mockups. It ensures the smart object area is completely filled without distortion.

Custom Positioning

Override the default position with custom values:

Custom Size & Position
1
{
2
  "asset": {
3
    "url": "https://your-cdn.com/design.png",
4
    "fit": "contain",
5
    "size": {
6
      "width": 1500,   // Custom width
7
      "height": 1500   // Custom height
8
    },
9
    "position": {
10
      "top": 100,      // Offset from top
11
      "left": 200      // Offset from left
12
    }
13
  }
14
}

Rotation

Rotate the design within the smart object:

Rotation
1
{
2
  "asset": {
3
    "url": "https://your-cdn.com/design.png",
4
    "rotate": 45   // Degrees (-360 to 360)
5
  }
6
}

Color Overlays

Apply a color overlay to the design for color variations:

Color Overlay
1
{
2
  "smart_objects": [
3
    {
4
      "uuid": "...",
5
      "asset": { "url": "..." },
6
      "color": {
7
        "hex": "#FF5733",
8
        "blending_mode": "multiply"
9
      }
10
    }
11
  ]
12
}

Available Blend Modes

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion

Multiply for Dark Products

Use multiply blend mode for dark-colored products (black t-shirts, etc.) to create realistic ink appearance.

Adjustment Layers

Fine-tune your design with adjustment parameters:

Adjustment Layers
1
{
2
  "smart_objects": [
3
    {
4
      "uuid": "...",
5
      "asset": { "url": "..." },
6
      "adjustment_layers": {
7
        "brightness": 10,     // -150 to 150
8
        "contrast": 5,        // -100 to 100
9
        "saturation": 0,      // -100 to 100
10
        "vibrance": 0,        // -100 to 100
11
        "opacity": 100,       // 0 to 100
12
        "blur": 0             // 0 to 100
13
      }
14
    }
15
  ]
16
}
ParameterRangeDefaultEffect
brightness-150 to 1500Lighten/darken overall
contrast-100 to 1000Difference between light/dark
saturation-100 to 1000Color intensity
vibrance-100 to 1000Selective saturation boost
opacity0 to 100100Transparency
blur0 to 1000Gaussian blur amount

Print Area Presets

Some smart objects have predefined print area presets—common sizes and positions for different use cases:

Print Area Presets
1
// From upload response
2
{
3
  "smart_objects": [{
4
    "uuid": "...",
5
    "print_area_presets": [
6
      {
7
        "uuid": "preset-full",
8
        "name": "Full Coverage",
9
        "size": { "width": 3000, "height": 3413 },
10
        "position": { "x": 0, "y": 0, "width": 3000, "height": 3413 }
11
      },
12
      {
13
        "uuid": "preset-center",
14
        "name": "Center Logo",
15
        "size": { "width": 1000, "height": 1000 },
16
        "position": { "x": 1000, "y": 1200, "width": 1000, "height": 1000 }
17
      }
18
    ]
19
  }]
20
}

Ready to Start?

Prepare your PSD or jump into the API reference.

PSD PreparationRender API →