Meta Refresh 2014

On the construction of user interface on the web

Next proposal

Components now!

Playing with Photoshop Files for fun and profit

Submitted by Alagu (@alagu) on Dec 19, 2013

Section: Crisp talk Technical level: Intermediate Status: Confirmed & scheduled


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

Speaker bio

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



{{ gettext('Login to leave a comment') }}

{{ gettext('You need to be a participant to comment.') }}

{{ formTitle }}
{{ gettext('Post a comment...') }}
{{ gettext('New comment') }}

{{ errorMsg }}