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