June 01, 2010
Feedback, please: HTML5 layers in Photoshop?
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.
[Update: Fireworks fans, please see this quick note.]
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) to display HTML content. Among other things you’d get pixel-accurate Web rendering (text and shapes); the ability to style objects via CSS parameters (enabling effects like dotted lines); data-driven 2D and 3D graphics; and high fidelity Web output (HTML as HTML).
On a really general level, I’m proposing that Photoshop enable programmable layers, opening the door to things like much smarter objects–everything from intelligently resizing buttons (think 9-slice) to smart shapes as seen in FreeHand and Fireworks.
If this sounds interesting, please read on in this post’s extended entry.
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:
- 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.
- Henry uses an HTML editor to turn art into art + logic. (You do not use Photoshop for writing code.) This will now be the standard calendar implementation they’ll use many times over.
- Henry puts the widget into a location that Finn can browse from within Photoshop (e.g. via a Library panel or Mini Bridge).
- 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).
- 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:
- Pop open the graphical pieces, editing them just as one would edit bitmaps linked from any other piece of HTML.
- Use the Photoshop properties inspector to tweak whatever parameters Henry has chosen to expose. We could possibly also enable parametric editing of CSS values, using a UI much like the one in Dreamweaver.
- Upon finishing a design, Finn can hand it off and keep code intact. That is, instead of Photoshop delivering a picture of something, it would actually emit the thing itself. A critical distinction is that it would not be trying to generate code; rather, it would be simply giving you back your code with whatever parametric tweaks you permitted (scale, CSS values).
As for “intelligent” artwork–shapes that contain internal logic–here are some examples:
- Buttons that automatically resize to match text contents.
- A rectangle knowing that it’s a rectangle, such that it can correctly preserve the radii of rounded corners).
- A scrollbar featuring scroll arrows & a scroll thumb, where the thumb moves/scales appropriately as the scrollbar is resized.
- Arrowheads that can scale and orient themselves according to path size & direction.
- Gradients that can be made to fit object boundaries.
- Objects that include multiple states (e.g. buttons that can be set to “enabled” or “disabled”).
- A tab bar that automatically grows/shrinks/hides content based on overall dimensions.
- It should be easy to add instances of objects, either by choosing items from a list (e.g. a library) or by drawing them directly on canvas.
- It should be easy to modify objects by directly interacting with them on canvas (e.g. free transforming; clicking a point and dragging to modify a corner radius).
- It should be similarly easy to modify objects through a properties inspector (e.g. changing number of nodes in a shape; changing the values or data source of text fields).
- The set of objects should be easily extensible. You want to go to Y! UI or Ajax Rain and grab some great accordion? Done: now that’s an intelligent element in Photoshop, and its developer could easily define the set of parameters she’d like to expose in the properties inspector.
With HTML we’d be embracing an open, and open-ended, system. Instead of trying to make just nicer rounded rectangles, or some other closed handful of objects, Photoshop would be ingesting whatever components one can develop for a modern Web browser. We’d get various advantages like network awareness (e.g. I could pull data feeds into a live chart on a layer, or maybe embed a Flickr query or a Google map) plus Web-browser-standard text rendering. As things like the Canvas tag grow richer, so too will what these layers can display. Who says they have to be limited to showing simple widgets? Why couldn’t one create a particle system-based drawing tool that plugs into PS?
Note that HTML layers are by no means the only way to enhance Photoshop’s design chops, and we know that there are plenty of other improvements (adding type styles, improving vector drawing tools, etc.) to be made. If you like this idea, though, please speak up; same goes if you think it would be a waste of time. We’d be grateful for your comments below, and I’ve posted a two-question survey to gather quick feedback.