AI2HTML
By Jeremy C. F. Lin
Repo w/ artboards and key elements outlined below: https://github.com/The-Politico/tool_ai2html
Steps:
When creating a new interactive, in your
templates
directory, create a folder calledai
Place
ai2html-resizer-html
into yourai
directory.
Exporting artboards:
When creating assets in AI, you have a number of different art board sizes at your disposal. You can see the different sizes available to you here: https://github.com/The-Politico/tool_ai2html/blob/master/politico-graphics.ait
The artboard sizes that are essential for a project are 270px (width) for mobile and then 400px or 600px (for iPad). Our content well on an interactive page is 600px, so unless you are breaking outside of the well, you won't need larger artboards at 720px, 945px or 1050px.
A good example of using a larger artboard is when it needs to be lede art like here: http://www.politico.com/interactives/2017/trump-travel-ban-muslim-visa-decline/
You need to delete any unused artboards, b/c AI2HTML will export them all.
Then save your ai file in the
ai
folder and runai2html
within illustrator (UnderFile
>Scripts
>ai2html
)This generates your artboards and a partial (with the name of your ai project) in the root of
src
. Your partial is also generated, which you then include as a partial in yourindex.html
file.You can make changes directly in CSS, but Jeremy’s work flow is to make the changes in AI and run the script again, as this will overwrite preexisting files (including any custom CSS style changes you made).
Last updated