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