第2章使用Photoshop编辑网页图像课件

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