froglt教你图像裁减的技巧[文档＋视频][含38P]

站长

                               
                                                                                14.3图像裁剪的技巧
裁剪图像可以说是图像素材编辑里最常使用的技巧，而且用软件来实现是非常简单的。但如何将一张图片经过裁剪后符合设计的需要，则大有学问。有时裁剪图像并不仅仅是为了改变尺寸的大小，而是对一张普通的图像赋予全新的感观。毫不夸张的说，裁剪图像甚至具有化腐朽为神奇的能力。


14.3.1 将图像转化为相同的尺寸
下面这些图像从拍摄的角度看，都拍得非常不错，都有着生动的表情，姿势也很自然，但当这些图像摆在一起时，由于拍摄的距离长短不一，使得每张图像所呈现的视觉效果差参不一，如图14-28所示。注意中间的那张图像，由于其脸部占据着很大的面积，使得这张图像显得更重要一些。

图14-28 图像素材


在一些设计中，如人物简介，经常会将一些人物的图像并排成一列或一行。在这种情况下，应该使这些图像给人统一协调的感觉。
首先可以从最接近裁剪后的效果的那张图像开始，例如中间的儿童图像。然后再依据这张图像来对其它图像进行裁剪。其中的关键就是要让图像中人的眼睛处于同一条水平线，如图14-29所示。

图14-29 裁剪后的图像


在处理这些人物图像时时还要考虑到一些其它因素，因为每个人的脸部都不一样，男性与女性的脸部尺寸大小差不多，但脸形、发型及角度却有着不同的变化。所以必须灵活处理每个人的脸部位置，适当进行调整，从而达到统一的效果。


14.3.2 制作不同比例的图像
以上述处于同一个眼睛水平线的比例处理人物图像，使到并排在一起时我们看起来也很自然，，如图14-30所示。而眼睛水平线大约处于图像高度的 3/5 的地方。留意一点，在上述的照片中，当脸部越大时，与相邻照片的联系就越紧密。


图14-30 不同比例的图像
  

图14-31 眼睛水平线的位置


如果人物离得越远，在视觉上其脸部就处于越高的位置。所以当你将照片比例缩小时，她的眼睛水平线就越往高处偏移，如图14-31所示。


14.3.3 统一人物肖像的尺寸
人物肖像很多时候都是来源于一张上身照片，由于照相的时候距离并不统一，所以每张照片的尺寸都各不相同，如图14-32所示。

图14-32 人物的面部图像


要统多个图像尺寸，使它们看起来都像是以相同距离照出来的。可以把人物的额头、眼睛和下巴都对齐到同一水平线上，然后再拖动垂直的一条引线放在它们的中间，如图14-33所示。大多数男性的头部都基本一样大，但女性的头部相对要小一点，而中线一般就是焦点所在的地方。

图14-33 统一人物图像的尺寸


14.3.4 对人物肖像进行裁剪
在所有的图象中，最快最吸引人的总是一个人的面部，无论它是与一堆文字配合在一起或者与其它图案配合在一起，人的面部图像总能在记忆中保留最长的时间。
大胆地对它们进行裁剪，能够吸引浏览者的注意力。对一个肖像进行恰当的裁剪处理，可以使整个画面更具冲击力并吸引人，如图14-34所示。

图14-34 对人物肖像进行裁剪


如图14-35所示，把图像中人物的眼睛对齐到同一个水平线上。看起来象是同一个公司里管理团队的样子，这种设计可以很好地应用在公司的主要管理人员或某个部门的负责人的简介当中，

图4-35 人物肖像的裁剪效果


如图4-36所示。在通栏的左侧放置经过处理的人物肖像，浏览者会将眼睛集中在他的整个面部上，微笑的表情，有点酷、带点“我知道我是谁”的自信，而标题则醒目地放在右边，整个画面具有冲击力。

图4-36 裁剪肖像在通栏中的应用


一般地，在布局中，一幅人物肖像照片是不会为了配合文字栏的宽度而放大的，因为这样可能导致图片变得太大而缺乏美感。但可以添加一个色块，让文字贯穿照片和色块而形成一个有机的整体，如图4-37所示。
图4-37 添加背景色块

14.3.5 裁剪掉无关的部分


在拍照时，总会有一些不速之客进入到照片中，如图14-38所示。

图14-38 照片素材



图14-39 裁剪掉无关的部分
裁剪图片的重要原则是要将一些与主题无关的内容统统去掉。如图14-39所示，只保留图像中的主角，使得这张照片中的主体更加突出。


14.3.6 调整图像的角度
如图14-40所示，这张图像给人明显水平线倾斜的感觉，由其是图像中的垃圾筒也朝同一方向倾斜，使得这种倾斜感更强烈。
图14-40 照片素材

图14-41 调整角度后的效果


但水平线就应该是水平的，对图片进行旋转后，我们在裁剪图片的四周才能形成一张完整的图像，如图14-41所示。
凡事总有例外，在拍照时由于相机拿得不平导致图像有一点点倾斜，这时不妨更大胆一点，让它再倾斜一些，如图14-42所示。这种处理对有很多直线的图像效果更加强烈，使得一张平静的图像立即充满活力。

图14-42 倾斜图像


14.3.7 放大后裁剪
不同的距离传达出不同的信息。如图14-43所示，是一个在泥地中的棒球，显得很普通呆板，看起来好象一伸手就可以拿得着。

图14-43 泥地中的棒球图像


当把图像放大后，只截取它的局部，感觉就完全不一样。所有的细节清晰可辨，可以清楚地看到这个棒球上的纹理、泥土、缝线及用使用过的痕迹。
它占据着整个画面，视觉效果非常强烈，如图14-44所示。好象感觉到这个球就抓在手中，甚至还仿佛听到击球时的撞击声，还有人群的欢呼声。

图14-44 放大后裁剪的效果


14.3.8 只保留局部
一张图像式的网页通栏可以很容易就美化的网页。但网页的横幅尺寸总是又宽又细。这时应该选择那些尽可能包含更多元素的图像区域来进行裁剪。
如图14-45所示，保留了图像中的沙发背景、人物的脸部、服饰、金色的扶手等元素，并且这些不同的元素之间的颜色对比又比较强烈（金、黄、蓝、紫），使得每一个元素都能够清晰可见。

图14-45 保留图像的局部


最后把裁剪的部分添加到网页的通栏中，效果如图14-46所示。

图14-46 添加到网页通栏中的效果
但是如果图像尺寸很小，而所需要应用的区域又很宽，应该如何处理呢？如果这张图像的背景有一种单色或某个有规则的图案，只需要在它的背景上取色或复制，然后将要应用的图像进行填充就可以了，如图14-47所示。

图14-47 对图像背景进行填充


14.3.9 改变图像传递的信息
如图14-48所示，人物脸部旁边有很多空间，所以在裁剪时更好下手。但问题是图中人物的眼睛显得与主题有点不相配，这个女孩好象是在看着路边的行人，或者在思考些什么。

图14-48 图像素材                           

图14-49 裁剪后的效果


这里可以裁剪图像，只截取她一半的脸部表情，然后放置于图像的右边，并且与文字配合。修改后的第一印象不会觉得她是在看路人，而给人一种她在不知不觉在想着关于Fireworks软件使用情况的印象，如图14-49所示。同样在处理其它图像时，通过这种裁剪，图像所传递的信息会完全改变。


14.3.10 一图多用
在网页效果图或通栏设计中，有很多地方都需要用到图像素材，但如果只有一张图像，怎么处理呢？通过对图像的分解裁剪，选取图像中不同的部分，就可以将这张图像应用在不同的地方，一张图片，同样可以创造出漂亮的效果，如图4-50所示。

图4-50 选取图像中的不同部分


从整体去观察这张图像时，或多或少会对其中的细节置若罔闻。但如果将各部分分离，会发现，其实每一部分都隐藏着一个“故事”，都有着各自的重点，如图14-51所示。

图14-51 一图多用的效果


使用同样的方法，还可以设计出另外一种完全不同视觉效果。这里使用到的图像素材是一张椅子的照片，如图14-52所示。

图14-52 椅子的照片


如果仔细观察一下这张图像，就会发现其实这张普通的椅子包含了各种各样的线条、图案、颜色、孤线及转角位。它们充满着对比，如浅色及深色，直角与圆角等，如图14-53所示。

图14-53 图像素材的分析


使用这张图像素材设计的网页效果图如图14-54所示。整个页面分为上下两部分，它们各自所形成的视觉效果完全不同。顶部分显得开阔平静，底部分则显得饱满充实。

图14-54 设计的网页效果图


顶部的开阔设计使得浏览者的注意力很容易就集中在张椅子上，如图14-55所示。

图14-55 椅子是视觉的重点


底部显得很充实的版面传达一种动感及丰富的层次感。在这部分中并不存在一个视觉焦点，因为所有的图片都是在大小不一的矩形区域中，产生了不同的方向感。
这里只利用一张图像就可以使整个页面充满视觉对比，包括不同的尺寸、材料、图案、形状及方向的对比，如图14-56所示。

图14-56 图像中的对比和层次


也可以把页面中的某些图像替换成色块，效果如图14-57所示，色块中色彩的选择可以直接从图像中进行选取。

图14-57 替换图像为色块


14.3.11突破空间
使图像有部分突破原来的空间。这种设计能够吸引人的注意，也使图片突破原来图片空间的限制，很好地强调了图片中某一部分的高度、动感及深度，如图14-58所示。

图14-58图像突破空间效果


如图14-59所示，明显感觉到这种设计出来的效果比没有突出来的冲击力要强得多。在车头突出的部分加强了图像的动感以及层次感，可以给突出的部分添加柔和的阴影效果，这样才能够使车头和车身构成一个有机的整体。

图14-59 图像突破空间效果


14.3.12 边缘的处理
所有的图像素材边缘都是矩形的，当然在图像软件中也可以处理成各种的形状。一般来说，图像素材的边缘有三种处理方式，分别是标准型、去背型和羽化型，如图14-60所示。

图14-60 图像边缘的处理


用标准型来表现像建筑物一样具有明确形状的主题，能够清楚传达出理智的印象，如图14-61所示。

图14-61 标准型图像


沿着主题边缘剪切出来的去背型图像是非正式的，自由的形状，它具有一种能够让浏览者轻松愉快进入画面的情绪，如图14-62所示。

图14-62 去背型图像


羽化型图像与悠闲的流淌着的时间所创造的故事性表现很相配，传递着优雅而有格调的气氛，如图14-63所示。

图14-63 羽化型图像


如果报纸上的照片都是羽化型，那会造成一种奇妙的气氛。羽化型表现出朦胧与优雅，并不适合新闻的严谨性，如图14-64所示。

图14-64 羽化型的图像不适合新闻页面


热门的新闻与不浪费空间的标准型相协调，标准型的形状横平竖直，与其它图像和文字宽裕很好的进行组合，如图14-65所示。

图14-65 标准型的图像适合新闻页面