如何掌握AI中的「存储为WEB所用格式」

带大家回顾一下保存为WEB的图片的格式，然后向大家展示哪类作品适合保存于哪种格式。UI设计师们快学起来!

一、保存为WEB的对话框

进入【文件>存储为WEB所用格式】就会弹出对话框，可以说这个命令几乎就是一个独立的应用，所以这个对话框窗口占据了整个屏幕。

你可以通过三种方式浏览你的作品。最左边的“原稿”可以简单地展示原稿效果，但由于你是要预览被优化后的效果，因此这个选项几乎没有作用。你也可以来到“优化”这个选项，在这里可以预览到优化后的效果，或者你还可以选择“双联”，这个选项会让你将原稿和优化后的作品左右对比进行预览。在下图中，左边的是原稿，右边是优化后的效果(在本例中，是作为GIF格式进行优化的)。

在左下角的下拉框选项中选择预览的比例值，你可以输入比例来缩放预览的图片，也可以通过快捷键方式来调整和缩放图片。

点击左下角的“预览”按钮，你立刻能在自己的默认浏览器中看到这张图片的展示效果，如果你还想知道别的浏览器的效果，你就需要点击按钮右边的地球图标来添加更多。

保存为WEB格式的界面中最为重要的部分就是图片大小，在每个预览图的下方都会出现这个图片的文件类型和大小。在下图中可以看到，我们的左边的原稿是ai格式，文件大小是1.85M，而右边优化后为GIF格式，文件大小变为了14.53K。既然是要在文件大小和品质之间找到最佳平衡，因此你需要时刻保持对文件大小的关注。

二、GIF文件格式

GIF(Graphics Interchange Format)在WEB端是最古老也是使用频率最高的图片格式。尤其是当图片的颜色较为平面化的(如本例所示)，这个格式对图片来说就最为理想的。

我们应该知道GIF所用的颜色模式是索引颜色模式，索引颜色模式是精选RGB图像中所使用的颜色，然后再构建新的调色板，从而可以在不降低图像质量的同时缩小图像的容量。

保存为WEB格式的对话框中有多种GIF的预设，你需要仔细查看不同选项下的图片的品质和图片的大小。大家可以看到我在下图中的设置，我选择了GIF的颜色为128，这时的图片的效果还不错，而图片的大小也只有13.71K。

接下来让我们试着调低一下颜色的值，把颜色值设置为8，这时你会看到图片的大小变为了8.702K，但是图片丢失了品质。边缘开始出现锯齿，这时因为没有足够的颜色来支持颜色间的平滑过渡。虽然，我们在AI中只用了很少量的颜色，但AI本身的抗锯齿处理会使用更多的色彩来平滑边缘的锯齿。

GIF的色彩会被限制在那些经过筛选的“网页安全色”中。这在今天看了已经不需要担心了，目前我们所用的显示器都可以很好的展示出成千上万的颜色，但是在过去，在旧式的苹果系统和Windows系统下可以使用的就只有216种颜色，因此那时的UI设计师都会非常慎重地挑选颜色。

所以，如果你想确保你的图片在每个平台的颜色都保持一致，那么你可以将自己的配色限制在这个色域里。在这个例子里，我们使用“GIPF Web 调板”的预设，你会看到图片中的颜色发生了很大的变化。