爱心论坛互帮互助平面设计 网页设计 → [转帖]图像尺寸完全手册

分享到:

  共有10564人关注过本帖树形打印复制链接

主题:[转帖]图像尺寸完全手册

帅哥哟,离线,有人找我吗?
风之翼
  16楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 等级:论坛版主 帖子:2208 精华:1 积分:14434 金钱:34310 金币:0 魅力:6895 威望:0 登陆:241 注册:2006/11/28 9:24:35 近访:2008/1/18 11:00:51 在线:在线0天0小时0分钟.
离升级差0天20小时0分钟.
目前等级0
  发帖心情 Post By:2007/2/28 3:06:44 [只看该作者]

首先我们来模拟一下第一次缩小的过程,假设我们要将一幅10x6个像素组成的图像,缩小为5x3,以下是示意图,每个灰色方块代表1像素:

图片点击可在新窗口打开查看


  当缩小指令发出后,Photoshop等距离地抽取像素并丢弃,如下图:

图片点击可在新窗口打开查看


  然后再将剩余的像素拼合起来,形成缩小后的图案,如下图:

图片点击可在新窗口打开查看

在第一次缩小以后,像素从9万降到了2.26万,这其中丢弃了6.74万个像素信息。然后又将图像扩大到400 x 225像素,虽然像素总量和原先一样是9万,但在第一次转换中丢弃的6.74万像素信息却是找不回来的。Photoshop只能采用插值算法去弥补这6.74万像素。

 回到顶部
帅哥哟,离线,有人找我吗?
风之翼
  17楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 等级:论坛版主 帖子:2208 精华:1 积分:14434 金钱:34310 金币:0 魅力:6895 威望:0 登陆:241 注册:2006/11/28 9:24:35 近访:2008/1/18 11:00:51 在线:在线0天0小时0分钟.
离升级差0天20小时0分钟.
目前等级0
  发帖心情 Post By:2007/2/28 3:06:55 [只看该作者]

所谓插值算法,就好比猜测,凭空去“捏造”那些并不存在的像素。如下图是上图左上角那2x2的部分:

图片点击可在新窗口打开查看


  现有A、B、C、D四个像素,要将2x2扩成3x3,那么就要多出5个像素。图中的标号是1、2、3、4、5。
  如何确定这原先并不存在的像素的颜色呢?是将现有两个像素的颜色值取平均,去作为新像素的颜色。
  也就是说AB运算后得出1;AC运算后得出2;BD得出4;CD得出5;3则是由1245运算得出的。
  注意:以上内容是为了便于大家理解而打的比方,真正的图像运算概念和过程远比这复杂的多。


 回到顶部
帅哥哟,离线,有人找我吗?
风之翼
  18楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 等级:论坛版主 帖子:2208 精华:1 积分:14434 金钱:34310 金币:0 魅力:6895 威望:0 登陆:241 注册:2006/11/28 9:24:35 近访:2008/1/18 11:00:51 在线:在线0天0小时0分钟.
离升级差0天20小时0分钟.
目前等级0
  发帖心情 Post By:2007/2/28 3:07:14 [只看该作者]

可以想象,用这样方式“捏造”出来的像素,和真正原先的像素肯定存在误差甚至是很大的误差。
  比如左手的手指缝,原先可以很清楚地看到有三道深色的线,如下图:

图片点击可在新窗口打开查看


  而在缩小以后,原先手指缝部分的像素就几乎不见了。只剩下一些浅色的像素,手指缝已经看不清楚了。如下图:

图片点击可在新窗口打开查看


  用这些浅色的像素计算出来的新像素,同样也只可能是浅色而不可能是深色的。因此手指缝原先深色的部分已无法还原了。如下图:

图片点击可在新窗口打开查看


  失去了手指缝的分界,整个手看起来就变得模糊不清,图像失真了。这就是为何将小幅点阵图像扩大后,图像会变得模糊的原因。
  在今后实际的操作中,一般情况下不要将点阵图放大制作。

 回到顶部
帅哥哟,离线,有人找我吗?
风之翼
  19楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 等级:论坛版主 帖子:2208 精华:1 积分:14434 金钱:34310 金币:0 魅力:6895 威望:0 登陆:241 注册:2006/11/28 9:24:35 近访:2008/1/18 11:00:51 在线:在线0天0小时0分钟.
离升级差0天20小时0分钟.
目前等级0
  发帖心情 Post By:2007/2/28 3:07:29 [只看该作者]

现在回顾一下刚才第二次改变图象宽度到400的时候,高度是226。而不是先前的225。
  既然是先缩小一半,再扩大一倍,等于是先除去2,再乘以2,数字应该和原先相等。为什么不相等了呢?

  这是因为一个前面我们已经提到过,但是没有加以强调的概念:像素是最小的单位。它是不可再被分割的。
  图像中的像素总数一定是一个整数,不存在500.7或者400.3这样带小数的数量。
  那么,225÷2=112.5,Photoshop近似算作113像素了。而后第二次的扩大,是以这113作为基数,因此得出226像素。

  我们前面所做的事情,用语言来表述是:将图像缩小一半,再扩大还原为原大小。对吗?这句话是错误的,有概念上的根本错误。
  首先,扩大和还原是两码事,扩大是一种对图像进行修改的操作。而在Photoshop中,还原是指对上一步操作的撤销,对图像本身并没有再作操作。
  好比你拒绝接收你朋友寄来的一封信,那么它将被原样不动地退回,那是对寄信这个操作的撤销。可以称为退信。
  但如果你拆开信封阅读了内容之后,又把它装进新的信封,并且写上朋友的地址寄回,那么这已经是新的寄信操作,而不能称为是退信了。
  再者,“原大小”中的“原”也是错误的,通过上面的分析,我们知道由于取整数的问题,图像的大小和原先已经不一样了。
  有关Photoshop的撤销操作,将在后面的内容中介绍。

  现在再概述一下点阵图像:
  点阵格式是把图像分为若干个点(像素),依靠储存或再现每个点的信息,从而储存或再现整幅图像。
  由于像素数量的限制,所以点阵图像的大小是固定的。缩小或放大图像都会造成对图像的破坏。

 回到顶部
帅哥哟,离线,有人找我吗?
风之翼
  20楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 等级:论坛版主 帖子:2208 精华:1 积分:14434 金钱:34310 金币:0 魅力:6895 威望:0 登陆:241 注册:2006/11/28 9:24:35 近访:2008/1/18 11:00:51 在线:在线0天0小时0分钟.
离升级差0天20小时0分钟.
目前等级0
  发帖心情 Post By:2007/2/28 3:07:48 [只看该作者]

矢量格式图象

  假设我们写了一首新的乐曲,要把它交给唱片公司,可以通过两种方式:

  把这首乐曲弹奏出来并录制在磁带上。
  把这首乐曲的乐谱写下来。
  这两种方式的最大区别在于记录的形式。
  前者是记述性的。包含乐曲的音频信息。其中的所有信息都是固定的,如演奏速度、乐器音色等。如果你想把笛子换成排箫,那就要重新录制一遍。
  后者是描述性的,不包含音频信息,只包含对乐曲音律的描述。如果要改变演奏速度或乐器音色,只要在乐谱中修改一下就好。
  点阵图像就属于记述性,以点为记录的对象。而矢量图像属于描述性,以线段和计算公式作为记录的对象。

  比如下面这幅图中的直线:

图片点击可在新窗口打开查看


  如果以点阵方式来记录,就是从左上角第一个点开始,到右下角最后一个点结束,记录所有像素的颜色。
  记录这幅图像(200 x 50像素)就需要1万个信息。即使这条直线本身并没有那么多像素,但点阵方式也是完整的把整幅图的像素记录下来。
  因此不管是一条直线还是两条三条,对于点阵图像来说都是一样的。都是去逐个记录图像中的所有像素。

  如果用矢量来记录这条直线,只需要三个信息:直线起点坐标、直线终点坐标、直线的颜色。
  在还原的时候就利用这三个信息去生成图像,就如同乐队把乐谱演奏出来一样。

  由于矢量的这种特点,使得它非常便于修改。
  比如要把上图的直线旋转一下,点阵方式就需要重新记录所有改动过的像素信息。而矢量图只需要改动起点和终点的坐标就好了。
  当放大图像的时候,点阵图像会产生模糊和锯齿。就如同录音带播放时候加速产生的变调。对图像质量是有损失的。
  而矢量图像是根据放大后的坐标重新生成图像,不会产生模糊和锯齿。就如同乐队根据新乐谱重新演奏。对图像质量是没有损失的。


 回到顶部
帅哥哟,离线,有人找我吗?
风之翼
  21楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 等级:论坛版主 帖子:2208 精华:1 积分:14434 金钱:34310 金币:0 魅力:6895 威望:0 登陆:241 注册:2006/11/28 9:24:35 近访:2008/1/18 11:00:51 在线:在线0天0小时0分钟.
离升级差0天20小时0分钟.
目前等级0
  发帖心情 Post By:2007/2/28 3:08:05 [只看该作者]

下面大家亲自动手来感受一下矢量图像和点阵图像在缩小放大之后的区别。点此下载002_s01.psd范例文件

  在Photoshop中打开会看到同样的两个人物剪影图像,左边的是矢量格式,右边的是点阵格式。此时看起来没有区别。如下图:

图片点击可在新窗口打开查看


原图片大小是400 x 300,现在使用【图像>图像大小】将宽度改为100像素,高度自动计算为75像素。得到如同下图这样的效果:

图片点击可在新窗口打开查看


  这时两者看起来还是查不多的。再使用【图像>图像大小】改为和原先一样的400 x 300像素。会看到如同下图的效果:

图片点击可在新窗口打开查看



  现在区别就明显了。右边的点阵格式在经过上面两步的操作后变得模糊。而左边的矢量格式却仍然保持着和原先相同的清晰度。没有一点损失。
  大家也可以先把图像缩得更小些,这样放大以后效果对比将更明显。下图是先缩小到20 x 15后再放大的效果,右边的图已经是“一塌糊图”了。

图片点击可在新窗口打开查看



 回到顶部
帅哥哟,离线,有人找我吗?
风之翼
  22楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 等级:论坛版主 帖子:2208 精华:1 积分:14434 金钱:34310 金币:0 魅力:6895 威望:0 登陆:241 注册:2006/11/28 9:24:35 近访:2008/1/18 11:00:51 在线:在线0天0小时0分钟.
离升级差0天20小时0分钟.
目前等级0
  发帖心情 Post By:2007/2/28 3:08:16 [只看该作者]

为什么在第一次缩小之后没有看出区别呢?
  这是因为缩小点阵图像是不会产生模糊的,在丢弃原先的一些像素后,剩下的像素是足够描述图像的,并没有产生像素空缺。而放大后才产生了像素空缺。

  为什么矢量图像“饱经风霜”却依旧“面不改色”呢?这就是因为前面说过的矢量图像的特点:通过记忆线段的坐标来记录图像。
  图像放大缩小的同时坐标也放大缩小,而各个坐标之间的相对位置并没有改变。然后根据改动后的坐标重新生成图像。因此无论放大多少都不会失真。
图像格式的选择

  从上面点阵与矢量两者的对比中,似乎矢量格式有优势,那为什么不都使用矢量格式呢?
  这是因为矢量图像是基于线段的。因此它不适合记录色彩较为复杂的图像。比如下面这幅图:

图片点击可在新窗口打开查看


  如果使用点阵方式来记录,只要按照顺序扫描并记录每个像素的颜色就可以了。
  但如果使用矢量格式,则要将图像分成若干条线段,图像中的每个景物都要由线段构成,比如人物衣服的每一个褶皱,背景花草的每一片叶子等。
  这将是一个非常庞大的计算量。对目前的个人计算机来说是不可能做到的。即使做到了,保存这幅图像的矢量信息也将非常的庞大。

 回到顶部
帅哥哟,离线,有人找我吗?
风之翼
  23楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 等级:论坛版主 帖子:2208 精华:1 积分:14434 金钱:34310 金币:0 魅力:6895 威望:0 登陆:241 注册:2006/11/28 9:24:35 近访:2008/1/18 11:00:51 在线:在线0天0小时0分钟.
离升级差0天20小时0分钟.
目前等级0
  发帖心情 Post By:2007/2/28 3:08:43 [只看该作者]

那为什么前面那张图片中的直线,矢量格式的信息量比点阵少很多呢?
  那是因为那条直线颜色单一,如果那条直线从头到尾每个像素的颜色都不一样,矢量格式就要为每个色彩的变化去计算坐标。这时使用矢量格式会更加吃力。
  这也就是为什么数码相机、扫描仪等都只能记录点阵图像的原因,因为点阵图像记录原理简单,计算量少,可以较为快速地储存图像。

  前面说:它不适合记录色彩较为复杂的图像。但是这里所说的“不合适”是从获取图像这个角度来说的,所谓获取就是拍照、扫描这类。
  如果从创作图像的角度来说,矢量格式同样可以具有非常丰富的色彩,一些高手画出来的矢量图像,甚至可以以假乱真令人以为是照片。

  下图是我们将要在Illustrator软件部分涉及到的一个练习,就是在一幅照片上临摹绘制出的一个矢量鼠标图像。

图片点击可在新窗口打开查看


  下图是这个矢量图的构成情况。在制作中为了便于控制,我们将鼠标分为若干个部分绘制,最后再整合起来。

图片点击可在新窗口打开查看


  那么究竟在制作过程中,使用点阵图像好呢还是矢量图像?注意这里说的是在制作过程中。制作完成后的图像保存格式另有说法。
  Photoshop是以点阵图像为主的软件,虽然它针对矢量图像的操作和效果非常有限。但仍然可以为我们带来极大的便利。
  在这里要大家记住一个原则:在今后的制作过程中,应最大可能地保留可修改性。

 回到顶部
帅哥哟,离线,有人找我吗?
风之翼
  24楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 等级:论坛版主 帖子:2208 精华:1 积分:14434 金钱:34310 金币:0 魅力:6895 威望:0 登陆:241 注册:2006/11/28 9:24:35 近访:2008/1/18 11:00:51 在线:在线0天0小时0分钟.
离升级差0天20小时0分钟.
目前等级0
  发帖心情 Post By:2007/2/28 3:08:54 [只看该作者]

什么叫可修改性呢?比如放大缩小就是。矢量的图像缩放自如,它就具有可修改性。而点阵的图像在缩放操作上就没有可修改性或者说可修改性很差。
  类似保留最大可修改性的情况和方法,在后面还会遇到许多。目前我们知道的是:矢量图像的可修改性比点阵图像要优越。
  所以在今后的制作中(尤其在使用蒙版的时候)应该尽量使用矢量图像。
  在Photoshop和Illustrator中,点阵图像和矢量图像可以同时存在,矢量图像可以很容易地转换为点阵图像,而点阵图像要转为矢量则要复杂一些。
制作完成后要将图像储存起来,而图像储存时有各种各样的文件格式可以选择,该使用什么文件格式储存呢?
  这里先要明确一个概念:显示器是点阵的,包括传统的CTR显示器、液晶显示器、等离子显示器等。
  这就造成一个事实,无论你在制作时候采用点阵还是矢量,在显示器上显示出来的话,最终还是以点阵方式展现的。而两者的区别,只体现在对图像的处理过程中了。就如同我们在课程#01中讲到的RGB色彩一样:无论使用何种色彩模式,只要是在显示器上显示,最终是转换为RGB的。

 回到顶部
帅哥哟,离线,有人找我吗?
风之翼
  25楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 等级:论坛版主 帖子:2208 精华:1 积分:14434 金钱:34310 金币:0 魅力:6895 威望:0 登陆:241 注册:2006/11/28 9:24:35 近访:2008/1/18 11:00:51 在线:在线0天0小时0分钟.
离升级差0天20小时0分钟.
目前等级0
  发帖心情 Post By:2007/2/28 3:09:04 [只看该作者]

那既然最终是点阵输出,那使用矢量图像还有什么意义呢?
  即使输出的是点阵,但矢量图像仍有重要意义,因为在制作过程中矢量图像具有优越的可编辑性。这点我们在后面的学习中很快就会感受到。

  目前的所有媒体,绝大部分也都是点阵的,比如电影就是点阵的,它是由若干个静止画面连续播放组成的连续效果。
  通用的保存图像的文件格式也都是点阵的,比如BMP、TIF、JPG、GIF、PNG等。所谓通用就是大多数软件都能支持的文件格式。
  在网页中的常用图像格式是JPG、GIF、PNG。其中JPG也称为JPEG或者JPE。
  这意味着如果你的作品要形成网页,那么你一定要保存为网页图像格式。直接的PSD文件格式或者AI文件格式是无法在网页上显示出来的。

  但需要注意的是,通用图像格式是不能包含可编辑信息的。
  比如在Photoshop中,我们可以通过调整图层位置来进行图像布局,保存为PSD文件格式后,这些图层信息也会同时保留下来,便于今后的再修改。但如果把图像保存为JPG,那么那些图层信息就丢失了。

 回到顶部
帅哥哟,离线,有人找我吗?
风之翼
  26楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 等级:论坛版主 帖子:2208 精华:1 积分:14434 金钱:34310 金币:0 魅力:6895 威望:0 登陆:241 注册:2006/11/28 9:24:35 近访:2008/1/18 11:00:51 在线:在线0天0小时0分钟.
离升级差0天20小时0分钟.
目前等级0
  发帖心情 Post By:2007/2/28 3:09:15 [只看该作者]

所以对于保存文件的问题,应保存为软件的专用格式。这也是一种最大可能地保留可修改性的作法。并且Adobe体系的软件大部分都互相兼容文件格式,这将给我们以后的制作提供非常大的便利。比如我们可以将在Photoshop中加工好的带有透明效果的PSD文件直接输入到Adobe Premiere中进行影视合成。
  Photoshop的专用格式是PSD,Illustrator的专用格式是AI,GoLive不属于图像制作软件,属于网页制作软件,它的文件格式就是普通的网页文件格式。

  有时候可能需要把图像给别人看,而别人的电脑上或许并没有安装Photoshop,他可能就无法正确打开PSD文件。那么这时你可以另外储存一个通用文件格式给他。比如在Windows中保存为BMP,对方就可以准确看到了。

  文件格式通常可以从文件扩展名上看出来,所谓扩展名就是“.”后面的字母比如sample.jpg就是一个JPG格式文件,excell.psd就是一个PSD格式文件。
  另外注意在Windows XP及更高版本中,默认取消了已知类型文件扩展名的显示,这将使得有些图像文件看不出来是什么格式的。比如shop.bmp只显示shop。
  因此建议关闭这个功能。可以从“控制面板”的“文件夹选项”中关闭,如下图:

图片点击可在新窗口打开查看


  有关文件格式的选择,我们在以后的学习中还将经常遇到。

 回到顶部
总数 26 上一页 1 2