Loading...

Create PSD to CSS, JSON and XML Sprite Sheets

With Export Kit you can create unlimited PSD to CSS, JSON and XML Sprite Sheets in a few clicks with any Photoshop file. All layers in your PSD will convert to a single image file with all positions and sizes in a single file.

NOTE: All layers will convert to images in a Sprite Sheet export.
IMPORTANT: Sprite Sheets require Image Kit plus any combination of the following: CSS Output, JSON Output or XML Output

Step-By-Step Video


Need a visual? Watch our step-by-step tutorial!

Watch more video tutorials.

Step 1: Sprite Assets

Add any Sprite assets inside your PSD and Export Kit will automatically reposition each element to create a single Sprite Sheet image. You can create any design and place your elements anywhere in your PSD, but we suggest you keep all elements visible for easy future edits.

Step 2: Sprite Sheet Type(s)

Tab over to Images Panel and select Sprite as the image export type. You will then have the option to select from CSS, JSON or XML depending on which Export types you have enabled.

IMPORTANT: Sprite Sheets require Image Kit plus any combination of the following: CSS Output, JSON Output or XML Output

Step 3: Output Files

Export Kit will render a single Sprite image along with Sprite Sheet files depending on your environments.

Sprite Image

A single (.png) file will be created with all PSD layers repositioned.

Example CSS Sprite Sheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*
 *    This content is generated from the PSD File Info.
 *    (Alt+Shift+Ctrl+I).
 *
 *    @desc         This sample will demo custom sprite sheets with Export Kit v126
 *    @file         ek126_205_css_sprite_sheet
 *    @date         2014:08:25 10:51:55
 *    @title         Sprite Sheet Example for Export Kit v126
 *    @author     Reshape Media Inc.
 *    @keywords     sprite sheet, xml, css, json, images, slicing
 *    @generator     Export Kit v1.2.8
 *
*/
 
.silverlight_icon {
    width: 180px;
    height: 156px;
    background:url(../skins/ek126_205_css_sprite_sheet/ek126_205_css_sprite_sheet_sprites.png) 0 0;
}
 
.wordpress_icon {
    width: 127px;
    height: 128px;
    background:url(../skins/ek126_205_css_sprite_sheet/ek126_205_css_sprite_sheet_sprites.png) -180px 0;
}
 
.android {
    width: 25px;
    height: 31px;
    background:url(../skins/ek126_205_css_sprite_sheet/ek126_205_css_sprite_sheet_sprites.png) -307px 0;
}
 
.flex_icon {
    width: 128px;
    height: 122px;
    background:url(../skins/ek126_205_css_sprite_sheet/ek126_205_css_sprite_sheet_sprites.png) -332px 0;
}
 
.layer_1 {
    width: 37px;
    height: 36px;
    background:url(../skins/ek126_205_css_sprite_sheet/ek126_205_css_sprite_sheet_sprites.png) -460px 0;
}
 
.php_icon {
    width: 270px;
    height: 142px;
    background:url(../skins/ek126_205_css_sprite_sheet/ek126_205_css_sprite_sheet_sprites.png) -497px 0;
}

Example JSON Sprite Sheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
{
    "name":"ek126_205_css_sprite_sheet",
    "src":"../skins/ek126_205_css_sprite_sheet/ek126_205_css_sprite_sheet_sprites.png",
    "info":{
        "description":"This sample will demo custom sprite sheets with Export Kit v126",
        "file":"ek126_205_css_sprite_sheet",
        "date":"2014:08:25 10:51:55",
        "title":"Sprite Sheet Example for Export Kit v126",
        "author":"Reshape Media Inc.",
        "keywords":"sprite sheet, xml, css, json, images, slicing",
        "generator":"Export Kit v1.2.8"
    },
    "sprites":[
        {
            "type":"sprite",
            "x":0,
            "y":0,
            "width":180,
            "height":156
        },
        {
            "type":"sprite",
            "x":180,
            "y":0,
            "width":127,
            "height":128
        },
        {
            "type":"sprite",
            "x":307,
            "y":0,
            "width":25,
            "height":31
        },
        {
            "type":"sprite",
            "x":332,
            "y":0,
            "width":128,
            "height":122
        },
        {
            "type":"sprite",
            "x":460,
            "y":0,
            "width":37,
            "height":36
        },
        {
            "type":"sprite",
            "x":497,
            "y":0,
            "width":270,
            "height":142
        }
    ]
}

Example XML Sprite Sheet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- 
/*
 *    This content is generated from the PSD File Info.
 *    (Alt+Shift+Ctrl+I).
 *
 *    @desc         This sample will demo custom sprite sheets with Export Kit v126
 *    @file         ek126_205_css_sprite_sheet
 *    @date         2014:08:25 10:51:55
 *    @title         Sprite Sheet Example for Export Kit v126
 *    @author     Reshape Media Inc.
 *    @keywords     sprite sheet, xml, css, json, images, slicing
 *    @generator     Export Kit v1.2.8
 *
*/
 -->
<sprites>
    <layers name="ek126_205_css_sprite_sheet" src="../skins/ek126_205_css_sprite_sheet/ek126_205_css_sprite_sheet_sprites.png">
        <layer type="sprite"  x="0" y="0" width="180" height="156" />
        <layer type="sprite"  x="180" y="0" width="127" height="128" />
        <layer type="sprite"  x="307" y="0" width="25" height="31" />
        <layer type="sprite"  x="332" y="0" width="128" height="122" />
        <layer type="sprite"  x="460" y="0" width="37" height="36" />
        <layer type="sprite"  x="497" y="0" width="270" height="142" />
    </layers>
</sprites>

OPTIONAL: HTML Reference Sheet

If you have HTML5 Output enabled, Export Kit will also create an additional reference sheet where you can view each exported Sprite element for each reference and usage.

IMPORTANT: HTML Reference Sheet requires HTML5 Output.
LOGIN NOW: Get instant access to our free Online Training - click here.

02. Using The Plugin

03. Layer Support

04. Basic Exports

05. Layer Tags

06. Optimization Tips

07. Complete Exports

DOWNLOAD NOW
🚀 Start saving time and money!