{"id":16414,"date":"2010-06-01T20:36:14","date_gmt":"2010-06-02T03:36:14","guid":{"rendered":"http:\/\/blogs.adobe.com\/jnackdev\/2010\/06\/feedback-please-html5-layers-in-photoshop.html"},"modified":"2024-06-19T14:06:18","modified_gmt":"2024-06-19T21:06:18","slug":"feedback_please_html5_layers_in_photoshop","status":"publish","type":"post","link":"https:\/\/jnack.com\/blog\/2010\/06\/01\/feedback_please_html5_layers_in_photoshop\/","title":{"rendered":"Feedback, please: HTML5 layers in Photoshop?"},"content":{"rendered":"

Let’s start by acknowledging that A) I’m possibly totally crazy, and B) what I’m describing may well never happen. I want, however, to present an idea that you might find interesting. Whether it’s worth pursuing is up to you.<\/p>\n

What if Photoshop implemented native HTML as a layer type? Just like the app currently supports special layer types for text, 3D, and video, it could use the WebKit engine (which CS5 already embeds<\/a>) to display HTML content. Among other things you’d get pixel-accurate Web rendering <\/strong>(text and shapes); the ability to style objects via CSS<\/strong> parameters (enabling effects like dotted lines); data-driven 2D and 3D graphics<\/strong>; and high fidelity Web output<\/strong> (HTML as HTML).<\/p>\n

On a really general level, I’m proposing that Photoshop enable programmable layers<\/strong>, opening the door to things like much smarter objects–everything from intelligently resizing buttons (think 9-slice) to smart shapes as seen in FreeHand<\/a> and Fireworks.<\/p>\n

If this sounds interesting, please read on in this post’s extended entry.<\/p>\n

<\/p>\n

\n

For a real-world example, let’s say that Finn (designer) and Henry (coder) are collaborating on the design of a Web site. Here’s how I’d imagine their interactions:<\/p>\n

    \n
  1. Finn comes up with a design for a great new UI elements (e.g. a calendar). He creates the artwork in Photoshop but doesn’t try to get into assigning behaviors to it. Instead he hands the assets to Henry.<\/li>\n
  2. Henry uses an HTML editor to turn art into art + logic. (You do not<\/strong><\/em> use Photoshop for writing code.) This will now be the standard calendar implementation they’ll use many times over.<\/li>\n
  3. Henry puts the widget into a location that Finn can browse from within Photoshop (e.g. via a Library panel or Mini Bridge).<\/li>\n
  4. Finn can now drag instances of this widget onto PSDs. When he resizes it, it does whatever the right thing is according to its rules (e.g. popping open to reveal a second month).<\/li>\n
  5. Photoshop should be good at editing appearances, not at tweaking code. If Finn wants to re-skin the calendar, he can do one of two things:\n