Thanks for the post.
I was not aware that ImageReady could output CSS + XHTML. Someone also suggested SiteGrinder a photoshop plugin. If more detail can be provided, I will be very thankful.
Copy & paste the code below to embed this comment.
paul bristow
I was unaware of the possibility to save slices to absolutely positioned divs… I do many mockups for clients, and this will save me endless hours of hand coding css layouts.
btw, is it me or does fireworks optimize images better and to a smaller file size than Image ready?
Copy & paste the code below to embed this comment.
Monty Cathcart
Great Article,
I use Sitegrinder2 instead of ImageReady. It’s a plugin for photoshop that turns your layers into pages using hints. Its worth a look. Just google sitegrinder.
I say use any tool that gives you the results you seek.
I just wanted to say thank you for a great article. I could’ve used this a few weeks ago when I did an overnight project using the tables export. Gasp! I know, I’m seeking help and it won’t happen again. This article and the comments will ensure it…
This is a really cool article that helps keep your same workflow in Fireworks yet export clean and production ready CSS. Contact John Wylie if you want to see the script improved.
I have wrote a simple script which will exports content and parameters of all Text Layers to a .css file (and to .html preview file). Just by naming the layers, you decide if it will be ID, Class or tag. I hope this will be helpfull for webdesigners or their CSS coders – because right in Photoshop can webdesigner set what type of css will be used – that gives nice overview of final xhtml document structure.
Just watch this sample video: http://www.youtube.com/watch?v=407TmGl4sXE
Or download it, it is Freeware: http://www.raist.cz/psd2css/
And now im working on extended version of this script, which will exports most of webdesign image to structured xhtml and css :)
Mockups being a critical part of the design cycle, I have found it important for designers to have a firm understanding of what is capable in tableless CSS, but to also understand cross browser compatibility issues. Creating a design in Photoshop which avoids, what are well documented pitfalls of IE6, saves debugging time and headaches.
I notice that there is some push-back from designers here on ALA regarding “non-traditional” tools, such as SiteGrinder and Rapidweaver.
As an accomplished print designer, photographer, writer, and fine artist, I think I’m a fairly bright guy. But I’m not a code geek (and I use that term lovingly, with all due respect).
I’ve really made a valiant attempt at learning HTML—and its descendants and variations—over the years and it still eludes me.
Fact is, I’m a visual kinda guy; I learn visually, I think visually, and I work visually. Which brings me to my long, drawn-out point: Long ago, I made the transition from the tail end of the era in which graphic art production was all done mechanically—on boards, shot on film, and laid out on illustration board. It was a long, tedious process made suddenly easy, comparatively, by the advent of desktop publishing.
We could create and move things around on the computer screen and have a dozen variations on a design in the time it took to create one the “old-fashioned way.”
The old-fashioned way had been using very specialized and expensive computers, crude by today’s standards, to create galleys of text which were laid out mechanically. Typesetters were the code geeks of the time and, to a person, they all hated DTP and the type it created. Ugly! they declared it, among other epithets.
Where are the typesetters now? Nowhere to be found. Those who do survive, doing high-end typographic work, use the tools that replaced them: Quark, InDesign, and others that have come and gone over the years. They work visually now, with hardly a code in sight.
When the Web was young, the only way to create websites was by writing and manipulating code. (I’m sure you know by now where I’m going with this.) Over a relatively short span, we’ve advanced to more sophisticated code-writing-and-manipulating tools. But code tools, nevertheless.
The articles and comments I read here on ALA seem to be mostly along the lines of “real web designers hand-code their projects” and “only noobs and fools use toy tools like SiteGrinder, Rapidweaver, iWeb, or any of those others.” Pfffft!
So, I declare you all to be typesetters and say, those toy tools are just the leading edge of a wave of applications that will make hand-coding a quaint artifact of the Internet’s not-so-ancient past.
Those new tools will have the same effect on code geeks that DTP had on typesetters. That tsunami has been building for a long time and, like that giant wave, will rise up suddenly and wash away everything in its path.
SiteGrinder and Rapidweaver are not the perfect examples of where we’ll be when the typesetters are washed away. . . but they’re getting there.
A word of advice to typesetters: head for high ground.
to amny it si not taht hard to code a whoel thing using notepad only. Yet yoru ideas and solutions are really nice and very helpgul for making fast sketches to give your customer an idea on what’s going on! Thanks – useful article!
39 Reader Comments
Back to the ArticleTony Pinto
Thanks for the post.
I was not aware that ImageReady could output CSS + XHTML. Someone also suggested SiteGrinder a photoshop plugin. If more detail can be provided, I will be very thankful.
paul bristow
I was unaware of the possibility to save slices to absolutely positioned divs… I do many mockups for clients, and this will save me endless hours of hand coding css layouts.
btw, is it me or does fireworks optimize images better and to a smaller file size than Image ready?
Thanks 4 the great article.
Monty Cathcart
Great Article,
I use Sitegrinder2 instead of ImageReady. It’s a plugin for photoshop that turns your layers into pages using hints. Its worth a look. Just google sitegrinder.
I say use any tool that gives you the results you seek.
Thx,
Monty
Dan Denney
I just wanted to say thank you for a great article. I could’ve used this a few weeks ago when I did an overnight project using the tables export. Gasp! I know, I’m seeking help and it won’t happen again. This article and the comments will ensure it…
Alan Musselman
All –
This is a really cool article that helps keep your same workflow in Fireworks yet export clean and production ready CSS. Contact John Wylie if you want to see the script improved.
http://www.adobe.com/devnet/fireworks/articles/smart_css.html
Petr Stastny
I have wrote a simple script which will exports content and parameters of all Text Layers to a .css file (and to .html preview file). Just by naming the layers, you decide if it will be ID, Class or tag. I hope this will be helpfull for webdesigners or their CSS coders – because right in Photoshop can webdesigner set what type of css will be used – that gives nice overview of final xhtml document structure.
Just watch this sample video: http://www.youtube.com/watch?v=407TmGl4sXE
Or download it, it is Freeware: http://www.raist.cz/psd2css/
And now im working on extended version of this script, which will exports most of webdesign image to structured xhtml and css :)
Jarod Clark
Mockups being a critical part of the design cycle, I have found it important for designers to have a firm understanding of what is capable in tableless CSS, but to also understand cross browser compatibility issues. Creating a design in Photoshop which avoids, what are well documented pitfalls of IE6, saves debugging time and headaches.
Lawrence Stevens
I notice that there is some push-back from designers here on ALA regarding “non-traditional” tools, such as SiteGrinder and Rapidweaver.
As an accomplished print designer, photographer, writer, and fine artist, I think I’m a fairly bright guy. But I’m not a code geek (and I use that term lovingly, with all due respect).
I’ve really made a valiant attempt at learning HTML—and its descendants and variations—over the years and it still eludes me.
Fact is, I’m a visual kinda guy; I learn visually, I think visually, and I work visually. Which brings me to my long, drawn-out point: Long ago, I made the transition from the tail end of the era in which graphic art production was all done mechanically—on boards, shot on film, and laid out on illustration board. It was a long, tedious process made suddenly easy, comparatively, by the advent of desktop publishing.
We could create and move things around on the computer screen and have a dozen variations on a design in the time it took to create one the “old-fashioned way.”
The old-fashioned way had been using very specialized and expensive computers, crude by today’s standards, to create galleys of text which were laid out mechanically. Typesetters were the code geeks of the time and, to a person, they all hated DTP and the type it created. Ugly! they declared it, among other epithets.
Where are the typesetters now? Nowhere to be found. Those who do survive, doing high-end typographic work, use the tools that replaced them: Quark, InDesign, and others that have come and gone over the years. They work visually now, with hardly a code in sight.
When the Web was young, the only way to create websites was by writing and manipulating code. (I’m sure you know by now where I’m going with this.) Over a relatively short span, we’ve advanced to more sophisticated code-writing-and-manipulating tools. But code tools, nevertheless.
The articles and comments I read here on ALA seem to be mostly along the lines of “real web designers hand-code their projects” and “only noobs and fools use toy tools like SiteGrinder, Rapidweaver, iWeb, or any of those others.” Pfffft!
So, I declare you all to be typesetters and say, those toy tools are just the leading edge of a wave of applications that will make hand-coding a quaint artifact of the Internet’s not-so-ancient past.
Those new tools will have the same effect on code geeks that DTP had on typesetters. That tsunami has been building for a long time and, like that giant wave, will rise up suddenly and wash away everything in its path.
SiteGrinder and Rapidweaver are not the perfect examples of where we’ll be when the typesetters are washed away. . . but they’re getting there.
A word of advice to typesetters: head for high ground.
Toronto SEO
to amny it si not taht hard to code a whoel thing using notepad only. Yet yoru ideas and solutions are really nice and very helpgul for making fast sketches to give your customer an idea on what’s going on! Thanks – useful article!