网页设计与制作课件 项目3：掌握网页中处理图像时的抠图技巧

网页设计与制作——项目3：掌握网页中处理

图像时的抠图技巧Project3项目3职场情境网页设计中的图像处理环节，抠图是一项不可避免的操作，无论是为单一的图像替换背景，还是为一系列的图像统一背景，这些都需要对图像本身进行抠图来完成。如果是制作网页中图像的合成广告就更少不了抠图了。为此，小艾想使用比较专业的软件对处理中的抠图进行处理，而同事凯程告诉她，Photoshop就是一个在抠图方面具有非常专业的抠图功能，在抠图方面可以将其分为规则形状抠图、简单背景抠图、复杂图形抠图、毛发抠图和半透明图像抠图等操作。接下来，大家可以跟随小艾一起走进Photoshop的抠图环节。大家可以在本节中了解各种抠图方法将拍摄的图像进行背景替换，使图像本身更加凸显，在网页视觉中引起买家的注意力，从而间接的增加销量。学习目标〓知识目标〓掌握在制作网页前为图像抠图的方法。掌握为人物毛发进行抠图的方法。掌握为半透明图像进行抠图的方法。〓技能目标〓学会为规则图像进行抠图。学会为简单背景进行抠图。学会为复杂图形进行抠图。学会为毛发区域进行抠图。学会为半透明玻璃杯进行抠图。〓素质目标〓不忘初心，坚持使命。在为图像进行抠图学习中，充分了解动手操作的重要性。CONTENTS任务1掌握规则形状抠图目录任务2掌握简单背景抠图任务3掌握复杂图形抠图任务4掌握毛发抠图技巧综合实战—设计与制作运动网页课后习题任务5掌握半透明图像抠图技巧任务1掌握规则形状抠图拍照后想将局部区域整体移动到自己喜欢的背景中，就要掌握控图的操作。为图片进行规则几何抠图可分为圆形与矩形。对于规则现状进行抠图时，常用的工具就是选区工具中的矩形选框工具

和椭圆选框工具

。活动1掌握矩形抠图矩形抠图首先要进行选区的创建，在Photoshop中常用来创建矩形选区的工具有矩形选框工具

，矩形选框工具

使用方法是在图像中按住鼠标向对角拖动松开鼠标即可创建选区，如图所示，主要应用在对图像选区要求不太严格的图像中。任务1掌握规则形状抠图拍照后想将局部区域整体移动到自己喜欢的背景中，就要掌握控图的操作。为图片进行规则几何抠图可分为圆形与矩形。对于规则现状进行抠图时，常用的工具就是选区工具中的矩形选框工具

和椭圆选框工具

。活动2掌握正圆抠图正圆抠图首先要进行选区的创建，在Photoshop中常用来创建正圆选区的工具有椭圆选框工具

，使用方法与矩形选框工具

类似，如图所示。选区创建完毕后，将选区内的图像拖曳到新文档中即可完成抠图。任务1掌握规则形状抠图课堂实操—通过矩形选区替换图片背景矩形选框工具

主要应用在对图片选区要求不太严格的矩形图片中，如手机、pad、书籍等抠图对象。具体的抠图方法如下任务2掌握简单背景抠图对于拍摄的照片进行抠图时，如果背景色是单色时，抠图时可以使用魔术橡皮擦

，快速选择工具

、对象选择工具

和魔棒工具

，以上的四种工具可以通过智能运算的方式进行图像的选取。活动1掌握魔术橡皮擦抠图使用魔术橡皮擦工具

可以快速去掉图片的背景。该工具的使用方法非常简单，只要选择要清除的颜色范围，单击即可将其清除，删除背景色后的图片可以直接拖曳到新背景图片中，如图所示。任务2掌握简单背景抠图对于拍摄的照片进行抠图时，如果背景色是单色时，抠图时可以使用魔术橡皮擦

，快速选择工具

、对象选择工具

和魔棒工具

，以上的四种工具可以通过智能运算的方式进行图像的选取。活动2掌握快速选择工具抠图使用快速选择工具

可以快速在图像中对需要选取的部分建立选区，使用方法非常简单，只要选择该工具后，使用指针在图像中拖动即可将鼠标经过的地方创建选区，选区创建完毕后，将选区内的图像拖曳到新文档中完成抠图，如图所示。任务2掌握简单背景抠图对于拍摄的照片进行抠图时，如果背景色是单色时，抠图时可以使用魔术橡皮擦

，快速选择工具

、对象选择工具

和魔棒工具

，以上的四种工具可以通过智能运算的方式进行图像的选取。活动3掌握对象选择工具抠图使用对象选择工具

创建选区时，是非常方便的一个工具，在在需要选取的范围上大致创建一个选取范围，可以是矩形选区，也可以是不规则选区，松开鼠标后即可将需要的内容进行选择，选区创建完毕后可以将其进行色相的调整以此来改变色调，如图所示。任务2掌握简单背景抠图对于拍摄的照片进行抠图时，如果背景色是单色时，抠图时可以使用魔术橡皮擦

，快速选择工具

、对象选择工具

和魔棒工具

，以上的四种工具可以通过智能运算的方式进行图像的选取。活动4掌握魔术棒工具抠图使用魔棒工具

能选取图像中颜色相同或相近的像素，像素之间可以是相连的也可以是不连续的。通常情况下使用魔棒工具

可以快速创建图像颜色相近像素的选区，创建选区的方法非常简单，只要在图像中某个颜色像素上单击，系统便会自动以该选取点为样本创建选区，反选选区后可以移动图像到新背景中，如图所示。任务2掌握简单背景抠图课堂实操—通过快速选择工具为图像更换背景。本次的课堂实操为快速为拍摄的羽绒服素材更换背景，将其作为网页中的一个图像广告宣传。具体的抠图方法如下任务3掌握复杂图形抠图拍摄对象的类型不同形状也会有所不同，对于不规整形状的宝贝进行抠图时，就需要使用一些操作比较复杂的工具来完成，本小节为大家介绍一下磁性套索工具

、多边形套索工具

和钢笔工具

在抠图时的使用方法活动1掌握多边形套索工具抠图多边形套索工具

通常用来创建较为精确的选区。创建选区的方法也非常简单，在不同位置上单击鼠标，即可将两点以直线的形式连接，起点与终点相交时单击即可得到选区，如图所示。实践经验：使用多边形套索工具

绘制选区时，按住“Shift”键可沿水平、垂直或与之呈

45°角的方向绘制选区；在终点没有与起始点重叠时，双击鼠标或按住“Ctrl”键的同时单击鼠标即可创建封闭选区。任务3掌握复杂图形抠图拍摄对象的类型不同形状也会有所不同，对于不规整形状的宝贝进行抠图时，就需要使用一些操作比较复杂的工具来完成，本小节为大家介绍一下磁性套索工具

、多边形套索工具

和钢笔工具

在抠图时的使用方法活动2掌握磁性套索工具抠图磁性套索工具

可以在图像中自动捕捉具有反差颜色的图像边缘，并以此来创建选区，此工具常用在背景复杂但边缘对比度较强烈的图像中。创建选区的方法也非常简单，在图像中选择起点后沿边缘拖动即可自动创建选区，如图所示。实践经验：使用磁性套索工具

创建选区时，单击鼠标也可以创建矩形标记点，用来确定精确的选区；按键盘上的“Delete”键或“Backspace”键，可按照顺序撤销矩形标记点；按“Esc”键可消除未完成的选区。任务3掌握复杂图形抠图课堂实操—通过磁性套索工具与多边形套索工具结合为图像抠图本节为大家讲解使用多边形套索工具

和磁性套索工具

相结合的方法对产品进行创建选区并抠图，由于本节主要为大家讲解这两个工具相配合使用进行抠图，所以为大家选取了一个音响素材作为操作对象，将其抠图后作为网页中的一个广告图像，具体操作过程如下。任务3掌握复杂图形抠图拍摄对象的类型不同形状也会有所不同，对于不规整形状的宝贝进行抠图时，就需要使用一些操作比较复杂的工具来完成，本小节为大家介绍一下磁性套索工具

、多边形套索工具

和钢笔工具

在抠图时的使用方法活动3掌握钢笔工具抠图使用钢笔工具

可以精确地绘制出直线或光滑的曲线，还可以创建形状图层。该工具的使用方法也非常简单。只要在页面中选择一个点单击，再移动到下一点单击，就会创建直线路径；在下一点按下鼠标并拖动会创建曲线路径，按”Enter”键绘制的路径会形成不封闭的路径；在绘制路径的过程中，当起始点的锚点与终点的锚点相交时，此时单击鼠标，系统会将该路径创建成封闭路径1创建路径任务3掌握复杂图形抠图拍摄对象的类型不同形状也会有所不同，对于不规整形状的宝贝进行抠图时，就需要使用一些操作比较复杂的工具来完成，本小节为大家介绍一下磁性套索工具

、多边形套索工具

和钢笔工具

在抠图时的使用方法活动3掌握钢笔工具抠图2路径转换为选区任务3掌握复杂图形抠图本节为大家讲解使用钢笔工具

为复杂的女鞋进行抠图，在抠图的过程中主要了解钢笔工具

在实际操作中的使用以及技巧。具体的操作过程如下：课堂实操—通过钢笔工具为女鞋抠图换背景素养小课堂在为网页图像进行抠图处理中，要积极调动我们自己的动手操作能力，在实际操作中懂得了把所学知识会运用到操作中的重要性，懂得了多学多练才是提升自身技能的最好途径，在学习中还要时刻灌输爱国、强国在生活中的重要性。懂得了少年强、则中国强的道理。以此来弘扬中华优秀传统文化，发扬爱国精神。任务4掌握毛发抠图技巧拍摄有模特或动物参与的图片时，抠图时会遇到人物的发丝或动物的毛发区域，如果使用多边形套索工具

或钢笔工具

进行抠图时，会发现头发区域会出现背景抠不干净的效果，如图所示课堂实操—通过选择并遮住为卷发模特抠图选区创建完毕后，可以通过“选择并遮住”命令，修整发丝处的背景，具体的操作如下：任务5掌握半透明图像抠图技巧在

Photoshop中，对半透明对象进行抠图，可以在“通道”面板中完成。使用“通道”进行抠图时，通常需要应用一些工具结合“通道”面板进行操作。在操作完毕之后，必须要把编辑的通道转换为选区，再通过移动工具

将选区内的图片拖动到新背景中完成抠图，对通道进行编辑时主要使用画笔工具

，通道中黑色部分为保护区域，白色区域为可编辑的位置，灰色区域将会创建半透明效果，如图所示涂抹颜色彩色通道显示状态载入选区黑色添加通道覆盖区域添加到选区白色从通道中减去从选区中减去灰色创建半透明效果产生的选区为半透明任务5掌握半透明图像抠图技巧课堂实操—通过通道为透明玻璃酒瓶抠图本节为大家讲解使用钢笔工具

为酒瓶创建路径，再在“通道”中为酒瓶玻璃部分进行半透明抠图。具体的操作过程如下：综合实战—设计与制作运动网页实战训练要求掌握新建网页文档的大小掌握渐变具填充渐变色将其作为背景对提供的素材进行精细的抠图掌握绘制自定义形状图形键入文字并进行左对齐排版实战素材素材文件：素材/项目3/跳高、打篮球、运动小人，如图3所示。

项目编号3项目名称综合实战—设计与制作运动网页时间地点目的：实践网页设计与制作的一般流程课堂实践：运动主题，新建、打开、抠图可以通过多种方法进行抠图、设计与制作，完成一个运动网页首页。考核标准：主题明确，结构清晰，符合网页要求。10分色彩线条搭配和谐。10分图片抠图细致不要有毛边10分文字与图片版式设置平衡10分整体效果呈现得体10分内容可粘贴：评价评分：指导教师签字：任务单综合实战—设计与制作运动网页实战效果图效果文件：源文件/项目3/综合实战—设计与制作运动网页，如图所示。课后习题一．填空题使用磁性套索工具

创建选区时，单击鼠标也可以创建矩形标记点，用来确定精确的选区；按键盘上的

键或

Backspace键，可按照顺序撤销矩形标记点；按

Esc键可消除未完成的选区。磁性套索工具

进行抠图时，按住

键后，会将磁性套索工具

变为多边形