ResponsiveMockups.com Template Format

template.json

{
    "meta": {
        "title": "The Template Description",
        "description": "Explain the template and what it might be useful for"
    },
    "zones": [
        {
            "x": 1038,
            "y": 801,
            "height": 1835,
            "width": 2932,
            "screen_height": 1202,
            "screen_width": 1920,
            "mask": "/mask_mobile.png",
            "perspective": [
                0, 0,
                752, 257,
                
                0, 812,
                155, 597,
                
                375, 812,
                327, 697,
                
                375, 0,
                959, 327
            ]
        }
    ]
}

• One image is required, template.jpg, which will serve as the "background".
• Any number of zones may be included. One screenshot is taken for each zone.
• X and Y are positions of the top corner, relative to template.jpg
• Height and width are relative to template.jpg
• Screen height and width are the device h/w for taking the screenshots
• Mask is a path to a PNG mask applied to that zone. It should be the same resolution as the screenshot.
• Perspective allows you to warp the screenshot to match the device perspective. Coordinates explained here: http://www.imagemagick.org/Usage/distorts/#perspective_projection