As a webdesigner you’re working a lot with photoshop and now you would like to convert your psd (or jpg, png, whatever photoshop can read) files to a valid CSS and (X)HTML document.
Do you know that you can do it using photoshop and image ready and that it will take about 30 seconds ? If you want to know how do it everything is explained step by step with proper screen captures just in case 
(There’s plenty of books about CSS but few are really good, i would recommend you this one :
Yep you’re not dreaming this is possible, read on ! 
1-open your file with photoshop
2-Edit the document with Image ready
3-Slice your document using the “Slice” tool, this will allow you to define all the different parts of your web page (for example, the header, the menu etc.)
4-Now your document should contain blue numeroted squares and lines
5-Now you need to specify in image ready the ouput parameters.
6-Now you choose the CSS export (inside the File->Outputsettings menu)
7-Now you have defined your output options you just have to click on OK. (this will validate your settings but won’t create the file yet).
8-This is the last step, you need to save the result, using “Save optimized” (inside the File menu).
And now the work is finished,imageready has just created an “images” folder containing all the sliced images and an html file which is containing in the source code the css code.
If you wanna see/copy/edit the css source code you just need to open the file in your favorite web browser and display the source code.
-Extract of the css code generated by photoshop/imageready:
Everything is ok now you have your css and XHTML file. Of course you might need to edit it by hand to modify and or tweak some part of it.
I hope that thanks to this tutorial you’ll spend less time doing css and that you’ll have more time to focus on the the creative aspects of your work.
As you can read further down inside the comments section this method has some limitations. In order to become an expert in CSS coding i would recommend you these great books:
Nice. Ill have to try this when i get chance!
I was thinking about making my own blog template, this may be the motivation i need to give it a try
Worst ever. The code is bad, really bad.
This is awesome. I am so glad I found this. I am getting into CSS in a big way, finally getting my head around it and this is going to help a great deal… thanks or merci.
It\’s such an interesting way to make things fast but every single div is always absolute, and that\’s not a good sign…
Wow! 30 seconds - that\’s terrific! Normally it would take me up to a day or more to really do a proper job of slicing and cropping a .PSD and converting it by hand to HTML/CSS code (I\’m sure that the ImageReady code is equal to any HTML/CSS I could write myself - cross-browser compliant, valid, etc.). You\’re really saving me a great deal of time with your insightful blog post Jean-Jacque! I wonder if I can still charge my clients for 8 hours?
By the way… Could I see one of these wonderful 30 second templates that you\’re descibing in action, on the web?
Oh, and if it\’s so easy and only takes 30 seconds to create a web page, why are you still using the default WordPress template? You (and ImageReady) ought to be able to crank out at least one new template each day! I expect a new design up by next week JJ.
Thank you very much for this article.
That’s useless. Why would you trust ImageReady to construct proper xhtml and css? Css is not about asbolute positioning, it’s about a box model. Notice no padding or margin settings in your css? I mean yeah, it’s a start to edit from, but my first edit to ImageReady css would be BACKSPACE.
And also, I don’t think I’d consider xhtml and css something a web designer should spend less time doing. There is much creativity in xhtml and css, and maybe you not knowing that has something to do with your template site.
I am a designer, but the web and I only get along when I say how something should look and they put my designs together. I have had some success, but still getting there…the whole css thing is so great. for me right now it juts means controlling the text look. how does getting this from images help
fo sheez
You don\’t need step one you can just open the image in ImageReady
Make sure in Step 8 your Format is set to HTML and Image, not just Image as many folks do.
Nice How-To, Thanks.
carl
.
This may produce valid XHTML/CSS but it won\’t be semantic. Moreover, you can not create fluid designs this way.
Remember, a valid code is just the beginning not the end of a quality site.
wow! O.O!
This is the \’quick and dirty\’ way of converting a Photoshop layout to a webpage, emphasis on \’dirty\’. If your designers aren\’t familliar with what HTML and CSS can do, you can end up with some pretty nasty results. I generally like to come up with a concept in Photoshop, while keeping in mind these limitations, and then hand-code the HTML and CSS to match.
Simply slicing your layout into tons of images ends up being inefficient and impractical, IMNSHO.
Even though you are going to moderate this you should know how stupid this method is…
Et aucun problème de validité ?
Merci pour le tuto en tous cas.
Nice one, thx
thanks dude, im an amatuer web designer at best, and this will save a load of time.
Cheers!
Very nice tut, thanks.
Well, this is if you want a crappy CSS document. I mean, no offense to your article, you are just showing how to use Adobes product to accomplish this task, but the quality of the css document won\’t be very good.
Anytime you have a site that has every single element absolutely positioned, it\’s going to be poorly structured.
Good job on the tutorial, unfortuntely all it does it promotes bad behavior, in my opinion.
It goes along with that issue of promoting bad code. It gets copied and repeated over and over so there is twice as much bad code that people use.
Yes way too easy (except perhaps the french browser option to view source) but I myself learnt this only recently when getting into Mambo/Joomla template creation. I think I still need to learn more about the naming conventions that should be applied to the slices/layers, and also to educate my graphic designer in same before sending the psd\’s to me.
I think I am also still finding some of the tricks in terms of the \’auto-slice\’ generation or doing all slices/covering the entire page before exporting, alignment of slices and simplifying it so that it makes nice tables to post-edit too. Also to comment on the fact that this method is great for setting up mouse-over events and pre-defining links/alt-text and the like too.
Nice doc, thanx. Warren.
Hi Peter, Of course the code automatically generated is not very good but you still can use it and improve it by hand. This was only intended for beginners to start playing around with css.
Hi Scott,
The technique explained in this tutorial won’t replace the hours that you need to spend in order to tweak and arrange your css for your clients but i’m sure that you can use this technique to improve your productivity.
About the templates, as i’m not a webdesigner i won’t be able to change it every week, but you can be sure that i’ll try to personalize it a little bit more the next days.
Best regards,
Wow, some of these people are dicks. Why would you be so rude to someone who’s trying to be helpful?
Anyway, thanks for the tip. I knew you could slice and export as html tables, but I didn’t know all this was possible. I wouldn’t use this for a full page layout, but it will be very useful for chucks of pages that need very specific image arrangement.
Many thanks!
Full agreement regarding the *icks who are taking issue with the article. This guys just trying to give you someplace to start. If you want the results of an imageready export to be CSS box model complaint, go ask Adobe to make it so. It\’s that simple.
oops. …compl-i-ant.
yeah the css file is a little dirty, but all in all it’s a good start for me it works perfectly i like to think it’s giving me the opportunity to make visually rich sites and code the css so all i have to do is go in and make a few changes
thanks for the good tut
stv
De todas formas - incluye tablas
It includes div tables
OK so this method is actually how I’ve been working with most of my sites anyway. Sure the CSS is dead dirty but you can clean it up and convert it to a proper layout.
Most of the CSS positioning is rubbish. You need to entirely re-construct the positioning but that’s ok. It’s also advisable to put the images in the BG. As someone else said, ensure you’ve got HTML + Images ticked not just images.
Otherwise yes this is a perfectly ok method.
Yeah maybe the css file is not perfect..but this is a bit better than firework’s output =| thanks for the tip…