Templates

Edit Sharp template JSON used for server-side image compositing.

Active

{
  "width": 1080,
  "height": 1080,
  "imageSlots": [
    {
      "x": 70,
      "y": 240,
      "fit": "cover",
      "name": "beforeImage",
      "width": 450,
      "height": 560
    },
    {
      "x": 560,
      "y": 240,
      "fit": "cover",
      "name": "afterImage",
      "width": 450,
      "height": 560
    }
  ],
  "textLayers": [
    {
      "x": 70,
      "y": 90,
      "name": "title",
      "color": "#ffffff",
      "width": 940,
      "fontSize": 54,
      "maxLines": 1,
      "valueFrom": "jobTitle",
      "fontWeight": 700
    },
    {
      "x": 70,
      "y": 160,
      "name": "location",
      "color": "#c9f24d",
      "width": 940,
      "fontSize": 32,
      "maxLines": 1,
      "valueFrom": "jobLocation",
      "fontWeight": 500
    },
    {
      "x": 70,
      "y": 835,
      "name": "beforeLabel",
      "align": "center",
      "color": "#ffffff",
      "value": "Before",
      "width": 450,
      "fontSize": 42,
      "fontWeight": 700
    },
    {
      "x": 560,
      "y": 835,
      "name": "afterLabel",
      "align": "center",
      "color": "#ffffff",
      "value": "After",
      "width": 450,
      "fontSize": 42,
      "fontWeight": 700
    }
  ],
  "backgroundColor": "#111111"
}

before_after

Edit x/y/width/height values in JSON, then use Regenerate images on a project to preview with real photos.

Active

{
  "width": 1080,
  "height": 1080,
  "imageSlots": [
    {
      "x": 145,
      "y": 223,
      "fit": "cover",
      "name": "beforeImage",
      "width": 790,
      "height": 645,
      "borderRadius": 7
    }
  ],
  "textLayers": [
    {
      "x": 145,
      "y": 128,
      "name": "title",
      "align": "center",
      "color": "#555555",
      "width": 790,
      "fontSize": 64,
      "maxLines": 1,
      "valueFrom": "jobTitle",
      "fontWeight": 700
    },
    {
      "x": 160,
      "y": 284,
      "name": "beforeLabel",
      "align": "center",
      "color": "#ffffff",
      "value": "Before",
      "width": 184,
      "fontSize": 42,
      "fontWeight": 700
    },
    {
      "x": 145,
      "y": 1000,
      "name": "caption",
      "align": "center",
      "color": "#555555",
      "width": 790,
      "fontSize": 42,
      "maxLines": 1,
      "valueFrom": "saleNote",
      "fontWeight": 700
    }
  ],
  "shapeLayers": [
    {
      "x": 160,
      "y": 238,
      "name": "beforePill",
      "type": "rect",
      "color": "#d7d7d5",
      "width": 184,
      "height": 62,
      "radius": 31
    }
  ],
  "backgroundColor": "#eeeeec"
}

before_after

Edit x/y/width/height values in JSON, then use Regenerate images on a project to preview with real photos.

Active

{
  "width": 1080,
  "height": 1080,
  "imageSlots": [
    {
      "x": 145,
      "y": 223,
      "fit": "cover",
      "name": "afterImage",
      "width": 790,
      "height": 645,
      "borderRadius": 7
    }
  ],
  "textLayers": [
    {
      "x": 145,
      "y": 128,
      "name": "title",
      "align": "center",
      "color": "#555555",
      "width": 790,
      "fontSize": 64,
      "maxLines": 1,
      "valueFrom": "jobTitle",
      "fontWeight": 700
    },
    {
      "x": 760,
      "y": 836,
      "name": "afterLabel",
      "align": "center",
      "color": "#ffffff",
      "value": "After",
      "width": 150,
      "fontSize": 44,
      "fontWeight": 700
    },
    {
      "x": 145,
      "y": 1000,
      "name": "caption",
      "align": "center",
      "color": "#555555",
      "width": 790,
      "fontSize": 42,
      "maxLines": 1,
      "valueFrom": "saleNote",
      "fontWeight": 700
    }
  ],
  "shapeLayers": [
    {
      "x": 760,
      "y": 790,
      "name": "afterPill",
      "type": "rect",
      "color": "#249b2b",
      "width": 150,
      "height": 62,
      "radius": 31
    }
  ],
  "backgroundColor": "#eeeeec"
}

before_after

Edit x/y/width/height values in JSON, then use Regenerate images on a project to preview with real photos.

Active

{
  "width": 1080,
  "height": 1080,
  "imageSlots": [
    {
      "x": 145,
      "y": 223,
      "fit": "cover",
      "name": "projectImage",
      "width": 790,
      "height": 645,
      "borderRadius": 7
    }
  ],
  "textLayers": [
    {
      "x": 145,
      "y": 128,
      "name": "title",
      "align": "center",
      "color": "#555555",
      "width": 790,
      "fontSize": 64,
      "maxLines": 1,
      "valueFrom": "jobTitle",
      "fontWeight": 700
    },
    {
      "x": 760,
      "y": 836,
      "name": "afterLabel",
      "align": "center",
      "color": "#ffffff",
      "value": "After",
      "width": 150,
      "fontSize": 44,
      "fontWeight": 700
    },
    {
      "x": 145,
      "y": 1022,
      "name": "caption",
      "align": "center",
      "color": "#555555",
      "width": 790,
      "fontSize": 42,
      "maxLines": 1,
      "valueFrom": "saleNote",
      "fontWeight": 700
    }
  ],
  "shapeLayers": [
    {
      "x": 760,
      "y": 790,
      "name": "afterPill",
      "type": "rect",
      "color": "#249b2b",
      "width": 150,
      "height": 62,
      "radius": 31
    }
  ],
  "backgroundColor": "#eeeeec"
}

new_project

Edit x/y/width/height values in JSON, then use Regenerate images on a project to preview with real photos.