制作图片素材的必备知识

平时常用的图片格式有 bmp、jpg（jpeg）、gif、png 等。其中，bmp 是无损压缩，文件体积比较大，通常都会用其他格式来代替 bmp。所以本文着重讲 jpg、gif、png 三种格式。

首先必须要提到的是：修改图片扩展名并不会修改图片格式。图片格式，是图片各像素点的组织方式，不同的格式有不同的文件头和压缩算法等。而扩展名，仅仅是一个格式的标识，方便人们辨识格式。只修改扩展名，会造成图片文件的标识与内容不符，影响图片加载。因此，必须通过绘图软件将图片保存为相应格式。

图片格式的区别

jpg 适合保存照片这类颜色丰富、图案复杂的图像，使用有损压缩。尤其在保存简单颜色的图像时，有损压缩会使颜色边缘出现“不干净”的问题。

gif 适合保存颜色简单、内容简单的图像，使用无损压缩。最大支持 256 色。

png 可以认为是 gif 的升级，采用了更优秀的无损压缩算法。

看图最能说明问题：

原图，一只可爱的小绵羊：

使用 jpg 格式保存，由于 jpg 采用了有损压缩算法，保存后的图像放大看是这样的（下图左）：

使用 gif 和 png 格式保存，因为无损压缩，两种格式都可以得到清晰的无损图像（下图右）：

很明显，在这种颜色内容都很简单的图象上，gif 和 png 有非常大的优势。但是，保存照片这类图像时，如果还用 gif 或 png，文件体积可能会是 jpg 的五倍甚至十倍以上。何况 gif 还有颜色数量的限制。

手机和数码相机拍的照片，通常都会使用 jpg 保存。文件体积的问题就不举例了，一试便知。

正确制作图片素材

制作 jpg 格式的图片素材

对于需要照片风格背景的素材，通常都会用 jpg 格式保存。使用 photoshop 将图片另存为 jpg 时，会有“图像品质”选择，选择范围 0~12，选择 0 表示品质最低、体积最小，选择 12 表示品质最高、体积最大。一般在品质和文件体积之间做个折中，选择 8 就可以了。具体的可以自己试试看效果，这个没多大难度，多保存几次就可以看出来区别。

制作 gif 格式的图片素材

素材源为无损格式（比如 bmp、tif、png 等）时，由于这些格式通常不会造成图像信息丢失，按照以下步骤保存为 gif 格式：

1. 打开 photoshop，加载源图片。
2. 对图片进行精确裁剪。
3. 将需要透明的部分填充为同一颜色，该颜色与主图像任何一部分的颜色都不要相同。比如，如果主图像含有白色，就不要将透明的部分也设置为白色。
4. 执行菜单“图像->模式->索引颜色...”，将图片限定为固定的颜色数量。如果图片本身质量很好，图案简单、边缘清晰、颜色不多，那么“调板”默认会选择“实际”，“颜色”会自动设置为当前图片中含有的颜色数量。或者可以手动选择“调板”为“局部（可感知）”，然后手动修改“颜色”数量为估算的颜色数。这时勾选“预览”，可以看到图片的实时效果。“强制”选择“无”，透明度根据需要选择就好。点击“确定”按钮完成索引颜色设置。
   （注：在确保显示效果的前提下，设置较低的颜色数，可以降低文件的大小）
5. 执行菜单“文件->存储为...”，格式选择“CompuServe (*.GIF)”，填写文件名，“保存”即可。

素材源为有损压缩格式（比如 jpg 等）时，由于压缩导致的图像信息丢失是不可逆的，经常需要手动做一些边缘清理工作。可以试试这个步骤（并非唯一）：

1. 按照无损格式转 gif 的步骤，将图片转为“索引颜色”模式。
2. 放大图像，检查图像边缘是否清晰、背景色是否统一。如果边缘不清晰，拿“铅笔”工具用背景色一点点的勾勒清晰，或者用选择工具选取出具体的背景区，然后填充。
3. 将图片的颜色模式转为“RGB 颜色”，不需要做别的什么，再转换为“索引颜色”。再次转换为“索引颜色”的时候，因为清理掉了不清晰的边缘和背景，在颜色数量上会有降低。
4. 保存为 gif 格式即可。

制作 png 格式的图片素材

png 与 gif 格式类似，比 gif 的压缩算法更好，但是文件头尺寸比 gif 大。所以一般来说：

• 如果图片尺寸较小，用 gif 格式会使文件比较小。
• 如果图片尺寸较大，用 png 格式会使文件比较小。

优化动画素材

经常有程序需要将操作步骤录制成动画，放到网上做说明或展示用。由于 flash 逐渐被取代，目前可以在网页上播放的动画，仍以 gif 为主。所以这一节讲怎么制作 gif 动画素材。

录制

录制屏幕为 gif 动画的工具非常多，比如 ScreenToGif、ScreenFlash 等等。操作也都非常简单，指定录制区域，然后录制，然后保存，就好了。通常录下来的文件没有经过优化，体积会比较大。

优化

优化 gif 动画的工具也很多，这里说两个：Adobe ImageReady 和 UleadGifAnimator。

Adobe ImageReady，可以编辑 gif 动画的每一帧。从 cs3 开始，ImageReady 集成到了 Photoshop 里面，点击 Photoshop 菜单的“窗口->动画”，可打开 gif 的帧编辑。然后要执行的操作包括：

1. 将 gif 动画的尺寸精确裁剪到目标尺寸。
2. 裁剪适当的长度。可以将不需要的开头、结尾删掉。
3. 裁剪中间错误的操作。有时候录制时，中间有些步骤操作错误，这些都需要剪掉。
4. 将相同的帧合并、不需要的图层删除。合并帧的时候要注意帧延时，gif 的每一帧都有显示时间的设置，如果两帧图像相同，删掉一帧的时候，记得将显示时间叠加到剩下的另一帧上，来确保动画的显示速度不变。当然，如果有需要，也可以调整每一帧的显示时间。

都调整完以后，保存即可。

UleadGifAnimator 的操作方法大同小异，不过 UleadGifAnimator 多了一个专门的“优化”界面，操作更直观了一些。

通过优化，可以使 gif 动画的文件尺寸大幅降低，甚至能达到原文件的 1/10 大小。这种优化对于访客浏览自己的文章是很重要的。