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

[clookid]

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.

NOTE: This tutorial was not written by me but permission has been granted for me to use it to earn myself some more points. :P

[xtraze]

Nice man, And a valid CSS too with absolute positioning. lol
I thought I need to buy another software for this job but this is better, Especially the slicing thing system, as if I didn't Everything will be one BIG picture. And the CSS source will be shorter.

Maybe I will make a layout by Photoshop without text ( maybe a little of ) with menus,ect And use some CSS stuff to Edit it as I want it. cool.

Nice tutorial coolkid

[clookid]

It is cloo-kid!!! Lol... Everyone gets the name wrong....

[xtraze]

Why not change it to Coolkid, it sounds Better, lol.
As we were talking about HTML, Here's another thing.

When you create a webpage, test it with at least three different kinds of web Browsers before publishing especially if you use any WYSIWYG you must check.
As for some functions, different browsers understand in different ways or some ignore some codes.

IE ignores the <embed ...
NN ignores the <include ...

[-MW-]

Nice! Thanks , i need it :P now is easy to do with the tut

[AfTriX]

Good one, Thanks!

[shreesha]

hey good one. thx. its a nice tutorial.

[blag]

cheers for that have no idea bout that one !

[kisna]

Wow, Wonderful.
I dint know that photoshop can do this. Thank you very much for the tutorial.

[PlayaSkater]

I have CS3 and it doesn't have ImageReady. What should I do??