How to convert your photoshop document to a CSS in less than 30 seconds

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


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.

Sounds very good but I don't have photoshop.... Could you perhaps try making another tutorial stating how to do it in GIMP or Paint.NET? Well that is only if you have one of the two programs.

This is a great tutorial Iven,I used it with my new site thats is still being created but its up temporaroly with CSS and some tweeks to centralise it.
http://www.artmarkdesigns.com

Well it is nice to hear that your new site is going to establish.

Hope that you will finish it soon and we have one more design portal to get great art materials.

I am going to use this at another forum, okay? If you would like me to remove it please send an email to clookid@gmail.com

No problem. You can share this for any free uses.

Thanks! I hope you don't mind if I publish some of the PHP Tutorials either! I just think the authors deserve for their tutorials to be published around a little more!