《网店美工》高职 全套教学课件

网店美工全套可编辑PPT课件项目一认识Photoshop软件·知识目标·技能目标·素质目标熟悉Photoshop软件的工作界面。（1）熟练运用Photoshop软件的工作界面。（2）理解图层的含义。（1）培养做事细心、耐心的行为习惯。（2）培养自主学习的能力。01Photoshop软件界面认识任务一Photoshop软件界面认识一、案例引入及相关知识我们在上网购物的时候会发现商品的图片通常十分美观，还有一些图片上有营销的文字信息。产品在图片氛围和文案的衬托下更加吸引人，能引起我们的购买欲望。那这些美化的图片、精心设计的产品照片都是用什么工具完成的呢？电商网站的图片美化，照相馆的摄影照片后期修图，路边广告牌的海报设计……这些图片的设计美化，大多是设计师们用Photoshop软件完成的。Photoshop软件是一款专门用来处理图像的工具，我们可以使用这款工具针对图像进行各种修饰、美化，以达到自己想要的效果。二、资源准备任务一Photoshop软件界面认识三、实践操作实践操作1-1:Photoshop软件界面认识1.任务要求（1）认识软件工作界面。（2）熟悉常用工具。（3）熟悉图层样式。2.实施步骤步骤1双击桌面上的Photoshop图标，打开软件。步骤2单击“新建”按钮，如图1-1所示，弹出新建窗口，高度和宽度均设置为800像素，分辨率为72像素/英寸，颜色模式为RGB颜色，然后单击“创建”按钮，如图1-2所示。工作界面如图1-3所示。（1）菜单栏：几乎包括Photoshop中所有的功能。（2）工具箱：包括Photoshop中所有的工具。（3）属性栏：当选择不同工具的时候，会出现不同的属性。（4）图层窗口：显示操作步骤。（5）画板：操作区域。任务一Photoshop软件界面认识三、实践操作实践操作1-1:Photoshop软件界面认识图1-1新建画板任务一Photoshop软件界面认识三、实践操作实践操作1-1:Photoshop软件界面认识图1-2画板参数设置任务一Photoshop软件界面认识三、实践操作实践操作1-1:Photoshop软件界面认识图1-3工作界面任务一Photoshop软件界面认识三、实践操作实践操作1-1:Photoshop软件界面认识图1-4工具箱步骤3将鼠标放在工具箱的某一工具上方，系统将显示该工具名称。如果工具的右下角有三角符号，就表示它是组合工具，右击或长按三角符号，就会显示包含的其他所有工具，如图1-4所示。任务一Photoshop软件界面认识三、实践操作实践操作1-1:Photoshop软件界面认识图1-5复位基本功能步骤4界面的右侧是一些活动面板，包括图层、属性、颜色、历史记录等，这些活动面板可缩小、关闭或者随意挪动。所有被关闭的活动面板，都可以在窗口里找到使之再出现。如果觉得被随意挪动的活动面板使界面变得凌乱，我们可以通过一个操作迅速将界面恢复到默认设置，即执行菜单栏命令“窗口”→“工作区”→“复位基本功能”，如图1-5所示。02图层认识——柠檬主图制作任务二图层认识——柠檬主图制作一、案例引入及相关知识我们通过观察柠檬主图（图1-6）来理解Photoshop中图层的含义，掌握Photoshop软件的基本操作流程。图层是Photoshop中最基本也是最重要的概念之一。图层我们可以理解为一张一张上下叠起来的透明纸，没有绘制内容的区域是透明的，透过透明区可以看到下面图层的内容，将在每一个图层上绘制的内容叠加起来就构成了一幅完整的图像。二、资源准备图1-6柠檬主图任务二图层认识——柠檬主图制作三、实践操作实践操作2-1：图层认识——柠檬主图制作1.任务要求（1）完成柠檬主图的制作。（2）熟悉软件的工作界面、操作基本流程以及图层的含义。2.实施步骤步骤1双击桌面上的Photoshop图标打开Photoshop软件，单击“打开”按钮，如图1-7所示。选择素材文件夹中的“背景.jpg”，效果如图1-8所示。图1-7单击“打开”按钮任务二图层认识——柠檬主图制作三、实践操作实践操作2-1：图层认识——柠檬主图制作图1-8打开素材任务二图层认识——柠檬主图制作三、实践操作实践操作2-1：图层认识——柠檬主图制作图1-9放置素材步骤2使用工具箱中的移动工具分别拖入素材文件“柠檬”“文字”“叶子”放置于背景画板上方。按Enter键确定置入图像，如图1-9所示。任务二图层认识——柠檬主图制作三、实践操作实践操作2-1：图层认识——柠檬主图制作图1-10图层上下关系步骤3

使用移动工具移动背景画板上的“叶子”“文字”“柠檬”三个图层至合适位置，图层的上下遮挡关系调整，只需在“图层”面板中选中要调整位置的图层，然后按住鼠标左键不放，将其拖至指定位置并释放鼠标左键即可，如图1-10所示。任务二图层认识——柠檬主图制作三、实践操作实践操作2-1：图层认识——柠檬主图制作图1-11自由变换步骤4

选择移动工具，单击“文字”图层。选中该图层后，执行菜单栏命令“编辑”→“自由变换”（Ctrl+T），如图1-11所示。图像的周围出现变换框，将光标移至四周任意一个控制点上，按住鼠标左键不放拖动即可放大或缩小该图像。缩放至合适大小，松开鼠标，按Enter键确定。最终效果如图1-12所示。任务二图层认识——柠檬主图制作三、实践操作实践操作2-1：图层认识——柠檬主图制作图1-12柠檬主图最终效果任务二图层认识——柠檬主图制作三、实践操作实践操作2-1：图层认识——柠檬主图制作图1-13存储为步骤5执行菜单栏命令“文件”→“存储为”，如图1-13所示，存储时注意定义文件名称、文件存储的位置以及文件的格式。文件名称：自定；位置：自定；格式：psd（源文件）/jpeg（图片）。保存完成后就可在保存的文件夹中找到该文件的源文件和图片。网店美工项目二商品卖点图制作·知识目标·技能目标·素质目标（1）掌握商品卖点图的设计要点、具体设计步骤。（2）掌握Photoshop软件中的形状工具以及图层样式的使用。（1）根据需要设计制作出商品卖点图。（2）熟练使用Photoshop中的相关工具。培养理论联系实际的创新能力。01精油卖点图制作任务一精油卖点图制作一、案例引入及相关知识消费者在购买商品时，除了注重商品的美观性外，还十分注重商品的实用性，所以我们需要制作商品的功能展示图。这个过程中既要保证图像的美观性，又要突出商品的卖点、特征，以此来刺激消费者的购买欲望。二、资源准备三、实践操作实践操作2-1：精油卖点图制作1.任务要求（1）图片设计尺寸：750×600像素，分辨率：72像素/英寸，颜色模式：RGB颜色。（2）产品卖点突出。任务一精油卖点图制作步骤1打开Photoshop软件，新建大小为750×600像素，分辨率为72像素/英寸，名称为“精油卖点图”的文件，操作步骤如图2-1所示。三、实践操作实践操作2-1：精油卖点图制作图2-1新建画板“精油卖点图”的操作步骤任务一精油卖点图制作步骤2使用工具箱中的移动工具拖入素材文件“精油.png”，放置在画板左方，如图2-2所示。三、实践操作实践操作2-1：精油卖点图制作图2-2拖入素材文件“精油.png”任务一精油卖点图制作步骤3在“图层”面板中，双击“精油”图层，弹出“图层样式”窗口，勾选“投影”前的复选框，在右侧调整投影参数，不透明度：59%，角度：135度，距离：3像素，扩展：0%，大小：5像素，如图2-3所示。三、实践操作实践操作2-1：精油卖点图制作图2-3设置“精油”图层投影任务一精油卖点图制作步骤4选择矩形工具,在属性栏中设置填充为白色（#ffffff），描边为关闭，按住鼠标左键不放，在图像窗口中绘制与画板大小一致的矩形，如图2-4所示。三、实践操作实践操作2-1：精油卖点图制作图2-4绘制白色矩形任务一精油卖点图制作步骤5在“图层”面板中双击“矩形1”图层，弹出“图层样式”窗口，在左侧勾选“内阴影”前的复选框，在右侧调整内阴影参数，混合模式：正片叠底，颜色为#bd7b40，不透明度：82%，角度：120度，距离：9像素，阻塞：5%，大小：51像素，如图2-5所示，然后单击“确定”按钮。三、实践操作实践操作2-1：精油卖点图制作图2-5设置“矩形1”图层内阴影任务一精油卖点图制作步骤6在“图层”面板上方将“正常”改为“正片叠底”，如图2-6所示。三、实践操作实践操作2-1：精油卖点图制作图2-6正片叠底1任务一精油卖点图制作步骤7在工具箱中选择文字工具，在画板上方输入“5大优势，让肌肤水润光泽”文案，文本格式为方正中粗雅宋、45点、#ba5e0d。再输入“有效保湿抗衰老，让肌肤恢复健康光泽”文案，文本格式为宋体、20点、#ba5e0d，如图2-7所示。三、实践操作实践操作2-1：精油卖点图制作图2-7输入文案1任务一精油卖点图制作步骤8在工具箱中选择椭圆工具，按住Shift键，绘制正圆，颜色：#724329，如图2-8所示。三、实践操作实践操作2-1：精油卖点图制作图2-8绘制正圆1任务一精油卖点图制作步骤9在工具箱中选择圆角矩形工具，绘制圆角矩形，颜色：#a76130。选择文字工具，输入“天然健康不油腻，清爽一整天”文案，文本格式为方正中粗雅宋、20点、白色（#ffffff），再选择文字工具，输入“1”文案，将文案分别放置在圆角矩形和圆形上方，效果如图2-9所示。三、实践操作实践操作2-1：精油卖点图制作图2-9输入文案2任务一精油卖点图制作步骤10在工具箱中选择移动工具，选中优势1相关图层，按住Alt键，鼠标拖出复制该4个图层，重复4次，以复制4组优势。调整到合适的大小和位置，效果如图2-10所示。三、实践操作实践操作2-1：精油卖点图制作图2-10复制优势1相关图层任务一精油卖点图制作步骤11在工具箱中选择文字工具，单击需要更改的文字部分，删除后，输入新文案。精油卖点图最终效果如图2-11所示。三、实践操作实践操作2-1：精油卖点图制作图2-11精油卖点图最终效果02价格标签制作任务二价格标签制作一、案例引入及相关知识好的价格标签图，会让整张图更有美感，提升图片的整体氛围感，也更容易让消费者注意到价格。接下来我们利用Photoshop软件制作一款价格标签图，以此来熟悉软件中的形状工具、文字工具、图层样式等功能。二、资源准备三、实践操作实践操作2-2：价格标签制作1.任务要求（1）标签大小：1000×1000像素，颜色模式：RGB颜色，分辨率：72像素/英寸。（2）标签效果引人注目。任务二价格标签制作三、实践操作实践操作2-2：价格标签制作2.实施步骤步骤1打开Photoshop软件，新建大小为1000×1000像素，分辨率为72像素/英寸，名称为“价格标签”的文件，如图2-12所示。图2-12新建画板“价格标签”任务二价格标签制作三、实践操作实践操作2-2：价格标签制作2.实施步骤步骤2在工具箱中选择椭圆工具，按住Shift键在画板上绘制一个正圆，颜色：#e72f60，如图2-13所示。图2-13绘制正圆2任务二价格标签制作三、实践操作实践操作2-2：价格标签制作2.实施步骤步骤3在工具箱中选择椭圆工具，按住Shift键在画板上再绘制一个小一点儿的白色正圆。在工具箱中选择移动工具，按住Shift键在“图层”面板中选中两个正圆图层，在属性栏中设置为垂直居中对齐，如图2-14所示。图2-14垂直居中对齐任务二价格标签制作三、实践操作实践操作2-2：价格标签制作2.实施步骤步骤4在“图层”面板中用移动工具选中白色圆，单击鼠标右键，在弹出的菜单中选择“栅格化图层”，效果如图2-15所示。图2-15栅格化图层任务二价格标签制作三、实践操作实践操作2-2：价格标签制作2.实施步骤步骤4在工具箱中选择选框工具，框中白色圆下半部分，按Delete键删除，效果如图2-16所示。图2-16背景效果任务二价格标签制作三、实践操作实践操作2-2：价格标签制作2.实施步骤步骤5在工具箱中选择文字工具，输入“低至”“89”“￥”“前500名领券”文案，文本格式调整为，字体：黑体，大小：54/130/54/69，颜色：灰色（#575454）、红色（#b8183e）、灰色（#575454）、白色（#ffffff）。将所有文案放置在合适位置，效果如图2-17所示。图2-17输入文案3任务二价格标签制作三、实践操作实践操作2-2：价格标签制作2.实施步骤步骤6在“图层”面板中选中“89”文字图层，双击图层，弹出“图层样式”窗口，在左侧勾选“投影”前的复选框，在右侧调整投影参数，颜色：黑色（#000000），角度：135度，距离：3像素，扩展：0%，大小：5像素，然后单击“确定”按钮，如图2-18所示。图2-18设置“89”文字图层投影任务二价格标签制作三、实践操作实践操作2-2：价格标签制作2.实施步骤步骤7在工具箱中选择椭圆工具，在标签正下方绘制灰色（#626262）椭圆，效果如图2-19所示。图2-19绘制灰色椭圆任务二价格标签制作三、实践操作实践操作2-2：价格标签制作2.实施步骤步骤8执行菜单栏命令“窗口”→“属性”→“蒙版”，设置羽化为8像素，效果如图2-20所示。图2-20羽化任务二价格标签制作三、实践操作实践操作2-2：价格标签制作2.实施步骤步骤9价格标签最终效果如图2-21所示。图2-21价格标签最终效果网店美工项目三淘宝主图制作·知识目标·技能目标·素质目标（1）掌握淘宝主图的设计要点、具体设计步骤。（2）掌握Photoshop软件中的钢笔工具以及图层样式的使用。（1）能根据需要设计、制作出店铺产品主图。（2）熟练使用Photoshop中的相关工具。培养审美意识。01钢笔工具抠图任务一钢笔工具抠图一、案例引入及相关知识摄影师拍的产品图通常都会带有背景，如果我们要为产品设计主图，大多需要将产品原本的背景去掉，只留下产品图，然后换上新的背景，加上文案并排版。去掉背景留下产品图的这个过程就是抠图。钢笔工具可以绘制任意形状路径，因此，我们常用钢笔工具抠取图像。二、资源准备三、实践操作实践操作3-1：钢笔工具抠图1.任务要求（1）掌握钢笔工具和钢笔工具下拉工具及相应属性。（2）将男鞋从图片中抠取出来并保存为png格式文件。任务一钢笔工具抠图步骤1打开Photoshop软件，在素材文件夹中找到“男鞋”素材拖入软件，在“图层”面板中复制（Ctrl+J）该图层并隐藏背景图层，如图3-1所示。三、实践操作实践操作3-1：钢笔工具抠图图3-1打开“男鞋”素材任务一钢笔工具抠图步骤2在工具箱中选择钢笔工具，在画板上沿鞋子图像边缘绘制路径。绘制过程中，单击鼠标左键，将创建第1个锚点，将鼠标指针移动到下一个位置再单击鼠标左键，则创建第2个锚点，两个锚点之间自动以直线连接。当需要绘制弧线路径时，单击建立锚点并按住鼠标左键不放，拖动鼠标，建立曲线段和曲线锚点。此时会多出一条线段和方形的锚点，按住Alt键并拖住鼠标可对方形锚点进行控制，如图3-2所示。三、实践操作实践操作3-1：钢笔工具抠图图3-2使用钢笔工具抠图任务一钢笔工具抠图步骤3重复此动作，将鞋子图像完全用路径绘制出来，此过程需要注意路径应是闭合的（图3-3），绘制路径时尽可能少给锚点，从而使得路径更顺滑流畅。细节微调可使用钢笔工具下方的添加/删除锚点工具。三、实践操作实践操作3-1：钢笔工具抠图图3-3闭合路径任务一钢笔工具抠图步骤4在画板中单击鼠标右键，选择“建立选区”（Ctrl+Enter），回到选区工具，在画板中单击鼠标右键，选择反向。直接按Delete键删除选区部分，如图3-4所示。三、实践操作实践操作3-1：钢笔工具抠图图3-4建立选区、最终效果步骤5执行菜单栏命令“文件”→“存储为”，文件名和存储路径自定，格式选择png，保存即可。02男鞋主图设计任务二男鞋主图设计一、案例引入及相关知识当我们登录淘宝想买某一款产品时，会看见淘宝推荐给我们这一款产品的不同店铺的不同图片，大小一致的这些图，就是产品主图。我们会选择自己更喜欢的、更能吸引我们的图片点击进去，这时主图就完成了它的使命，引导我们去它的店铺，这是非常关键的一步——引流。产品主图是首先映入买家眼帘的商品图片，一般出现于商品搜索页、店铺首页和商品详情页的顶端。那么什么样的主图更能吸引消费者点击，我们又应该如何完成主图的制作呢？一张吸引人的主图都有这样一些特点：①卖点清晰有创意；②商品的大小适中；③宜简不宜繁；④细节丰富。二、资源准备三、实践操作实践操作3-2：男鞋主图设计1.任务要求（1）店铺商品主图的尺寸为800×800像素。（2）店铺商品主图背景与文字的关系要合理。（3）店铺商品主图文字的排版要美观且主次关系处理得当。任务二男鞋主图设计三、实践操作实践操作3-2：男鞋主图设计2.实施步骤步骤1打开Photoshop软件，在菜单栏中执行“文件”→“新建”命令，在弹出的“新建文档”对话框中新建宽度为800像素、高度为800像素、颜色模式为“RGB颜色”、名称为“男鞋主图”的空白画布，如图3-5所示。图3-5新建“男鞋主图”空白画布任务二男鞋主图设计三、实践操作实践操作3-2：男鞋主图设计2.实施步骤步骤2前景色设置为“#ffff01”，按Alt+Delete组合键，将背景色填充为前景色。使用钢笔工具在画板底部绘制波浪图形，颜色为“#fa2448”，效果如图3-6所示。图3-6背景填充任务二男鞋主图设计三、实践操作实践操作3-2：男鞋主图设计2.实施步骤步骤3在素材文件夹中找到“男鞋”素材，直接用鼠标拖入Photoshop“男鞋主图”画板中，调整位置及大小，在“图层”面板中双击男鞋所在图层，弹出“图层样式”对话框，勾选“投影”前的复选框，在右侧面板中设置参数，做出男鞋的投影效果，如图3-7所示。图3-7设置男鞋图层投影任务二男鞋主图设计三、实践操作实践操作3-2：男鞋主图设计2.实施步骤步骤4选择工具箱中的文字工具，在画板中间位置输入“国庆矩划算”“全场折起”“5”。注意调整文字的大小、位置、颜色、字体等，如图3-8所示。使用钢笔工具沿文字外边缘绘制底纹，颜色为“#ff002a”，此时可发现文本显示更加突出。图3-8文案制作任务二男鞋主图设计三、实践操作实践操作3-2：男鞋主图设计2.实施步骤步骤5在“图层”面板中双击底纹所在图层，弹出“图层样式”对话框，勾选“投影”前的复选框，在右侧面板中设置投影参数，其中颜色为“#553c3c”，如图3-9所示。图3-9设置底纹图层投影任务二男鞋主图设计三、实践操作实践操作3-2：男鞋主图设计2.实施步骤步骤5投影效果如图3-10所示。图3-10投影效果任务二男鞋主图设计三、实践操作实践操作3-2：男鞋主图设计2.实施步骤步骤6在“图层”面板中双击文字“5”的图层，弹出“图层样式”对话框，勾选“投影”前的复选框，在右侧面板中设置投影参数。再勾选“渐变叠加”前的复选框，在右侧面板中设“#fe8800”“#fdff13”线性渐变，如图3-11所示。图3-11添加渐变任务二男鞋主图设计三、实践操作实践操作3-2：男鞋主图设计2.实施步骤步骤6渐变效果如图3-12所示。图3-12渐变效果任务二男鞋主图设计三、实践操作实践操作3-2：男鞋主图设计2.实施步骤步骤7在素材文件夹中找到“装饰”文件，拖入“男鞋主图”画面中，调整其大小及位置。男鞋主图最终效果如图3-13所示。图3-13男鞋主图最终效果网店美工项目四通道抠图·知识目标·技能目标·素质目标（1）掌握淘宝主图的设计要点、具体设计步骤。（2）掌握Photoshop软件中的钢笔工具以及图层样式的使用。（1）能根据需要设计、制作出店铺产品主图。（2）熟练使用Photoshop中的相关工具。·素质目标培养审美意识。01头发丝抠图任务一头发丝抠图一、案例引入及相关知识当我们想要抠取头发飞扬的女性图像时，我们可以使用Photoshop中的通道抠图。使用通道抠图，主要是利用图像的色相差别或者明度差别，配合不同的方法给图像建立选区。一张RGB模式的图像是以红、绿、蓝三原色的数值来表示的，而在通道中，一张RGB模式的图就是将图片中的各个颜色以单色的形式分别显示在通道面板上，而且每种单色都将记录每一种颜色的不同亮度。简单地说，就是通道中只存在一种颜色（红、绿、蓝）的不同亮度，是一种灰色图像。在通道里，颜色越亮说明此颜色的数值越高，正是由于这一特点，我们可以利用通道亮度的反差进行抠图，因为它是选择区域的映射。在通道里，白色代表有，黑色代表无，图像在通道中是由黑、白、灰三种亮度来显示的，也可以说，如果我们想将图中的某部分抠出来，就在通道里将这部分调整为白色。二、资源准备三、实践操作实践操作4-1：头发丝抠图1.任务要求（1）抠出头发飞扬女性图像。（2）替换为其他背景。任务一头发丝抠图步骤1打开Photoshop软件，拖入素材文件“头发丝抠图.jpg”。按Ctrl+J快捷键复制图层，背景图层隐藏，如图4-1所示。三、实践操作实践操作4-1：头发丝抠图图4-1复制图层任务一头发丝抠图步骤2在“图层”面板旁边选中“通道”面板（如果没有，可在菜单栏的“窗口”中找到），在红、绿、蓝三个单色通道中选择黑白对比最明显的红通道，单击鼠标右键复制该通道，效果如图4-2所示。三、实践操作实践操作4-1：头发丝抠图图4-2复制红通道任务一头发丝抠图步骤3此时我们可以看见头发丝为深色，背景为浅色，那么我们需要将图像中所有需要的区域都调为深色甚至黑色，不需要的区域都调为浅色甚至白色，如图4-3所示。三、实践操作实践操作4-1：头发丝抠图图4-3选中红通道任务一头发丝抠图步骤3用钢笔工具抠出人物面部及身体，填充为黑色，按Ctrl+M快捷键调出曲线工具，加大深浅对比，使用工具箱中的减淡工具/加深工具分别减淡/加深浅色和深色区域，如图4-4所示。三、实践操作实践操作4-1：头发丝抠图图4-4抠取人物面部及身体任务一头发丝抠图步骤4执行菜单栏命令“图像”→“调整”→“反相”（Ctrl+Shift+I），使图像黑白区域反过来，如图4-5所示。三、实践操作实践操作4-1：头发丝抠图图4-5反相任务一头发丝抠图步骤５单击“通道”面板下方的将通道作为选区载入按钮，此时白色的人物部分已作为选区了，如图4-6所示。三、实践操作实践操作4-1：头发丝抠图图4-6将通道作为选区载入1任务一头发丝抠图步骤６单击“RGB”图层，如图4-7所示，再回到“图层”面板，此时会发现人物已经被抠下来套在选区里面了，效果如图4-8所示，按Ctrl+J快捷键复制选区内容，隐藏下方图层即可，如图4-9所示。三、实践操作实践操作4-1：头发丝抠图图4-7单击“RGB”图层1任务一头发丝抠图步骤６单击“RGB”图层，如图4-7所示，再回到“图层”面板，此时会发现人物已经被抠下来套在选区里面了，效果如图4-8所示，按Ctrl+J快捷键复制选区内容，隐藏下方图层即可，如图4-9所示。三、实践操作实践操作4-1：头发丝抠图图4-8回到原图层任务一头发丝抠图步骤６单击“RGB”图层，如图4-7所示，再回到“图层”面板，此时会发现人物已经被抠下来套在选区里面了，效果如图4-8所示，按Ctrl+J快捷键复制选区内容，隐藏下方图层即可，如图4-9所示。三、实践操作实践操作4-1：头发丝抠图图4-9隐藏下方图层任务一头发丝抠图步骤７在“图层”面板中新建图层，选中新建的“图层3”，在工具栏中选择设置前景色，颜色为白色（#ffffff）。选中“图层3”，按住鼠标左键不放调整图层位置，将其放置在人物“图层2”下方，如图4-10所示。三、实践操作实践操作4-1：头发丝抠图图4-10添加背景02火焰抠图任务二火焰抠图一、案例引入及相关知识当我们想要抠取火焰图像时，同样可以使用通道抠图。不过在抠图的过程中要注意，火焰本身为浅色，背景为深色，前面讲过，在通道里，白色代表有，黑色代表无，所以我们不需要再反相，调整好明暗，直接将通道载入选区即可。二、资源准备三、实践操作实践操作4-2：火焰抠图1.任务要求将火焰抠取出来换新背景。任务二火焰抠图三、实践操作实践操作4-2：火焰抠图2.实施步骤步骤1打开Photoshop软件，拖入素材文件“火焰素材.jpg”，按Ctrl+J快捷键复制图层，背景图层隐藏，如图4-11所示。图4-11打开火焰素材任务二火焰抠图三、实践操作实践操作4-2：火焰抠图2.实施步骤步骤2在“图层”面板旁边选中“通道”面板（如果没有，可在菜单栏的“窗口”中找到），在红、绿、蓝三个单色通道中选择黑白对比最明显的绿通道，单击鼠标右键复制该通道，如图4-12所示。图4-12复制绿通道任务二火焰抠图三、实践操作实践操作4-2：火焰抠图2.实施步骤步骤3此时我们可以看见背景为深色，火焰为浅色，我们需要将图像中火焰颜色减淡，背景颜色加深，按Ctrl+M快捷键调出曲线工具，加大深浅对比。使用工具箱中的减淡工具/加深工具分别减淡/加深深色和浅色区域，如图4-13所示。图4-13减淡/加深颜色对比任务二火焰抠图三、实践操作实践操作4-2：火焰抠图2.实施步骤步骤4单击“通道”面板下方的将通道作为选区载入按钮，此时火焰图像已作为选区了，如图4-14所示。图4-14将通道作为选区载入2任务二火焰抠图三、实践操作实践操作4-2：火焰抠图2.实施步骤步骤5单击“RGB”图层，如图4-15所示，再回到“图层”面板，此时会发现火焰已经被抠下来套在选区里面了，按Ctrl+J快捷键复制选区内容，隐藏下方图层即可，最终效果如图4-16所示。图4-15单击“RGB”图层2任务二火焰抠图三、实践操作实践操作4-2：火焰抠图2.实施步骤步骤5单击“RGB”图层，如图4-15所示，再回到“图层”面板，此时会发现火焰已经被抠下来套在选区里面了，按Ctrl+J快捷键复制选区内容，隐藏下方图层即可，最终效果如图4-16所示。图4-16火焰抠图最终效果网店美工项目五图像污点处理·知识目标·技能目标·素质目标（1）掌握污点修复画笔工具。（2）掌握美化图片的具体设计步骤。（1）能根据需要美化图片。（2）熟练使用Photoshop中的相关工具。（1）培养创新和解决问题的思维能力。（2）培养对工作的专注，细致入微地关注细节。01人物面部污点处理任务一人物面部污点处理一、案例引入及相关知识我们拍摄的图片中难免会有一些污点，比如背景杂乱，面部的痣、伤疤，衣服上的褶皱等，这时候我们就可以用Photoshop软件对污点进行处理。本任务我们用污点修复画笔工具、修复画笔工具、修补工具、仿制图章工具对同一张图的污点进行处理。二、资源准备三、实践操作实践操作5-1：人物面部污点处理1.任务要求处理掉人物面部所有污点。任务一人物面部污点处理步骤1启动Photoshop软件，打开素材文件“模特.jpg”，按Ctrl+J快捷键复制图层，背景图层隐藏，如图5-1所示。三、实践操作实践操作5-1：人物面部污点处理图5-1复制图层任务一人物面部污点处理步骤2方法1：选择污点修复画笔工具，在属性栏调整画笔大小为40（略大于污点），然后单击污点位置，可以看见污点已经被处理，重复该步骤将面部所有污点处理完毕，如图5-2所示。三、实践操作实践操作5-1：人物面部污点处理图5-2用污点修复画笔工具处理污点任务一人物面部污点处理步骤3方法2：选择修复画笔工具，在属性栏调整画笔大小为40（略大于污点），长按Alt键，鼠标单击无污点位置，松开Alt键，鼠标单击污点位置，可以看见污点已经被处理，重复该步骤将面部所有污点处理完，如图5-3所示。三、实践操作实践操作5-1：人物面部污点处理图5-3用修复画笔工具处理污点任务一人物面部污点处理步骤4方法3：选择修补工具，鼠标框中一个污点，然后拖动污点至旁边无污点位置，可以看见污点已经被处理，重复该步骤将面部所有污点处理完，如图5-4所示。三、实践操作实践操作5-1：人物面部污点处理图5-4用修补工具处理污点任务一人物面部污点处理步骤５方法4：选择仿制图章工具，在属性栏调整画笔大小为40（略大于污点），长按Alt键，鼠标单击无污点位置，松开Alt键，鼠标单击污点位置，可以看见污点已经被处理，重复该步骤将面部所有污点处理完，如图5-5所示。三、实践操作实践操作5-1：人物面部污点处理图5-5用仿制图章工具处理污点02内容感知移动工具运用任务二内容感知移动工具运用一、案例引入及相关知识当空旷的背景中有一棵树，我们想快速移动这棵树时，我们可以使用内容感知移动工具。该工具的主要用途：将图像移至其他区域时，可以重组图像，并自动使图像与背景融合。二、资源准备三、实践操作实践操作5-2：内容感知移动工具运用1.任务要求快速对图中的盘子进行移动并不破坏整个图像。任务二内容感知移动工具运用三、实践操作实践操作5-2：内容感知移动工具运用2.实施步骤步骤1启动Photoshop软件，打开素材文件“早餐.jpg”，按Ctrl+J快捷键复制图层，隐藏背景图层，如图5-6所示。图5-6打开早餐素材任务二内容感知移动工具运用三、实践操作实践操作5-2：内容感知移动工具运用2.实施步骤步骤2选择工具箱中的内容感知移动工具，框中画面中盛坚果的盘子，用鼠标将其移动到画面左上方，效果如图5-7所示。图5-7使用内容感知移动工具移动盘子网店美工项目六图像色彩调整·知识目标·技能目标·素质目标（1）掌握颜色的基本知识。（2）掌握Photoshop软件调色的要点及具体设计步骤。（1）能根据需要调整图像的色彩。（2）熟练使用Photoshop中的相关工具。培养网络安全意识，培养分析和评估能力，提高对问题的敏感性。01图片亮度、对比度、饱和度调整任务一图片亮度、对比度、饱和度调整一、案例引入及相关知识色彩在一张图片中起着至关重要的作用，适当的色彩无论是对画面质感的提升还是情绪的渲染都有非同一般的效果。对于那些昏暗、不够清晰、色彩不够艳丽的图片，我们可以使用Photoshop软件对图片的亮度、对比度、饱和度进行相应调整，使图片更加吸引人。二、资源准备三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整1.任务要求（1）适当调整女包图片亮度。（2）适当调整护肤品清晰度。（3）适当调整咖啡厅图片亮度。（4）适当调整玫瑰花茶图片饱和度。任务一图片亮度、对比度、饱和度调整步骤1启动Photoshop软件，打开素材文件“女包.jpg”，按Ctrl+J快捷键复制图层，隐藏背景图层，如图6-1所示。三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整图6-1复制图层任务一图片亮度、对比度、饱和度调整步骤2

执行菜单栏命令“图像”→“调整”→“曝光度”，在“曝光度”窗口中勾选“预览”前的复选框，调整曝光度为+1.8，位移为0.0000，灰度系数校正为1.00，然后单击“确定”按钮，如图6-2和图6-3所示。三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整图6-2调整曝光度图6-3曝光度参数设置任务一图片亮度、对比度、饱和度调整步骤3曝光度调整前后对比如图6-4所示。三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整图6-4曝光度调整前后对比任务一图片亮度、对比度、饱和度调整步骤4打开素材文件“护肤品.jpg”，按Ctrl+J快捷键复制图层，隐藏背景图层，如图6-5所示。三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整图6-5打开护肤品素材任务一图片亮度、对比度、饱和度调整步骤５执行菜单栏命令“图像”→“调整”→“色阶”，如图6-6所示。勾选“预览”前的复选框，调整“输入色阶：”下方的黑、灰、白三个三角形图标分别为16/1.16/255，然后单击“确定”按钮，如图6-7所示。三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整图6-6色阶调色图6-7色阶参数设置任务一图片亮度、对比度、饱和度调整步骤6色阶调整前后对比如图6-8所示。三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整图6-8色阶调整前后对比任务一图片亮度、对比度、饱和度调整步骤7打开素材文件“咖啡厅.jpg”，按Ctrl+J快捷键复制图层，隐藏背景图层。执行菜单栏命令“图像”→“调整”→“曲线”，如图6-9所示。三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整图6-9曲线调色任务一图片亮度、对比度、饱和度调整步骤8在“曲线”对话框中勾选“预览”前的复选框，将光标移至斜线上，单击即可创建一个节点，在节点上按住鼠标左键不放并向左上方拖动，使曲线弯曲，可以调整画面变亮（反之拖动节点向右下方，即可调整画面变暗），然后单击“确定”按钮，如图6-10所示。三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整图6-10曲线参数设置1任务一图片亮度、对比度、饱和度调整步骤9曲线调整前后对比如图6-11所示。三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整图6-11曲线调整前后对比任务一图片亮度、对比度、饱和度调整步骤10打开素材文件“玫瑰花茶.jpg”，按Ctrl+J快捷键复制图层，隐藏背景图层。执行菜单栏命令“图像”→“调整”→“色相/饱和度”，如图6-12所示。三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整图6-12色相/饱和度调色任务一图片亮度、对比度、饱和度调整步骤11勾选“预览”前的复选框，调整饱和度为+30，如图6-13所示。三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整图6-13色相/饱和度调色参数设置任务一图片亮度、对比度、饱和度调整步骤12色相/饱和度调整前后对比如图6-14所示。三、实践操作实践操作6-1：图片亮度、对比度、饱和度调整图6-14色相/饱和度调整前后对比02图像色相调整任务二图像色相调整一、案例引入及相关知识当图像中有人物，我们在调整图像色彩时，需要将背景和人物分离。这时可以利用蒙版将图像分离。二、资源准备三、实践操作实践操作6-2：图像色相调整1.任务要求调整图像色调为紫色。任务二图像色相调整三、实践操作实践操作6-2：图像色相调整2.实施步骤步骤1启动Photoshop软件，打开素材文件“背篓女孩.jpg”，复制图层，隐藏背景图层。执行菜单栏命令“图像”→“调整”→“曲线”，如图6-15所示。图6-15曲线调整任务二图像色相调整三、实践操作实践操作6-2：图像色相调整2.实施步骤步骤2在“曲线”对话框的通道中选择红通道，斜线向上拖动；选择绿通道，斜线向下拖动；选择蓝通道，斜线向上拖动，如图6-16所示。图6-16曲线参数设置2任务二图像色相调整三、实践操作实践操作6-2：图像色相调整2.实施步骤步骤3现在图像色调发生变化，整体偏紫色，但是人物部分，我们并不想变成紫色，想维持原图人物色彩不变。步骤4此时可以在“图层”面板下方添加图层蒙版，然后使用画笔工具，选择柔边缘笔触，前景色为黑色，涂抹掉人物部分，如图6-17所示。图6-17添加图层蒙版任务二图像色相调整三、实践操作实践操作6-2：图像色相调整2.实施步骤步骤5将背景图层显示出来，如图6-18所示。图6-18显示背景图层任务二图像色相调整三、实践操作实践操作6-2：图像色相调整2.实施步骤步骤6色相调整前后对比如图6-19所示。图6-19色相调整前后对比网店美工项目七店招导航制作·知识目标·技能目标·素质目标（1）掌握店铺导航栏的参数设置及设计步骤。（2）掌握店招的设计要点及具体设计步骤。（1）能根据需要设计制作出店铺导航栏。（2）能根据需要设计制作出店招。（3）熟练使用Photoshop中的相关工具。（1）培养创意和设计思维。（2）培养项目管理和组织能力。01店铺导航栏制作任务一店铺导航栏制作一、案例引入及相关知识导航栏也叫导航条，店铺中的导航栏类似于实体店的环境导视，能迅速使买家找到其想要购买的商品。这在很大程度上提高了买家的购买体验以及购买的便利性。导航栏作为店铺首页的一部分，属于店铺形象的一个重要因素，与店铺形象相符的导航栏设计才能更好地树立与宣传店铺形象。赏析网店中常见的导航栏设计效果图可以看出，导航栏无论是在分类设置上还是在色彩搭配上都需要与网点的整体风格和谐统一，而且布局合理，才能很好地起到指引购买的作用。二、资源准备三、实践操作实践操作7-1：店铺导航栏制作1.任务要求（1）店铺导航栏的尺寸为950×30像素。（2）店铺导航栏设计并完成背景样式。（3）给店铺导航栏中的文字添加投影。任务一店铺导航栏制作步骤1打开Photoshop软件，在菜单栏中执行“文件”→“新建”命令，在弹出的“新建文档”对话框中新建宽度为950像素、高度为30像素、颜色模式为RGB颜色、名称为“导航栏”的空白画布，如图7-1所示。三、实践操作实践操作7-1：店铺导航栏制作图7-1新建导航栏空白画布任务一店铺导航栏制作步骤2

单击工具箱中的前景色图标，打开“拾色器（前景色）”对话框，在对话框最下方“#”后的文本框中输入“ccffff”，为新建的空白画布填充背景色，如图7-2所示。三、实践操作实践操作7-1：店铺导航栏制作图7-2为空白画布填充背景色任务一店铺导航栏制作步骤3创建新图层，单击工具箱中的矩形选框工具，按住鼠标左键不放拖出一个比画布稍小的矩形，如图7-3所示。单击工具箱中的前景色图标，在弹出的“拾色器（前景色）”对话框“#”后的文本框中输入“99ccff”，为其填充一个其他颜色，如图7-4所示。三、实践操作实践操作7-1：店铺导航栏制作图6-4曝光度调整前后对比图7-4为矩形填充颜色任务一店铺导航栏制作步骤4单击工具箱中的画笔工具，在“画笔设置”中设置画笔大小为9像素，硬度为100%的硬边圆，间距设置为258%，颜色为白色，如图7-5所示。三、实践操作实践操作7-1：店铺导航栏制作图7-5画笔设置任务一店铺导航栏制作步骤５在画布的左上角选取一个点，按住Shift键不放，直接在画布右上角位置单击，这样就会出现一行有着相同间距的白色小圆点。重复此操作四次，使得白色小圆点充满整个画布，效果如图7-6所示。三、实践操作实践操作7-1：店铺导航栏制作图7-6绘制白色小圆点任务一店铺导航栏制作步骤6单击工具箱中的文字工具图标，在画板中输入文本“首页所有商品秋冬新品会员专区收藏店铺”。在属性栏调整文字属性。步骤７在“图层”面板选中文字图层，双击图层空白处，弹出“图层样式”窗口，勾选“投影”前的复选框，调整参数，如图7-7所示。店铺导航栏最终效果如图7-8所示。三、实践操作实践操作7-1：店铺导航栏制作图7-7给文字添加投影图7-8店铺导航栏最终效果02店招设计制作任务二店招设计制作一、案例引入及相关知识店招，顾名思义，就是店铺的招牌，它好比实体店的招牌。其作用就是让买家看到并且记住它，从而达到宣传和推广店铺的目的。店招一般位于店铺首页的顶端，是店铺的展示窗口，也是买家对店铺形成第一印象的主要来源。二、资源准备三、实践操作实践操作7-2：店招设计制作1.任务要求（1）店招大小：950×150像素，颜色模式：RGB颜色，分辨率：72像素/英寸。（2）对店铺名称、店铺Logo、店铺广告语、店铺收藏、店铺促销等进行相关设计。（3）店招与整个店铺首页的风格要保持统一。任务二店招设计制作三、实践操作实践操作7-2：店招设计制作2.实施步骤步骤1启动Photoshop软件，新建一个空白画布，宽度设置为950像素，高度设置为150像素，分辨率为72像素/英寸，颜色模式为RGB颜色，如图7-9所示。图7-9新建空白画布任务二店招设计制作三、实践操作实践操作7-2：店招设计制作2.实施步骤步骤2单击工具箱中的矩形工具图标，框选店招区域画出蓝色矩形，如图7-10所示。图7-10店招背景制作任务二店招设计制作三、实践操作实践操作7-2：店招设计制作2.实施步骤步骤3单击工具箱中的文字工具图标，在导航栏区域输入文字信息“首页所有产品戒指手链项链耳环”，如图7-11所示。图7-11输入文案4任务二店招设计制作三、实践操作实践操作7-2：店招设计制作2.实施步骤步骤4单击工具箱中的文字工具图标，在店招区域输入“素”字，调整其字体、大小、颜色，将该图层放置在店招左侧，再添加“轻时尚美生活”“创造只属于你的文艺”文字图层，并将这两个文字图层放置在店招的中间。单击直线工具，按住Shift键，在两个文字图层中间画出一条直线。步骤5单击圆角矩形选框工具图标，在店招的右侧拖出一个圆角矩形，填充为白色，单击工具箱中矩形工具下方的自定义形状图标。任务二店招设计制作三、实践操作实践操作7-2：店招设计制作2.实施步骤步骤6单击文字工具图标，在圆角矩形里输入“收藏店铺”字样，颜色和背景色一致。店招最终效果如图7-12所示。图7-12店招最终效果网店美工项目八优惠券、产品分类模块设计制作·知识目标·技能目标·素质目标（1）了解优惠券的作用与内容。（2）掌握优惠券模块的设计要点。（3）掌握优惠券设计制作的具体步骤。（1）能根据需要设计制作出优惠券。（2）熟练使用Photoshop中的相关工具。（1）培养创造性思维和设计能力。（2）培养沟通和协商能力。01优惠券设计制作任务一优惠券设计制作一、案例引入及相关知识优惠券在首页中展示的信息有限，一般来说，一张优惠券上最醒目的信息通常是优惠面值。除此之外，设计优惠券还需要对其他必要信息进行完善，当消费者点击领取优惠券以后这些信息就会显示，比如优惠券的使用范围、使用条件等。二、资源准备三、实践操作实践操作8-1：优惠券设计制作1.任务要求（1）优惠券尺寸为1920×1080像素，分辨率为72像素/英寸。（2）优惠面值突出。（3）制作背景样式。任务一优惠券设计制作步骤1打开Photoshop软件，新建大小为1920×1080像素，分辨率为72像素/英寸，名称为“优惠券”的文件。使用工具箱中的圆角矩形工具绘制竖版圆角矩形，在属性栏填充紫色（#7b05d2）到浅紫色（#c537f8）的渐变色，如图8-1所示。三、实践操作实践操作8-1：优惠券设计制作图8-1优惠券背景制作任务一优惠券设计制作步骤2

使用工具箱中的文字工具输入文字信息，调整文字属性。“100”选择圆润突出些的字体：Impact，大小：246点，颜色：白色（#ffffff），其他文字使用黑体即可，设置字体大小分别为，优惠券：56点，元：34点，满3000减100：34点，如图8-2所示。三、实践操作实践操作8-1：优惠券设计制作图8-2输入文案并调整属性任务一优惠券设计制作步骤3使用工具箱中的直线工具在“优惠券”文字下方绘制水平线，在属性栏调整直线为描边：白色，粗细：1像素，样式：虚线，如图8-3所示。三、实践操作实践操作8-1：优惠券设计制作图8-3使用直线工具绘制水平线任务一优惠券设计制作步骤4使用工具箱中的椭圆工具在紫色背景下方中央绘制大小两个正圆，下方大圆为黑色（#000000），不透明度为18%，上方小圆为黄色（#ffc600），如图8-4所示。三、实践操作实践操作8-1：优惠券设计制作图8-4使用椭圆工具绘制大小两个正圆任务一优惠券设计制作步骤５使用文字工具在黄色圆中央输入文字“领”，文字颜色调整为深褐色（#5d2413），如图8-5所示。三、实践操作实践操作8-1：优惠券设计制作图8-5输入文字“领”任务一优惠券设计制作步骤6使用工具箱中的选择工具选中除背景层外的所有图层，按快捷键Ctrl+G打组，如图8-6所示。三、实践操作实践操作8-1：优惠券设计制作图8-6打组任务一优惠券设计制作步骤6单击“图层”面板中的文字“组1”，将其修改为“100元”，如图8-7所示。三、实践操作实践操作8-1：优惠券设计制作图8-7修改组名称任务一优惠券设计制作步骤７选择工具箱中的选择工具，在属性栏中将自动选择改为组，水平右移复制组两次［鼠标放在优惠券上，按快捷键Alt（复制）+Shift（水平右移）］，如图8-8所示。三、实践操作实践操作8-1：优惠券设计制作图8-8复制组“100元”任务一优惠券设计制作步骤8选择工具箱中的文字工具，单击需要更改的文字信息进行修改即可。优惠券最终效果如图8-9所示。三、实践操作实践操作8-1：优惠券设计制作图8-9优惠券最终效果02产品分类模块设计制作任务二产品分类模块设计制作一、案例引入及相关知识分类模块一般位于优惠券的下方，它是引导消费者购买的重要模块。该模块一般是店铺主营商品系列的汇总展示，整个模块要分类明确、效果美观，让消费者能更清晰快捷地找到自己所需的商品。二、资源准备三、实践操作实践操作8-2：产品分类模块设计制作1.任务要求（1）产品分类模块图大小：宽度950像素，高度750像素；颜色模式：RGB颜色；分辨率：72像素/英寸。（2）模块划分时注意产品的主次关系。任务二产品分类模块设计制作三、实践操作实践操作8-2：产品分类模块设计制作2.实施步骤步骤1打开Photoshop软件，按快捷键Ctrl+N新建950×750像素，分辨率为72像素/英寸，颜色模式为RGB颜色，名称为“宝贝分类模块”的文件。使用工具箱中的矩形工具绘制五个矩形，颜色分别为#f3e9da、#f3f1f8、#6783b2、#f1f1f1、#f1f1f1，如图8-10所示。图8-10产品分类模块背景制作任务二产品分类模块设计制作三、实践操作实践操作8-2：产品分类模块设计制作2.实施步骤步骤2打开素材文件夹，拖入产品图片分别放在不同色块上方，如图8-11所示。图8-11放置素材任务二产品分类模块设计制作三、实践操作实践操作8-2：产品分类模块设计制作2.实施步骤步骤3使用文字工具输入相应文案。“商用除湿机”“家用除湿机”“移动空调”“配件专区”“点击进入》”，文字属性调整为，字体：黑体，颜色：#555454，大小：27和17，“爆款”文案上下错落放置，在“爆”字下方绘制白色矩形并输入“点击进入》”，如图8-12所示。图8-12输入文案5网店美工项目九全屏海报设计制作·知识目标·技能目标·素质目标（1）掌握全屏海报的设计要点。（2）掌握全屏海报具体设计步骤。（1）能根据需要设计制作出全屏海报。（2）熟练使用Photoshop中的相关工具。（1）培养学生通过设计有效地传达信息、情感或理念。（2）培养学生对审美的敏感度，了解不同设计元素如何影响整体效果。01化妆品全屏海报设计制作任务一化妆品全屏海报设计制作一、案例引入及相关知识不管是线下的传统营销模式还是线上的网络营销模式，都需要有漂亮又能吸引人眼球的海报来招揽顾客。在网络店铺的运营中，我们常会用店铺首页的全屏海报来吸引消费者，即便没有促销活动或者节日活动，也会制作精美的海报来提升店铺的整体形象。一张海报的设计要点主要包括：（1）主题海报的制作需要一个主题，也就是该海报的主要目的是什么，宣传什么。可以是宣传店铺活动，也可以是宣传产品或产品活动等。主题是海报的核心，是海报所要传达的信息或意图。要确保主题明确、突出，能够吸引目标观众，有了主题我们才能确定海报的文案及用途。（2）构图一般海报都是图文结合，在图文排版过程中，可以是左右排版、上下居中排版。可以根据所选产品的图片结构选择合适的排版方式。（3）配色海报的配色十分重要，它决定着整张图的风格，不同的色调营造的氛围也不一样。在配色上我们要注意整体的协调性，色彩与图片搭配，以及色彩与文字之间的关系处理。店铺全屏海报的设计与其他海报的设计方法相似，包括构图技巧、配色方式、文本排版等，都要求简洁美观、主题突出、能够吸引消费者等。但由于显示器的分辨率不一致，为了保证全屏图片在任何显示器中都能完整地显示出重要信息，通常需要对图片的两边进行“留白”，即全屏图片左右两侧宽度为360像素的区域中不放置人物或商品图片，也不放置文案。任务一化妆品全屏海报设计制作二、资源准备三、实践操作实践操作9-1：化妆品全屏海报设计制作1.任务要求（1）全屏海报设计的尺寸：1920×720像素。（2）产品卖点突出。（3）文字排版合理。任务一化妆品全屏海报设计制作步骤1打开Photoshop软件，新建宽度为1920像素，高度为720像素，分辨率为72像素/英寸，名称为“化妆品全屏海报效果”的文件。使用工具箱中的矩形工具绘制宽度为1000像素的矩形，如图9-1所示。三、实践操作实践操作9-1：化妆品全屏海报设计制作图9-1绘制矩形任务一化妆品全屏海报设计制作步骤2

执行菜单栏命令“视图”→“标尺”，使用工具箱中的移动工具选择背景层和矩形层，在属性栏中选择居中对齐。鼠标在工具箱竖列旁边的标尺上拖出两根参考竖线标记居中位置，如图9-2所示。三、实践操作实践操作9-1：化妆品全屏海报设计制作图9-2居中参考线任务一化妆品全屏海报设计制作步骤3打开素材文件夹“化妆品全屏海报素材”，将素材背景拖入，调整其位置和大小，如图9-3所示。三、实践操作实践操作9-1：化妆品全屏海报设计制作图9-3放置背景任务一化妆品全屏海报设计制作步骤4选择“化妆品全屏海报素材”文件夹中的“产品”“玫瑰花朵”素材，鼠标拖动放置在“图层2”上方，调整“产品”素材位置至礼品盒中的丝带截断处，选中“产品”素材，在“图层”面板中单击（或双击该图层）出现“图层样式”窗口，调整其投影，如图9-4所示。三、实践操作实践操作9-1：化妆品全屏海报设计制作图9-4放置素材任务一化妆品全屏海报设计制作步骤５使用文字工具输入文本：全场满99元立减10元今日包邮，调整颜色为粉色，调整大小与位置。双击文字图层，在“图层样式”窗口中，勾选“斜面和浮雕”前的复选框，调整参数，样式：内斜面，方法：平滑，深度：29%，方向：上，大小：7像素，软化：0像素，角度：90度，高度：30度，高光模式：滤色、白色，不透明度：50%，阴影模式：正片叠底、黑色，不透明度：50%，如图9-5所示。三、实践操作实践操作9-1：化妆品全屏海报设计制作图9-5文字图层样式任务一化妆品全屏海报设计制作步骤6使用文字工具输入文本“七夕好礼新品首发”“夏季补水专区8折优惠”“活动时间：8.22-8.28”，格式为黑体、31点、粉色和白色，放置在合适位置。使用圆角矩形工具绘制橙色圆角矩形，放置在“夏季补水专区8折优惠”文案图层下方，效果如图9-6所示。三、实践操作实践操作9-1：化妆品全屏海报设计制作图9-6设置字符属性任务一化妆品全屏海报设计制作步骤７拖入丝带、花瓣、珍珠等素材，调整大小，放置在合适位置。化妆品全屏海报最终效果如图9-7所示。三、实践操作实践操作9-1：化妆品全屏海报设计制作图9-7化妆品全屏海报最终效果02女包全屏海报设计制作任务二女包全屏海报设计制作一、案例引入及相关知识为了能掌握首页海报的制作流程，接下来我们以女包店铺为例，设计店铺的全屏海报。二、资源准备三、实践操作实践操作9-2：女包全屏海报设计制作1.任务要求（1）女包全屏海报大小：1920×900像素，颜色模式：RGB颜色，分辨率：72像素/英寸。（2）女包海报图背景制作。任务二女包全屏海报设计制作三、实践操作实践操作9-2：女包全屏海报设计制作2.实施步骤步骤1打开Photoshop软件，新建宽度为1920像素，高度为900像素，分辨率为72像素/英寸，名称为“女包全屏海报效果”的文件。使用矩形工具绘制宽度为1000像素的矩形，如图9-8所示。图9-8新建“女包全屏海报”文件任务二女包全屏海报设计制作三、实践操作实践操作9-2：女包全屏海报设计制作2.实施步骤步骤2执行菜单栏命令“视图”→“标尺”，使用移动工具选择背景层和矩形层，在属性栏中选择居中对齐。鼠标在工具箱竖列旁边的标尺上拖出两根参考竖线标记居中位置，如图9-9所示。图9-9居中任务二女包全屏海报设计制作三、实践操作实践操作9-2：女包全屏海报设计制作2.实施步骤步骤3使用矩形工具绘制背景大小的矩形，颜色：#b73f04到#93180e径向渐变，如图9-10所示。图9-10海报背景制作任务二女包全屏海报设计制作三、实践操作实践操作9-2：女包全屏海报设计制作2.实施步骤步骤４拖入“背景模特”文件，放大人物，放置在合适位置，图层混合模式改为“正片叠底”，效果如图9-11所示。图9-11正片叠底2任务二女包全屏海报设计制作三、实践操作实践操作9-2：女包全屏海报设计制作2.实施步骤步骤５使用选择工具选择“红色矩形”和“背景模特”两个图层，右击合并图层（或选择需要合并的图层，按快捷键Ctrl+E）。执行菜单栏命令“滤镜”→“杂色”→“添加杂色”，如图9-12所示，数量设置为5%，选择“平均分布”，勾选“单色”前的复选框，如图9-13所示。图9-12添加杂色图9-12添加杂色任务二女包全屏海报设计制作三、实践操作实践操作9-2：女包全屏海报设计制作2.实施步骤步骤６使用矩形工具绘制矩形，颜色#6C0902，放置在画板中央位置，拖入“模特”文件置于上方，调整到合适大小，如图9-14所示。图9-14植入模特任务二女包全屏海报设计制作三、实践操作实践操作9-2：女包全屏海报设计制作2.实施步骤步骤７使用文字工具分别输入文案“T”“R”“D”“E”“N”，如图9-15所示。图9-15输入文案6任务二女包全屏海报设计制作三、实践操作实践操作9-2：女包全屏海报设计制作2.实施步骤步骤８按Ctrl+J快捷键复制文字图层“T”，选中“T拷贝”图层，双击打开“图层样式”窗口,调整“混合选项”，设置“混合颜色带”为灰色，“本图层”右侧白色三角拖动至左侧，调整数值为0。调整“描边”，设置“大小”为1像素，位置“内部”，“颜色”为白色（#ffffff），如图9-16所示。图9-16图层样式任务二女包全屏海报设计制作三、实践操作实践操作9-2：女包全屏海报设计制作2.实施步骤步骤９将描边后的文字“T”放置在白色实心字母“T”下方，选中描边“T”向左位移一点儿，按住Ctrl+Alt+Shift+←组合键，即可复制且位移一个描边“T”（所按方向键代表位移的方向），重复操作，复制出多层线描T。选中所有线描T图层，按Ctrl+E快捷键合并图层，如图9-17所示。图9-17多层复制字母“T”任务二女包全屏海报设计制作三、实践操作实践操作9-2：女包全屏海报设计制作2.实施步骤步骤10其他字母用同样方法进行操作，效果如图9-18所示。图9-18多层复制其他字母任务二女包全屏海报设计制作三、实践操作实践操作9-2：女包全屏海报设计制作2.实施步骤步骤11使用文字工具输入其他文案以及装饰性文字，调整属性后放置在合适位置。使用形状工具绘制需要的形状放置在文案下方，如图9-19所示。图9-19输入辅助文案任务二女包全屏海报设计制作三、实践操作实践操作9-2：女包全屏海报设计制作2.实施步骤步骤11女包全屏海报最终效果如图9-20所示。图9-20女包全屏海报最终效果网店美工项目十产品陈列区设计制作·知识目标·技能目标·素质目标（1）掌握产品陈列区的设计要点。（2）掌握产品陈列区的具体设计步骤。（1）能根据需要设计制作出产品陈列区。（2）熟练使用Photoshop中的相关工具。（1）培养学生具备独立思考、创造性解决问题的能力。（2）培养学生有效地获取、理解和整理信息。01枸杞陈列区设计制作任务一枸杞陈列区设计制作一、案例引入及相关知识在设计店铺首页时，除了常见的店招、导航栏、全屏海报、优惠券以及产品分类模块外，还需要设计产品展示的区域，用来直接向消费者展示和推荐店铺的产品，从而引导消费者购买。我们可以对产品进行分类展示，展示过程中有主次产品的体现。比如，设置不同专区，包括上衣专区、裙子专区、箱包专区等。每个专区内，重要产品展位多一些，设计更精美些。二、资源准备三、实践操作实践操作10-1：枸杞陈列区设计制作1.任务要求（1）陈列区设计的尺寸：950×500像素。（2）产品陈列整齐。任务一枸杞陈列区设计制作步骤1打开Photoshop软件，新建大小为950×500像素，分辨率为72像素/英寸，名称为“枸杞产品陈列区效果”的文件。使用矩形工具在顶部绘制橙色矩形并输入“袋装·枸杞”文案，调整合适属性，放置在合适位置，如图10-1所示。三、实践操作实践操作10-1：枸杞陈列区设计制作图10-1新建“枸杞产品陈列区”文件任务一枸杞陈列区设计制作步骤2

使用矩形工具绘制矩形，填充任意颜色，描边：1像素，灰色，宽度约为画板三分之一，如图10-2所示。三、实践操作实践操作10-1：枸杞陈列区设计制作图10-2绘制宽度约为画板三分之一的矩形任务一枸杞陈列区设计制作步骤3使用移动工具选中矩形图层，拖入素材文件“枸杞1”，在“图层”面板的“枸杞1”上单击鼠标右键，选择“创建剪贴蒙版”，如图10-3所示。按Ctrl+T快捷键调整图片大小和位置，选中矩形层和“枸杞1”图层，单击“图层”面板下方的链接图层按钮

。三、实践操作实践操作10-1：枸杞陈列区设计制作图10-3创建剪贴蒙版1任务一枸杞陈列区设计制作步骤4使用文字工具输入“袋装枸杞家庭食用”文本，文本格式为黑体、33点、黑色；使用矩形工具绘制矩形，输入“立即购买”文本，文本格式为黑体、28点、白色；使用直线工具绘制两条横线放置在文案上、下方，如图10-4所示。三、实践操作实践操作10-1：枸杞陈列区设计制作图10-4输入文案并绘制直线任务一枸杞陈列区设计制作步骤５使用选择工具框中画板中关于枸杞1产品的所有图层，按Ctrl+G快捷键打组，双击“图层”面板的“组1”将组名称改为“枸杞1”，如图10-5所示。三、实践操作实践操作10-1：枸杞陈列区设计制作图10-5对枸杞1产品的所有图层打组任务一枸杞陈列区设计制作步骤6选择选择工具，在属性栏勾选“自动选择：组”，选中组“枸杞1”，按快捷键Ctrl+C和Ctrl+V复制两个组，将两个组移动至合适位置，并将两个组的名称分别改为“枸杞2”“枸杞3”，如图10-6所示。三、实践操作实践操作10-1：枸杞陈列区设计制作图10-6复制组“枸杞1”任务一枸杞陈列区设计制作步骤７选择选择工具，在属性栏勾选“自动选择：图层”，单击需要替换的图片，按Delete键删除图片。拖入素材文件“枸杞2”，在“图层”面板中选中该图层，单击鼠标右键，选择“创建剪贴蒙版”。调整图片大小、位置，选中“枸杞2”和下方矩形图层，单击鼠标右键，选择“链接图层”。“枸杞3”用同样方式替换图片，如图10-7所示。三、实践操作实践操作10-1：枸杞陈列区设计制作图9-7化妆品全屏海报最终效果任务一枸杞陈列区设计制作步骤8选择文字工具，在图像窗口中单击需要修改的文案，删除不需要的文案，输入合适文案。枸杞陈列区最终效果如图10-8所示。三、实践操作实践操作10-1：枸杞陈列区设计制作图10-8枸杞陈列区最终效果02茶叶陈列区设计制作任务二茶叶陈列区设计制作一、案例引入及相关知识产品陈列区设计主要有以下几个要点：①分析消费者心理需求；②产品类别明确；③突出产品的价格和购买按钮；④产品主次关系明确。二、资源准备三、实践操作实践操作10-2：茶叶陈列区设计制作1.任务要求（1）图片大小：950×1600像素，颜色模式：RGB颜色，分辨率：72像素/英寸。（2）三个产品分精品上新区和热销特卖区。任务二茶叶陈列区设计制作三、实践操作实践操作10-2：茶叶陈列区设计制作2.实施步骤步骤1打开Photoshop软件，新建大小为950×1600像素，颜色模式为RGB颜色，分辨率为72像素/英寸，名称为“茶叶产品陈列区效果”的画布，拖入素材文件中的水墨画放置于背景的合适位置，透明度降低至50%，设置图层的“混合模式”为正片叠底，如图10-9所示。图10-9茶叶产品陈列区背景制作任务二茶叶陈列区设计制作三、实践操作实践操作10-2：茶叶陈列区设计制作2.实施步骤步骤2使用文字工具输入文案“精”“品上新”“JINGPINSHANGXIN”；调整文案属性，字体：禹卫书法行书简体，设置合适的文字大小，颜色为深绿色（#3b5040）。输入文案“精品”，颜色为白色（#ffffff），放置在合适位置，拖入素材文件印章图案放置于“精品”文字下方，如图10-10所示。图10-10标题文案任务二茶叶陈列区设计制作三、实践操作实践操作10