What exactly is the best way to construct a Web page comp in Photoshop, then convert it to a clean, CSS-based HTML layout? To many designers the process remains a black art.
At Photoshop World I got to chat with the guys from WebAssist, a developer with a distinguished track record of extending Dreamweaver, Flash, and Fireworks, about their new CSS Designer Starter Kit for Photoshop. In describing the $19.99 training product, the company writes:
- Designed to show Photoshop users how to create graphic comps with CSS in mind
- Basics of CSS covered
- Specific instructions for converting a graphic comp into a Dreamweaver CSS layout
- Interactive, self-paced training
- 2 professionally designed comps included in PSD format: one to follow along with step-by-step and another for practice.
If that sounds appealing, check out the feature tour on the product page.
Elsewhere, PSDTUTS lists a set of 30 Brilliantly Flexible Templates & WordPress Themes. Each one goes for $15 or so. Meanwhile, PSDtoWordPress will have a real person do just what it says, for a fee. [Via] Adobe Blogs use Movable Type, so I can’t evaluate either offering, but I certainly see the appeal: I found skinning this blog fairly painful.
For “effortless conversion of your Photoshop designs into standards-compliant, CSS-rich webpages,” check out MediaLab’s SiteGrinder 2. The plug-in runs entirely within Photoshop and promises to require no hand coding. Check out the product’s feature tour for more info.
If you know of other good tips or resources in this department, please feel free to share them.
Update: How I could have failed to mention Fireworks, I don’t know. FW offers excellent PSD import, and in CS4 its CSS-generating chops are better than ever. See John Wylie’s notes on Exporting CSS and images in Fireworks CS4 for more details. [Via Kevin Stohlmeyer]
Being a Designer and a Photographer/PS jockey I have approached this pretty common task with the whole workflow in mind. While I am making my design in Photoshop (and sometime Illustrator) I am thinking about how I will be rebuilding it in Dreamweaver. Before I even start with the web production I have a good idea where my main DIVs are and how they are constructed. Once I have it fairly solid, I then slice it up and export the pieces.
Then I usually make my CSS file for specifying the “big picture” page elements. If one is doing this “right” then the bulk of most HTML pages can be written quickly with enclosing DIVs and IDs, link the CSS file and the big stuff is done.
I have tried the capabilities of Fireworks CS4 and looked at stuff like SiteGrinder and each time I have come back to the flexibility of my approach. I admit, however, that it requires a firm grasp of CSS/HTML and how it all works – that just takes time. For me, I find having that knowledge and skill is worth far more that being able to use the other tools because however you go, that knowledge is foundational.
Hey John,
My workflow from PS to CSS goes directly through Fireworks. Granted its not an inclusionary plug-in, but it can give you everything you need in one source.
John Wylie wrote a great article in the Adobe Dev Conn. site found here:
http://www.adobe.com/devnet/fireworks/articles/export_css_images.html
Even with all the tools that Adobe and others give you I don’t think there is a magic bullet to going from Photoshop comp to completed CSS compliant site in a way that produces clean usable code. There’s just no substitute for know-how. I think all web designers need to know HTML + CSS through and through.
I successfully moved from table to css layouts around 2005 and since then discovered I don’t need Dreamweaver anymore. It seems (to me) the way Dw (and Fw) “helps” you make css layouts kinda slows you down. Things are often just a teeny bit off.
If you build a css-helper into Photoshop it would probably be a learning tool for those who haven’t done it much. As was mentioned by Greg above, it requires a firm grasp of CSS/HTML and how it all works – that just takes time. And by then you know it enough to use a text editor for grids, colors and fonts, then Ps or Ai for images.
Being able to *paste* a hex number into Save for Web’s color matte would be a time saver though.
I’m not a believer that there exists a solid “PS to CSS” workflow. I do a PS mockup, and then start the long process of creating nice, clean, optimized code that gives me a similar structure to the PS rendering. I then create assets from the PS as needed based on the original render, but taking into account the new code. I can do the same thing that “slices” and rollover states do with guides and layer comps, then using export for web right from PS. Then again, my requirements are simple.
If it weren’t for stupid browser incompatibility issues and a desire to make semantically-correct code (often contradictory requirements), I might be more open to a more automated solution. But for the time-being, I just can’t get there.
Photoshop for web design? Illustrator for web design? How odd choices! Me, I prefer using the best pure-design tool amongst all the CS applications: InDesign.
I was writing a far longer comment when I read Adam’s…now I can just say “ditto that”. I can’t imagine how I’d have made my site with any existing automated tool.
I’m still laughing about the “pure-design” comment by Klaus. Most find InDesign a poor tool for web design, as ID doesn’t have a usable HTML/CSS export nor even pixel rulers: and web pages are still mostly measured in pixels, Photoshop’s native tongue. So PS is a natural choice for web design.
Fireworks does offer decent comping tools, but no robust CSS support for anything too fancy. And so we wait for something in which we can create graphically rich (if we wish it), and standards-compliant sites. Perhaps Adobe can muse on that need.
Funny you’d append an update about forgetting Fireworks…
I used to have a very tidy workflow that mostly used ImageReady (along with Photoshop). The improved automation and slicing was the primary use – I had some really amazing droplets set up since ImageReady was smart about doing scaling in batches, well beyond Photoshop. This was was like 80% of what we were doing for large product image libraries of multiple sizes.
When CS3 abolished ImageReady but didn’t include Fireworks in the Design Premium bundle I spent a lot of time migrating from my workflow. Yes, I know I can still run ImageReady, but I’ve never clung to depreciated software.
I mostly hand-code anyway (thank you, Coda), so the CSS thing is moot. It’s going to take a while, if ever, for me to hop back into Fireworks in any dependent way. I’ve not even looked into using it heavily for automation as I did with ImageReady. Actually a lot of other non-Adobe tools took over where IR left off.
It is sad that ImageReady was taken out the back and shot – it was a really nice bit of software – whereas Fireworks is so clunky it hurts.
It is also true that knowing XHTML/CSS is the only reliable way to go. Loads of designers think that this is in someway beyond them, but it ain’t – it’s easy – you just need to do it a couple of times.
The pages that SiteGrinder turn out are appalling. Truly messy/stupid markup, no structure, practically invisible to Google. Well worth $200 plus!
@klaus:
Seriously? I do work with Designers who are still firmly in the Print world and, seemingly, have not expanded their skill set to the web. They tend to use InDesign and hand it off to me. Then I need to make the decision about how I am going to export that and keep it clean: InDesign to EPS to PS, InDesign to PDF to Illustrator,InDesign to jpeg to PS, etc. Except for having multiple pages (which has value), it just doesn’t seem to be the best workflow, unless one is only working with themselves.
🙂
It’s kind of of like working with Freeway, but with out any web tools or site management.
How do you handle the production workflow when using InDesign?
Of course, now that we have CS4, if you are talking about InDesign to Flash then its a whole different story! Thanks Adobe!
I think the FireWorks exporting capabilities can mislead some newbies trying to migrate. FireWorks is good for quick comps to show clients, but not appropriate to make an actual final site… the design needs to be chopped up into its respective content, images, and backgrounds and coded… or at least with assisted coding through DreamWeaver.
I always think of the idea that you can go from a psd to a website with an easy button, like me asking what I can scan my drawing into to make it an instance animated movie.
Traditional design is to web design, as traditional design is to other mediums… like video. It helps to know design principles, but another medium is another beast entirely, with it’s own benefits/limitations. There is no instant psd to video workflow either.
Steve Laskevitch, I’m happy I made you laugh — for my comment was *intended* to puzzle folks a bit. Let’s just say it appears I know something you don’t, OK — and that I can therefore laugh a bit on my own, as I happily craft websites in InDesign?
@Greg: Your approach is exactly what we teach in CSS Designer Starter Kit for Photoshop. Learn to visualize the CSS layout right from the comp, distinguish the foreground and background images, export them and assemble in Dreamweaver–or your favorite text editor. Photoshop has some really great tools for making the transfer precise, but as you say, it does take time and know-how.
Thanks for the post, John! In addition to the CSS Designer Starter Kit for Photoshop, we just added the CSS Menus Starter Kit, also available in both Photoshop and Fireworks versions. We cover creating graphics for different navigation states for multi-level horizontal menus in Photoshop/Fireworks and then show how to implement them as CSS-based navigation in Dreamweaver. Apologies for the plugola – it’s just a coincidence that your post on CSS Designer Starter Kit goes up the day we launch our menus training.
I’m waiting patiently for the pixel editing and exporting tool for web development that presumes I understand how to write my own HTML and CSS.
[What specifically would you like to see us do? –J.]
Seems unlikely that this tool will be Photoshop. Adobe’s focus to date has been clearly on those who don’t.
This makes me a little sad as Photoshop remains my favoured pixel editor.
The thing that frustrates me about converting a Photoshop design to the Web is that the design will still basically be a print design. You’re just “printing” it to the Web, even flattening it as you go. It’s basically a 2D design (width and height only, even to the point where most mockups can be implemented with tables), but the Web is 4D (add depth and time) so you can have both layers and animations, which are already there even if you’re not using them. In some cases I have seen engineers basically designing the interactivity because nobody else did it first.
I think it’s better to prototype in Flash or Dreamweaver (or similar) in-between the Photoshop and CSS. You take the static Photoshop design and make sure the layers are each holding only one object, then import that into Flash and get instant Flash objects. Whether you prefer to wire them with Actions or with lines of ActionScript, it’s a very quick process to create a Flash movie that everyone on the team can run in their browser and criticize and add to and bend this way and that and when it’s making everyone happy, then you turn over the Flash prototype to an engineer and have them build that in a very short time because it’s very much like giving them an existing website to clone. Many more answers and final decisions are in the Flash prototype as opposed to the Photoshop mockup.
Also, very generally speaking, I can’t see how this PSD to CSS workflow can survive HTML 5, which is going to be very bad for people who only know HTML and CSS. You can get at much more style information with JS than CSS, and the animations and interactivity that are coming (and here now in some cases) are just way too sophisticated to work with and maintain without so much as a variable to use, or a basic if-then-else. (I highly recommend Jeremy Keith’s DOM Scripting, it is easier to learn than CSS hacks and will cause you not to need CSS hacks.)
An easy and quite affordable way to get the photoshop designs sliced into high quality web layouts.
You may want to take a look at this service at http://www.seo-semantic-xhtml.com