1.什么是 ai2html

ai2html 是 Adob​e Illustrator 的开源脚本,可将 Illustrator 文档转换为 html 和 css,基于 ai2html 的诸多示例登上了 New York Times。

ai2html由不同的组成部分:

ai2html-css:支持插入到 html 中的 css,可以将其包含在 Illustrator 文档中某处的文本块中,但不要包含在画板上。
ai2html-js:支持添加始终插入到 html 部分中的 javascript,可以将其包含在 Illustrator 文档中某处的文本块中,但不要包含在画板上。
ai2html-html:添加始终插入到 html 部分中的 html,请将其包含在 Illustrator 文档中某处的文本块中,但不要包含在画板上。
ai2html-text:可以将文本存储到变量中,并利用基本的 Mustache 或 erb/ejs 表示法将它们插入到文档中。

目前 ai2html 在 Github 上开源,是一个值得关注的 AI 类前端开源项目。

2.为什么须要 ai2html

很多人会有此疑问,为什么不直接将 Illustrator 文件导出为图像或 SVG?

AI 将 Illustrator 转化为 HTML 登顶 New York Time

图像和 SVG 中的文本会随着图像的缩放而缩放,因此当艺术品缩小时,文本很快就会变得难以辨认,或者在放大时看起来非常大。

通过将文本渲染为 html,可以高下缩放“图形”同时保持文本在相同的字体大小和行高下可读,从而适应从手机到巨型桌面显示器的视口。

可以打开链接 http://nyti.ms/1CQdkwq ,然后查看页面时变动窗口大小,此时将看到图稿比例变革,但文本保持相同大小。
更多示例可以查看 https://del.icio.us/archietse/ai2html+responsive

同时,当 Illustrator 保存 SVG 时,每一行文本都会被分解为单独的 SVG 元素,这使得编辑文本变得非常困难。
通过以 HTML 形式渲染文本,编辑职员可以更轻松地进入 CMS 并进行编辑,而无需费力地浏览一堆 SVG 代码。

当然,ai2html 也有一定的局限性,紧张表示在以下几点:

由于在设置文本格式和定位元素时,网页会将数字四舍五入为整像素,因此图形的 html 版本将不会与其 Illustrator 版本完备同等。
如果文本块超过多行并且在 Illustrator 中具有小数行距,则舍入差异会特殊繁芜。
设置为 valign:bottom 的非常大的文本目前无法精确定位ai2html 只关注文本,而可能忽略艺术的身分画板该当有唯一的名称。
图形工具中的标签将渲染为图像的一部分。
如果希望图表标签显示为 html,则须要取消图表分组。
在区域文本块中,由于溢出框而隐蔽的文本将涌如今 html 输出中。
3.安装/利用 ai2html

将 ai2html 的 CDN 文件下载保存到电脑,下载地址已经在文末给出。

将 ai2html.js 文件移动到脚本所在的 Illustrator 文件夹中。
例如,在运行 Adobe Illustrator CC 2015 的 Mac 上,路径为:

/Applications/Adobe Illustrator CC 2015/Presets/en_US/Scripts/ai2html.js

接着按照以下步骤利用 ai2html:

创建 Illustrator 作品。
例如:将画板调度为希望以 div 在网页上显示的尺寸;确保文档颜色模式设置为 RGB;保存文档;利用 Arial 或 Georgia,除非已将自己的字体添加到脚本中的字体数组中。
通过选择以下办法运行脚本:File > Scripts > ai2html转到包含 Illustrator 文件的文件夹, 里面有一个名为 ai2html-output 的输出文件夹, 在浏览器中打开 html 文件以预览输出。
参考资料

http://ai2html.org/

https://github.com/newsdev/ai2html

https://raw.githubusercontent.com/newsdev/ai2html/master/ai2html.js