Use Export Kit to create unlimited images from your Photoshop files using SIM files (JSON format). Smart Images allow you to manipulate your images in many ways before saving, giving you total creative control with data-driven design.

Smart Images are great for all Print mediums such as Flyers, Posters, Banners, Signs, Magazines, Paper/E-Books, and more. Optimize your design workflow with JSON and your PSD.

NOTE: SIM = Smart Image Manifest

Step 1: Setup Your PSD Design

Depending on your situation you may already have a PSD design ready, or starting from scratch. When starting from scratch, you do not need to create a full design – wireframes work well with Smart Images!

Smart Images by nature are just that – images. The end result is a graphic output based on your PSD design. You will need to have clear Layer Names as you will need to reference these names later on.

Add SIM Tags to Layers

SIM Tags have a specific markup: @{ [id] }. The [id] is layer name you want to control in your SIM file. Each layer you wish to manipulate must have both a SIM Tag in the PSD and a reference in the SIM file.

You can create unlimited SIM Tags in your PSD file and control many properties of each layer with your SIM file.

Step 2: Create A SIM File

SIM Files are unique to each PSD design (relatively speaking), as each SIM file targets specific layers in a PSD file. Your SIM file should reflect the layers you have tagged in your PSD file.

IMPORTANT: save your file with the extension ".sim"

SIM File Breakdown

@sim[ @img, ...] - Smart Image Container

@img[ @layer, ...] - An individual image to save

@layer{ "prop":"value", ...} - PSD layer object to manipulate

The SIM file has a specific structure and requires you to use the correct ordering when adding content.

The SIM file uses JSON formatting.

Basic SIM File Example

1
2
3
4
5
6
7
8

@sim[
    @img[
        @layer{
              "prop1":"value1",
            "prop2":"value2"
        }
    ]
]

This example is a single image with a single layer to manipulate.

Extended SIM File Example

1
2
3
4
5
6
7
8
9
10
11

@sim[
    @img[
        @layer{
              "prop1":"value1",
            "prop2":"value2"
        },
        @layer{
              "prop1":"value1"
        }
    ]
]

This example is a single image with multiple layers to manipulate, note that you must use “,” between layers (JSON formatting).

Complex SIM File Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@sim[
    @img[
        @layer{
              "prop1":"value1",
            "prop2":"value2"
        },
        @layer{
              "prop1":"value1"
        }
    ],
    @img[
        @layer{
              "prop1":"value1",
            "prop2":"value2",
            "prop3":"value3"
        }
    ]
]

This example is multiple images with multiple layers to manipulate, note that you must use “,” between images and layers (JSON formatting).

Add Layer Properties

Your layer properties control how each image exports when creating Smart Images. Layer properties give you access to manipulate many individual layer types; including text, shapes, images and folders.

IMPORTANT: images MUST be in a folder relative to the SIM file, and the url MUST start with "/" or they will not load!

IMPORTANT: you must use "/" with layer names for folder/child relationships.

EXAMPLE: if you have a folder tagged @{top} and a child layer tagged @{title}, then you will need to use "top/title" for the name property.

All Properties

1
2
3

name : String
alpha : Int
visible : Boolean

Image Properties

1

url : URL String

Shape Properties

1

color : RGB Array

Text Properties

1
2

color : RGB Array
contents : String

Example Layer Properties Applied

1
2
3
4
5
6
7
8

@layer{
    "name":"sale/price"
    ,"contents":"80"
    ,"color":[255,10,0]
    ,"alpha":50
    ,"url":"/assets/pic-b.png"
    ,"visible":true
}

Mix and match layer properties as required to modify existing layer elements in your PSD file. You can modify all layer in your PSD file provided the layers are correctly tagged and referenced by name.

NOTE: Create unlimited @img and @layer nodes in your SIM file to have total control of your data-driven design.

IMPORTANT: save your file with the extension ".sim"

Step 3: Export Your Smart Images

Provided your SIM file correctly references the layers you tagged in your PSD, Export Kit will generate images based on your SIM file and PSD. Smart Images will optimize your design flow with full JSON support to populate layer data.

NOTE: For each @img node, and individual image will be created with the naming convention [layer name]_[image number].png