Skip to content

Illustrator and ai2html

Jason Kao edited this page Nov 29, 2020 · 3 revisions

Illustrator Files

First, clone the Spectate repository of the story.

Put all Illustrator files in the ai/ directory and delete any existing ai2html-settings. This ensures that you'll use ai/ai2html-config.json as the configuration file.

Each Illustrator file should represent one graphic. Each file can (and should) have multiple artboards for different screen sizes. Every graphic must have a 300 (an artboard named "300" with width 300px) for mobile screens. A 600 will fit inline with Spectate text. Larger sizes include 960, 1050, and 1200.

When the ai2html script is run, the HTML output will be put into src/ and the images will be put into assets/.

Displaying ai2html HTML

Running ai2html should have generated a new HTML file inside your src/ directory.

Add a graphic to the Spectate project, setting asset to be the filename of your newly generated HTML file.

If the development server is running, every time you run ai2html in Illustrator, the web page will automatically reload and show your changes.

Clone this wiki locally