GuideDec 24, 20254 min readSudoMock Team

PSD Mockup Template Guide: Best Practices for Automation

Learn how to create API-ready PSD mockup templates. Complete guide covering dimensions, Smart Object setup, layer naming, blend modes, and optimization for automated mockup generation.

PSD mockup template guide showing Smart Objects and layer structure

TL;DR

Create API-ready PSD mockup templates with Smart Objects. Use 27 supported blend modes like Multiply for fabrics, Normal for hard surfaces. Export to WebP, PNG, or JPG. SudoMock handles high-resolution professional files with unlimited layers.

Key Takeaways:

  • •Smart Objects are the foundation of automated mockups
  • •27 blend modes supported including Multiply for fabrics
  • •Layer naming matters - APIs use these names
  • •Max file size: 300MB, max dimensions: 10,000x10,000px
Professional-Grade Capabilities

Built for high-resolution workflows

Large
Files
Complex PSDs
High
Res
Print-Ready
∞
layers
No Limit
27
modes
Blend Support

What Makes a Good Mockup Template?

A well-prepared PSD template is the foundation of automated mockup generation. Whether you're building a print-on-demand business or creating marketing assets at scale, your template quality directly impacts output quality.

High-resolution Smart Objects - Professional-grade dimensions for print-ready output
Descriptive layer names - APIs use these names - "Design_Front" beats "Layer 1"
27 supported blend modes - From Multiply to Color Burn, all standard Photoshop blends work
Unlimited layers - Complex multi-layer mockups with no artificial constraints

Supported Blend Modes

SudoMock supports all 27 standard Photoshop blend modes. These are extracted directly from the PSD and applied pixel-perfectly during rendering:

27 Supported Blend Modes

All Photoshop blend modes implemented

+ normal, pass through, dissolve
Darken
darkenmultiplycolor burnlinear burndarker color
Lighten
lightenscreencolor dodgelinear dodgelighter color
Contrast
overlaysoft lighthard lightvivid lightlinear lightpin lighthard mix
Inversion
differenceexclusionsubtractdivide
HSL
huesaturationcolorluminosity

Blend Mode Recommendations

  • Fabrics (t-shirts, hoodies): Multiply - shows texture through design
  • Hard surfaces (phones, laptops): Normal - clean, solid colors
  • Glossy materials: Overlay or Soft Light - adds depth
  • Paper/print mockups: Multiply at 80-90% opacity

Layer Masks vs Clipping Masks

Understanding how masks work with Smart Objects is crucial for creating reliable mockup templates. SudoMock supports both layer masks and clipping masks, but they behave differently:

Critical: Smart Object Layer Masks

Layer masks applied to the Smart Object layer itself affect the canvas-level display, not the embedded content. When you replace Smart Object content via API, the mask stays on the layer but does not clip the new design. This is standard Adobe Photoshop behavior.

Solution: If you need masking on the design itself, use a clipping mask layer above the Smart Object, or apply the mask inside the PSB (embedded Smart Object).

Mask TypeWhere to ApplyAPI Behavior
Layer Mask on SOSmart Object layerMask preserved but may not affect new content
Clipping MaskLayer above SOClips design to layer below - fully supported
Mask inside PSBInside Smart ObjectReplaced when new content is placed
Layer Mask on GroupGroup containing SOClips entire group - fully supported

Best Practice for T-Shirt/Fabric Mockups

If your t-shirt mockup has a layer mask that shapes the design area, consider:

  • Using Multiply blend mode instead of masks for natural fabric integration
  • Placing the mask on a group containing the Smart Object, not directly on the SO
  • Using clipping mask layers above the Smart Object for shape constraints

Nested Smart Objects

Unlike some competitors, SudoMock

fully supports nested Smart Objects
. You can have Smart Objects inside Smart Objects, with all transforms and blend modes preserved at each level.

Example Nested Structure
text
1📁 Main PSD
2├── Background
3├── 📦 T-Shirt_Group
4│   ├── Shirt_Base
5│   └── 📦 Design_Smart_Object     ← API targets this
6│       └── 📦 Nested_Effect_SO    ← Also supported
7│           └── Your_Design
8└── Shadow_Layer
Deep nesting supported - No artificial limits on Smart Object hierarchy depth
All transforms preserved - Warp, perspective, and distort work at every level
Blend modes per level - Each nested Smart Object can have its own blend mode

Layer Effects on Smart Objects

SudoMock renders layer effects (layer styles) applied to Smart Object layers. Here's what's supported:

Effect TypeSupportNotes
Drop Shadow✓ FullDistance, spread, size, angle, opacity
Stroke✓ FullInside, outside, center positions
Blend If✓ FullThis Layer and Underlying Layer sliders
Inner Shadow✗ Not supportedUse Drop Shadow with negative offset as workaround
Outer/Inner Glow✗ Not supportedRasterize or use color overlay
Bevel & Emboss✗ Not supportedRasterize the effect layer

Effects Inside vs Outside Smart Object

  • Effects on the SO layer: Preserved when content is replaced
  • Effects inside the PSB: Replaced along with the content

Keep decorative effects on the Smart Object layer itself for consistent rendering across all designs.

Step-by-Step: Creating Your Template

1

Set Up Your Canvas

Start with your product photo as the base. SudoMock accepts PSDs with these specifications:

  • Max dimensions: 10,000×10,000px
  • Max file size: 300MB
  • Format: Standard PSD (Photoshop CC compatible)
2

Create the Smart Object

The Smart Object is where designs will be placed. This is the most critical step:

  1. Create a new layer or shape where the design should appear
  2. Right-click → Convert to Smart Object
  3. Double-click to open the embedded .psb file
  4. Set the PSB canvas to your desired design resolution
  5. Save and close the .psb

Smart Object Size Limits

Smart Object internal canvas can be up to 10,000×10,000px. The API will extract the exact dimensions and return them in the size field of the response, which you should use to prepare designs at the optimal resolution.

3

Apply Transforms

Make the design fit your product naturally using Photoshop's transform tools:

  • Edit → Transform → Distort for perspective
  • Edit → Transform → Warp for curved surfaces (mugs, fabric folds)
  • Edit → Transform → Perspective for angled views

All transforms are preserved. The API extracts quad coordinates that represent the four corner points of the transformed Smart Object.

4

Set Blend Mode

Choose from 27 supported blend modes. The most commonly used for mockups:

Blend ModeBest ForEffect
multiplyFabrics, paper, woodDesign darkens, texture shows through
normalHard surfaces, screensSolid design, no texture bleed
soft lightSubtle texturesGentle integration, preserves highlights
overlayMetallic, glossyHigh contrast, vibrant colors
screenDark backgroundsLightens, good for glow effects
color burnVintage lookIntense darks, saturated colors
5

Name Your Layers

Layer names appear in API responses. Use clear, descriptive names:

Good Layer Naming
text
1✅ Good Names:
2├── Design_Front
3├── Design_Back
4├── Logo_Chest
5├── Label_Neck
6└── Color_Overlay
7

8❌ Bad Names:
9├── Layer 1
10├── Layer 1 copy
11├── Smart Object 1
12└── Group 1
6

Optimize File Size

While SudoMock supports large files, smaller files process faster and upload quicker:

  • Delete Cropped Pixels: Image → Crop with "Delete Cropped Pixels" enabled removes hidden content outside canvas
  • Flatten background layers that don't need editing
  • Delete hidden layers you're not using
  • Rasterize text layers that won't change
  • Use "Purge All" (Edit → Purge) to clear history and clipboard
  • Merge visible layers for non-essential decorative elements
  • Save a copy to avoid bloated history states

Pro Tip: Smart Object Dimensions

Smart Object internal canvas (PSB) size affects file size significantly. If your design area is 2000×2000px, don't create a 10,000×10,000px Smart Object "just in case". Size it appropriately for your use case.

Recommended PSD Structure

Here's the recommended layer organization for a mockup template:

Recommended PSD Structure
📁 T-Shirt-Mockup.psd
│
├──📁 Overlays(Group)
└──Texturesoft light 15%
│
├──📦 Design_FrontSmart Object
├──blend:multiply
├──transform:warp
└──size:3500×4000px
│
├──🖼️ Product(locked)
│
└──🎨 Background(flattened)

Smart Object Response Data

When you upload a PSD, the API extracts detailed metadata from each Smart Object. Understanding this data helps you build better integrations:

Smart Object Response Structure

What you get after uploading a PSD

SmartObjectResponse
uuidstringrequired
namestringrequired
size{width, height}required
position{x, y, w, h}required
quad[[x,y], ...]optional
blend_modestringoptional
size vs position
size (embedded dimensions)
Original Smart Object canvas
→ Design at this resolution
position (bbox)
Where it renders on mockup
→ Use for previews
Example API Response
json
1{
2"uuid": "550e8400-e29b-41d4-a716-446655440000",
3"smart_objects": [
4  {
5    "uuid": "7c3e8f2a-1b4d-4e5f-8a9c-0d1e2f3a4b5c",
6    "name": "Design_Front",
7    "size": {
8      "width": 3500,
9      "height": 4000
10    },
11    "position": {
12      "x": 450,
13      "y": 380,
14      "width": 1200,
15      "height": 1400
16    },
17    "quad": [[450, 380], [1650, 420], [1600, 1780], [420, 1720]],
18    "blend_mode": "multiply"
19  }
20]
21}

size vs position

  • size = Original Smart Object canvas (embedded PSB dimensions)
  • position = Where it appears on the mockup (bounding box)
  • quad = Four corner points if transformed (warp/perspective)

Prepare your designs at the size dimensions for best quality.

Export Options

When rendering mockups, you have full control over the output format and quality:

Export Options
DEFAULT
🖼️
WebP
Smallest size
Quality: 1-100
🎨
PNG
Lossless, transparency
Best quality
📷
JPG
Universal support
Quality: 1-100
Render with Export Options
javascript
1const response = await fetch('https://api.sudomock.com/api/v1/render', {
2method: 'POST',
3headers: {
4  'X-API-KEY': 'sm_your_api_key',
5  'Content-Type': 'application/json'
6},
7body: JSON.stringify({
8  mockup_uuid: '550e8400-e29b-41d4-a716-446655440000',
9  assets: [{
10    smart_object_uuid: '7c3e8f2a-1b4d-4e5f-8a9c-0d1e2f3a4b5c',
11    asset_url: 'https://your-storage.com/design.png'
12  }],
13  export_options: {
14    image_format: 'webp',    // png, jpg, or webp (default)
15    image_size: 2000,        // 100-10000px
16    quality: 95              // 1-100 (default 95)
17  }
18})
19});

Quick Reference Checklist

Before Upload

  • ☐ File size under 300MB

  • ☐ Dimensions under 10,000×10,000px

  • ☐ Smart Objects converted (not rasterized)

  • ☐ Descriptive layer names

Smart Object Settings

  • ☐ Blend mode set (multiply for fabrics)

  • ☐ Transforms applied (warp, perspective)

  • ☐ Visible (not hidden)

  • ☐ Positioned correctly on canvas

  • ☐ Internal canvas sized appropriately

Related Resources

Upload PSD API Reference

Complete documentation for the upload endpoint

Render API Reference

All render options and parameters

API Data Model Guide

Understanding API response structures

Quickstart Guide

Get your first mockup in 5 minutes

Frequently Asked Questions

SudoMock Team
SudoMock Team
View profile →

Related Articles

Scaling print-on-demand business with API automation
Guide2 min read

5 Ways to Scale Your POD Business with API

Learn how successful POD sellers use APIs to generate thousands of product variations automatically.

Nov 25, 2025Read
Smart Objects guide showing Photoshop layer structure
Guide2 min read

Complete Guide to Smart Objects in Mockups

Everything you need to know about Smart Objects for mockup templates. Setup, best practices, and common mistakes.

Nov 20, 2025Read

Ready to Try SudoMock?

Start automating your mockups with 500 free API credits.

Start Free View Docs