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: You need to login so your progress is tracked with Online Training - click here.

Products For Web Professionals


web_templates_2

Web-Templates 2.0

webmaster_pack

Webmaster

webmaster_pack

Webmaster (6 Months)

Need a custom solution?

Try our Shop!

Using the Plugin

Layer Support

Layer Tags

How To Guides

Optimization Tips

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


One Pager Website

A clean professional single page website design.

Start Your 14 Day Free Trial

New users get instant access to the 14 Day Free Trial with all features enabled, and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, contact us or check our FAQs for assistance.

Connect With Us

Top
Lightning Storm version v17.0216.05 releasedLearn More