Automated Tool to convert PSD to Canvas to PNG and JSON
About me
I am a freelancer (Frontend Developer) creating HTML5 design editors using fabric js + canvas.
The problem I wanted to solve
Automatic conversion process of PSD to JSON for 300+ PSDs in a local folder.
Converted JSON will be loaded in the fabric js based NBDesigner design editor.
What is Tool to convert PSD to Canvas to PNG and JSON (for fabric js editor)?
Conversion process of PSD to JSON and the converted JSON will be loaded in the fabric js based NBDesigner design editor. Node JS based script will be created for this conversion process.
Tech stack
Node JS + psd.js (psd parser) + Bunny CDN Storage (for storing extracted images from PSD) + fabric js (fabricjs.com) + HTML5 Canvas + node-canvas
The process of building Tool to convert PSD to Canvas to PNG and JSON (for fabric js editor)
Below will be steps to this conversion script
- create script for single PSD to json conversion
- fine tune the script by testing with few PSD files.
- test by loading the output json in nbdesigner fabric js based editor
- update script to generate json for all files in a folder.
Challenges I faced
Font rendering for text elements, font details like font family, size, char spacing, caps needs to be extracted from PSD and placed in JSON and fine tuned to match the PSD.
Key learnings
Node JS is a correct way of hadling this extraction process. Creating script like this in Node JS is a new learning for me.
Tips and advice
PSD extraction will be helpful for users who wants to customize the design and designers who already have lot of designs in PSD format can just use this script to convert it for HTML5 format for easy editing.
Final thoughts and next steps
Next steps are
- SVG shapes and layers are still stored as image format in json, that needs to be fixed.
- Other elements like Gradients / Shadows are to be extracted.
Please find the converted sample outputs.
