How to convert your photoshop document to a CSS in less than 30 seconds, a precise tutorial with illustrations

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 :

The Zen of CSS Design : Visual Enlightenment for the Web (Voices That Matter)

Yep you’re not dreaming this is possible, read on ! :)

1-open your file with photoshop
ouvrir le

2-Edit the document with Image ready
editer dans 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.)
outil de slice

4-Now your document should contain blue numeroted squares and lines
résultat de l'image slicées

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

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

choisir le css

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

sauver le résultat

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.

afficher le code source

-Extract of the css code generated by photoshop/imageready:

code source

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:

HTML Utopia: Designing Without Tables Using CSS (Build Your Own) The CSS Anthology: 101 Essential Tips, Tricks & HacksCSS Mastery: Advanced Web Standards Solutions (Solutions)

kerastase

fer a lisser

remorque occasion


WordPress database error: [Can't open file: 'wp_comments.MYI'. (errno: 144)]
SELECT * FROM wp_comments WHERE comment_post_ID = '83' AND comment_approved = '1' ORDER BY comment_date