第八章 8.4 图像-高二《网页美工-网页色彩与布局设计》同步教学课件 （电子工业出版社·第2版）

图 像 6 PART 图像的选择 图像风格 文字应用案例分析 网页中文字布局形式 1 图 像 Image 8.6图像 每个网站必用的除了字体就是图片，一个网站除了用文字表达内容之外，要想使网站变得美观又出众就必须用图片来装点网页，但图片也不是随意可用的，除了图片的颜色要和谐之外，还要与网站主题统一，这样浏览者就不会“跳戏”。 网页图像包括图片、动画、视频和辅助图案，网页图像是除文字之外的最重要的通用视觉表达语言，不同国家与民族，语言可以不通，但是，在图像的识别方面则不存在障碍，因此说，图像设计是网页设计的重要组成部分。 图像与文字相比具有更直观、真实、生动而充满趣味性的特点。在网页图像设计时，要特别注意图 像的风格与内容要与网页的整体风格、主题保持一致。 2 图8-55和图8-56分别为创意分享网站、装修公司网站，并不需要过多的文字表述，只看图片就能分辨出这些网站是做什么的，这就是所谓的合适。 8.6图像 图 像 Image 3 图8-55 创意分享网站 图8-56 装修公司网站 网页中经常采用的图像一般包括：产品的广告宣传图像、产品真实展示图像、企业的新闻图片以及其他辅助图标、纹样等，这些图像在采用过程中应注意以下情况。 1.动态图像 ①FLASH动画：这是一种很常见的动态图像，其特点是体积小，视觉冲击力与变现力强，易于在互联网上广泛传播，FLASH动画文件的扩展名为“.swf”。 ②GIF 动画：GIF 动画常用于短小动画。GIF 动画的原理是顺序播放图片，形成动画效果。如果图片尺寸较大或图片数量较多时，生成的文件会非常大，此时建议大家改为FLASH动画。 ③FLV视频：其特点是体积小，压缩率高，非常适合在互联网上传播，但其缺点是清晰度不够高。如果想看高清效果的电影只能在一些专门播放高清电影的视频网站上看。 8.6.1图像的选择 图 像 Image 4 8.6.1图像的选择 图 像 Image 5 图8-57 thibaud网站 2.静态图像 静态图像是网页构成中重要的组成部分，其中以JPEG图像、GIF图像、PNG图像三种格式为主。 ①JPEG图像：这是最常用的一种图像格式，由于其具有较高压缩比，因此具有较小的体积，但具有优秀的图像质量，其支持24位真彩色，适合表现拥有丰富细节和复杂渐变色的图像，是网页用图的首选，但其不支持透明背景。如图8-58所示jupiland网页图像对色彩、肌理、渐变色以及光泽、细节等要求较高，因此使用JPEG格式非常恰当。 8.6.1图像的选择 图 像 Image 6 8.6.1图像的选择 图8-58所示jupiland网页 图 像 Image 7 ②GIF图像：该格式只能显示256种色彩，无法达到JPEG图像那样平滑的而显示渐变色彩，因此体积较小。如果对GIF图像进行压缩，则损失的是图像的色彩而非失真，因此GIF图像适合表现色彩数量较小的单纯色彩。 ③PNG图像：该格式可以替代GIF图像和TIF图像格式，可以携带平滑的透明背景，这是其最大的优势。最高可以支持48位真彩色图像，有着高品质的图像质量和平滑的透明边缘，同时具有体积小的特点。 8.6.1图像的选择 图 像 Image 8 1.图标风格 图标在网页中使用非常普遍，在搜索引擎输入“图标”，就会有无数图标出现，而且分类明确，如图8-59所示。图8-610 CGVA网站则是使用了大量小图标，在主页的底部使用了11个形态各异的图标，点击任何一个图标都会对应着相关图像。 8.6.2图像风格 图8-59图标按钮 图8-60 CGVA网站 图 像 Image 9 2.写实风格 这种图像在网页设计中经常被使用。即将采用的图像经过图像处理软件的艺术加工处理，保证图像能直观、真实地反映客观情况，如图8-61所示。 8.6.2图像风格 图8-61volvocars网站 图 像 Image 10 写实风格图片大小有时也是网页美观的决定因素，目前较为流行扁平化的大图片，如图8-62至图8-65所示，这种设计让网页看起来大气、简洁、上档次，是现在较为热门的一种设计方式。是流行但并不是全部，也有一些小图片组合，大小不一组合，甚至分割组合，只要好看，任何方式都值得提倡。 8.6.2图像风格 图8-62 大图片式网站首页 图 像 Image 11 图 像 Image 12 8.6.2图像风格 图8-64 拼接式网站首页 图8-65 展览式网站首页 图8-63 组合图片式网站首页 3.手绘风格 照片形式的图片是不是有些太普通了呢