2.2 网页图片选择
在浏览网页中，用户对访问速度是比较敏感的，用户等待网页打开时间最长约为10s，如果放置太多的动画、视频等多媒体元素，会延迟网页的加载速度。而全图片或全文字的网页也不利于浏览体验。因此设置恰当的图片可以增加页面美感，不仅能让浏览者身心愉悦，同时能准确传达页面的信息，可以说图文并茂是网页设计的关键。
2.2.1 图片素材的收集
1．从主题出发选图片
网站主题对于搜索引擎优化是非常重要的。搜索引擎蜘蛛爬取网站页面时，会通过关键词来判断网站的主题，主题清晰的网站有利于缩短检索时间，增加搜索引擎对网站的信任度。
目前的网络中，网站的主题非常广泛，以百度的网站主题分类为例，常见的网站主题有音乐影视、娱乐休闲、游戏、网络服务与应用、博客、网址导航、数码及手机、教学及考试、医疗保健、女性时尚、房产家居、旅游、小说等。每个主题都有各自的特征，如医疗类网站多以红十字为标志，白色为主色调；娱乐休闲类网站风格时尚；网络服务类网站风格严谨。
2．从品质出发选图片
一张适宜并质量高的图片对页面来说无疑是加分的。图片质量一般分为高清、模糊、低像素等，如图2-4所示。
图2-4 图片清晰度表现
左图：像素和分辨率高，能看清图片的细节内容，适合做各种图片效果设计，为首选素材。
中图：呈现效果模糊，可作为衬托、背景图片，为慎选素材。
右图：像素和分辨率低，应用时要保持原始尺寸或缩小尺寸，为不建议选择的素材。
3．从视觉引导选图片
有表现力和内涵的图片有助于激发设计灵感。这种图片一般都具有一定的引导作用，如动态走势引导、色彩引导等。
（1）走势对视觉的引导作用
设计师要具有把握图片动态走势的能力，如图2-5所示。
图2-5 走势对视觉的引导
左图：在主体物视线的前方，有大量空白，形成向前的动态走势，图片具有想象空间。
中图：在主体物视线的前方，无空白，动态走势引导方向不明确，图片内涵表达不清楚。
右图：主体物被切割，无引导方向，图片没有内涵，杜绝采用。
（2）色彩对视觉的引导作用
颜色同样对视觉有显著的引导作用。通过调整颜色来改变版面的外观，如纯度高的颜色使页面更亮眼，颜色的差异化能突出页面不同区域的内容，如图2-6所示。
图2-6 色彩对视觉的引导
左图：彩色图构图饱满、色彩丰富，可用的处理手法多，风格多样化，较为常用。
中图：具有某种单一颜色倾向的彩色图片，体现一定的氛围、格调，如棕色有旧时代的氛围。
右图：黑白图的格调凝重而纯粹，要注意黑白过渡色（灰色）的变化层次。
（3）时代对视觉的引导作用
图片的选择要符合内容所描述的时代特征，要充分挖掘时代的特色，图2-7所示为唐朝、清朝及现代服饰。
图2-7 时代对视觉的引导
左图：唐朝女子服饰的特点是浪漫多姿，给人一种俏丽优雅的感觉。
中图：清朝女子服饰的特点是色彩绚丽醒目，款式别致，体现东方女性的含蓄优雅。
右图：现代服饰设计风格更多样化。
4．从设计细节出发选图片
图片的选择除考虑上述因素外，还要注重图片的相互搭配。下面以网上商城商品展示栏为例。首先给出不合理的图片搭配，如图2-8所示。
图2-8 不合理的图片搭配
分析搭配别扭的原因如下。
错误一：第2张图明显与其他3张图不属于一个商品类型，导致图片主题不一致。
错误二：第2张图、第4张图与其他两张图的背景颜色不一样，导致图片颜色不一致。
错误三：第4张图比其他3张图大，导致图片大小不一致。
错误四：以绿色线为基准，第1张图与其他3张图位置发生偏移，导致图片视角不一致。
正确搭配图片，要注重图片之间尺寸、角度、色彩、风格等方面的协调性。下面给出合理的图片搭配，如图2-9所示。
图2-9 合理的图片搭配
2.2.2 图片的处理
在根据网页主题收集图片后，可利用抠图等方法进行处理，截取精华、去除糟粕、修复瑕疵、增添特效。以图2-10为例，常用的图片处理手段如图2-11到图2-15所示。
图2-10 素材源文件
图2-11 增加
图2-12 换位
图2-13 抠底
图2-14 复制
图2-15 镜像
2.2.3 图片的调整
图片摆放的位置、大小等，会对读者的阅读造成一定的影响。
1．图片的位置变化
图片的位置直接关系到版面的布局。
（1）单张图片的摆放
当版面中只有一张图片时，其位置决定着版面效果。
1）居中摆放。这种摆放适用于追求平衡性和规范性的画面，体现稳重感。摆放时要注意左右、上下的距离要对称，如图2-16和图2-17所示。
图2-16 单张图片居中摆放1
图2-17 单张图片居中摆放2
2）边角摆放。图片摆放在某个边角位置，能使版式更加生动，如图2-18所示。
3）占据半个版面。图片占版面的一半，分为左右、上下两种分割方式，如图2-19所示。
（2）多张图片的摆放
当版面中有多张图片时，要根据版面布局来摆放图片。
1）中心摆放。这种摆放方式使图片排列整齐，富于条理，如图2-20所示。
图2-18 单张图片边角摆放
图2-19 单张图片占半个版面
图2-20 多张图片中心摆放
2）边角摆放。要展示主体形象，就要弱化其他部分。借助九宫格或三等分线将多张图片错落摆放，把主要的图片放在三等分线的交界处，使版面更具延展性，如图2-21所示。
图2-21 多张图片边角摆放
3）占据半个版面。这种摆放一般是文字占半版，图片组合占另一半版，整个版面清晰有条理，如图2-22所示。
图2-22 多张图片占半个版面
2．图片的尺寸变化
（1）放大和缩小
视觉效果良好的页面表现在其主体形象突出。如何将主体形象与其他部分区分开，是设计师的工作要点。
在页面中将需要突出的部分进行放大是一个不错的方法，次要的部分可缩小，再按主次排列图片。例如，一张主图配几张小图，通过大图和小图的相互搭配，提升版面的视觉冲击力。这种手法在电子商务网站中很常见，如图2-23所示。
（2）推近和拉远
如果图片尺寸不发生变化，通过两张有推近和拉远效果的图片的对比，可以给人带来图片尺寸大小有别的视觉效果，如图2-24所示。
图2-23 尺寸放大与缩小的对比
图2-24 图片推近与拉远的对比
3．图片与文字的组合
（1）标题性文字与图片的组合
当图片中有标题性文字时，要先判断标题文字与图片的主从关系。要突出标题文字时，可将标题文字放在版面的重要位置，放大字号，甚至可以遮挡图片，如图2-25所示；要突出图片时，可将标题文字放在图片的留白处，且标题文字的颜色要与图片相反，如图2-26所示。
图2-25 突出标题
图2-26 突出图片
（2）说明性文字与图片的组合
图片与说明性文字搭配时，要注意图片与相关的说明文字距离近一些，与无关的说明文字距离远一些，如图2-27所示。
图2-27 说明性文字与图片的搭配