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

http://www.duclaux.net/blog/wp-conte...06/02/open.jpg


2-Edit the document with Image ready

http://www.duclaux.net/blog/wp-conte...Imageready.jpg


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.)

http://www.duclaux.net/blog/wp-conte...6/02/slice.jpg


4-Now your document should contain blue numeroted squares and lines

http://www.duclaux.net/blog/wp-conte.../02/sliced.jpg


5-Now you need to specify in image ready the ouput parameters.

http://www.duclaux.net/blog/wp-conte...utsettings.jpg


6-Now you choose the CSS export (inside the File->Outputsettings menu)

http://www.duclaux.net/blog/wp-conte...ettingscss.jpg


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).

http://www.duclaux.net/blog/wp-conte...EOPTIMIZED.jpg


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.

http://www.duclaux.net/blog/wp-conte...viewsource.jpg

-Extract of the css code generated by photoshop/imageready:
http://www.duclaux.net/blog/wp-conte...ode-source.jpg


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.

Due to image limit I have had to include links to the images, please visit the links if you wish to see the captures.

NOTE: This tutorial was not written by me but permission has been granted for me to use it.

thanks a lot for such a nice tutorial...

Actually this is a very handy thing for designers like me who mainly work on photoshop and don't know any thing about coding except for HTML and CSS...

thanks again

You mean to say you can slice an image in less than 30 seconds?

i found it pretty hard sorry but to me its taking longer than that