本节书摘来异步社区《响应式Web图形设计》一书中的第7章，第7.1节，作者： 【美】Christopher Schmitt 译者： 曾斌 责编： 赵轩，更多章节内容可以访问云栖社区“异步社区”公众号查看。
7.1 使用Illustrator
响应式Web图形设计
Adobe Illustrator是专为编辑矢量图形而设计的软件。大部分的网络图像目前仍然是基于栅格的，但随着浏览器对SVG图像的支持日益增强，Illustrator正逐渐成为网页设计师首选的图像处理软件。
7.1.1 为网页设置工作区
打开Adobe Illustrator，你会看到一系列选项卡和面板，其中有一个用于网页开发的浮动面板。请按照以下操作步骤在Illustrator中打开Web工作区：“窗口>工作区>Web”（见图7.1）。
Web工作区包括以下几种面板。
变形面板（Transform）可对标尺、尺寸或位置进行微调（见图7.2）。
调色板可用来收集和存储颜色样本。同时，你也可以通过“窗口>扩展功能>Kuler”调出Kuler扩展。该扩展支持从Adobe社交媒体网站选取由社区中的海量配色方案（见图7.3）。
符号面板（Symbols）收集了可以重复利用的图形实例。如果你在文档中放置了图形实例后，又对其做了一些更改，那么文档中的图形实例就会相应地自动更新（见图7.4）。
外观面板（Appearance）用于改变透明度和混合模式。单击Illustrator对象可以改变一个对象的笔触、填充、透明度和其他属性（见图7.5）。
画板面板（Artboards）可用来调整文档工作区域的尺寸，修改其名称；图层面板用于维护同一个工作区域内的图形，从而便于查找和组合（见图7.6）。
7.1.2 设置文档尺寸
在针对网页进行设计的时候，你需要确保使用了正确的布局尺寸。和预先设定好的工作区设置一样，Illustrator预置了一系列文档尺寸，这些尺寸涵盖了浏览器和移动设备的宽度和高度设置。
1．桌面网站设计
选择“文件>新建”，打开“新建文档”对话框（见图7.7）。
从“新建文档配置文件”下拉菜单里，选择Web（见图7.8），设置文档的尺寸。
硬件性能变得越来越强，质量也在变得更好，桌面显示器亦是如此。目前较为流行的预设尺寸有1 024×768和1 280×800，当然，你也可以自己手动设定更大的尺寸，例如1 366×768（见图7.9）。
！为Retina屏幕定制Illustrator文档
Illustrator并没有为苹果的Retina或者其他高密度屏幕定制尺寸。不过，所幸Retina的尺寸实际上就是一般尺寸的两倍。因此，为iPhone的Retina显示屏进行设置时，你应当将尺寸设为640×960。iPad的Retina屏尺寸应该设置为1 536×2 048。如果你想要获得更多与移动设备图形相关的信息，请查看第13章。
2．移动网页设计
说到小尺寸，要是能够提供手机和平板的尺寸，自然最好不过了。而Illustrator恰好内置了一套移动端设备尺寸，从新建文档配置文件（Profile）菜单中可以选择所需的设备（见图7.10）。
在下拉菜单中，有iPad、iPhone、Fire/Nook、Galaxy S和Xoom的尺寸。
3．检查站点尺寸
通过Google Analytics分析来查看网站的访问数据（第4章/“网页设计中的挑战”中有详细的描述）。登录Google Analytics分析，选择“内容（content）>页面数据(In-Page Apalytics)”（见图7.11）。
接下来，选择“浏览器尺寸Browser Size”（见图7.12），并调整Web使用者百分比滑块，从而显示有多少网站访客可以看到网页中没有被遮盖住的部分（见图7.13）。
！网页不需要留出血
由于网页不需要留“出血”部分（印刷术语，意思是设计要包括印刷部分的边缘，以便于裁剪），这里将其设置为0即可。
4．设置画板
当你想要创造许多个相似图像的时候，使用Illustrator的画板（artboards）特性就再方便不过了。例如你需要设计一系列logo，以便应用于移动设备、桌面计算机、黑白印刷或全彩印刷（见图7.14）。新建的Illustrator文档通常只有一个画板，不过你可以自己动手多添加几个。
想要给Illustrator文件添加更多画板，请按照以下4个步骤进行。
① 单击工具栏里的“画板工具”。
② 单击并拖曳一个盒子到文档区域，从而创建一个新画板。
③ 在屏幕右上角部分填入相应数值，对画板尺寸进行微调。
④ 在画板面板中双击画板名称，重命名画板。
5．选择像素精度
想要查看图像导出为光栅图像的效果，请选择“视图>像素预览”（见图7.15）。
将一幅图像从矢量图导出为光栅图像，中间会有一个转换过程。尽管原图像是基于矢量的，新导出的光栅图像还是会有一圈光环状的像素点（见图7.16）。
为减少图像周围不必要的像素，选择“视图>像素预览”（见图7.17），然后对图像进行缩放和微移，使之与像素点能对齐得更精准（见图7.18）。
7.1.3 导出光栅图像
Illustrator有很强大的导出能力，专为导出网页适用的图像而设计。
1．为导出的图像去除多余空白
想要将图像导出为适合网页发布的格式时，选择“文件>存储为Web和设备所用格式”。如果图像比画板小，那么图像周围的空白区域也会作为图像的一部分导出，这会生成一张相当大的图（见图7.19）。
为了只导出画板上的图案，取消原本勾选的“剪切到画板”选项（见图7.20），然后单击应用。
想要从Illustrator中导出光栅图像，请遵从以下6步。
① 准备好图像后，选择“文件>存储为Web和设备所用格式”，调出对话框。
② 在右上角，选择想要使用的图像格式：GIF、JPEG或者PNG-8。正如第6章中所说，生成的PNG-24通常在文件大小上会比导出的JPEG格式大不少，但如果原计划是用GIF图像的话，我们完全也可以使用PNG-8。
③ 如有需要，则可以对每种格式的设置做些调整。
④ 在“双联”或者“四联”的视图中比较不同格式的图像效果，检查质量和文件大小。
⑤ 当准备妥当后，选中图像格式，单击“存储”按钮。
⑥ 在“将优化结果存储为”对话框中，给文件起个名字，单击“保存”按钮即可。
2．导出两倍大的图像
鉴于苹果公司把自家的显示屏像素数增加了一倍，为了适配其设备，我们需要导出原图两倍大的图像才行。当设计是基于矢量图形的时候，针对苹果的Retina屏幕来对图像进行放大，便变成了一件非常轻松的事情。
在“保存为Web和设备所用格式”对话框中，设置百分数为200（见图7.21），然后单击“确定”按钮退出此选项卡。
7.1.4 使用Illustrator导出矢量图像
使用Illustrator除了可以导出常规光栅图像之外，还可以导出基于矢量的SVG图像。因此我们得以保存矢量信息——允许图像在放大或者缩小的同时，不丢失一丝一毫的画质。
从Illustrator导出矢量图像要遵从以下6步：
① 如需删除图像周围多余的空白，选择“对象>画板>适合图稿边界”。
② 选择“文件>存储为…”，调出对话框。
③ 从格式下拉菜单里选择SVG格式。
④ 如果你的图像里有文本，选择子集化下拉菜单中的“仅使用的字形”，这有助于减少文件大小。
⑤“小数位数”这一栏内的数值越小，意味着图像品质越差。增大此值可以提升图像品质，但与此同时，文件大小也会变大。比较能够接受的值为1到7。
⑥ 单击“确定”按钮，保存SVG文件。
