Legal

Search

Subscribe via Email

Leave This Blank:Leave This Blank Too:Do Not Change This:

Your email:

July 02, 2010

“CSS is the new Photoshop” (?)

Shawn Blanc hit on a great, if perhaps deliberately overstated, phrase on Monday that pegs an important trend: Cascading Style Sheets can create a great deal of artwork now, without reliance on bitmap graphics. He points to impressive iOS icons from Louis Harboe﻿ among other examples.

I think Adobe should be freaking out a bit, but in a constructive way.

HTML’s new graphical richness means great opportunities to generate efficient, visually expressive content. “What is missing today,” says Michael Slade, “is the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.”

Of course, this is far easier said than done. As I noted the other day, “Almost no one would look inside, say, an EPS file and harrumph, ‘Well, that’s not how I’d write PostScript’–but they absolutely do that with HTML.” Over the last 15 years, innumerable smart people have tried and failed to make WYSIWYG HTML design tools whose output got respect. And yet it strikes me as unreasonable to say, “Spend a bunch of time perfecting your design in PS/AI, then throw it all away and start again!”

As for Photoshop, we could either teach the app to speak HTML natively (via live HTML layers), or we could translate Photoshop-native artwork into HTML (e.g. “copy this button/text as HTML/CSS”). It’s not yet clear to me, however, how such code would smoothly integrate into one’s projects.

At the moment I have more questions than answers. If you have ideas on the subject, please lay ’em on us.

[Note: Ideas need not include, “Put your heads in the sand and say that people simply have to switch from Photoshop/Illustrator to Fireworks.” FW is a great app, but that suggestion is a non-starter.]

Comments

The most obvious reason it matters is that less code means faster loading time (even with gzip compression). Another reason would be rendering speed, SEO and more.

I remember Dreamweaver when it came out. It really was something completely different compared to other wysiwyg editors. It was the first editor that did not change your html code. Compared to Frontpage or Netobjects, it was heaven. Other editors have tried to free the user from knowing the code and failed.

Nowadays web sites are not just HTML+CSS, but Javascript and dynamic code too, and the code has to be made into templates and reused.

Any attempt to make an Illustrator/InDesign for web sites will fail. The icons shown are cool but they’re just a novelty. Any browser that can render those styled DIVs can just use the CANVAS element tag to render a SVG…

[I agree on the novelty factor, but I opted not to get into a whole CSS vs. SVG vs. Canvas discussion. “CSS is the new Photoshop” is just catchy shorthand for “Rich Web graphics sans bitmaps.” The bigger question is how you need/want tools like Photoshop to play with these new runtimes. –J.]

Mario — 8:20 AM on July 02, 2010

Do not think about PS for a minute. Imagine a Safari/FF/Chrome extension that does just that, HTML and CSS for mere mortals. Those extensions could share a lot of common code and if it were OpenSource then it could really kick butt. And the business model for that would be to sell the kick ass easy to use and integrate back end for the content.

BJN — 8:51 AM on July 02, 2010

Why Photoshop? Seems to me that if you want to generate code-based shape graphics that Illustrator makes more sense.

[Generating such graphics from Illustrator absolutely makes sense; see this recent demo from the Google I/O conference. But that doesn’t give Photoshop license, in my opinion, to ignore the changing landscape for output. PS supports vector shapes, live gradients, glows, and drop shadows, etc. –J.]

So are coders going to take over the design world? They seem to think so.

This reminds me of the annoyance that the “save for web and devices” tool still lacks an essential ability to apply sharpening to resized images. Fix that before worrying about “the new Photoshop”.

[Apparently you haven’t noticed the option to use “Bicubic Sharper” when resizing in S4W. It’s been there for quite a while, and I always use it when making images smaller en route to the Web. –J.]

Mike — 9:04 AM on July 02, 2010

Instead of putting the burden on Photoshop to become a new code writing/editing tool, why not simply adopt a Flash Catalyst (with code editing and debugging) approach that would allow you to build using the shape tool in Photoshop and output the file to Dreamweaver in a format that Dreamweaver could then break up into css and html?

[That’s what I meant by translation from PSD to HTML (either on export from Photoshop or on import to Dreamweaver). But as I say, translation entails code generation, and getting people to accept generated code is tough. I do think it’s more likely that they’ll accept small chunks of code (e.g. going shape by shape) than large dumps that attempt to translate an entire PSD-as-page. I’m also guessing that when we get to more complex graphics like what’s enabled by Canvas & SVG support, few people will want to write (or heavily edit) the code by hand. –J.]

The shape tool is something I think a lot of people already use and the layer effects applied to them would translate well into css.
With this you might at most need one new panel to provide some skinning related info but after that things could remain pretty much business as usual.
To me Dreamweaver needs a major overhaul and not getting it is creating this sense that Photoshop needs to change or that Fireworks needs to stick around.

I don’t think that it is yet time to even think about it. This strikes me as one more of those cases of “We did it this way just to prove that you don’t need Flash”. Not that I don’t believe that this may be relevant some day and that there will be visual tools for creating such stuff, but without the underlying spec not being “clean” and all this stuff relying heavily on browser specific extensions, it certainly is just as bad as CSS hacks for Internet Explorer. Doesn’t really help when it only renders correct on Mac, but even Chrome on PC (which is based on WebKit) doesn’t, regardless of the code being triple redundant, when on the other hand an image will display just fine. Unless these inconsistencies are overcome, I don’t see it working for more general web use. And I also agree with the otehrs – Illustrator and Fireworks with their object/ item centric approach are much more suitable than PS will probably ever be.

Mylenium

Mario — 10:16 AM on July 02, 2010

Browser gaps have been shortening. Proof 1: http://www.nafin.com (xhtml css2.1) looks and behaves almost the same on IE6 and up, FF, Safari, Chrome. Proof 2: http://www.palomera.com.mx (css 3) looks exactly the same on the latest browsers (IE 8 and up). I think you and many people underestimate the ability of hand coders…

Joel — 9:57 AM on July 02, 2010

I fully understand that developers want to own their code – and they absolutely should. Your Postscript analogy is a great illustration.

As a designer, though, I really want to see actual tools that help me design for real-world use cases. Photoshop is fantastic at making anything – it’s sort of like an “open design” box. No boundaries, I can make things look to the pixel how I want them to.

That’s great in many cases where we have to build things from scratch. But more and more, I find that I’m designing for things that are not built from scratch. Developers have components, widgets, libraries and platforms that already contain real, functional UI views. Why am I always spending my time re-drawing stuff that already exists?

It would be great to have a tool that lets me visually configure a real world widget (like, an accordion on a website, or a skinned video player) by letting me change

Whether that happens in Photoshop or not, I’m curious about. But the important part for me is to have an interface that lets me compose my layouts with a mix of my original art (like background bitmaps) with custom views of existing things like site widgets, Flash video players, or standard iPhone UI buttons/tables etc.

Maybe what gets hairy is when applications start attempting to make the real code. But the generation of the code is not important to me. I’ll always use a developer to make the thing – I just need to visualize it with more accuracy than can be accomplished with existing tools right now.

Do people NOT accept Dreamweaver generated code? Of course, one could optimize it, but I’m pretty happy with the code it creates.

Even though I find Flash Catalyst cumbersome to work with (so many steps required to build something), This sort of approach would be good I think.

Or maybe more like DW: draw a box on the canvas, watch in the code window as the CSS is written to create the box, then go into the code to modify and see the results on the canvas.

A.J. Kandy — 10:09 AM on July 02, 2010

In relation to the question of ‘why isn’t there an Adobe tool that lets you design visually and then output clean HTML/CSS,’ we’re halfway there with InDesign. At their most basic, websites are boxes of text, and that’s exactly what INDD deals with. It’s much easier to create column layouts (great for 960 grids, etc), in theory one can map character and paragraph styles to CSS. Text wrap and internal space can map to padding and margin, etc. The current version now supports pixel measurements and has a lot of interactivity-prototyping built in. Unlike Photoshop the UI is much more geared to ‘direct select, grabbing and moving’ vs. control-clicking on layers…

That said, there’s a lot in AI and PS that we use as well. I suppose the best tool would be something created from scratch, that incorporates elements of all of the above, plus gave you a neat, minimalist code/css editor a la Coda / CSSedit. I would love a tool that let me draw divs, or drag and drop them to stack or nest objects, drag pre-made form elements which can then be styled, etc.

As for the scenario you raise – “Spend a bunch of time perfecting your design in PS/AI, then throw it all away and start again!” – I think that’d happen far less with a graphics app outputting specific elements using CSS than it does with overall layouts. Layouts have loads of issues that it can at times be easier to express/clarify in code (scalable interfaces, reflowing issues,things that aren’t purely WYSIWYG), but with graphics we usually do tend to aspire to WYSIWYG.

I think one of the important things needed is a quick change between a design view and a code view that is available in Dreamweaver and Flash Catalyst. So the user can create or edit content not just in the design view, but tweak things in the code view (currently a limitation of Flash Catalyst). So generated code could be tweaked but still read on the design view.

Also the other major hurdle is browser support. The iOS icons example is cool, but apparently only works on Safari and Chrome on Mac. I image wide browser support is not going to be easy to do, for Adobe or anyone.

John, you know more than anyone that it’s less about the cheezy effects and more about the structure. Drop shadows in PS are limited to layers, as are vector shapes.

[Sorry, Mordy, but almost no one cares. I’m tracking about a dozen layer effects-related enhancement requests, and being able to apply effects at the group level isn’t a big wish. I know AI can do it, and I know that you and I like that capability, but it’s very hard for most people to wrap their heads around, even 10 years after AI9. –J.]

No amount of layer groups, layer comps, or fancy auto select features will ever match what Illustrator offers to designers in that regard. The sad truth is that Illustrator offers FAR more to web designers than Photoshop ever will, but the learning curve to GET there is where PS has the advantage.

Eric — 2:19 PM on July 05, 2010

Not that it’ll make much of a difference but I second the request to be able to apply effects at the group level. Thanks to smart objects there is kind of a workaround but it would be nice to nest objects for these effects more simply in the layers panel… So that makes three votes now at least, right? :)

Brian Spence — 11:31 AM on July 02, 2010

I’m a beginner graphic designer (graduating from SCAD next quarter), and web design scares me. I don’t like the idea of creating something really great in PS/AI/ID and having all the different browsers ruining what it looks like. None of the CSS examples you show work in the latest version of Firefox. Maybe it was ok for this behavior when the web was new, but in 2010 HTML and CSS should be standard across all browsers and there shouldn’t be differences between them. Seriously, why is CSS 3 and HTML 5 implemented differently in different browsers?

[It’s that old bitch of a choice: “Innovation or consistency: pick one.” –J.]

My last quarter at SCAD includes a web design course, so whether I like it or not, I’m going to be jumping into this nightmare. Why are people saying Flash is doomed when CSS 3 and HTML 5 are so badly implemented??

[A lot of people want a sense of belonging, a sense of being part of something bigger than themselves; being Apple fans gives them that. Other people have legitimate concerns about proprietary control over Web technologies, or about Flash Player performance under certain circumstances (though the latter get wildly overstated in service of the Apple acolyte thing). –J.]

Mario — 1:46 PM on July 02, 2010

I don’t think that CSS3 and HTML5 are badly implemented. I have been a front end developer/designer for more than 4 years now and yes learning to do standards based and quality sites was a pain/nightmare but thank God there is great people in this world who wrote some amazing books such as cssdesignpatterns.com/ or websites such as http://www.quirksmode.org/ and of course libraries such as JQuery. These people innovate, solve problems, do open development and make a better world. Do yourself a favor and drop the fear, learn and contribute. There is a great community out there! Sadly it has been some companies that are have been lacking in this regard and Adobe is one of them.

Thanks. I actually think Adobe does pretty well community-wise. Their help files allow for comments, they have great blogs like this one, and they try to put together video instructions and the like. They do all that while trying to make the best design tools around, so any community features are a bonus.

I just don’t want to read dry software books to be a designer. It’s bad enough learning Photoshop, Illustrator, etc. HTML and CSS are the kind of distractions that will keep me from becoming a better designer. I just want to spend time with typography, grids, unity, color harmonies, illustration, etc. My main fear is spreading myself too thin and not mastering any one side of the design field.

thinsoldier — 11:36 AM on July 02, 2010

CSS needs Render-Clouds and Noise.

No seriously, css needs procedural noise/texture generation and photoshop needs to implement ALL the procedural 2d/3d textures like checkerboard, grid, marble etc and then also make them available as 2d layer styles.

How about an option to convert a layer set into a CSS smart object? I generally always do webpage design starting from PS but it would be nice to isolate various objects within the design that could be “Saved for web” as CSS/HTML. Granted there will be some who will insist that the code isn’t clean enough for them but there are also plenty of people who will be perfectly happy with it. The key as I see it is to maintain as close as possible adhearance to the CSS3/HTML5 spec (once defined) and then give developers the option to refine/optimize from there. This would be akin to the Flash Catalyst approach but could live within PS like save for web. This functionality could just as easily (hahaha says the designer) be applied to Illustrator and Fireworks. Better said, maybe not just as easily but it would be most appreciated by users to have this same functionality with consistent output across all of these apps. Just my 2 cents…

Mike — 12:17 PM on July 02, 2010

I do think it’s more likely that they’ll accept small chunks of code (e.g. going shape by shape) than large dumps that attempt to translate an entire PSD-as-page.

J,

Yes Exactly! Even if Photoshop only output fonts, layer effects and shapes as css that would go a long, long way.

Shapes with the same layer effects, corners etc. would need to come out as the same css class or id to avoid redundant code.

–Mike

thinsoldier — 12:21 PM on July 02, 2010

[“copy this button/text as HTML/CSS” would copy a block of text containing:]
, a style tag with the “scoped” attribute, and the html structure of the element in photoshop.

In theory, pasting this block of text into an empty web page would render correctly since I think html5 error handling properly fills in the missing HEAD and BODY tags.

Pasting it into an existing html body minus the doctype would also work thanks to the new “scoped” attribute on on the style tag.

If the author is using a good IDE or text editor it should then give them the option to refactor all embedded and inline css rules/attributes in the BODY over to an external stylesheet file.

We should also be able to easily copy html/css from our existing work into web element libraries in Photosop/Illustrator/Flash/Indesign that can then be easily used via drag/drop.

We’ll also be needing layer types(group types?) that work based on an element flow (inline, block, inline-block) rather than Photoshop/Illustrator’s usual absolute positioning.

This probably sounds like overkill to the people saying keep the web away from photoshop. But to them I say that this should be a sort-of-stand-a-lone module that places the same features into all of your adobe apps.

Like a perspective grid in illustrator where anyting in the grid area is locked to the perspective you could have a webkit group in photoshop where anything placed in that group is forced to flow like web content. The same idea and group could also be applied to fireworks, indesign, premier, and illustrator all being controlled from one common webkit plugin.

Heck, we could even use the features of css to finally implement character and paragraph styles in Photoshop!

We could replace the character and paragraph style implementation in all the apps with a css approach and finally have consistency across the whole suite.

+1 Roger Howard

thinsoldier — 12:22 PM on July 02, 2010

[“It’s not yet clear to me, however, how such code would smoothly integrate into one’s projects.”]

Well, if I could just right-click on a gradient swatch and copy the valid css alternative of it that would be a great start.

But for that to happen you need to do the following things:

First get the W3C to upgrade the gradient feature so that css gradients are CAPABLE OF EVERYTHING an illustrator, coreldraw, or freehand gradient is capable of.

[I’m not holding my breath. Rather, I’d ask the design apps to offer presets that map to what the browsers can do. –J.]

I’ve seen examples of firefox’s gradient implementation being incapable of perfectly reproducing a complex gradient created in webkit (I am a firefox fanboy and I think the Ff gradient syntax is nicer so don’t accuse me of being anti-firefox.)

Then either Adobe has to implement HSL in all its software or you have get the W3C to add both HSB and HSL to the spec.

Please get your adobe people on the working group to bring up the HSL/HSB issue.

thinsoldier — 12:22 PM on July 02, 2010

“No amount of layer groups, layer comps, or fancy auto select features will ever match what Illustrator offers to designers in that regard.”

Nack, have you ever worked with a medium-high polycount 3d object in modeling software that had a preselection feature?

[No. Can you provide a link to examples? –J.]

Both Photoshop AND Illustrator could benefit from a super-fast preselection hint. With good preselection my photoshop workflow would probably become more Illustrator-like within the hour.

Skyler — 3:26 PM on July 02, 2010

Luxology’s Modo is a great example of this.
It’s tools and selections are so good, that I wish I could do all my Illustrator work in it.

Tim — 12:23 PM on July 02, 2010

Great topic! Having used the somewhat clunky Sitegrinder plug-in to create websites from Photoshop, I’m in the crowd that hopes for an InDesign solution rather than a Photoshop one. Making selections and working with shapes is much more comfortable. As A.J. Kandy mentioned in the earlier comment, InDesign already has various style sheets that could potentially be mapped to CSS, moreover, there is already some integration for interactivity geared toward PDFs that maybe could be refined for HTML. Anyway, my 2¢.

Mike — 12:40 PM on July 02, 2010

Ok the more I think about it the more I’m coming around to the idea people are talking about– having specific layers being designated for css output. What if naming the layer defines it in the css? If I call a layer ”” it becomes a paragraph. If I link a shape layer to the text layer I just called and call the shape “box1” and mark both layers for output it will translate the text layer as a css class called: div.box1 p {attributes here}. So text becomes a class or element named after the layer and shapes linked to text will become that text’s parent.

opps, I tried to type real code into the post a paragraph text layer would be called without the spaces.

Mike — 12:42 PM on July 02, 2010

“p” with the tag brackets

mhartt — 12:41 PM on July 02, 2010

Rather than letting the user choose the Web option after the graphic is created — when elements difficult or inefficient to encode may have already been used in the design — why not allow users to select from the beginning that they wish to create a Web-encoded graphic, and then present only the subset of tools to be used that can meet that requirement. I’d far rather have the application protect me from myself by only allowing the tools and techniques that could be reliably encoded for the Web, even if it meant I had to modify elements of my concept.

So figure out what your apps CAN reliably do in code, then let me choose to work within that toolset to build my graphic.

[Yes–I was suggesting something similar in response to another comment. –J.]

The other route would be to build a standalone application that ONLY has the appropriate tools. But it seems like it should be possible to incorporate into your main apps by some sort of workspace or format toggle. Your apps already do this to some extent, depending on color mode, bit-depth, etc.

Photoshop would certainly be a candidate for this treatment, but so would Illustrator, particularly with its vector lineage. When I saw the iOS icons is CSS, my first thought wasn’t that they reminded me of how I would build them in Photoshop, but how I have built many similar graphics in Illustrator.

Arnon Moscona — 1:44 PM on July 02, 2010

The state of HTML editing is indeed dismal at best. First I’d like to comment that I don’t think there is hope in refactoring old tools (e.g. several of the tools that Adobe has today, for instance) and make them really work.

Microsoft, surprisingly enough, decided to ditch its old clunky HTML editor and start from scratch – resulting in “Expression Web”, which is certainly a step in the right direction, and probably one of the best HTML editing tools out there. But alas – it still falls far short of any reasonable target.

I think that your point is right on – either it’s treated as code — in which case it is almost hopeless, or it’s treated as content — in which case compromises must be made. Expression Web falls on the code side of the tool direction and there’s only so far that you can take this approach. yes, you can write anything you want, and make it “perfect” but it would be very hard to use, hard to maintain this code, and almost impossible to treat it as content.

There is quite a bit of success for domain specific tools that treat the web site strictly as content and of a very specific type. The existing crop is quite rigid, but some of them can generate decent looking and somewhat customizable results for a very specific purpose. Lightroom web galeries come to mind as an example, or iWeb. A developer (a Lua developer at that) can play with code as much as they want and present the user with a form based “wizard” that will generate a whole site, or site fragment automatically. The nice things about this are:
* Very easy to use
* Plugin oriented so third parties can contribute useful code
* Allow you to focus on the content
However, these things are very inflexible and the plugin development requires a lot of investment and a steap learning curve (it’s not sufficient to know your HTML/CSS/JavaScript trio)

What we really need, and I think its attainable, is something in between. We need a tool that would make it easy to produce a good looking and well behaving site. Good looking, I suppose is up to your design skills. Well behaving – well that’s difficult what with all the browser versions, desktop and mobile platforms, spotty standards conformance, and a constantly shifting standard.

I think an ideal HTML tool should acknowledge that content and layout are the center of real interest and make that the core of the user experience. At the same time, at should acknowledge that the product of the tool is intended for the real world.
* People want to customize things and have some things “their way”
* The world is dynamic and the site is always under maintenance and change. It’s a living project, not a design/output cycle like a print product.
* People need to target very different platforms: static sites (or site fragments), semi-static data driven sites (from a spreadsheet or a simple DB), Java, PHP, WordPress, Ruby on Rails, what have you
* There are areas where people don’t have the knowledge and expertise to tacle the steep problems of achieving the simplest things – especially non HTML professionals like humble programmers or humble designers. The tool should make it easy to do things like make a cross platform, well behaved three column layout with a header and footer. Today you need an expert for this simple requirement and the expert will still get it wrong under some conditions. The tool should address this.
So it would be nice a tool that has a hierarchy resempling site->sections or areas->layouts->populated layouts (with graphic assets)->content (both static and dynamic). You build a whole site made out of these hierarchical components in a verty *visual* way and you choose templates from a pluggable library, where you can add third party layouts or edit your own given that you know sufficient HTML etc.
You populate these layouts with static content and placeholders for dynamic content. You can stick raw HTML bits everywhere. For instance if it makes a compromise and sticks with one “best practice” as a base scaffolding, such as using divs with IDs to identify layout containers, then the tool can generate (via layout templates) visually editable components while still allowing custom HTML in any div, and maybe even presenting visually divs that are in that custom HTML so you can further populate those visually (this sounds difficult to do, but maybe…).
So the work is done more like in a page layout tool than like a traditional HTML code oriented tool. But it really is something in between.
The whole project should live in a way that would allow you to go back and redign things and re-output without creating a huge headache. This implies pluggable output modules (those must be much more complicated than layout modules). With appropriate output modules one could imagine the tool coming out of the box with support for major platforms such as were listed earlier. Yes, maybe those generated outputs rely on some cusom library for that platform (e.g. some cutom Java code that supports the tool output in a Java web container), but if those are open (e.g. open source) then one could “tweak” the output module to their needs if they feel the really want to, but at the same time one could get a major platform supported with bvery little effort by just using bundled plugins or third party plugins as long as they have reasonable quality.
We desperately need an innovative tool in this space and we can’t live as we have to this day with only the two extremes we really have today (fancy code editors that don’t work and don’t help you with overcoming the real annoyances or rigid template based tools that cannot be customized easily and have very little or no flexibility). The two extreme approaches failed us for years now. Niether the designers are happy (they must have a specialized programmer on hand to do the simplest things) not are the programmers happy (they need a web designer, plus a visual designer to do the simplest things).
If you manage to develop such a “middle of the road” tool, you would do more for the web than ColdFusion did – and that achievement is really old now. Especially now with an explosion of desktop browsers, mobile platforms, and tablets there is a huge market for something that will make people productive, would allow targeting multiple browser platforms and multiple code/data platforms, while allowing interactive visual design of a visual product. It’s a big project, but the opportunity is there too.

Sean Baker — 2:07 AM on July 03, 2010

I’m not sure why it’s so important for PS to closely follow changes in web development standards while it ignores so many of the changes in graphics (and video) user interface and workflow designs for years on end? Work on a nodal UI, FFTs, GPGPU, and a modern plugin architecture before spending dev time on exporting CSS3 from PS.

I agree there is enormous potential in having HTML layers with CSS support in Photoshop, especially if PS could read/write to an external stylesheet, and use both positioning and style information… actually, that could be useful for all elements in a PSD.

Coming from a Flash Development background in a large agency environment, the Flash team frequently received PSDs from the designers with the expectation to make pixel perfect recreations of those approved PSDs in Flash and HTML.

Designers at every interactive agency that I’ve worked for design in Photoshop first and foremost because of its speed, stability, and flexibility when designing. PS provides few creative limitations which is critical for them because they design with anticipation of changes that will be coming from Art Directors, Creative Directors, and the Client.

Photoshop gives them the ability to think outside the box, they do not have the limitations imposed upon them by what HTML, CSS, or even ActionScript can do. While they are free to design, it comes with a price: designing in Photoshop means that when it comes time for production of the final output, web developers are having to recreate every aspect of what was created in that PSD in another medium, especially when the final output will be a Flash or HTML website. (Actually, these days interactive agencies are more frequently expected to provide BOTH Flash and HTML presentation layers, using swfobject, javascript, and div tags to display the appropriate version based on the browser capabilities of the audience; and the HTML version is not just for SEO purposes anymore either, it’s expected to be a well-designed presentation layer with the same page content as flash, built with the best display and usability for mobile devices and tablets.)

Without HTML layers in Photoshop, designers currently spend a great deal of time recreating HTML/CSS elements as part of the design process, trying to emulate the look & feel and limitations of HTML.

Photoshop is in a special position, being THE tool for image editing of graphically rich websites, providing HTML layers with full CSS support would greatly assist everyone designing for the web. But it shouldn’t stop at Photoshop… HTML layers should be in Illustrator (for vector / non-photo based websites) and InDesign (for publications, blogs, etc.).

HTML layers with CSS support would solve so many problems and would let designers do what they do best; create composition and style, and let developers do what they do best; turning design into a functional reality through code and production of the final output using the designer’s PSD as a road map.

I can’t even begin to tell you how much it helped to have Bitmap Filters added in Flash (8.0+) such as Drop Shadow and Outer Gloy, that could be used to match Layer Effects that designers were using in Photoshop; the same goes for Blend Modes such as Multiply, Overlay, and Screen.

It will be immensely helpful for Adobe to continue down this path to provide a more seamless workflow across all Creative Suite applications to get consistency of effects, styles, layout, and typography created in the design stage into the final output required in the development stage.

Paul H Howells — 5:14 AM on July 05, 2010

I use Photoshop for mocking up web pages and UI far more than I do for anything else. Having a Browser Layer linked to an html file would rock my world!

A Browser Layer would be a bit like a Shape Layer, except that it always (and only) contains a resizeable rectangle shape. Double click on it and you can edit a URL that points to an html file. As Adobe already use WebKit I’m guessing it would be a good choice for rendering the Browser Layer. The layer would differ from a browser as the Body element would be transparent by default, and it would not (by default) respond to mouse events.

For example, mocking up text within web page designs is currently awkward, slow and (body copy) looks unrealistic. Having a Browser Layer would allow me to mockup columns of realistic body text and have headers that use web fonts – this alone would justify having the Browser Layer for me. I am certain however that in addition a plethora of radical new workflow possibilities (using html5 / css3) would be discovered.

The alternative you mentioned of Photoshop writing html/css causes me great consternation, I feel this would add unwanted complication for a feature that would rarely get used. Any one who knew enough to be able to use the generated code would have no need for it to be generated in the first place. I use Dreamweaver as a text editor, but I have only ever used its generated code about 3 times in the last half dozen years (to quickly make a table).

I get your point about throwing away work, and with the Browser Layer idea this would be the case, except the work would reside in external HTML, CSS, SVG files, and not need to be exported from somewhere inside Photoshop.

I want Photoshop to make my life simpler, not add complication.

Thanks for helping Adobe freak out a bit, I hope I’ve added some construction.

you’re dead on with getting people to accept generated code, at best a portion of the hobbyist market will be happy with the compromised code. rather i think there are a series of “small” enhancements photoshop could adopt to make the life of a web developer, especially one embraching html5/css3

1) simplest in my mind would be to introduce a styles panel, allow me to define classes, ids and base entities with css3 properties – though as a styles/variables panel would be hugely useful to a lot photoshop designers not just web designers it need not be defined in heavily web/technical terms.

2) the visual styles defined in the styles panel could be exported to css3 with browser specific prefixes (either via a right-click to select a specific class/id, or by exporting the whole thing). trying to handle positioning would be futile imo, but there’s little variation for handling the visual appearance in css, a gradient is a gradient is a gradient. though allowing us to edit the specific template to handle a preferred order of definition would be nice. basically i want a simple way to define, update and then integrate visual styles in to my documents.

3) replace/augment/update layer styles to use all of css3’s abilities. maybe it’s as simple as having a css3 checkbox in the layer styles dialog that restricts or enables css3 specific properties. e.g. in the drop-shadow dialog box the checkbox would restrict the shadow options to those supported by css3. the outline tool would enable css3’s ability to define the top, left, right and bottom with independent styles/colors. conversely a specific css3 style panel might make more sense and be less confusing. (on a related note: still having to double clicking to bring up a modal window to edit filters seems a little anarchistic in 2010)

5) better text rendering, the web layer sounds like a potentially promising avenue, at the very least though raid the flash dev team for their saffron rendering engine.

RUGRLN — 9:33 AM on July 05, 2010

The results of this page, http://graphicpeel.com/cssiosicons , on Firefox 3.6.6 Windows is why Adobe shouldn’t be bothered…it’s not even working!! Some browsers it works…others not…atleast with image you know exactly what you see is exactly what your customers see…until this problem isn’t solved entirely it won’t really take off…I think…

[Even when (presumably not “if”) the browsers render all this stuff consistently, I’m not sure there’s a case for producing complex artwork this way. It’s hard to imagine rendering time being lower than for simple graphics formats, and the uncertainty introduced hardly seems worthwhile. I do think, however, that CSS styling will be increasingly useful for creating stylized shapes, text, etc. –J.]

Take a look at Stylizer . It attempts to meld a visual approach with coding and for the most part works extremely well. It offers incredibly immediate, responsive design tools. For example, adjusting values yields immediate changes to the viewport – no refresh required. This is much like Firebug, only designed as a construction tool and not just an inspection tool. It also hides some of the cruft we have to deal with, such as multiple declarations for rounded corners in order to encompass all browsers. The newest version even allows us to switch rendering engines between Chrome, Firefox and multiple IE’s.

However, it is not without its faults. It is dependent on the developers hard-coding support for new CSS3 goodies in there. It doesn’t support media queries for example, which is quite frustrating.

But despite these foibles it is very impressive overall. Most crucially, it respects the web designer’s need for visual design and code craft, all wrapped up in a slick, innovative UI. I recommend you check it out.

[Thanks for the feedback & suggestion, Charles. –J.]

David — 4:21 AM on July 10, 2010

Hello? Don’t you think the main Photoshop user base consists of photographers? What use would an HTML based Photoshop be to them?

John Nack — 6:13 AM on July 10, 2010

No, there’s no one main, majority core of users. I hate it when people assume that their experiences and needs represent or trump all others. –J.

Arik Jones — 6:01 AM on July 10, 2010

Your sentiment about Adobe needing to “worry” is not even close. Adobe has absolutely nothing to worry about. Web design is one small sector of a much larger industry of creatives. Adobe has their tentacles in almost every aspect of digital imaging be it for the screen or print.

CSS3 and HTML5 does bring a lot to the table that would calm our need for PS. But to think it’s a photoshop killer is naïve and rather silly.

John Nack — 6:11 AM on July 10, 2010

It was meant to generate thought and conversation. I’m not signing Photoshop up for any marginalization. –J.

Sheldon Schwartz — 6:50 AM on July 10, 2010

It would be amazing if Adobe built some tools (or others did) that would allow easy web designing on the iPad,etc. This idea may be something I personally explore when designing.

Sheldon Schwartz — 6:52 AM on July 10, 2010

Of course I mean using more css3 as part of the core. A form developer tool could be sweet!

be96 — 6:03 AM on July 12, 2010

Make it easier to look into at the HTML markup with whatever it is that you end up doing in that regard.

kasakka — 6:51 AM on July 12, 2010

Having Photoshop churn out HTML/CSS scares me. I mean the software is already riddled with tons of UI flaws and whatnot. Feature bloat is pulling this once great software down.

I’ve stopped using Photoshop/Illustrator for anything more than building graphics needed for a web page because I can make the actual framework of a webpage faster with HTML/CSS by hand and have it reusable in the final product.

Rather than have Photoshop or Illustrator do this, I would prefer seeing a web app that lets me WYSIWYG-edit common elements to form mockups, supporting all the latest and greatest in CSS features.

Software for specific purposes, not all-in-ones thank you very much. If I want 3D hats I’ll just fire up 3dsmax…

The Fireworks UI doesn’t do you in, it’s the vector-based model it follows that you aren’t plugged into. You liked ImageReady because you enjoy Photoshop and bitmap-based image manipulation. It’s not bad, just different, and pointing fingers at the amazing groundwork laid by MM is just BS posturing. Own up to your bias.

I’ll also mention that it isn’t the job of a tool to convert you table coded pages over; there’s no clean 1:1 transition to be had. It’s not robotic and requires a human mind and hand.

I personally think that Fireworks could serve as a strong basis for this tool, but I don’t think shoe-horning these features into an existing tool is a good idea. What’s great about FW is the object model and style inheritance. These are core functions that translate beautifully to web content and CSS.

I’d personally rather Adobe take this concept and build out a new product that Fireworks and Photoshop users can migrate too. FW botches PS’ layer effects and filters but has amazing pixel-rendering, object-oriented effects, and fantastic exporting options. File size coming out of FW kills a similar image from PS “Save for Web” exports.

Of course, I’m suggesting dedicating developer hours to a product that only targets a single market. That ROI may not look promising, although if it were branded as a UI development tool for all new/rich media and a tool dedicated to digital user interaction, could capitalize on much more than just web dev. HTML5 strikes me that it’s not limited strictly to web browsers so maybe there’s a bigger pie out there than simply web.

giuliano — 1:08 AM on July 27, 2010

I know what you you should do and how if you want to create a web design app.

If you are interested write to me.

Eric Z. — 10:23 PM on August 01, 2010

The HTML layer (convert to HTML/CSS) is actively being worked on within Adobe. That is all.