Artwork placement

Everything about how your artwork lands inside a design area is set by the asset object on a smart object entry, plus two optional siblings for colour and tone.

The artwork URL

The minimum asset

{
  "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
  "asset": {
    "url": "https://your-cdn.com/design.png",
    "fit": "crop"
  }
}

The URL has to be public, directly reachable, and immutable: one URL, one image, for good. To change a design, publish it at a new URL and render with that. Reusing a URL for different content is not supported and can return the earlier image. Google Drive is where this bites most often. Replace file and Manage versions keep the same link, so the link keeps resolving to the original design. Upload the new design as a new file, which gets its own link. See why a render shows old artwork. You can send the bytes instead of a link when the artwork is generated on the fly and has no stable address.

Base64 instead of a URL

{
  "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
  "asset": {
    "base64": "iVBORw0KGgoAAAANSUhEUgAA...",
    "content_type": "image/png",
    "fit": "crop"
  }
}

Design at the area’s own size

The upload response gives each area a size. Author artwork at those dimensions and the render scales it into the area for you.

Read size from the upload response

For example 3000 x 3413.

Produce artwork at that resolution

Larger is fine, smaller costs quality.

Render with the area's uuid

Placement into the visible bounds is handled for you.

position in the upload response describes where the area sits on the canvas. It is for drawing a preview in a browser, not for a render body.

Fit

asset.fit decides how the artwork meets the area.

Value	Behaviour
`fit`	Scaled to sit inside the area with proportions kept. Space can be left over. This is the default.
`crop`	Covers the area and cuts the overflow, proportions kept.
`fill`	Stretched to the bounds. Proportions are not kept.

crop is the common choice for product mockups because it covers the area without distorting the design. Full detail, including the older contain and cover spellings, is on Fit and blend modes.

Size and position overrides

When you need the artwork somewhere other than the area’s default placement, override both together.

Custom size and offset

{
  "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
  "asset": {
    "url": "https://your-cdn.com/design.png",
    "fit": "fit",
    "size": { "width": 1500, "height": 1500 },
    "position": { "top": 100, "left": 200 }
  }
}

size sets the artwork’s dimensions and position offsets it from the top left of the area. Use them for a logo that has to sit in one corner, or a pattern that has to start at a known offset.

Rotation

Rotate the artwork inside the area

{
  "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
  "asset": {
    "url": "https://your-cdn.com/design.png",
    "rotate": 45
  }
}

rotate takes degrees from -360 to 360 and turns the artwork, not the area. The perspective and warp the designer built stay where they are.

Colour overlay

A colour overlay gives you product colourways from a single artwork file.

Recolour the area

{
  "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
  "asset": {
    "url": "https://your-cdn.com/design.png",
    "fit": "crop"
  },
  "color": { "hex": "#FF5733", "blending_mode": "multiply" }
}

blending_mode accepts all 27 Photoshop layer blend modes, with an underscore or a space as the separator. multiply keeps the material texture readable under the colour, which is what makes a dark garment look printed rather than painted.

Tone adjustments

Adjust the artwork

{
  "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
  "asset": {
    "url": "https://your-cdn.com/design.png",
    "fit": "crop"
  },
  "adjustment_layers": {
    "brightness": 10,
    "contrast": 5,
    "saturation": 0,
    "vibrance": 0,
    "opacity": 100,
    "blur": 0
  }
}

Parameter	Range	Default
`brightness`	-150 to 150	0
`contrast`	-100 to 100	0
`saturation`	-100 to 100	0
`vibrance`	-100 to 100	0
`opacity`	0 to 100	100
`blur`	0 to 100	0

All of it in one call

const response = await fetch("https://api.sudomock.com/api/v1/renders", {
  method: "POST",
  headers: {
    "x-api-key": "sm_your_api_key",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
    "smart_objects": [
      {
        "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
        "asset": {
          "url": "https://your-cdn.com/design.png",
          "fit": "crop",
          "rotate": 0,
          "size": {
            "width": 3000,
            "height": 3413
          },
          "position": {
            "top": 0,
            "left": 0
          }
        },
        "color": {
          "hex": "#1A1A1A",
          "blending_mode": "multiply"
        },
        "adjustment_layers": {
          "brightness": 5,
          "contrast": 3
        }
      }
    ],
    "export_options": {
      "image_format": "webp",
      "image_size": 1920,
      "quality": 90
    }
  }),
});

const data = await response.json();
console.log(data);

<?php

$payload = <<<'JSON'
{
  "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
  "smart_objects": [
    {
      "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
      "asset": {
        "url": "https://your-cdn.com/design.png",
        "fit": "crop",
        "rotate": 0,
        "size": {
          "width": 3000,
          "height": 3413
        },
        "position": {
          "top": 0,
          "left": 0
        }
      },
      "color": {
        "hex": "#1A1A1A",
        "blending_mode": "multiply"
      },
      "adjustment_layers": {
        "brightness": 5,
        "contrast": 3
      }
    }
  ],
  "export_options": {
    "image_format": "webp",
    "image_size": 1920,
    "quality": 90
  }
}
JSON;

$ch = curl_init("https://api.sudomock.com/api/v1/renders");
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    "x-api-key: sm_your_api_key",
    "Content-Type: application/json",
]);
curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);

$response = curl_exec($ch);
curl_close($ch);

echo $response;

import requests

payload = {
    "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
    "smart_objects": [
        {
            "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
            "asset": {
                "url": "https://your-cdn.com/design.png",
                "fit": "crop",
                "rotate": 0,
                "size": {
                    "width": 3000,
                    "height": 3413
                },
                "position": {
                    "top": 0,
                    "left": 0
                }
            },
            "color": {
                "hex": "#1A1A1A",
                "blending_mode": "multiply"
            },
            "adjustment_layers": {
                "brightness": 5,
                "contrast": 3
            }
        }
    ],
    "export_options": {
        "image_format": "webp",
        "image_size": 1920,
        "quality": 90
    }
}

response = requests.post(
    "https://api.sudomock.com/api/v1/renders",
    headers={"x-api-key": "sm_your_api_key"},
    json=payload,
)

response.raise_for_status()
print(response.json())

require "net/http"
require "uri"

uri = URI("https://api.sudomock.com/api/v1/renders")
request = Net::HTTP::Post.new(uri)
request["x-api-key"] = "sm_your_api_key"
request["Content-Type"] = "application/json"

request.body = <<~JSON
  {
    "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
    "smart_objects": [
      {
        "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
        "asset": {
          "url": "https://your-cdn.com/design.png",
          "fit": "crop",
          "rotate": 0,
          "size": {
            "width": 3000,
            "height": 3413
          },
          "position": {
            "top": 0,
            "left": 0
          }
        },
        "color": {
          "hex": "#1A1A1A",
          "blending_mode": "multiply"
        },
        "adjustment_layers": {
          "brightness": 5,
          "contrast": 3
        }
      }
    ],
    "export_options": {
      "image_format": "webp",
      "image_size": 1920,
      "quality": 90
    }
  }
JSON

response = Net::HTTP.start(uri.host, uri.port, use_ssl: true) do |http|
  http.request(request)
end

puts response.body

package main

import (
	"bytes"
	"fmt"
	"io"
	"net/http"
)

func main() {
	payload := []byte(`{
  "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
  "smart_objects": [
    {
      "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
      "asset": {
        "url": "https://your-cdn.com/design.png",
        "fit": "crop",
        "rotate": 0,
        "size": {
          "width": 3000,
          "height": 3413
        },
        "position": {
          "top": 0,
          "left": 0
        }
      },
      "color": {
        "hex": "#1A1A1A",
        "blending_mode": "multiply"
      },
      "adjustment_layers": {
        "brightness": 5,
        "contrast": 3
      }
    }
  ],
  "export_options": {
    "image_format": "webp",
    "image_size": 1920,
    "quality": 90
  }
}`)

	req, err := http.NewRequest("POST", "https://api.sudomock.com/api/v1/renders", bytes.NewBuffer(payload))
	if err != nil {
		panic(err)
	}
	req.Header.Set("x-api-key", "sm_your_api_key")
	req.Header.Set("Content-Type", "application/json")

	res, err := http.DefaultClient.Do(req)
	if err != nil {
		panic(err)
	}
	defer res.Body.Close()

	body, _ := io.ReadAll(res.Body)
	fmt.Println(string(body))
}

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

String payload = """
{
  "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
  "smart_objects": [
    {
      "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
      "asset": {
        "url": "https://your-cdn.com/design.png",
        "fit": "crop",
        "rotate": 0,
        "size": {
          "width": 3000,
          "height": 3413
        },
        "position": {
          "top": 0,
          "left": 0
        }
      },
      "color": {
        "hex": "#1A1A1A",
        "blending_mode": "multiply"
      },
      "adjustment_layers": {
        "brightness": 5,
        "contrast": 3
      }
    }
  ],
  "export_options": {
    "image_format": "webp",
    "image_size": 1920,
    "quality": 90
  }
}
""";

HttpRequest request = HttpRequest.newBuilder()
    .uri(URI.create("https://api.sudomock.com/api/v1/renders"))
    .header("x-api-key", "sm_your_api_key")
    .header("Content-Type", "application/json")
    .POST(HttpRequest.BodyPublishers.ofString(payload))
    .build();

HttpResponse<String> response = HttpClient.newHttpClient()
    .send(request, HttpResponse.BodyHandlers.ofString());

System.out.println(response.body());

using System.Net.Http;
using System.Text;

var payload = """
{
  "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
  "smart_objects": [
    {
      "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
      "asset": {
        "url": "https://your-cdn.com/design.png",
        "fit": "crop",
        "rotate": 0,
        "size": {
          "width": 3000,
          "height": 3413
        },
        "position": {
          "top": 0,
          "left": 0
        }
      },
      "color": {
        "hex": "#1A1A1A",
        "blending_mode": "multiply"
      },
      "adjustment_layers": {
        "brightness": 5,
        "contrast": 3
      }
    }
  ],
  "export_options": {
    "image_format": "webp",
    "image_size": 1920,
    "quality": 90
  }
}
""";

var request = new HttpRequestMessage(HttpMethod.Post, "https://api.sudomock.com/api/v1/renders");
request.Headers.Add("x-api-key", "sm_your_api_key");
request.Content = new StringContent(payload, Encoding.UTF8, "application/json");

var client = new HttpClient();
var response = await client.SendAsync(request);

Console.WriteLine(await response.Content.ReadAsStringAsync());

curl -X POST "https://api.sudomock.com/api/v1/renders" \
  -H "x-api-key: sm_your_api_key" \
  -H "Content-Type: application/json" \
  -d '{
    "mockup_uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
    "smart_objects": [
      {
        "uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
        "asset": {
          "url": "https://your-cdn.com/design.png",
          "fit": "crop",
          "rotate": 0,
          "size": {
            "width": 3000,
            "height": 3413
          },
          "position": {
            "top": 0,
            "left": 0
          }
        },
        "color": {
          "hex": "#1A1A1A",
          "blending_mode": "multiply"
        },
        "adjustment_layers": {
          "brightness": 5,
          "contrast": 3
        }
      }
    ],
    "export_options": {
      "image_format": "webp",
      "image_size": 1920,
      "quality": 90
    }
  }'

Smart objects

What the area itself describes before you fill it.

Render a PSD

The two-request path from template to image.

Overview

PSD mockups

Photo mockups

Text and fonts

Integrations

Reference

Advanced

Changes

Artwork placement

The artwork URL

Design at the area’s own size

Fit

Size and position overrides

Rotation

Colour overlay

Tone adjustments

All of it in one call

Smart objects

Render a PSD

​The artwork URL

​Design at the area’s own size

​Fit

​Size and position overrides

​Rotation

​Colour overlay

​Tone adjustments

​All of it in one call

Smart objects

Render a PSD

The artwork URL

Design at the area’s own size

Fit

Size and position overrides

Rotation

Colour overlay

Tone adjustments

All of it in one call