by Alagu (@alagu) on Thursday, December 19, 2013

+15
Vote on this proposal
Status: Confirmed & Scheduled
View session in schedule
Section
Crisp talk

Technical level
Intermediate

Objective

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.

Description

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

Comments

  • 1
    [-] Jitendra Vyas (@jitendravyas) 3 years ago

    I think time for Photoshop is going

Login with Twitter or Google to leave a comment