LayerMiner: Photoshop script exports Layer Styles to JSON

LayerMiner: Photoshop script exports Layer Styles to JSON


In the designer/developer workflow it often happens that you want to export the Layer Style out of a Photoshop layer for custom processing in app UI development – native, web, gaming…

I wrote a tiny script that exports data like Drop Shadow, Gradient Fill, Stroke, Opacity, Bounds, Solid Overlay, Glow and more to a JSON file next to your PSD file.

PSDtoJSON

How to use LayerMiner

Download LayerMiner from Github by clicking ZIP icon.
ZIP icon
Download Photoshop from Creative Cloud if you don’t have it.

Install: Copy and paste ExportLayerStyles.jsx and the utils folder under Applications/Adobe Photoshop CS6/Presets/Scripts or similar folder on your machine.

Run: Open Photoshop, open a document, select a layer, go to File->Scripts->ExportLayerStyles, this will export a json file with the layer name next your PSD file, make sure your PSD is saved.

Export Layer Styles

What LayerMiner does

On the image below you can see Effects under Rectangle 1, this part contains a valuable information for a developer, in order to get this info a developer needs to go to each layer style and literally copy and paste the info out. LayerMiner can mine this data for you into readable JSON format in just one click.

Layer Styles
Download the sample PSD file: MyPSDFile.psd

Drop Shadow style data:
Layer Styles Data

Data exported from the “Rectangle 1″ layer of this PSD look like this:

{
	"scale": 199.986118740506,
	"dropShadow": {
		"enabled": true,
		"mode": "multiply",
		"color": {
			"red": 0,
			"grain": 0,
			"blue": 0
		},
		"opacity": 50,
		"useGlobalAngle": true,
		"localLightingAngle": 120,
		"distance": 20,
		"chokeMatte": 0,
		"blur": 5,
		"noise": 0,
		"antiAlias": false,
		"transferSpec": {
			"name": "Linear"
		},
		"layerConceals": true
	},
	"innerShadow": {
		"enabled": true,
		"mode": "multiply",
		"color": {
			"red": 0,
			"grain": 0,
			"blue": 0
		},
		"opacity": 75,
		"useGlobalAngle": true,
		"localLightingAngle": 120,
		"distance": 5,
		"chokeMatte": 0,
		"blur": 5,
		"noise": 0,
		"antiAlias": false,
		"transferSpec": {
			"name": "Linear"
		}
	},
	"outerGlow": {
		"enabled": true,
		"mode": "screen",
		"color": {
			"red": 255,
			"grain": 255,
			"blue": 255
		},
		"opacity": 100,
		"glowTechnique": "softMatte",
		"chokeMatte": 0,
		"blur": 5,
		"noise": 0,
		"shadingNoise": 0,
		"antiAlias": false,
		"transferSpec": {
			"name": "Linear"
		},
		"inputRange": 50
	},
	"innerGlow": {
		"enabled": true,
		"mode": "screen",
		"color": {
			"red": 255,
			"grain": 255,
			"blue": 189.997100830078
		},
		"opacity": 75,
		"glowTechnique": "softMatte",
		"chokeMatte": 0,
		"blur": 5,
		"shadingNoise": 0,
		"noise": 0,
		"antiAlias": false,
		"innerGlowSource": "edgeGlow",
		"transferSpec": {
			"name": "Linear"
		},
		"inputRange": 50
	},
	"chromeFX": {
		"enabled": true,
		"mode": "multiply",
		"color": {
			"red": 0,
			"grain": 0,
			"blue": 0
		},
		"antiAlias": false,
		"invert": false,
		"opacity": 100,
		"localLightingAngle": 19,
		"distance": 9,
		"blur": 38,
		"mappingShape": {
			"name": "Gaussian"
		}
	},
	"gradientFill": {
		"enabled": true,
		"mode": "normal",
		"opacity": 100,
		"gradient": {
			"name": "Two Color",
			"gradientForm": "customStops",
			"interfaceIconFrameDimmed": 4096,
			"colors": {
				"count": 2,
				"typename": "ActionList"
			},
			"transparency": {
				"count": 2,
				"typename": "ActionList"
			}
		},
		"angle": 90,
		"type": "linear",
		"reverse": false,
		"dither": false,
		"align": true,
		"scale": 100,
		"offset": {
			"horizontal": 0,
			"vertical": 0
		}
	},
	"layer": {
		"name": "Rectangle 1",
		"bounds": "147 px,111 px,463 px,434 px",
		"opacity": 100,
		"blendMode": "BlendMode.NORMAL"
	}
}

*You can also assign a keyboard shortcut for this script in Edit -> Keyboard Shortcuts….

LayerMiner is open-source

LayerMiner is available open-source under Public Domain on Github, fork it, extend it, innovate, use it, format data in your own way for your own environment.
https://github.com/tomkrcha/LayerMiner
In the following article I will deeply explain how LayerMiner works so you fully understand all it’s internals, but the script is very simple and well-aranged (just 116 lines of code).


Written by: |   Uncategorized     |    May 1, 2013

Creative Cloud - Get all the Adobe creative desktop tools + services like 20 GBs file sharing.
  • http://www.facebook.com/slavomir.durej Slavomir Durej

    good work Tom!

  • Pingback: John Nack on Adobe : LayerMiner: Photoshop script exports Layer Styles to JSON

  • Jonas

    Great script! But what wrong with Photoshop, it calls green channel in “Color” as “grain”.

    • tomkrcha

      yup, I saw that, a typo probably :)

      • tomkrcha

        Actually I know the answer now. There are both properties in the hashmap, grain and green and both have char ID “Grn “, and it picks grain instead of green, because it comes first. Just think of it as green.

  • http://www.yepi6.org/ yepi 6

    the instructions are very good, thank Posts

  • rakeshmondal

    I tried this process and its not working , getting an error for invalid token

  • http://www.friv2.org/Flappy_Bird.html flappy bird

    Thanks Ryan that was really interesting. This is a very meaningful
    thing, I do not have much knowledge on the subject of shared posts, but I
    think this is quite interesting knowledge.

ToTop