慢羊羊的空间

无为,无我,无欲,居下,清虚,自然

制作图片素材的必备知识

平时常用的图片格式有 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 大小。这种优化对于访客浏览自己的文章是很重要的。

分享到

评论 (2) -

  • 背景色我也设置成一样的,一摸一样的程序,只是换了图片 显示出来 没有透明背景/////。。。。。
    • 或许是你的图片格式问题,并不是每种图片格式都支持透明色。