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!
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.
