Playing with Photoshop Files for fun and profit
Submitted by Alagu (@alagu) on Thursday, 19 December 2013
Section: Crisp talk Technical level: Intermediate
This Talk will cover all the tech we learnt building Markupwand, a Product that converts PSD designs to HTML. This would help Frontend Engineers understand the PSD file format better and hack it for use.
Adobe's PSD format is a black box. But there are plenty of ways to open it up. We hacked and built tech to easily work with Photoshop documents.
- Case for Photoshop (Why people still use it)
- What information you can get from a PSD file
- Extracting out information using ExtendScript and psd.js
- Automatically extracting out images
- Having an interchange format (a JSON of your PSD)
- Translating them to CSS3/SASS
Extracting out information from PSD is useful and has multiple applications - versioning of images, automating your Frontend Workflow, Generating CSS, Finding out font requirements, Color Palettes.
Information you can get from PSD:
- Document structure
- Document size
- Layer/folder size + positioning
- Layer/folder names
- Layer/folder visibility and opacity
- Font data (via psd-enginedata)
- Text area contents
- Font names
- Font sizes
- Color mode and bit-depth
- Vector mask data
- Flattened image data
I'm an ex-Yahoo!, ex-Zynga and a YC Alum. I've been a Frontend Engineer at Yahoo! and Flash Engineer at Zynga.
I started my own company in 2011 - Markupwand, funded by YCombinator Summer 2012. We built a product to convert PSD designs to HTML. I spend my free-time hiking and building my own pet projects at http://github.com/alagu