Meta Refresh 2014

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.

Outline

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 http://github.com/alagu

Links

• Markupwand - http://techcrunch.com/2012/08/17/markupwand/
• css.markupwand - http://css.markupwand.com/
• Github Profile - http://github.com/alagu
• LinkedIn - http://in.linkedin.com/in/alagu2
• Twitter - http://twitter.com/alagu