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:

  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.
  2. 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.
  3. Henry puts the widget into a location that Finn can browse from within Photoshop (e.g. via a Library panel or Mini Bridge).
  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).
  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:
    • 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.
  6. 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.

Desired characteristics:

  • 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.

Thanks,

J.

Posted by John Nack at 8:36 PM on June 01, 2010

Comments

  • Sean Foushee — 9:01 PM on June 01, 2010

    I would love to see this implemented in a future release! It would cut down on the number of apps I use to design and temp,ate sites and apps.

  • Ryan Butterworth — 9:10 PM on June 01, 2010

    I’m no web developer, but, this sounds totally cool. There’s only so much “photo” stuff you can add to photoshop. :)

  • Julian Kussman — 9:13 PM on June 01, 2010

    YES.
    This is the kind of innovation I’ve wanted from PS for years. (ie: as long as I’ve been using it for the web)
    If this integrated tightly with DW it would be another reason for me to use that app instead of a more lightweight text editor.

  • thinsoldier — 9:25 PM on June 01, 2010

    ATTENTION!
    I strongly urge anyone who agrees with these idea (like myself) to crack open photoshop and start putting together mock ups of what the user interface for these ideas will look like.
    Many people will moan and complain unless they have visual aids to help get the ideas across

    • Lp Bell — 3:28 PM on July 20, 2010

      Hey…
      I did it. I have my full version of photoshop and i used to have a cracked one before. So i took that old version and opened it and reprogrammed it all.
      I can export my layered psds to a full html/xhtml/asp/php file with CSS attached and all files in a folder all SEO ready.

      I had that question about 10 years ago with my photshop 5.0 but i finally manage to learn to code and destroyed many versions of Photoshop.

      In the end: fully working area of work

      I can create a full site with 5 diferent pages in about 1 to 2 days. I did myself a business about it around 2005 and the company got bought (for alot).

      They didn’t buy the program tought! ahahah
      Still got it and i still make website…

      Anyone interested, go check out http://creation-siteweb.ca/
      and go down the page at the right…

      Just send a mail there and ask for LP!
      I’ll give my Adobe friends a special discount…
      I can make pretty much anything of anything. price goes up for HTML5 or other speciefed content.

      THanks Adobe!
      and thanks jack

  • Erik Kambestad Veland — 9:36 PM on June 01, 2010

    Call me crazy as well, but I think this idea could definitely work. I have switched from doing my wireframes and website layouts into pure code and css framing.
    This idea could make Photoshop relevant again for my kind of web development.

  • Eric — 9:39 PM on June 01, 2010

    Oh heck yes.

  • Rob — 9:43 PM on June 01, 2010

    Your real-world example assumes these Finn and Henry fellows will be motivated to get jobs rather than just mooch off their parents.
    [Yeah–as far as I can tell they’re kind of content with being deadbeats. ;-) –J.]

  • Uri Ar — 9:45 PM on June 01, 2010

    Fantastic! Make changing states and data instances work with layer comps…

  • dvessel — 9:50 PM on June 01, 2010

    This doesn’t sound like it’s suited for PhotoShop. The idea has some similarities to OpenDoc which seems great. If you run with this idea, I think it would make sense for it to be a new product and PhotoShop can provide an image service for the app. :)

  • thinsoldier — 10:04 PM on June 01, 2010

    Reasons I like this:
    Have you ever had a client get stuck on the fact that the text in your design just didn’t look “right” and the only way to satisfy them was to take a 2 screenshots of text in a browser (white on black and black on white for a mask) and use that instead of native photoshop text?
    Have you ever needed 3, 4 or 5 evenly sized and evenly spaced rounded rectangles to fit in an area and found it easiest to just visit one of your recently built sites with a similar design element, open Firebug and tweak the css then take a screenshot rather than build it in photoshop or illustrator? (Illustrator probably has a faster way of doing it but in the time it takes illustrator to launch I could be 75% done in Firebug.
    Have you ever tried recreated an intricate gradient in css? Did it take much longer than expected? Did is STILL not look “exactly” the way it should look compared to the same gradient you created in photoshop/illustrator?
    I personally don’t think the css spec for gradients is actually capable of all the gradient features you have in photoshop or any vector program. Hopefully the photoshop team can convince them to make the spec complete. I’ve already seen comparisons of what webkit can do with its gradient syntax vs Mozilla’s new gradient proposals. While I like Mozilla’s syntax better it sucks if it doesn’t have all the features.
    These ideas would be wonderful for those companies offering software that does the crazy idea of converting a series of .psd files into a “complete website”. If they make the user start off with a .psd template full of html layers they might actually be able to generate decent markup!
    If you want to work on a slight redesign of an existing site you could save a page via your browser, strip out any unnecessary code and import it into photoshop to have a pretty good starting point. You’d want to replace all the header graphics with their original .psd of course. You’d have real life content to work around, influencing you to do what’s best for the content you have.
    I’ve been waiting forever for live shapes. And if those shapes can be exported as .svg or canvas code, even better! OH, if the code that makes say a star shape editable is javascript based then maybe I could export Adobe’s star shape .js code and use it as a part of my own .js to generate randomized stars of varying shapes, sizes, points and angles.
    …more random thoughts on my blog

  • Gaspy — 10:05 PM on June 01, 2010

    Isn’t this something more suited to Fireworks? Just sayin’

  • Andre — 10:26 PM on June 01, 2010

    This will come in very handy for quickly prototyping websites and other interface. So yes, definitely bring it on!

  • Nick Hampson — 10:29 PM on June 01, 2010

    Sounds great to me I slice up designs every day and to get even simple colours out into existing css would be a huge timesaver.

  • Niklas — 10:30 PM on June 01, 2010

    I love that you are thinking about this and have to say no for the simple reason that I think this is awesome and belongs in Fireworks.
    I always thought Fireworks was to be the export-stuff-to-web application that you market it to be. I know that you are a Photoshop guy but by doing functionality like this on an app aimed at photo editing you only risk at making everything worse.
    Why Photoshop, when you have Fireworks? That is my question for you.

  • Neven Mrgan — 10:46 PM on June 01, 2010

    John: Just voicing my support for this, again. I’m not even sure what exactly I’d do with it, it has so much potential.
    Niklas: as a designer aiming at the web, desktop, and mobile device, I’ve never found Fireworks sufficient for UI/layout design. Too many of the tools I regularly use in PS are just not there in Fireworks.

  • Mylenium — 11:00 PM on June 01, 2010

    I’m not really convinced. The simple problem I see is, that since PS itself is not relying on procedural meta structures and parametric definitions, you will basically be adding a complete secondary architecture on top of PS’ tools, introducing a lot of redundancy.
    [Yes, that’s absolutely a concern. –J.]
    Funnily, some of this CSS driven stuff will actually even be more powerful than the program’s native tools. So how do you sell the sudden appearance of these features thanks to CSS/ HTML when you couldn’t add them for those last 25 years. It will also leave you with the problem of having to decide which features to express natively as HTML/ CSS and which others to render to persistent pixel data in images. That aside, I’m dreading PS’ destructive, non-standards compliant nature of its web tools as much as the next guy. So far it simply hasn’t proven that it can do anything for web that won’t make a web designer’s hair stand on end…
    [I assume you’re talking about HTML generation. I’m not talking about having PS generate HTML; rather, I’m talking about having it modify only parameters within that code. –J.]
    Now if we get access to these things via a property inspector/ CSS panel, we may have more control, but, and that’s the other thing, dealing with this may be over the heads of some people, too. You are really entering a minefield here…
    [We’re already in the minefield & have been here for many years. –J.]

  • Peter Witham — 11:16 PM on June 01, 2010

    Actually I don’t like the idea for the simple reason that I see more and more bloated features added with every release moving Photoshop away from the core product it used to be and more like a one stop hack shop for anything Adobe dreams up, video, 3D, animation and now webkit integration.
    Surely time would be better spent with more Dreamweaver integration for such things?
    Get back to basics like the Pre-CS2 days otherwise competing pixel editors will catch and surpass Photoshop if for no other reason than performance.

  • Gaspy — 11:33 PM on June 01, 2010

    Elaborating a little on my previous one-liner on Fireworks, my biggest problem with Photoshop and Fireworks is that we have two products that both lack essential features.
    I’ll give you some issues I have to deal with on a daily basis:
    – I can’t control object size in Photoshop. I draw/resize a rectangle. I want it to be exactly 145×73 pixels. Can’t do that. It’s amazing. I know of all workarounds, like using the selection tool, guides or other tricks, but they are just that – workarounds, making Ps rather painful for pixel-perfect web work.
    – Ps and Fw have different ways of exporting to the web. In many cases, Fw 8bit export simply sucks with its Adaptive model, while Photoshop’s Perceptual is clearly superior. On the other hand, Fw can output a 8bit PNG with alpha transparency while Ps can’t.
    My dirtly little secret is that for 3 years now I’m doing a lot of design work in Flash. I can import PSDs and AIs in there, I can do pixel-perfect layout, vector shapes and in the end I output a PNG.
    So my advice would be to either really improve upon Fireworks with these features you’re proposing, or let it die and make Photoshop the universal pixel tool – but then you need to first bring more basic tools in in before adding “crazy stuff”.

  • Debashish Paul — 11:50 PM on June 01, 2010

    I guess Peter’s point is very valid and I am also worried about the bloated features issue.
    I think this idea is definitely a bigger one than we could think and it will be worth to create a peripheral product around PS. Like for photographers there is “Lightroom”, creating a “Webroom” around this idea will definitely be a win. Moreover, you could add many more features chiseled for the web designers and integrate the workflow with PS,FW,DW etc. Like this, you avoid bloating up any single product, keep the focus straight and users have a choice. Just my 2 cents!

  • Sven — 12:43 AM on June 02, 2010

    Please pitch exactly that concept to the Fireworks team.

  • Chris — 1:20 AM on June 02, 2010

    Keep going on like this and photoshop will become a jack of all trades and a master of none.

  • Rick — 1:53 AM on June 02, 2010

    I like this idea, I do wonder though whether this should be in Fireworks? That said I use Photoshop as my main image editor so I’d happily see it in there but I can see users of Fireworks wanting the same feature!

  • Ale Muñoz — 3:05 AM on June 02, 2010

    Dear John,
    HTML layers would be *killer*, but you are aware that the features you describe under “intelligent” artwork are *already* available in Fireworks, are you?
    [Yes, I know, but they’re all done in a FW-specific way (i.e. one that isn’t extensible in a standard way, and that doesn’t take advantage of what the HTML dev community is creating). That has certain advantages, but the downsides are apparent as well. –J.]
    I get the feeling you (Adobe) are planning to merge every Fireworks feature into Photoshop and then dump Fireworks.
    While I agree there’s some overlap in features, I *love* Fireworks for web design and can’t stand Photoshop for the same task, so I guess there’s room for two different tools…
    Anyway, the “Webroom” concept mentioned earlier in the comments feels really good. I’ve said multiple times that Adobe should use “the Lightroom way of doing things” on every one of their products.

  • Manetee — 3:23 AM on June 02, 2010

    This definitely belongs in Fireworks, its foolish to start sticking more things into Photoshop. You’ve already wasted time with 3D and animation. Jack of all trades master of absolutely nothing.
    That said the Fireworks team is clearly too understaffed as it is because their quality has been below par for years. It’s time to start working on Webroom as mentioned in Debashish Paul’s comment.
    p.s Dreamweaver has the WORST CSS editor in the world, don’t base it off that, look at CSSEdit.

  • Manetee — 3:30 AM on June 02, 2010

    What UI tools specifically are in Photoshop that are not in Fireworks? I’d say exactly the opposite. Photoshop can’t even add rounded corners to an existing rectangle or centre elements in the middle of the canvas, doesn’t have anything as powerful as pages/states.
    Sounds like you have never even looked at Fireworks to be fair.

  • Sean Baker — 3:40 AM on June 02, 2010

    This is a brilliant idea – really, it is. But it’s one which I believe needs to be implemented more on the FW/DW side than on the PS of the CS house. I like the idea of leveraging it for smartER objects in PS, but then this cart is getting in front of its horse. Start with what benefits *all* PS users – switch PS to a node-based UI and backend, implement the third ‘PSx’ file format (parallel-optimized, optional compression modes, large file safe, node structure, etc.), and then talk about integrating WebKit through the node system. Whether in 2 years or 20 years, PS will have to go nodal; the more code which is added between now and then (especially that which most customers don’t need), the more work will be required in doing the inevitable. And, done right, Finn’s reskinning work would be infinitely easier if he’s working with a proper node system.

  • Coerv — 3:46 AM on June 02, 2010

    These sound like cool new features. But I’m not sure if they wouldn’t rather belong to Fireworks. But since Fireworks doesn’t work for me in Webdesign I would be really happy to see them in Photoshop.

  • Lembit Kivisik — 4:22 AM on June 02, 2010

    Please, don’t.
    Where, oh where is the same kind of attention, enthusiasm towards Fireworks at Adobe?

  • Nick — 5:43 AM on June 02, 2010

    It sounds like a great idea – but for Fireworks, not Photoshop. I’ve discussed exactly this concept in relation to FW in the past. Can Adobe not develop features in parallel, and drop them into BOTH applications?
    [Well, as I say, I’ve advocated for several years that multiple Adobe apps go down this route, such that tools could be built to run across them. –J.]

  • Jim Pogozelski — 6:17 AM on June 02, 2010

    Whether it’s Fireworks, ImageReady, or Photoshop, it sounds interesting.
    You said: 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).
    Hopefully this means it won’t write the actual html. Dreamweaver and SaveForWeb (html page option) drove me to text editors. Are you saying it would just update embedded sizes or colors or paddings? Only that snippet would migrate to the html?
    [I’m saying that it’s really tough to translate one format to another while synthesizing clean, desirable code. Many people have tried for many years, and the results never seem to please demanding coders. I don’t want to go there–at all. Rather, I simply want PS to consume code, tweak parameters + graphics, and hand the code back. –J.]

  • Peter Witham — 6:21 AM on June 02, 2010

    I should of added that I agree with others this is Perfect for Fireworks. I still view Fireworks as my web preparation tool far more than Photoshop, plus I’d like to see Fireworks get some more love and attention than it currently seems to from Adobe.

  • Stef van der Feen — 6:28 AM on June 02, 2010

    This sounds like a really bad idea to me, for one reason: it’s another step in the direction of needlessly bloated software like Microsoft Word/Office. It makes the application like some sort of “one man band” ( http://www.youtube.com/watch?v=l2xOw-VXe_g ), it’s fun for a while but after a few minutes you just want to listen to *good* music instead of funny music.
    I would like to ask Adobe to pause, take a step back and look at the Creative Suite as it is right now. The Creative Suite is great in terms of what you can accomplish with it, but the features are all over the place. Why can i make (Flash) websites with InDesign, Why would i want to have HTML5 in Photoshop and why does Illustrator have Photoshop effects? It seems like Adobe wants all the applications to be able to do everything, but for me (and i think more costumers) that means all these applications can do less of what they have to do. It’s confusing, frustrating and makes the applications bigger than they need to be.
    I understand that the pressure is high to deliver more digital content creation tools for things like HTML5, but i’d rather have a great application for content creation than have all these features divided over all applications. Think of it like “Compressor” from the Final Cut Studio. One application to generate digital content, be it Flash or HTML(5), a website or e-book. This way all digital content is made in one application, photos are edited in another application and vector illustrations are created in the next. This way every application can create it’s unique set of tools that are more focussed on the tasks it has to accomplish.
    Please take a look at probably the best application for editing RAW photos. It’s focussed, it’s lightweight, it let’s me do what i want without bothering me with what i don’t want and it looks really awesome. You may think i’m talking about Aperture, but the application i mean is your own application Lightroom.
    Why can’t you do the same with the applications like Photoshop, Illustrator and InDesign like you did with Lightroom. Don’t be afraid to kill needless features (Who uses the lens flare any more for example?). And don’t be afraid to rethink the user interface (i counted 30 menu items (submenu items not included) in the “Layer” menu, i know you can hide them but hidden menu items are hard to find so for me that’s not really a time saver).
    I hope Adobe takes a good look at applications like Pixelmator or Coda. These applications are focussed, easy to understand and work great together even though they aren’t part of an integrated suite. They might not be as powerful as Photoshop and Dreamweaver, but what they do is made in a way that i actually use it. And they aren’t afraid to rethink or even trash a feature (or it’s ui) after a few months/years to make the whole user experience better.
    I know this has all been said before and i don’t intend to be rude with this comment (i can understand if you think i do, but it’s not what i intended). I know other applications also have their weird things, bugs and ui mistakes. But so does Adobe’s. I hope you will learn from the user input because they/we are the ones who need to work with your software every day.
    (p.s. to be honest, Adobe made a good start with CS5, there are portions that really improved, but there’s still a long way to go i’m afraid…)

  • Steph Boudreau — 6:37 AM on June 02, 2010

    I think that’s a neat idea John. Although I like to keep all thing separate and use specifialized tools for each part of a project, this sounds like a great prototyping feature. As with all things Photoshop, I’ll try anything and everything Adobe throws at me and use what I find usefull. Photoshop rocks!
    On a text note: John, I think I’ve spotted a typo in the following sentence snippet … “opening the door to thinks like much smarter objects…”
    did you mean ‘things’ ?

  • Richard — 6:37 AM on June 02, 2010

    NO! NO! NO! Keep photoshop lean and mean! Photoshop should focus on images, not on html and webshit. YOU HAVE A WHOLE SUITE TO DO WEBDESIGN!!! You don’t need to fuck up photoshop even more with extra bloat! Use dreamweaver, flash, Illustrator, Indesign, whatever! DONT FUCK UP PHOTOSHOP WITH WEB-BLOAT!

  • J. Jeffryes — 7:03 AM on June 02, 2010

    I agree with many here. This would be a great feature for Fireworks.
    It would suck for Photoshop.
    Personally, I would prefer that you either make Fireworks even more focused as a web UI tool, or you dump it and build a new tool focused on a complete web design workflow.
    Give me something that is perfect for wireframing, prototyping, designing, creating pixel-perfect images and then turning them into clean code, and I will sing your praises forever.

  • Mordy Golding — 7:24 AM on June 02, 2010

    So if I get this right, it’s kind of the opposite of what Flash Catalyst offers. I’d still need to start with a “wireframe” or “basic” component if you will, which I can then re-skin using a variety of methods in PS.
    What I really like about the FC workflow is that as a designer, I don’t have a predefined idea what a “button” or a “widget” is. Instead, I can let my creativity and inspiration lead me to what I’m trying to do. With FC, I start in AI or PS and am purely thinking about design. Then I convert my design into a skin. So it’s making a design into a component instead of a component into a design — I think the result is a workflow that allows designers to think outside the box and innovate. What you propose here sounds to me that all web sites will start to look the same with the same types of structures and elements.
    [I don’t think that’s the case. I do think, however, that designers want to focus on the appearance and placement of these elements, rather than spending their time re-implementing the World’s Greatest Calendar (or Button, Accordion, etc.). The idea is to use PS/AI/FW for what they’re good at–defining appearance–while leveraging the logic/interactivity created elsewhere. –J.]
    Which is why I propose that the functionality you describe be put into an application like Illustrator
    [I think you know that I’ve been advocating this to the AI team for years. My goal has been to deliver a consistent programmable layers model across the Adobe creation tools (PS, AI, FW, and ID). –J.]
    — which is better equipped to handle creativity and design in a structured environment than Photoshop is. Can you even imagine how many layers you’d be messing with in a “simple” wen layout? Sure, there are layer comps, but in my experience, no one even knows they exist, and it also requires you to manually create them and maintain them.
    [Listen, Mordy: you and I have been evangelizing Illustrator for Web use for 10+ years, and yet the huge majority of people keep voting with their feet & using PS. There are good reasons to do so, despite all the limitations. And as for Illustrator, let’s be honest in saying that only now–10 years after the team added Pixel Preview–that they *finally* got anti-aliasing right. –J.]
    Of course, there’s also the Fireworks argument. What you describe is much of what FW is already doing (prebuilt HTML components, CSS support, etc.) but I’d compare FW or Layer Comps in this case –cool software, but hardly anyone uses it.
    The benefits of bringing this to Illustrator would be that you’d be able to build “smart” components that would export simultaneously to FXG and HTML/CSS — giving you the true Adobe “holy grail” workflow — a design that can be repurposed for Print, and both Flex and HTML5 — design once, deliver many.
    [Perhaps you’ll have more luck convincing them than I have. –J.]

  • Chris V — 7:29 AM on June 02, 2010

    First to put my spin on what Mylenium said: remember that HTML5 is a markup language to be used to identify the types of information in a web document: hardly a good fit for Photoshop’s pixel rendering strengths. It’s CSS3 rather than HTML5, perhaps, that you should be thinking about.
    [It’s the combo, really. But “HTML5″ is a buzzword at the moment, and attaching it to a post is kind of like Cartman saying, “More people will come if you say there’ll be punch and pie!!” My use of term isn’t completely cynical click-bait: HTML5 contains interesting developments like the Canvas tag & SVG support. –J.]
    That said, remember that the problem with Photoshop for web design, at least for many of us, is that it is constrained to work with image files with fixed intrinsic sizes (I’m talking about the JPEGs, PNGs, and GIFs of the web world.) To adapt to the varying dimensions and aspect ratios of web content delivery devices requires code to run on the delivery device. WebKit can do some of this through its rendering engine, but today it’s done with JavaScript.
    So, the proposal sounds intriguing, but I see weird mismatches between Photoshop’s strengths and the world of the web. Programmability in Photoshop that gets executed by the browser? Just hard to see how this is going to work within the current Phostoshop model.
    But should the tools for designing web sites be reworked to address current and developing trends in web design? Absolutely. Is Lightroom a model for how that reworked toolset should operate? Yes, in the sense that the design is dictated by automating the way real people want to get their work done. But not necessarily in terms of appearance nor even the modular work flow. Web design is not photographic image management.
    Bottom line: very exciting ideas in need of a good deal of refinement.
    Thanks for asking!
    [Thanks for the feedback. –J.]

  • rich — 7:51 AM on June 02, 2010

    It seems like a solution in search of a problem.
    How about improving 3D? That’s a significant long term investment, a real Adobe weakness. Lost opportunities include SketchUp, Maya, Softimage, photogrammetry applications etc.
    I wouldn’t blame the Lens Flare filter, it is so neglected and simple that testing can’t take up much bandwidth, but I do wonder why After Effects filters can’t work in PS.

  • Rich Morey — 7:51 AM on June 02, 2010

    I may be in the minority but I primarily still use Photoshop to edit / manipulate images.. Not to create content for the web. As such, I don’t need the ability to create / edit HTML. In fact, I would like the ability to easy turn off some of the features that are already included in Photoshop to it loads faster and takes up less memory when running.
    [By and large PS doesn’t load code (e.g. 3D, video support) that you’re not using. –J.]
    I once suggested that Adobe modularize their software into the core competency of each product and allow a user to own a single platform and purchase “plug ins” for what they want. For example, rather than having Illustrator, that would be the “vector art” module; Photshop would be “pixel art module”, Dreamweaver would be “CSs/HTML module”, Soundbooth would be “audio module”, Flash would be “animation” module, Premiere would be “video module”, then each module would focus on and do what it does best and if a user needed multiple modules they could purchase them and run them together in a single enviornment, perhaps with the ability to save configuration files to run the application for a particular need.
    [Maybe we’ll have more success along these lines when starting fresh in the tablet space. –J.]

  • Victor — 7:59 AM on June 02, 2010

    This would be a great collaborative approach. I see evidence of the same spirit in Adobe’s decision to create an uncompressed version of FLA files.
    I think it would be amazing to better integrate the Photoshop and Flash workflow (among others as comments have cited). I haven’t had a chance to run Catalyst through its paces but the biggest complaint I have is all the effects and type treatments produced in Photoshop do not carry over to Flash’s own filters and text treatments. Strong, Crisp, Sharp for example, do not translate easily in Flash.
    An HTML layer would be great to see for folks who need to produce assets for HTML/CSS. A Flash layer would see a similar benefit. Unless, there is something I’m completely missing out in Catalyst (I have promised myself to go through it to see if it addresses these issues).

  • Jesse Bennett-Chamberlain — 9:02 AM on June 02, 2010

    YES!

  • Alexei — 9:17 AM on June 02, 2010

    If Henry uses Dreamweaver, Finn does not have to do anything but just make PSD file(s) accessible to Henry. Dreamweaver is for coding, integrates nicely with Photoshop, supports auto-update, and pickling elements from PSD file on the fly. Oh, and it works nicely with embedded WebKit too. I would like Dreamweaver to be able to look into Fireworks PNG (for layers, pages, and slices) sure, but that’s a different story.

  • josh — 10:30 AM on June 02, 2010

    Definitely not crazy talk! You basically listed in one blog post everything I desire from Photoshop or comparable graphics editor. My web design work in PS is a combo of screen shots of custom html for some of the typography overlayed on comps.
    Awesome work articulating my PS wishlist! Thank You!

  • Ben Hansen — 10:43 AM on June 02, 2010

    that sounds awesome!

  • itsmin — 10:48 AM on June 02, 2010

    I would love nothing more! But I have to say it, “is this a good idea for Photoshop”? I may be the only one, but I feel more and more than ImageReady was too far ahead of it’s time.

  • Gary — 10:49 AM on June 02, 2010

    From an Educator’s standpoint, Photoshop is a behemoth as it is. I understand how important web integration is in Adobe applications, but with video and 3D and now the possibility of this, where does it end?

  • Jan Kabili — 12:50 PM on June 02, 2010

    Yes! ’nuff said.

  • Jim Monaco — 1:15 PM on June 02, 2010

    Yes, please, now? :D
    More to the point, I don’t know how the translation infrastructure works in Adobeware, but is it possible to write a “widgetlet?” I think I just made up a word, so what I mean is something that essentially compartmentalizes this sort of web-component-on-a-palette and provides 2-way software handles. These describe to a program the kinds of data they want to receive (so that each program can figure out an interface for it) and then take that date back in, to pass along changes.
    In short, a cross-software plug-in…in a widget. Reason I’m asking is because I personally love Photoshop, and use it for everything, but I respect and admire the folks who use things like Fireworks and Illustrator where appropriate (I fake Photoshop into doing stuff, but they’re doing it better). And while I’d cackle in maniacal glee to have such functionality all to myself, I’d also feel a little humble pit of guilt if I had better web tools than folks with more specifically-tailored Adobe Apps. Be good if this functionality could travel, and probably save another salvo of “why not Fw.”
    Also, although I simply can’t figure out the “Adobe bloat” argument (haven’t folks noticed Photoshop starts up 10x faster these days? Aren’t HDD’s large enough for this? Why’d you buy that fancy computer if you don’t want it to be used?)…I wonder if there’s some way to soup up the interaction of workspaces and configurator goodness to allow a user to have true “snap in” functionality (code doesn’t even load unless snapped in). That way, we could get all of these wonderful functionalities, and those who use the software differently wouldn’t have to wait for the ever-increasingly large featureset to get moving. :D
    Anyways…you’re having a brilliant brainwave over there, and I do hope this takes hold!
    Cheers,
    -Jim

  • Mike — 1:18 PM on June 02, 2010

    That is a very interesting idea Mr. Nack!
    Fireworks seems like a much better fit though. Personally, I wouldn’t mind seeing Fireworks become to Dreamweaver what FC is for Flash Builder. This kind of functionality would be a huge step in that direction.

  • Michael Corn — 2:07 PM on June 02, 2010

    This sounds awesome. Really awesome, it would speed up mockups in existing sites exponentially. Also, add it to Fireworks if you want, but I want it in Photoshop!

  • fr — 11:52 PM on June 02, 2010

    Haven’t read the zillion of comments, but on the smart side, i’d love an “IF” command in photoshop, wether it be layers, actions, etc
    The thing i missed much recently was :
    if there’s a smart object on the scene, and it has a bitmap mask and a vector mask, create a new layer, move the masks over there, pixellate my smart object, move back my masks, and go.
    I recently wanted to provide my client psds of 180 masked pictures, but not the editable files with the raw file enclosed in smart objects…

  • krollian — 3:34 AM on June 03, 2010

    That’s right.
    Look what happened to FreeHand. I want to work fast with simple vectorial forms.
    Illustrator seems to me like the monster of Frankenstein.
    There area lot of examples. Try paste into, try to just round corners in a square. In Freehand you can edit each, some or all squares with a simple click.

  • Mario — 8:34 AM on June 03, 2010

    I don´t believe in that kind of separation between a Designer and a front end programmer. My bet is that the best Front end UI Programmer has excellent design skills and css,html,js coding skills. And she/he does not use photoshop more than 20% of the time these days. I don´t think that a Franken PS is the right answer.
    [There’s pretty wide diversity in how people tackle work, and my proposed implementation doesn’t depend on the roles being handled by separate people. –J.]

  • Mario — 9:23 AM on June 03, 2010

    In other words: Es el indio, no la flecha!

  • Allen Cobb — 11:31 AM on June 03, 2010

    In general I love the idea. But I worry about bloating PS and making it harder to further refine the ease of use.
    [The bloat concern is kind of a red herring: the WebKit library already ships with CS5. Of course, there’s actual bloat on disk & then there’s conceptual/UI bloat. The latter is probably more expensive for more people. –J.]
    I also worry about diffusing the role of PS. And I worry about the nature of UI’s which have to support vast arrays of features, however well done the features themselves may be.
    But as the Creative Suite evolves, and the apps blend more and more mysteriously into one another, and I hear about the slightly weird parochial dialogs among the various product groups, I wonder if there isn’t a “middle level” technical vision missing from the top level of the company. I admire the way PS and other CS apps have modularized and objectified themselves over the last 6-7 years, but I think there’s a mitosis coming down the track.
    Somewhere between the API and the plugins and the user experience lies a strange world of core functionality spread among half a dozen apps. Is it possible to consolidate all that into a new kind of core, perhaps a kind of graphical OS, which all the apps draw upon? But which doesn’t necessarily reduce each app to just a workflow manager?
    I don’t want to be able to do absolutely anything & everything within one single app, but I also don’t want 8 product teams reinventing everything and presenting it to me inconsistently. But I also really need a great playground for intricate vector design work, and a different specialized environment for tweaking photos, and another for crafting pixel-perfect web images, and another for managing simple interactivity, and another for programming an entire desktop app (with stunning graphics). It’s nice to think that one outcome of the suite’s evolution will be that when a comparable tool is invoked in ANY app, it will work as it does in the other apps. But I think there’s a layer missing, above the tools and below the apps.
    Maybe it’s time to think of a much more serious recreation of “suite” as an architecturally REAL meta-app, with a single core and a multi-layer hierarchy of plugins, the top layer of which is app-scale — PS, AI, FW, DW, etc., and of course something completely new, and also app-level creations that are completely user defined.
    I’m sure this is an old notion, especially for yourself, but realistically, how interoperable can the suite apps become before the development teams are all sitting on the same chair?
    Every now and then, expanding complexity has to be reduced to new and more fundamental principles that inform and restructure the whole system. That time seems to have arrived. If the complexity just keeps expanding, the users won’t keep up (and eventually you’ll become Microsoft II).
    The Flex team seems to be coming at this same conceptual step change from another direction — emphasizing the separation of structure, content, presentation, and behavior. Perhaps the whole suite is beginning to grok those essential divisions of all our collective work product.
    Love your thinking, your approach, and your directions. Keep it up. My livelihood depends on it!
    [Thanks, Allen. –J.]

  • Michel — 1:33 PM on June 03, 2010

    This is a feature more appropriate for Fireworks, not for Photoshop!
    Just my two cents.
    And please, stop bloating Ps with features that are not for it! It is too heavy already! Thanks! :)

  • Afsan — 2:24 PM on June 03, 2010

    I’m looking forward to see Fireworks or Photoshop with this amazing integration, Thanks!

  • Ryan Ford — 2:57 PM on June 03, 2010

    How about you nix the unneeded add-ons to Photoshop and you instead focus on what’s important: Make each version of Photoshop more usable and more bug-free than its predecessors. To date, this hasn’t been happening.
    CS5 was a let-down over CS4. Similarly, CS4 was a let-down over CS3. Somehow each version of Photoshop has become more bloated, slower, and the UI keeps changing for the worse.
    [I’m sorry you’re unhappy, and I’d like to make things better, but for that to happen I need specifics. What’s slower? What UI isn’t working well? I can give you all kinds of examples of things that have improved, but that’s not as important as hearing your list. –J.]
    Photoshop isn’t like a website where you can iterate constantly on the interface. It’s an installed piece of software. It almost feels like you guys have been experimenting with what works/what doesn’t with the past few releases and it’s becoming frustrating for those of us who use Photoshop for a living.

  • Allen Cobb — 10:27 PM on June 03, 2010

    Just to be clear — I did mean conceptual bloat and associated possible UI bloat. But enough about bloat. Power is fine. The art is in increasing both power and diversity of tools without bewildering users. And ideally with some kind of UI paradigm that can handle much more expansion in ways that invite productive exploration. Workflow is one approach, but I’m hoping there is also a functionality thread that could simplify a lot of what’s already well established in PS (et al).
    The current panel collection attempts to organize functions at a fairly granular level. I’d like to see a less granular, more categorical panelset. In fact, once I get into panel construction (beyond Configr2), I’m hoping to find an alternate panel taxonomy which can literally provide a whole new view into the entire toolset. (Or if you guys do it first, that’s fine, too.) With luck, we might find users coming up with a whole spectrum of panelsets that encompass the whole app or high-level workflows.

  • Joel Eby — 10:49 AM on June 04, 2010

    Sorry to be late to the game in my responses this thread –
    I have always thought there’s too much in Photoshop that we don’t need (3D layers are nifty but how often do I use them?)
    The fact of the matter is: Photoshop is the main tool that serves many different industries. If Fireworks is never going to get the dev attention it needs to be that tool for my industry (interactive design) then Photoshop is it for me.
    And the functionality described above is exactly what I want: I want Photoshop to know about what it is I’m designing. I want it to know that a dotted line actually needs to work in this way, and that if I change my mind later about its size then it can say “no problem – let me smart resize that for you”, fully knowing that I’m going to use x version of JQuery whatever library to get it built.
    I still want Adobe to continue to refine the UI and make it more Mac-like (great strides so far in CS5 by the way, John; keep it going!) but functionality-wise, the ideas here (along with type style control) are what I want absolutely the most.
    Great ideas, John. Now you’re cookin’ with oil.

  • Ollie — 1:44 AM on June 05, 2010

    Lately when I need to mock-up a website for design approval I’ll do the text heavy region in HTML and CSS and grab a PNG generated with http://derailer.org/paparazzi/ before pasting it into Photoshop.
    Every time I do this, I wish I could edit the HTML/CSS and have PS update the rasterised layer automatically. So I am excited about this proposition.
    In my mind there are two options for the webkit box/layer within an image editor:
    1. As a browser viewport which allows me to change within PS the things a browser normally influences:
    – Default font-families and sizes
    – Page zoom
    – Viewport height and width
    – Default background colour [transparent]
    2. Alternatively as a HTML element you would expect _within_ a the BODY of a HTML document. In this case it may make sense to be able to edit the CSS for this element as if it had an ID. The contained [external] HTML/CSS could then be optional.
    Please keep the UI to manipulate the CSS minimal or non existant. There are many excellent CSS editors already – make sure there is an option for the CSS and HTML to be external files so we can use our own editor seamlessly.
    Either way, when we resize this box in Photoshop, the HTML needs to wrap in the same way I would expect it would in my browser – including and particularly overflow behaviour.

  • john l — 5:08 AM on June 10, 2010

    I’m all for putting it in PS rather than DW or anything else because for some reason PS is the most usable application of them all. It’s funny, the UI is now sort of standardized across the apps, though of course different, but somehow PS always seems to have it right for me. The rubber meets the road, and I can zoom.
    DW has always had a sort of held-together-with-duct-tape-and-baling-twine feel, even in CS5.
    I also have Illustrator, and it may simply be that I’ve never spent enough time with it to feel fully comfortable. No doubt there are designers who are more comfortable with Illustrator than Photoshop, but not me.
    I’ve been a web designer/developer for over a dozen years, and it’s funny how I’ve gone full circle. I started out with photoshop and a text editor in 96. Then I spent a lot of time with GoLive and DW, and now more and more I’m back to photoshop, text editors, and CSSEdit. DW is open, I use it, but I so often feel like I’m fighting with it. Photoshop is home. It’s smart, and I don’t mind if it gets smarter.

  • Emil — 6:04 AM on July 20, 2010

    Awesome idea! Would be a great tool when designing web sites!

  • claude — 3:36 AM on July 21, 2010

    well, i’m not sure if this is the right move.

    just went to a presentation of cs5 by one of your guys…

    so we now have flash features in indesign. wtf?!

    i would prefer a better workflow in between the creative suite apps. not every single program needs to be able to do anything.

    so why not implement a better psd support in dreamweaver instead?
    or html5 features in flash ide and canvas support in dreamweaver …

    • John Nack — 6:23 AM on July 21, 2010

      ID needs to enable rich tablet publishing regardless of format. As for PSD and DW, whether you translate out of PS or into DW, it’s still translation/code generation. –J.

  • Sébastien Brothier — 10:20 AM on July 22, 2010

    To give the ability to use paragraphs style or caracters styles using css attributes will be a great thing

  • Micha — 1:35 PM on July 27, 2010

    Um yeah, can I change the order of layer styles in Photoshop CS5? Like, add a colour overlay and then put a gradient on top of that? No? Nevermind.

    HTML5 layers in Photoshop, sure, why not. It should be all things to all people, that’s why it’s called Photoshop. I’d also like to edit my mp3s in the channels palette, please.

    P.S. Fireworks

  • derp — 1:43 PM on July 27, 2010

    heads up – this is a terrible idea

    [What a thoughtful, engaging analysis from an anonymous poster. –J.]

    and if you use dreamweaver your opinion is null & void

  • Jeff Faria — 3:14 PM on July 27, 2010

    I agree with Mordy – this sounds very much like an Illustrator thing, not a Photoshop thing. (I think it would be a great addition to Illustrator.)

    • John Nack — 6:27 PM on July 27, 2010

      I agree with the second part.

  • Richard Earney — 3:16 AM on July 28, 2010

    John these recent posts may be of interest, and seem pertinent to creating a killer web/app design tool
    http://bit.ly/9125hX
    http://bit.ly/9DCQpm

  • Dei-biz — 2:38 AM on July 29, 2010

    Being able to create a single HTML layer woud be enough to justify a new purchase of photoshop. I don’t know if it’s possible, but there would be wonderful to be able to create a new layer and that it’d display a webkit view to be able to trace over it.

  • Chuckles — 8:10 PM on July 29, 2010

    How about SiteGrinder? I know it’s a plugin – but it does what you are talking about in here…

    [No, it’s very different, actually (at least from what I’m suggesting): it’s generating code, and I don’t really want to have PS get into that business. –J.]

  • Joshua Pekera — 8:31 PM on July 29, 2010

    Genius!
    FYI check out http://www.nojobmonsterhere.com after August 15th. An entirely CSS3 rendered site. Only images to be displayed will be in the event of IE browser

  • Flow — 1:01 AM on July 30, 2010

    Okay.. this idea would definetivley change the real world of webdesigning. Do it, please.

  • Jeff C — 7:41 AM on August 02, 2010

    I’m absolutely a fan of this idea. (I trust you’d get it integrated into whichever application or app group it most clearly works with.)

    I’ve been looking for this kind of bigger-thinking functionality in an Adobe visual design tool for almost a decade now. I’m not asking Adobe to write code for me, and it sounds like you appreciate that “line in the sand” point-of-pride and workflow constraint. Web designers are not asking Adobe for “added features” so much as a re-evaluation of HOW we work and better ways for our tools to get us there faster. This would be a nice step toward that process change.

    I would love Fireworks to get the kind of love that Photoshop receives, unfortunately that hasn’t been the case—so I design in PS 99.9% of the time. However, this is the kind of bigger-thinking functionality that SHOULD be integrated across an entire Creative Suite, not a single application.

  • river — 9:34 AM on August 03, 2010

    i love this idea. but count me with those who have misgivings about it showing up in ps. feature-bloat feels a bit out of control as it is. i guess fw makes sense for it, but from everything i read and see, fw is somewhat neglected and behind the times. personally, i would love to see a new application, maybe start with the basic image editing engine of ps (no idea if such a thing is possible) but focus it tightly on web/screen-related features. make this kind of live html layer thing really central to the concept, but start with some different assumptions than photoshop, like multi-page documents and dynamic canvas sizes. anyway, i love the thinking, and this would make much of my work so much easier. i just kind of hate to see adobe miss more opportunities to do something really great and paradigm-shifting, rather than tack more stuff onto products that are kind of top heavy as is. sometimes a fresh start is just what’s needed.

    thanks for opening this up to input, btw.

  • James — 7:03 PM on August 08, 2010

    I’m also in the camp of “this is a great idea but an app other than Ps is probably a more logical place to do it”. I’d be happy if it turned up in any adobe application but I think Ps is a bit of a behemoth as it is and Fireworks would make more sense. In terms of the fundamental workings, the app being used to edit an object or attribute and not to edit code, I think that is key.

  • Carl Antone — 9:22 AM on June 16, 2011

    No. Do not add HTML anything to Photoshop.

    Photoshop is a pixel design tool. Illustrator is a vector design tool.

    Fireworks and Dreamweaver are HTML design tools. Put the HTML support in the HTML tools.

    [I’m not sure you got my point: the purpose of the HTML would be to create pixels, just as any number of other tools/technologies create pixels inside Photoshop. Putting live PDF data into Photoshop (as a Smart Object) doesn’t make it a different kind of tool; rather, it just makes it a more flexible image creator. The same would be true with embedded HTML. –J.]

Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)