1、第2章 使用Photoshop编辑网页图像普通高等学校计算机教育“十二五”规划教材网页设计与制作立体化教程（Photoshop+Dreamweaver+Flash CS6双色微课版）22.1 课堂案例：处理商品展示效果内容导航2.2 课堂案例：制作banner区海报2.3 项目实训2.4 课后练习课堂案例：处理商品图片展示效果 米拉想为电商网站设计效果图，老洪告诉米拉，最好先将网页中需要用到的商品展示图片设计好，这样有利于提升网页的美观度，并提高界面效果图的制作效率。完成后的部分效果如图所示商品图片展示效果2.1.1图像处理基础知识1网页中的图片格式JPEG（*.jpg）格式PNG（*.png
2、）格式TIFF（*.tif；*.tiff）格式EPS（*.eps）格式PDF（*.pdf）格式PCX（*.pcx）格式BMP（*.bmp）格式PSD（*.psd）格式GIF（*.gif）格式PICT（*.pct）格式2.1.1图像处理基础知识2位图3矢量图4分辨率2.1.2旋转并裁剪商品图片1.打开图片2.旋转图像对香水图片先使用裁剪工具进行旋转，然后将其裁剪为正方形，其具体操作如下。2.1.2旋转并裁剪商品图片3.旋转图像后的效果4.选择选项2.1.2旋转并裁剪商品图片6.调整裁剪框位置5.裁剪图像大小和分辨率7.查看效果2.1.3修复商品图片打开“服装模特.jpg”商品图片，处理模特的脸部
3、瑕疵，让模特展现出的效果更加完美，其具体操作如下。（1）打开图像（2）设置污点修复画笔属性1处理模特瑕疵2.1.3修复商品图片（3）处理额头斑点（4）处理面部污点2.1.3修复商品图片（5）处理鼻子斑点（6）查看面部效果2.1.3修复商品图片（7）设置仿图章工具属性（8）处理衣服瑕疵2.1.3修复商品图片（10）调整曲线（11）查看效果（9）锐化衣服2.1.3修复商品图片对“酒水.jpg”图片使用修补工具去除上面多余的树叶，其具体操作如下。（1）打开素材图片2使用修补工具处理产品背景（2）设置属性并框选树叶2.1.3修复商品图片（3）擦除树叶（4）查看效果2.1.3修复商品图片打开“酒瓶.jp
4、g”图像文件，使用内容感知移动工具将右侧酒瓶复制到左侧的空白区域，其具体操作如下。（1）打开素材图片3使用内容感知工具复制图像（2）设置属性并框选酒瓶2.1.3修复商品图片（3）移动并复制酒瓶（4）查看效果2.1.3修复商品图片打开“冰箱.jpg”图像文件，对绘制的冰箱添加图案，使其更具有质感，其具体操作如下。（1）创建选区4使用图案图章工具美化冰箱（2）设置图案图章工具属性2.1.3修复商品图片（3）替换选区图案（4）添加文字效果2.1.4使用液化滤镜处理图片（1）选择“液化”命令（2）设置“液化”对话框使用液化滤镜对人物进行处理，使人物更加婀娜多姿，其具体操作如下。2.1.4使用液化滤镜处
5、理图片（3）修饰脸型（4）查看效果2.1.5调整图片颜色处理户外旅行包产品图片，在处理时先对旅行包的亮度、对比度和色彩进行调整，使其显示效果更佳，然后为其添加背景，达到吸引消费者点击的目的，其具体操作如下。1.打开素材2.设置亮度和对比度3.设置色阶2.1.5调整图片颜色4.设置曲线5.设置曝光度6.设置色相饱和度2.1.5调整图片颜色7.创建选区8.添加素材效果2.1.6 使用滤镜处理图片使用相关的图像处理工具结合滤镜来修复图片，使其体现镯子的金属质感，其具体操作如下。1.绘制路径2.完成手镯路径绘制2.1.6 使用滤镜处理图片3.替换背景颜色4.进行USM锐化5.查看锐化后的效果6.羽化选
6、区7.涂抹选区2.1.6 使用滤镜处理图片2.1.6 使用滤镜处理图片8.减淡选区9.对选区进行加深处理10.创建的花纹选区图像2.1.6 使用滤镜处理图片11.增加金属质感12.填充黑色13.模糊阴影2.1.6 使用滤镜处理图片14.完成镯子金属质感效果15.高斯模糊手镯2.1.6 使用滤镜处理图片16.制作投影17.完成手镯处理效果18.添加背景2.1.7 抠取素材图片打开“手机壳.jpg”图像文件，使用磁性套索工具抠取手机壳，并将其应用到背景图层中，其具体操作如下。（1）绘制选区1.使用工具抠取简单规则的图片（2）更换背景2.1.7 抠取素材图片（1）创建第一个锚点（2）创建另一个锚点（
7、3）创建其他锚点打开“杯子.jpg”商品图片，使用钢笔工具抠图，并将杂色背景换为黑色背景，其具体操作如下。2.使用钢笔工具抠图2.1.7 抠取素材图片（4）调整锚点（5）转换为选区（6）更改背景2.1.7 抠取素材图片（1）复制图层以抠取婚纱为例讲解半透明商品图片的抠图方法，其具体操作如下。3.使用通道抠图（2）绘制路径2.1.7 抠取素材图片（3）新建通道（4）复制并编辑通道2.1.7 抠取素材图片（5）计算通道（6）载入人物选区2.1.7 抠取素材图片（7）查看婚纱抠图效果（8）载入人物选区2.1.8 为图像添加文本和形状（1）输入并设置文字（2）输入并设置文本在不锈钢炒锅素材中添加文字和
8、形状，使商品图片展现的更加直观，其具体操作如下。2.1.8 为图像添加文本和形状（3）绘制直线（4）输入并设置文本（5）选择形状（6）绘制直线并输入文本2.1.8 为图像添加文本和形状（7）绘制椭圆（8）绘制形状（9）添加文本（10）查看效果422.1 课堂案例：处理商品展示效果内容导航2.2 课堂案例：制作banner区海报2.3 项目实训2.4 课后练习2.2.1通过图层制作海报使用图层来制作海报图像效果，其具体操作如下。（1）绘制矩形（2）添加地板素材（3）添加图像素材（4）调整图层顺序2.2.1通过图层制作海报为海报添加文本，并添加图层样式，其具体操作如下。（1）添加文本（2）设置投影
9、图层样式（3）绘制选区并填充颜色（4）添加文本2.2.1通过图层制作海报（5）绘制矩形并添加文本（6）绘制形状462.1 课堂案例：处理商品展示效果内容导航2.2 课堂案例：制作banner区海报2.3 项目实训2.4 课后练习2.3.1制作海报广告本实训的目标是为某灯饰电商网站设计一个横幅广告。本实训完成后的参考效果如图所示。1实训目标2.3.1制作海报广告横幅广告在网页中多用于传递最新的商品信息，店铺最新优惠活动及店铺理念等。2.专业背景3.操作思路（1）合成图像效果（2）添加文字说明信息2.3.2制作网页广告本实训是为网页设计一张广告推广图片。本实训完成后的参考效果如图所示。1实训目标2
10、.3.1制作海报广告广告推广图主要用于在本网站或其他网页中以悬浮窗的方式显示，增加点击量，是网站或商品推广的主要方式。2.专业背景3.操作思路（1）合成图像（2）添加并设置文本512.1 课堂案例：处理商品展示效果内容导航2.2 课堂案例：制作banner区海报2.3 项目实训2.4 课后练习练习1：制作直通车图片制作一个淘宝直通车图片，要求通过文本来说明网站的保修服务内容。制作时可打开本书提供的素材文件进行操作，参考效果如图所示。要求操作如下。l填充背景，添加素材。l添加并美化文本。练习2：制作“帮助中心”求制作一个本“帮助中心”页面图像，参考效果如图所示。要求操作如下。l打开“bangzhu.psd”素材，在其中设置前景色。l使用渐变工具填充图形。54Thank you!海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务
