1.什么是 ai2html
ai2html 是 Adobe 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?
图像和 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