存储技巧,讲解AI存储为WEB所用格式的一些知识(2)


二、GIF文件格式

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

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

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

存储技巧,讲解AI存储为WEB所用格式的一些知识_www.16xx8.com

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

存储技巧,讲解AI存储为WEB所用格式的一些知识_www.16xx8.com

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

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

存储技巧,讲解AI存储为WEB所用格式的一些知识_www.16xx8.com

一个GIF图片也可以是黑白的,在这里可以选择了黑白后再选择扩散来让颜色过渡得更自然。你可以通过调试仿色的滑块来选择不同的扩散效果。但图片整体的效果绝对是60年代的LOOK!

存储技巧,讲解AI存储为WEB所用格式的一些知识_www.16xx8.com

GIF格式可以支持一个维度的透明度。这是什么意思呢?意思就是,这种格式的图片可以显示为完全不可见或完全可见,没有中间过渡。所以,如果你的图片里有透明渐变或柔软朦胧的阴影,那就最好放弃这一格式。

存储技巧,讲解AI存储为WEB所用格式的一些知识_www.16xx8.com

紧靠勾选透明度选项右侧的,是一个叫做“杂边”的色彩选择参数。这会围绕图片里所编辑的对象增加一条细边,有点类似PS中的描边。如果你要将这个GIF图片置于一个有色的背景中,那么你可以在此选择与背景相同颜色的杂边。这会让图片和背景融合得更加自然。

存储技巧,讲解AI存储为WEB所用格式的一些知识_www.16xx8.com

你还可以勾选“剪切到画板”,当你勾选这一选项后,你的图片的尺寸就会与你的画板的尺寸保持一致,而当你去掉勾选,那么软件会根据你所画的对象的尺寸进行裁切,那些在画板上但没有作品的部分将会被裁切掉。这个设置你大概会经常使用到,因为有的时候,在我们所绘制的对象以外的部分的确是没有太大的必要保留,最后图片尺寸还能因此而变得更小。

存储技巧,讲解AI存储为WEB所用格式的一些知识_www.16xx8.com

存储技巧,讲解AI存储为WEB所用格式的一些知识_www.16xx8.com

下面让我们看看图像大小这一参数组,这一部分你可以减小或放大所优化的图片。之类的图片大小指的并不是图片的文件大小,而是指的图片的尺寸大小,在这里表示为宽和高。这就是AI优于基于像素的图片处理软件的地方,如果你想要从优化输出的部分放大你的图片,AI的可以让它得以放大,而且同时输出结果也保持品质,这就是矢量图的好处。而假如你使用的是PS的话那么当你放大像素图,作品就会看上去很模糊。

在宽和高的设置参数下有一个下拉框选项,你可以为你的优化方案选择不同的选项,如果你的作品中文字所占的比例较大,那么你可以选择“优化文字”,这里的文字是指的用文字工具可以编辑的文字,那种已经转曲的文字是视为图片的。

或者如我在下面选择了“优化图稿”,你可以看到优化前后作品的变化。边缘变得更加平滑了。

存储技巧,讲解AI存储为WEB所用格式的一些知识_www.16xx8.com

存储技巧,讲解AI存储为WEB所用格式的一些知识_www.16xx8.com

让我们继续看看右下方的颜色表,这个颜色表里包含了优化后的图片里所包含的每种颜色。其实,你完全可以通过双击修改某个颜色。就像我在本例中将绿色换成了紫色,而当你鼠标划过这个色块时,会有一行小字来提示你将什么颜色替换为了什么颜色。这种方式可以让你将一个作品保存为多种色彩的版本,而不用改变原始图片。

存储技巧,讲解AI存储为WEB所用格式的一些知识_www.16xx8.com

在颜色表的右下方有一排图标,这一排图标让你可以更多地对颜色进行调整。你首先需要选中某一个色板,然后进一步可以设置其为网页安全色,或者锁定或者删除它。色板中出现星号就表示已经转为网页安全色,当鼠标滑过会提示出所替换的网页安全色的色值。

存储技巧,讲解AI存储为WEB所用格式的一些知识_www.16xx8.com

这里还有其他关于GIF的参数设置,例如,你可以看到有个交错的勾选框,这是过去的技术所需要的选项,到了现在技术进步已经不再需要它了。

教程未完,请看下一页!

学习 · 提示

  • 打开ps,跟着教程做一遍,做完的图要到这里交作业:提交作业
  • 教程有看不懂的地方,可以到论坛发帖提问:ps新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们微博:@photoshop教程论坛
  • 想学更多的同学,可以订阅我们邮件,每天都有新教程发给你:http://t.cn/Rzm5o8Y
PS教程自学网 欢迎投稿教程:http://i.16xx8.com

    你心似海是我 说: 感谢
    溢香的脚丫子 说: 我就是在这网站学会的
    古族语言 说: 这个网站对新手真心不错
    琴弦难 说: 天天来这看教程
    你不行换人 说: 早想学这种了
    说: 来支持了
    抗婊爱国青年 说: 顶一下
    够不够久情 说: 大棒了,以后天天来
    爱你一万年 说: 好棒的教程
    李玉子涵 说: 这里教程真全
    摄影设计 说: 学习了 谢谢