Complete Guide to Smart Objects in Mockups
Everything you need to know about Smart Objects for mockup templates. Setup, best practices, and common mistakes.
What Are Smart Objects?
In Photoshop, a Smart Object is a special layer that acts as a container. Whatever image you place inside appears with the same perspective, shadows, and effects as the container. This is how mockups work — your design goes into the Smart Object, and it looks like it's printed on the product.
Why Smart Objects Matter
Creating Smart Objects
Start with Your Product Photo
Open your product photo in Photoshop. This is the base image where designs will appear.
Create the Design Area
Draw a shape or rectangle where the design should appear on the product. This will become your Smart Object.
Convert to Smart Object
Right-click the layer and select "Convert to Smart Object". The layer thumbnail will show a small icon indicating it's now a Smart Object.
Naming Convention
Design_Front, Design_Back,Logo_Chest. These names appear in the API response, making integration easier.Apply Transformations
Use Edit → Transform → Distort/Perspective/Warp to match the product's surface. For a t-shirt, add subtle curves. For a mug, wrap around the cylinder.
Add Blend Modes & Effects
Set the Smart Object's blend mode (usually Multiply or Soft Light) so designs integrate naturally with the fabric texture. Add any shadows or highlights.
Best Practices
Common Mistakes
Avoid These Pitfalls
- Rasterized layers — Once rasterized, a Smart Object can't be edited programmatically
- Merged layers — Don't merge your Smart Object with other layers
- Wrong color mode — Use RGB for web mockups, CMYK for print
- Missing effects — Effects should be on the Smart Object layer, not inside it
- Locked layers — Unlock all layers before uploading to the API
Testing Your Template
Before uploading to SudoMock, test your Smart Object manually:
1. Double-click the Smart Object layer thumbnail
2. A new tab opens with the Smart Object contents
3. Paste in a test design
4. Save and close the tab
5. Check if the design appears correctly on the product
6. Verify perspective, blend mode, and effects look rightUploading to SudoMock
Once your PSD is ready, upload it via the API. SudoMock automatically detects all Smart Objects and returns their UUIDs.
curl -X POST "https://api.sudomock.com/api/v1/psd/upload" \
-H "X-API-KEY: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"psd_file_url": "https://storage.example.com/tshirt-mockup.psd",
"psd_name": "Black T-Shirt Front"
}'{
"success": true,
"data": {
"uuid": "c315f78f-d2c7-4541-b240-a9372842de94",
"name": "Black T-Shirt Front",
"smart_objects": [
{
"uuid": "128394ee-6758-4f2f-aa36-e2b19b152bd9",
"name": "Design_Front",
"size": { "width": 3000, "height": 3600 }
}
]
}
}Ready to Render
mockup_uuid and smart_object.uuid — you'll use these in every render request to swap designs programmatically.Related Resources
Ready to Try SudoMock?
Start automating your mockups with 500 free API credits.