Psd.rb

http://layervault.tumblr.com/post/56891876898/psd-rb

by chamza • 13 years ago

629 92 13 years ago

layervault.tumblr.com

envex2• 13 years ago

I feel like this could be used to automatically convert a simple .psd web layout to non-shitty HTML and CSS.

meltingice3• 13 years ago

There is certainly the potential for that. The library still has a little ways to go until that's possible.

If anything, I think it would be a cool project to build on top of PSD.rb instead of bloating the core library.

gnufied2• 13 years ago

Look up markupwand.com an YC alumni. The problem is harder than it looks. Now, I am not an expert in PSD format but a PSD that can be automatically converted to HTML has to be specifically formatted. For example, if you merge text layers with image layers, it becomes difficult to extract the information.

envex2• 13 years ago

That's true.

Ideally, you'd have to spend some time making sure your .psd is formatted properly instead of just 100 layers names Layer X.

pestaa2• 13 years ago

The problem is harder than it looks.

markupwand.com is pivoting...

thesunny• 13 years ago

We've actually solved this and will be launching in about a week. We've been working on it for over a year now.

It runs inside Photoshop (there is no upload stage nor do you have to open up separate software) and it generates HTML and CSS that looks like a designer wrote it and slices up all your images. It also outputs LESS, SASS, HAML, Slim, Jade and I think there are some other formats I may be forgetting.

Text is output as text. If you use a Google font, it automatically links the fonts in for you.

It does not use absolute positioning so if you modify things like text and it grows taller or shrinks shorter, other items will be positioned properly (initially we did it with absolute positioning but later I figured out an algorithm to make it work the way it should, even with overlapping elements).

It's definitely not an easy problem to solve (hence why we've been working on it for over a year although not full time).

We've done some outputs now and the results are amazing.

I would link you to the website but it looks so bad right now that I don't want to show it. Anyways, we will launch in about a week so look for an announcement. If you have any questions about it, please leave a comment.

Sunny

tlrobinson• 13 years ago

CSS Hat gets you part way there: https://csshat.com/

smtm2• 13 years ago

So, will there be writing .PSD files as well? This would be the über thing. Imagine: upload a .PSD and get back a clean HTML layout + bootstrap_overrides.css

kellysutton3• 13 years ago

The library supports some writing, but it's mostly limited to translating/scaling layers.

mistercow2• 13 years ago

So, will there be writing .PSD files as well?

Writing PSD files is considerably easier than reading them. To write, you need only support the features you actually use. To read, you must support everything. For example, Photoshop always saves its layers RLE compressed (or it did when I last wrote code to write PSD files, which was about five years ago), but the format supports uncompressed layer data just fine. So if you're just trying to get basic interoperation with Photoshop, you don't have to worry about RLE at all.

Imagine: upload a .PSD and get back a clean HTML layout + bootstrap_overrides.css

Why would that require writing .PSD files?

smtm2• 13 years ago

Well, so you could iterate on your design - and pick up the changes made in CSS back into the design PSD. And work onwards from there

FuzzyDunlop• 13 years ago

To be fair, if you wanted to convert a PSD to HTML the last thing you'd need is Bootstrap.

freerobby• 13 years ago

Great work and thanks for building this. There's a lot of room for improvement in automating manipulative photoshop exports, and I look forward to seeing what people do with this, especially in terms of building command line tools.

mistercow2• 13 years ago

Adobe has never produced an easy way for developers to work with the format.

That's not entirely fair. Adobe has openly released a comprehensive description of the format which is, as far as I know, accurate. The problem is that the format itself is a heap of features piled on year after year with apparently no regard for doing things consistently.

meltingice3• 13 years ago

The file spec released by Adobe (http://www.adobe.com/devnet-apps/photoshop/fileformatashtml/) is actually outdated, wrong in some places, and can be incredibly vague at times.

Zev• 13 years ago

I can't speak to its accuracy, but, June 2013 wasn't yesterday. It isn't that old -- and it isn't like there's been a release of Photoshop in the past month and a half, so, it seems pretty recently updated.

ejstronge• 13 years ago

A bit off-topic, but is there a spec for Illustrator files? It seems the only one I see on Google is from an old version of AI...

6ren• 13 years ago

joke: Legal wanted to open-source it, but was vetoed by Engineering.

But seriously, this kind of back-compatibility horror is the hallmark of success, where success means enduring.

bluedino• 13 years ago

Similar to a Word .doc? Who's worked with both, is it Better, or worse?

artagnon• 13 years ago

This programmer has written about the PSD format in colorful detail: "Trying to get data out of a PSD file is like trying to find something in the attic of your eccentric old uncle who died in a freak freshwater shark attack on his 58th birthday."

https://code.google.com/p/xee/source/browse/XeePhotoshopLoad...

(ref: first link in the article)

nja2• 13 years ago

I think that comment itself was posted on HN or somewhere -- I know I've seen it before.

_delirium2• 13 years ago

It was a front-page story on HN, but four years ago: https://news.ycombinator.com/item?id=575122

dbond• 13 years ago

Several years ago while writing a PSD parser in javascript, that comment block saved my sanity.

aftermathvc• 13 years ago

awesome!

tommoor• 13 years ago

Wow, fantastic work and a lot of respect for open sourcing this lib when it's clearly an important part of LayerVault.

gburt2• 13 years ago

I just wrote a script with this that takes a directory of PSDs and outputs PNGs for each one. It took about 2 minutes. This is great.

justinator• 13 years ago

Wow, everything old, is new again ;)

I think with an actual copy of Photoshop, and a little Applescript, this is something you could have done > 15 years ago.

sejje• 13 years ago

So maybe what's great is avoiding the cost of Photoshop, which many have found to be outrageous.

gurvinder• 13 years ago

Yes, but now you can do it without having a copy of Photoshop.

jdboyd• 13 years ago

But this way I don't have to keep paying $20/mo to Adobe CC so that I can run the script again next month.

Tmmrn• 13 years ago

  $ pacman -S applescript
  error: target not found: applescript
  $ pacman -S photoshop
  error: target not found: photoshop
  $ ruby --version
  ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-linux]

Hm, which of those can I use?

muratmutlu• 13 years ago

How long did it take to output each PSD (if you have a rough file size for each that would be great to know)

flixic• 13 years ago

Great, however, that was possible with ImageMagick before. Even more: ImageMagick can extract PSD layers as separate PNGs.

elliottkember• 13 years ago

Sure. The difference is that with ImageMagick is getting all the flags right. Not to put down a powerful tool, but it isn't exactly memorable. In a script you can describe what's happening and customise it at any point without in-depth knowledge of the tool, and with a friendly CLI environment. I'd rather write 5 lines of Ruby than read up on the ImageMagick flags.

porker• 13 years ago

Could you provide your ImageMagick command, so we don't have to navigate the flag-infested waters?

isaacjohnwesley• 13 years ago

Truly awesome, cant wait to think of the possibilities with this.

carlosdp• 13 years ago

Thank you! There's quite a ton I can do to this. Will definitely be contributing soon.

nja2• 13 years ago

Does anyone know of a similar tool for Python?

Not trying to start a Ruby/Python fight or anything; Python just happens to be my preferred language.

sjtgraham3• 13 years ago

Just use Ruby for this. I prefer Ruby, but there are times I will pick Python instead because it has better libs for what I need to do, e.g. numerical and scientific libs.

hoov2• 13 years ago

"Just use Ruby" isn't always the best option; if you have a large base of Python code, it's probably preferable to use Python directly rather than using the subprocess module.

Also, a port would be fairly straightforward. Some combo of the struct/ctypes modules (depending on how complicated the data structures are) would make a transliteration pretty simple.

shurcooL• 13 years ago

I would've liked to see it in Go, but alas.

fish2000• 13 years ago

Close: https://github.com/migurski/Blit

TheZenPsycho3• 13 years ago

yes. this https://github.com/jerem/psdparse

enry_straker• 13 years ago

You can access ruby code from python ( throuh jython and jruby) and the process is relatively seamless.

or check out psdparse on github ( there are others out in the wild )

kmike846• 13 years ago

A shameless plug: you can give https://github.com/kmike/psd-tools a try.

I've read PSD.rb docs and a bit of its code; the implementation is one of the best and complete I've seen (I've checked almost all PSD reader implementations some time ago).

But it seems that psd-tools is mostly on par with PSD.rb. It also have some features that PSD.rb doesn't have, e.g. full support for 'zip-with-prediction' compression, including 32bit layers. Such images are very common in practice, and parsing them is not easy because the compression format is not documented anywhere, and "zip-with-prediction" for 8 and 16bit layers is totally different from "zip-with-prediction" for 32bit layers (for 32bits it is really tricky).

If PSD.rb authors are reading this, I urge them to check the decompression code in psd-tools (https://github.com/kmike/psd-tools/blob/master/src/psd_tools...) or in Paint.NET PSD plugin (http://psdplugin.codeplex.com/) to not waste the time.

psd-tools also knows how to export individual layers, and there is an experimental support for exporting layer groups; it seems that this is not implemented in PSD.rb yet.

PSD.rb has some features that psd-tools doesn't have, e.g. it parses "Font data" which is really cool and hard because the format is not described anywhere.

tluyben24• 13 years ago

I checked out psd-tools and it's good. Any chance of you adding their features to yours or vice versa? I know I know, I should do it myself and do a pull request, but just asking if you are planning to?

kellysutton3• 13 years ago

Nice! We should work together.

tluyben24• 13 years ago

Thank you very much for doing this! I wish all people hacking the PSD format would join forces and help with one project. There are too many partial implementations which scratch an itch instead of trying to be a full implementation.

voltagex_• 13 years ago

I get this feeling with many open source projects, but merges happen much less often than forks.

blt2• 13 years ago

Does anyone else think it's weird that they decided to make this library in Ruby? It drastically cuts down on the audience. Why not C/C++ with wrappers for all the dynamic languages?

EDIT: nevermind, it makes sense now that I see their main product is a version control system for designers. Still, it would be nice to see this ported to native code some day.

stormcrowsx• 13 years ago

Most of the work is done, get off your ass and start porting.

blt2• 13 years ago

I might just accept that challenge!

zem• 13 years ago

as a programming language fan, i've never found anything as productive as ruby. it may not be the fastest language out there, and it may not have a bunch of static safety guarantees, but for exploratory programming it's pretty much unparalleled. if i were tasked with making a psd reader, i'd definitely do it in ruby first and then port it over to whichever language the client called for.

adamwong246• 13 years ago

Idea: Use this to dynamically "compile" photoshop files into png, jpgs, etc on the rails assets pipeline.

netforay2• 13 years ago

I have been trying to do this from last 3 months. But I intend to make modifications to layers (turn on or off, change colors) and export to PNG. When I saw Psd.rb I thought it is done. But it just exports the channel data saved by Photoshop. So our modifications wont reflect in it.

jawngee• 13 years ago

Use extendscript or the creative suite extension builder SDK.

netforay2• 13 years ago

Unfortunately I want it to run on a Linux server and I don't want any UI as it needs to be a service.

captainbenises• 13 years ago

I reckon a good tool (that this psd.rd wouldn't actually help write, but), would be one that rendered an html/css page - and exported a layered PSD, so you could prototype an app, render it to .psd and send it to your designer friend to make it look rad.

mhd• 13 years ago

Is this more feature complete (esp. regarding to newer PS versions) than e.g. libpsd?

http://sourceforge.net/projects/libpsd/

meltingice3• 13 years ago

libpsd and PSD.rb both have features that the other doesn't have. For example, PSD.rb parses text/font data, while libpsd can handle images with zip compression.

libpsd was actually a great reference in building PSD.rb, especially since it was correct during the times that the actual file spec was wrong and more explicit in the type of data being read.

smickie• 13 years ago

This is a great example of why open source is brilliant. Everybody wins. We get a PSD parser. LayerVault benefits from the world improving they're core product too.

cveigt• 13 years ago

These are great news for developers and an easy way to communicate between designers with developers. Is the beginning of a solution for a big problem.

Radle• 13 years ago

// PSD is not my favourite file format.

I see bro...

jheriko• 13 years ago

nice. now if someone can port it to C so that everyone can benefit... :)

primitur• 13 years ago

I'd pay for a Lua port of this. Anyone interested? Drop me a PM.

Psd.rb

Related Stories