Meta Refresh 2014

On the construction of user interface on the web



Playing with Photoshop Files for fun and profit

Submitted Dec 19, 2013

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('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more