Skip to content
Convert a Illustrator file into HTML and CSS
Branch: master
Clone or download
Latest commit 974dae3 Oct 14, 2012
Type Name Latest commit message Commit time
Failed to load latest commit information.
README Update README Aug 24, 2012
tohtmlcss.jsx Update tohtmlcss.jsx Oct 14, 2012


Use Illustrator to export HTML and CSS in one JavaScript action.

This is a very early verison. So im not a programmer. I Hope someone can help me with this idea. Many things are not implemented yet.

How it works
1. Download the jsx file
2. Open Illustrator
3. Prepare you file: Use Layers for the HTML-Tags. Make one main Layer called body
4. Save your file (Just for getting sure. Illustrator and my script aren't very stable)
5. Chose File > Script > Other Script ... and choose the saved tohtmlcss.jsx file
6. Chose your Doctype and Language
7. In the folder of your saved Ai you will find a index.html and a style.css 

* Layername will be Tagname body -> <body></body>
* tagname.something -> <tagname class="something"></tagname>
* tagname#something -> <tagname id="something"></tagname>
* Combination of the both are also possible
* Layers can be ordered in sublayers
* Layer named img generate an empty img tag and content will be ignored 
* Path with the name background are used to generate CSS with background and width information
* Lines with border-[top|bottom|left|right] are used for CSS border attribut
* Every paragraph and character style will be converted to CSS

* naming own folder for css
* naming filename for index.html and style.css
* Optional creating these folders
* Export caracter format
* slice img layers automatical
* generate true css margin and padding
* generate buttons
* generate inputs
* Shadow/inner Shadow
* Hover/active
* Problems with illustrator effects
* export TextFrames with Inline Styles
* Better calculating the width
* CSS Attribut width without background
You can’t perform that action at this time.