《响应式Web图形设计》一7.1　使用Illustrator

2021-12-22 12:19:45

本节书摘来异步社区《响应式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文档通常只有一个画板，不过你可以自己动手多添加几个。