项目四-设计与制作网店结构模块.ppt

,Click to edit Master title style,*,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,项目,四 设计与制作网店结构模块,主要内容,项目引导,项目任务书,项目任务实施,1,2,3,3,项目任务分析,4,自学与拓展,3,5,项目引导,当商品图片的素材收集完毕后就是如何来搭建电子商务网店了。由于绝大多数运行在淘宝、易趣等电子商务平台上的网店页面版面布局基本是固定的，那么可以先对结构模块所用的素材进行设计与制作，最后来生成整体页面效果。在电子商务网店设计与制作中，最主要的网页元素就是图像。本项目将完成网店各结构模块中的静态图像元素制作。,项目任务书,能力目标,学习完本项目后，学生应当能够依据项目要求完成网店各构成模块的设计与制作，包括：,（,1,）抽取和修饰图像素材,（,2,）制作图像告示板,（,3,）制作网店分类图标按钮,（,4,）制作网店中文字图像结合的展示模板知识目标,知识目标,（,1,）,Photoshop,的规则选区和不规则选区,（,2,）,Photoshop,文字工具,（,3,）,Photoshop,图层的使用和样式修饰,（,4,）,Photoshop,渐变工具,（,5,）,Photoshop,形状工具,（,6,）,Photoshop,辅助工具,（,7,）,Photoshop,绘制图像,（,8,）,Photoshop,修饰与修复图像,项目任务引导,任务一 制作网店告示牌,本任务目标将通过对图像素材的简单处理和文字的制作来完成网店告示板模块的设计与制作。网店告示牌一般内容可包括：网店工作时间、联系方式、最新信息等。效果,如下图所示。,项目任务实施,任务一 制作网店告示牌,1.,创建告示板文件,网店中告示板文件一般放置在页面左边分类列表上方或者下方。宽度基本在,190,像素，高度不一，本任务中文件大小以,190*300,像素为例。打开,Photoshop,，按要求新建文件，背景为白色。,2.,素材编辑,在,Photoshop,中打开“素材,01.psd”,，该素材文件为,PSD,分图层素材，便于编辑。按住“,Ctrl”,键，鼠标点选图层“,Layer 1”,的图层缩览图，如图,4-2,所示。,项目任务实施,任务一 制作网店告示牌,然后复制该图层，在新建的告示板文件中粘贴，再通过“自由变换”到合适的大小。然后用同样的方法把“,Layer 2”,复制粘贴到新建告示板文件中，如图,4-3,所示。,图,4-3,粘贴素材图层,项目任务实施,任务一 制作网店告示牌,在,Photoshop,中打开图像“春节素材,.jpg”,点选工具箱中的“矩形选框工具”。在该工具属性栏设置羽化值“,5px”,，然后在“春节素材,.jpg”,中选取圈中的图案，如图,4-4,所示。,图,4-4,矩形选框工具,图,4-4,矩形选框工具,项目任务实施,任务一 制作网店告示牌,再对矩形选框选中的选取进行复制，在告示板文件中粘贴，再通过“自由变换”到合适的大小,。,3.,添加文字,点击工具箱中文字工具图标，在文字工具属性栏中设置字体大小、消除锯齿选项、颜色后，在告示板中点击，对应输入如图,4-6,所示文字。文字可单行为一文本图层，也可以通过回车键和空格键来换行对齐。移动图层内容可通过“移动工具”或者键盘方向键移动调整到合适位置。,项目任务实施,任务一 制作网店告示牌,4.,合并图层，保存文件：可先直接存储文件“告示板,.,psd,”,保留图层信息作为备用。再可通过单击“图层”，在图,4-7,所圈选的合并图层方式合并图层后，并存储为“告示板,.jpg”,，用于网店。,项目任务分析,任务一 制作网店告示牌,1.,规则选区,矩形选框，建立一个矩形选区（使用,Shift,键可建立正方形选区）。,椭圆选框，建立一个椭圆形选区（使用,Shift,键可建立圆形选区）。,单行 或单列 选框，将边框定义为宽度为,1,个像素的行或列。,在选区属性栏中，选区相加减的选项如图,4-8,所标示。,1,图标标示，创建新选区，是默认选项；,2,图标标示，添加到选区，可把新选区，和已有选区相加在一起；,3,图标标示，从选区中减去，可从已有选区中减去新选区；,4,图标标示，与选区相交，可将新选区与已有选区相交部分保留。,项目任务分析,任务一 制作网店告示牌,2.,羽化,通过建立选区和选区周围像素之间的转换边界来模糊边缘。该模糊边缘将丢失选区边缘的一些细节。羽化值越大，虚化范围越宽，也就是说颜色递变的柔和。羽化值越小，虚化范围越窄。可根据实际情况进行调节。把羽化值设置小一点，反复羽化是羽化的一个技巧。,3.,选区样式,正常，通过拖动确定选框比例。固定长宽比，可设置创建选区的长宽比。输入长宽比的值。固定大小，为选框的高度和宽度指定固定的值。输入值默认像素值，也可在文本框中单击鼠标右键，切换单位。,4.,移动选区,当鼠标选择工具箱中选区工具图标时，可用鼠标和方向键移动选区。当鼠标选择移动工具图标时，用鼠标和方向键移动选区，则会剪接选区中的图层内容，按住,Alt,键再用鼠标和方向键移动选区，则是移动复制粘贴产生的移动选区中的图层内容副本。,项目任务分析,任务一 制作网店告示牌,4.,文字工具属性：,文字工具属性栏如图,4-9,所示。,排列方向，决定文字以横向排列还是以竖向排列。所以在工具箱选字体工具时，选横排文字工具还是直排文字工具都可以在对应的文字属性栏再进行更改。这个选项不能针对个别字符。只需选择中对应文字图层中的一些文字，通过该选项还是可以改变该层所有文字的方向。,字体，可以选择使用何种字体，不同的字体风格完全不同。,Photoshop,使用的字库就是当前计算机操作系统中自带的字体。因此如果要增减,Photoshop,使用的字体，需要在操作系统字库中进行操作。如果选择非中文类的其他语言字体来创建中文，可能无法正确显示中文内容。,字体样式，通过下拉列表有,4,种：,Regular(,标准,),、,Italic(,倾斜,),、,Bold(,加粗,),、,BoldItalic,(,加粗并倾斜,),。可以为每个字符单独指定字体样式。大部分中文字体都不支持字体样式，不过可以在以后通过“字符面板”来控制。,字体大小，也称为字号，可通过下拉列表选择，也可通过手动自行设定字号。字号的单位有“像素”、“点”、“毫米”，默认单位是“点”。可在点击,Photoshop,菜单栏“编辑”，在其列表中选择“首选项”。在“首选项”对话框中的“单位与标尺”项目中更改。,项目任务分析,任务一 制作网店告示牌,抗锯齿选项，控制字体边缘是否带有羽化效果。一般如果字号较大可以通过选择得到光滑的边缘，这样文字看起来较柔和。但较小的字号则可能可能造成阅读困难的情况。,对齐方向，可以让文字左对齐、中对齐或右对齐。主要合适对于多行的文字内容。,字体颜色，就是通过拾色器来改变文字的颜色，可以针对单个字符设置颜色。,变形，可以令文字产生变形效果，如图,4-11,所示。,项目任务分析,任务一 制作网店告示牌,5.,合并图层,可以将多个图层合并，合并图层将缩小图像文件的大小。在合并图层时，顶部图层上的数据替换它所覆盖的底部图层上的任何数据，重叠的透明区域仍然保持透明。合并可见图层，将所有将处于显示状态的图层合并，不可见图层保留。,拼合图像，则是将所有的层合并为背景层，将不可见图层提示丢弃。,项目任务拓展,任务一 制作网店告示牌,1.,安装特殊字体,Photoshop,可以使用特殊字体，运用于图像是其一大特色。使用,Photoshop,制作的特殊字体保存为图像，运用于网页，也是网页设计与制作中，解决页面上特殊字体的一种常用方式。,通过网络下载相关中文字体和英文字体后，保存在字体文件夹。然后把点选要安装的字体，右键快捷键后选择复制，然后打开操作系统的字体文件夹，在文件夹中点击粘贴，安装完毕，如图,4-12,所示。,项目任务拓展,任务一 制作网店告示牌,安装完“书体坊米蒂体”字体后，可在文字工具栏中通过字体列表找到“书体坊米蒂体”后选择，并书写文字，如图,4-13,所示。,自学与拓展,任务一 制作网店告示牌,2.,字符面板,可以对文字设定更多的选项，调整文字。“字符”面板除了从字符工具属性栏调出外，还可以从菜单栏“窗口”中调出。“字符”面板设置如图,4-14,所示。,项目任务拓展,任务一 制作网店告示牌,3.,段落文字,当输入大量文字时，可通过段落文本框来输入。输入的文字，会基于定界框的尺寸进行自动切换，也可调整定界框大小并进行旋转。定界框可以通过选择文字工具后，用鼠标在文件图层上拖选产生，如图,4-16,所示。“段落”面板可以通过“字符”面板同样的方法打开。,项目任务拓展,任务一 制作网店告示牌,4.,历史记录面板,在用,Photoshop,进行图像处理时，经常需要会到前一状态。这时可以使用“历史记录”面板在当前工作会话期间跳转到所创建图像的任一最近状态，如图,4-17,所示。每次对图像编辑更改时，图像的新状态都会添加到该面板中。,也可以使用“历史记录”面板来删除图像状态，并且，在,Photoshop,中，可以使用该面板依据某个状态或快照创建文档。当恢复到前某一状态时，做了新更改，新状态将会替代原有灰色状态，原有状态不能还原。,项目任务引导,任务二 制作图片分类区,本任务目标将通过对图像素材的处理和添加文字来制作网片作为网店“新春特卖”区的标志。大的图片分类标志，往往列在小的图标式分类列表区之上，作为热门商品，特价商品等分区入口。用大的图片，主要是为了更好的吸引访问网店的客户注意。效果如图,4-18,所示。,项目任务实施,任务二 制作图片分类区,1.,创建图片分类区文件,按淘宝网店中常见规格设计宽度,165,像素，高度一般自由可调，本任务设高度,220,像素，分辨率,72,，背景白色。,2.,粘贴新的背景图层,打开素材文件夹，找到符合新春特色的底纹素材“,DA-01.jpg”,在,Photoshop,中打开，选择矩形选框工具在图像中创建选区。然后把该选区复制，在新建图片分类区中粘贴，通过“自由变换”调整，如图,4-19,所示。,项目任务实施,任务二 制作图片分类区,3.,不规则选区工具运用,打开素材文件夹中的“,180g,猕猴桃干,.jpg”,，进行对应图像色调色泽调整。因为新文件的图层,1,为红色，那么猕猴桃干的图片就不能是白色的，需要采用不规则选取工具。点击工具箱的“快速选择工具”，将属性栏画笔大小调至合适，进行选取，如图,4-20,所示。在选取前，可以通过点击工具箱的“放大镜”工具放大图像，方便选区更为精确。,项目任务实施,任务二 制作图片分类区,然后可通过选择“磁性套索工具”，按住,Shift,以“添加到选区”的方式，增加不易被快速选择工具选中的区域，如图,4-21,。最后再通过“套索工具”对最后的选区，采用增减的方式，进行修补。,项目任务实施,任务二 制作图片分类区,再将选中的猕猴桃干选区复制，在新建的“新春特卖区”文件中粘贴。通过“自由变换”调整，也可通过“橡皮擦工具”去除边缘的白色瑕疵，如图,4-22,所示。,项目任务实施,任务二 制作图片分类区,4.,制作斜跨标签,在“新春特卖区”中的图层面板中，新增加一个层。然后在该图层中用“矩形选框工具”创建一个选区，如图,4-23,所示。,项目任务实施,任务二 制作图片分类区,然后点选工具箱的“油漆桶工具”，对该矩形选框上色，如图,4-24,所示。,旋转矩形选框，通过“自由变换”工具旋转矩形选框并移动到合适位置，如图,4-25,所示。完成后，确认自由变换结果，并通过“,Ctrl+D,”,取消选区。最后输入标签文字，利用文字工具，字体为“书体坊米蒂体”输入“一元一袋”后，调整合适大小和颜色后。,项目任务实施,任务二 制作图片分类区,5.,图层样式修饰文字图层,首先，用鼠标点选回红色背景的“图层,1”,，再利用文本工具，字体“幼圆”、大小,32,、颜色为白色，输入“新春特卖”。在文本图层“新春特卖”选中后，在图层面板点击添加图层样式，在列表中选择“描边”，如图,4-27,所示。,项目任务实施,任务二 制作图片分类区,在图层样式对话框中的“描边标签，按如图,4-28,所圈选的设置。,在图层样式对话框中，选择“外发光”标签，按图,4-29,所圈选的设置。,项目任务实施,任务二 制作图片分类区,在图层样式对话框中，选择“外发光”标签，按图,4-29,所圈选的设置。,在图层样式对话框中，选择“投影”标签。设置完成后，即完成图层样式操作，点选“确定”。,6.,完成制作，保存文件。,1.,不规则选区,可以建立任意不规则选区的工具是套索工具、多边形套索工具、磁性套索工具、快速选取工具、魔棒工具。,套索工具,，在画布域内按下鼠标任意移动，松开后即可建立一个与鼠标移动轨迹相符的选区。所创建选区都是一个闭合区域，如果轨迹起点与轨迹终点不在一起就会自动在两点间连接一线对区域进行闭合。按,Alt,键，则不按轨迹作为选区，而是在单击的点间连直线形成选区。,多边形套索工具，是通过鼠标单击成点，再连点成线。在选取过程中持续按住,Shift,键可以保持水平、垂直或,45,度角的轨迹方向。并且如果终点与起点重合会出现一个小圆圈样子的提示。,磁性套索工具，可自动是分析色彩边界，在鼠标的拖拉下，在经过的道路上按色彩的分界自动生产点，再把点连起来形成选区。适用于快速选择与背景对比强烈且边缘复杂的对象。宽度，磁性套索工具只检测从指针开始指定距离以内的边缘。其中工具属性栏中的对比度，指定对图像边缘的灵敏度，较高的数值将只检测与其周边对比鲜明的边缘，较低的数值将检测低对比度边缘。频率，指定产生定点的频率。在边缘明确的图像上，可以试用更大的宽度和更高的边对比度，然后大致地跟踪边缘,.,在边缘较柔和的图像上，则需要使用较小的宽度和较低的边对比度，然后更精确地跟踪边框。光笔压力，如果是使用光笔绘图板，请选择或取消选择“光笔压力”选项。该项被选中时，增大光笔压力将导致边缘宽度减小。,项目任务分析,任务二 制作图片分类区,快速选择工具，利用可调整的圆形画笔笔尖通过鼠标拖拉快速“绘制”选区。拖动时，选区会向外扩展并自动查找和跟随图像中定义的边缘。在工具属性栏中的对所有图层取样，是指基于所有图层（而不是仅对当前选定图层）创建一个选区。自动增强，是指减少选区边界的粗糙度和块效应。可以通过在“调整边缘”对话框中使用“平滑”、“对比度”和“半径”选项手动应用这些边缘调整。,魔棒工具，选择颜色一致的区域而不必跟踪其边缘轮廓。以单击选定的像素颜色值为基准，寻找容差范围内的其他颜色像素，然后把它们创建为选区。所谓容差范围就是色彩的包容度。容差越大，色彩包容度也就越大，选区部分也会越多。,项目任务分析,任务二 制作图片分类区,2.,调整像素选区：,“选择,/,反向”命令，可以使用该选项选择放在纯色背景上的对象。使用魔棒工具选择背景，然后反选选区。,“选择,/,修改,/,扩展”或“选择,/,修改,/,收缩”命令，可以按特定数量的像素扩展或收缩选区。若选区边框中沿画布边缘分布，则不受影响。,“选择,/,修改”命令，可以减少选区边界中的不规则区域和基于颜色的选区中的杂散像素，创建更加平滑的轮廓。,“选择,/,修改,/,边界”命令，可以在选区边界周围创建一个选区。可选择在现有选区边界的内部和外部的像素的宽度。在清除粘贴的对象周围的光晕效果，将很有用。,“选择,/,修改,/,羽化”命令，可以通过建立选区和选区周围像素之间的转换边界来模糊边缘。该模糊边缘将丢失选区边缘的一些细节。,“选择,/,扩大选取”和“选择,/,选取相似”，可以用以实现扩展位于容差范围内的像素为选区，只是“扩大选取”扩展范围为相邻像素，而“选取相似”扩展范围不只是相邻的像素。,“选择,/,变换选区”命令，可以对选区进行类似于“自由变换”的操作，如图,4-32,，对选区变形。,项目任务分析,任务二 制作图片分类区,3.,图层样式：,可以用做给对应图层添加一些特殊的样式。可选图层样式包括：,投影，在图层内容的后面添加阴影效果。,内阴影，在图层内容的边缘内添加阴影，使图层具有凹陷外观。,外发光和内发光，在图层内容的外边缘或内边缘发光的效果。,斜面和浮雕，在图层产生高光与阴影效果的各种组合。,光泽，在图层创建光滑光泽的内部阴影效果。,颜色、渐变和图案叠加，使用颜色、渐变或图案填充图层内容。,描边，使用颜色、渐变或图案在当前图层上描画对象的轮廓。主要运用于文本图层有用。,项目任务分析,任务二 制作图片分类区,1.,从图像对象背景中抽取对象，主要有哪些操作方法？,（,1,）利用保护前景色的背景橡皮擦。,（,2,）通过选区工具来选取，包括：建立规则选区工具；建立不规则任意选区工具。,（,3,）通过“抽出”滤镜来抽出，“抽出”滤镜设置对话框，如图,4-33,所示。,项目任务拓展,任务二 制作图片分类区,（,4,）蒙板工具，利用蒙板保护被选区域，其余区域被选中。例如，快速蒙版工具，如图,4-34,所示。,项目任务拓展,任务二 制作图片分类区,2.“,样式”面板的应用,Photoshop,在“窗口”菜单中“样式”面板提供了预设的图层样式功能，这些预设的图层样式按功能分在不同的库中，如图,4-35,所示。,项目任务拓展,任务二 制作图片分类区,完成后，可点击调出该文本图层运用后所产生的“图层样式”对话框，查看“蓝色渐变描边”在“图层样式”对话框中的设置，如图,4-37,所示。,项目任务拓展,任务二 制作图片分类区,3.,图像混合模式的作用,首先了解混合模式中与产生最后效果有关的基色、混合色、结果色的概念。基色，图像原颜色。混合色，就是通过绘画、编辑工具、图层应用的颜色。结果色，是混合后得到的颜色。,主要混合模式包括：,正常，默认模式，混合色直接覆盖的目标对象或目标图层上上，使其成为结果色。当图像的颜色模式是“位图”或“索引颜色”时，“正常”模式就变成“阈值”模式。,溶解，编辑或绘制每个像素，使其成为结果色，和混合色相同。只是根据每个像素点所在的位置的透明度的不同，可随机以绘图色和底色取代。透明度越大，溶解效果就越明显。,背后，仅在图层的透明部分编辑或绘画，结果色和混合色相同。,清除，编辑或绘制每个像素，使其透明，将像素清除。此模式可用于形状工具、油漆桶工具、画笔工具、铅笔工具、“填充”命令和“描边”命令。,变暗，选择基色或混合色中较暗的颜色作为结果色。将替换比混合色亮的像素，而比混合色暗的像素保持不变。,正片叠底，将基色与混合色进行正片叠底。结果色总是较暗的颜色。任何颜色与黑色正片叠底产生黑色。任何颜色与白色正片叠底保持不变。,项目任务拓展,任务二 制作图片分类区,颜色加深，通过增加对比度使基色变暗以反映混合色。与白色混合后不产生变化。,线性加深，通过减小亮度使基色变暗以反映混合色。与白色混合后不产生变化。,变亮，选择基色或混合色中较亮的颜色作为结果色。比混合色暗的像素被替换，比混合色亮的像素保持不变。,滤色，将混合色的互补色与基色进行正片叠底。结果色总是较亮的颜色。用黑色过滤时颜色保持不变。用白色过滤将产生白色。,颜色减淡，通过减小对比度使基色变亮以反映混合色。与黑色混合则不发生变化。,线性减淡，通过增加亮度使基色变亮以反映混合色。与黑色混合则不发生变化。,叠加，对颜色进行正片叠底或过滤，具体取决于基色。图案或颜色在现有像素上叠加，同时保留基色的明暗对比。不替换基色，但基色与混合色相混以反映原色的亮度或暗度。,柔光，使颜色变暗或变亮，具体取决于混合色。此效果与发散的聚光灯照在图像上相似。若混合色比,50%,灰色亮，则图像变亮。若混合色比,50%,灰色暗，则图像变暗。绘画时使用纯黑或纯白色会产生明显变暗或变亮的区域，但不会出现纯黑或纯白色。,项目任务拓展,任务二 制作图片分类区,强光，对颜色进行正片叠底或过滤，具体取决于混合色。此效果与耀眼的聚光灯照在图像上相似。若混合色比,50%,灰色亮，则图像变亮，就像过滤后的效果，对于向图像添加高光非常有用。若混合色比,50%,灰色暗，则图像变暗，就像正片叠底后的效果，对向图像添加阴影非常有用。绘画时使用纯黑或纯白色会出现纯黑或纯白色。,亮光，通过增加或减小对比度来加深或减淡颜色，具体取决于混合色。若混合色比,50%,灰色亮，则通过减小对比度使图像变亮。若混合色比,50%,灰色暗，则通过增加对比度使图像变暗。,线性光，通过减小或增加亮度来加深或减淡颜色，具体取决于混合色。若混合色比,50%,灰色亮，则通过增加亮度使图像变亮。若混合色比,50%,灰色暗，则通过减小亮度使图像变暗。,点光，根据混合色替换颜色。若混合色比,50%,灰色亮，则替换比混合色暗的像素，而不改变比混合色亮的像素。若混合色比,50%,灰色暗，则替换比混合色亮的像素，而比混合色暗的像素保持不变。这对向图像添加特殊效果非常有用。,实色混合，将混合颜色的红色、绿色和蓝色通道值添加到基色的,RGB,值中。如通道的结果总和大于或等于,255,，则值为,255,；如果小于,255,，则值为,0,。,差值，从基色中减去混合色，或从混合色中减去基色，具体取决于哪一个颜色的亮度值更大。与白色混合将反转基色值；与黑色混合则不产生变化。,项目任务拓展,任务二 制作图片分类区,排除，创建一种与“差值”模式相似但对比度更低的效果，因而颜色较柔和。与白色混合将反转基色值。与黑色混合则不发生变化。,色相，用基色的明亮度和饱和度以及混合色的色相创建结果色。,饱和度，用基色的明亮度和色相以及混合色的饱和度创建结果色。若混合色的饱和度为,0,，则基色没有变化。,颜色，用基色的明亮度以及混合色的色相和饱和度创建结果色。这样可以保留图像中的灰阶，并且对于给单色图像上色和给彩色图像着色都会非常有用。,明度，用基色的色相和饱和度以及混合色的明亮度创建结果色，效果与“颜色”模式相反。,项目任务拓展,任务二 制作图片分类区,项目任务引导,任务三,制作图标分类列表区,本任务目标将通过对图像素材的简单处理和文字的制作来完成网店图标分类列标。这种图标分类列表的制作，也类似网页设计与制作里面的按钮。效果如图,4-38,所示。,项目任务实施,任务三,制作图标分类列表区,1.,创建图标文件,网店中图标文件一般放置在页面左边分类列表中。宽度基本在,160,像素，高度不一，本任务中文件大小以,160*80,像素为例。打开,Photoshop,，按要求新建文件，分辨率,72,，背景为白色。,2.,素材图片编辑,因为为了体现农产品特色，又是春季因此考虑使用绿色系的色调图片。在,Photoshop,中打开“露珠绿叶,.jpg”,。在工具箱中点选“裁剪工具”，在工具属性栏中“宽度”中输入“,160”,，同时用鼠标右键点选更改单位为“像素”，高度为“,80”,像素，分辨率为“,72”,，如图,4-39,所示。,项目任务实施,任务三,制作图标分类列表区,3.,粘贴新图层,在完成裁剪的素材图片中，按“,Ctrl+A,”,进行全选，再按“,Ctrl+C,”,进行复制。在新建的分类图标文件中，按“,Ctrl+V,”,进行粘贴。,将图片中的露珠改为在左侧，可选中被粘贴过来的“图层,1”,，点选“图像”菜单中的“选转画布”列表中的水平翻转进行翻转，效果如图,4-41,所示。,项目任务实施,任务三,制作图标分类列表区,4.,加圆角矩形边框,给图标加上圆角矩形边框，通过点击“图层”面板中的“创建新图层”图标，在“图层,1”,上创建透明“图层,2”,。点选工具箱中的“圆角矩形工具”，按图,4-42,所圈选设置，在“图层,2”,上添加白色圆角矩形。圆角矩形的大小位置可以通过“自由变换”来调整。,项目任务实施,任务三,制作图标分类列表区,通过按住,Ctrl,键，同时鼠标点击“图层,2”,的缩略图，选中“图层,2”,中的“圆角矩形”。然后执行“选择,/,反向”命令。接着点击图层面板中的“创建新图层”图标，创建新“图层,3”,。通过工具箱中的“油漆桶”工具，把“图层,3”,对应选区全部填充颜色为白色，如图,4-43,所示。,然后鼠标再一次执行“选择,/,反向”命令，接着选择键盘“,Del”,键按下，进行清除。然后将“图层,2”,的可见性关闭，效果如图,4-44,所示。最后点选“,Ctrl+D,”,，取消选区。,项目任务实施,任务三,制作图标分类列表区,5.,添加渐变效果,在“图层,3”,上添加新一图层为“图层,4”,，调整工具箱中的前景色和背景色，再点选工具箱中的“渐变工具”，如图,4-45,所示。,项目任务实施,任务三,制作图标分类列表区,编辑渐变效果可通过点击渐变工具属性栏中的渐变效果缩略图，调出“渐变编辑器”，如图,4-46,所示，进行调整。,调整后，可通过鼠标在图片上水平拖拉完成对“图层,4”,进行“线性渐变”，选择“图层,4”,对该渐变进行不透明度的调整，并通过鼠标选择将“图层,4”,拖拉至“图层,3”,下方，如图,4-47,所示。,项目任务实施,任务三,制作图标分类列表区,6.,保存分类图标模板,将当前文件存储为“分类图标,.,psd,”,作为分类图标模板，然后将进行添加分类图标的文字内容。,7.,添加图标文字,打开“分类图标,.,psd,”,，点选文字工具，在“图层,3”,添加对应文字图层内容“山核桃类”，如图,4-48,所示。,项目任务实施,任务三,制作图标分类列表区,然后选择“,Arial Narrow”,字体，在“山核桃类”下方打上“,hangzhou,country”,文字，完成该图标分类的制作，如图,4-50,所示。然后将文件存储为“山核桃类,.jpg”,完成图标分类列表的制作。,8.,制作其他图标分类,完成“山核桃类”图标制作后，继续打开“分类图标,.,psd,”,，重复步骤,7,，继续完成“茶叶类”、“蜜饯类”、“坚果类”、“鱼干类”、“保健品类”，等图标，如图,4-51,所示。,项目任务分析,任务三,制作图标分类列表区,1.,形状工具：,可向图像中添加各种形状：可以使用各种形状工具绘制形状，也可以从大量的预设的形状中进行选择，以及在单独的图层上排列矢量形状。,在使用形状或钢笔工具时，在对应的工具属性栏有三种不同的模式进行选择，如图,4-51,所示。分别是：,（,1,）形状图层,生成单独的图层创建形状。可以使用形状工具或钢笔工具来创建形状图层。因为可以移动、对齐、分布形状图层以及调整其大小，所以形状图层非常适于为,Web,页面创建图形。,项目任务分析,任务三,制作图标分类列表区,（,2,）路径,在当前图层中绘制一个工作路径，可使用它来创建选区、创建矢量蒙版，或者使用颜色填充和描边以创建栅格图形。除非存储工作路径，否则它只是一个临时路径。路径出现在“路径”面板中，路径绘制圆角矩形，如图,4-53,所示。,（,3,）填充像素,直接在图层上绘制，与绘画工具的功能非常类似。在此模式中工作时，创建的是栅格图像，而不是矢量图形。可以像处理任何栅格图像一样来处理绘制的形状。在此模式中只能使用形状工具，而不能使用钢笔工具。本任务中使用圆角矩形工具时，就是使用填充像素。,项目任务分析,任务三,制作图标分类列表区,2.,渐变工具：,渐变工具可以创建多种颜色间逐渐混合的效果。可以从预设渐变中选取或通过渐变编辑器创建新的渐变效果。渐变工具不能运用于“位图”或“索引颜色”模式的图像。在拖拉时用渐变填充区域，以按下鼠标处为起点和松开鼠标处为渐变终点。渐变工具属性栏如图,4-56,所示。,项目任务分析,任务三,制作图标分类列表区,渐变类型选项从左到右为：,线性渐变，以直线从起点渐变到终点。,径向渐变，以圆形图案从起点渐变到终点。,角度渐变，围绕起点以逆时针扫描方式渐变。,对称渐变，使用均衡的线性渐变在起点的任一侧渐变。,菱形渐变，以菱形方式从起点向外渐变。终点定义菱形的一个角。,工具属性栏中另一所圈选的勾选区为：,反向，对换渐变的起点和终点的设置，反转渐变填充中的颜色顺序。,仿色，可以在较少的颜色中创建较为平滑的过渡效果。仿色在网页设计中较为常用，因为较少的颜色数也就意味着可以减小图片的字节数，有利于在带宽有限的网络上快速传递。当然过少的颜色也必然损失图像的细节质量。一般该选项被默认勾选。,透明区域，可以保持渐变设定中的透明度，如果不勾选，渐变中就不带有透明区域。一般该选项也被默认勾选。,自学与拓展,任务三,制作图标分类列表区,1.,电子商务网店商品分类,在电子商务网店或者电子商务商城，商品分类是非常重要的一环。商品分类列表也在主页中占了重要位置。商品分类列表类似于传统商场中分区和分货架，分类的不同也能体现不同的商品管理方式。在制作分类列表时，常见采用文字结合图片处理的方式来实现。在电子商务商城中主要采用文字来分类，而网店更多采用图片修饰的方式来制作分类列表。,对于分类的方式，最常见的是采用商品种类进行分类，如图,4-60,所示。按商品种类不同来制作不同的图标，再进行文字和图片的美化修饰。,自学与拓展,任务三,制作图标分类列表区,还有和现实中一样常见的按价格分类，这类分类常为了表现价格上的优惠。电子商务之所以吸引消费者除了便利外，价格上的优惠也是非常重要的。再利用价格分类时，常见的是用,9.9,，,19.9,，,29,，,99,，,199,这种减法定价，能造成客户心理上的价格便宜感。还有就是,+1,元送什么的加法定价。,另外就是在现实中很少出现的时间分类，即按网店商品更新时间进行分类。这样是方便经常关注它的客户能便捷的了解该网店的最新信息和最新商品。,这些分类的方法，在实际运用中经常是几种合在一起使用，通过这样来方便不同类别的访问者，达到网站规划中对于导航分类栏的要求。,自学与拓展,任务三,制作图标分类列表区,2.,渐变文字,对文字运用渐变工具，使其产生渐变效果，如图,4-63,所示。,文字图层不能运用渐变工具，需要进行“栅格化”，通过“图层”菜单中的“栅格化”列表中的“文字”实现。“栅格化”后转换为正常图层，并使其内容不能再作为文本编辑，如图,4-64,所示。然后通过按住“,Ctrl”,用鼠标点选“栅格化”后图层缩略图，沿文字边缘产生选区。再运用渐变工具完成渐变文字。,自学与拓展,任务三,制作图标分类列表区,3.,制作变色文字效果,新建文档后，通过文字工具创建文字图层“,每周特价,”,。然后选中图层后右键单击，选择“复制图层”，将字体改为白色。然后选中复制的图层，右键单击在列表中选择“栅格化文字”，再用“多边形套索”工具，选出如图,4-65,所示的位置。然后按,Delete,删除，再通过“,Ctrl+D,”,取消选取。,自学与拓展,任务三,制作图标分类列表区,选择文字图层，添加图层样式，相应设置如图,4-66,至,4-69,所示,完成制作。,自学与拓展,任务三,制作图标分类列表区,自学与拓展,任务三,制作图标分类列表区,项目任务引导,任务四,制作商品描述模板,本任务目标将完成网店商品描述页面中对商品描述的图片模板。在制作过程中能够对抽取的素材进行修复，借助辅助工具对编辑元素进行定位和制作，完成效果如图,4-75,所示。,项目任务实施,任务四,制作商品描述模板,1.,创建商品描述文件,在商品描述页面中，经常通过商品描述模板来描述。本任务中文件大小以,740*500,像素为例。打开,Photoshop,，按要求新建文件，分辨率,72,，背景为白色。,2.,置入矢量素材图片,本次通过矢量素材“春天,.,ai,”,来做商品描述页面的背景。选中新建文件背景图层，通过“文件,/,置入”命令，在“置入”对话框中选择素材文件夹路径，找到“春天,.,ai,”,，打开。在对应的“置入,PDF”,对话框中，选择“页面”后确定。通过控点调整至背景图层的大小，如图,4-76,所示，双击或点选所圈执行图标完成置入。,项目任务实施,任务四,制作商品描述模板,3.,抽取商品文字描述素材,打开图片文件“,_IGP1539.jpg”,，点击工具箱的“矩形选框工具”，进行文字描述的选区，如图,4-77,所示。,项目任务实施,任务四,制作商品描述模板,4.,图章工具修饰图片,通过工具箱的放大镜放大图片便于修饰图片。点选工具箱的“图章工具”，调整工具栏属性，然后按照“,Alt”,键在图像可以用来修饰的地方单击，即为“定义采样点”，再在需要修饰的地方绘制，就能把“定义采样点”的图案复印至需要修饰的地方，如图,4-78,所示。,项目任务实施,任务四,制作商品描述模板,通过多次细致的图章工具处理后，完成对该图片的修饰，如图,4-79,所示。可再通过“裁剪工具”修剪去多余部分。,项目任务实施,任务四,制作商品描述模板,5.,辅助参考线的设置,为了在图像中对其他图层的图案元素更好定位，可通过辅助参考线设置。点击“视图”菜单，在如图,4-80,中圈选设置。然后点选工具箱“移动工具”按钮，从标尺拉动参考线如图,4-81,所示。,项目任务实施,任务四,制作商品描述模板,6.,粘贴文字描述素材,全选修饰好的文字描述图片，然后复制，再在商品描述文件中粘贴，通过“自由变换”调整至合适大小，并再次调整参考线来适应粘贴的内容，如图,4-82,所示。,项目任务实施,任务四,制作商品描述模板,7.,添加圆角矩形背景,选择“春天”图层，再添加图层“图层,2”,。选择圆角矩形工具，按如图,4-83,所圈选的拖拉白色圆角矩形，同样也在右侧拖拉白色圆角矩形背景。,项目任务实施,任务四,制作商品描述模板,8.,粘贴商品图片,打开商品图片“,_IGP1542.jpg”,进行图片处理后，粘贴入“图层,2”,上方的“图层,3”,中，通过“自由变换”调节大小并用橡皮工具消除阴影部分，效果如图,4-84,所示。,项目任务实施,任务四,制作商品描述模板,9.,图层描边,在图层上方新添“图层,4”,，再选择回“图层,2”,，按住“,Ctrl”,点选对应图层缩略图，载入选区。再选择“图层,4”,，通过“编辑,/,描边”命令，在“描边”对话框中如图,4-85,所示设置。,项目任务实施,任务四,制作商品描述模板,10.,添加文字说明,通过“移动工具”将参考线向标尺拖拉移出“参考线”后，添加文字说明。分别对应生成文字图层：“商品展示”、“产品名称,:”,、“生产商,:”,、“生产日期,:”,和“保质期,:”,通过“描边”样式修饰，在参考线的辅助下，放置至合适位置，如图,4-86,所示。,项目任务实施,任务四,制作商品描述模板,11.,图案图章工具添加水印,打开文件“水印（白色）,.,psd,”,，然后全选画布，单击“编辑”菜单中的“定义图案”，在“图案名称”对话框中“确定”。回到商品描述模板文件，在文本图层最上方添加“图层,5”,，工具箱中点选“图案图章工具”，在对应的工具栏属性中，在如图,4-87,所圈选中选择定义的图案“水印（白色）,.,psd,”,，再在“图层,5”,中绘制,Logo,水印效果。,项目任务分析,任务四,制作商品描述模板,1.,仿制图章工具,能将图像的一部分应用到其他图像或同一图像的其他部分。也可以将一个图层的一部分绘制到另一个图层。仿制图章工具对于复制对象或移去图像中的缺陷很有用。,在使用仿制图章工具时，首先从仿制像素的区域上设置一个取样点，并在另一个区域上绘制“复印”。若选择“对齐”选项（默认为勾选），在每次停止并重新开始绘画时，都可以重新使用最新的取样点。若取消勾选，每次停止并重新开始绘画时，都使用同一个初始取样点。采样点即为复制的起始点。,对仿制图章工具可使用任意的画笔笔尖，这样方便准确控制仿制区域的大小。也可以使用不透明度和流量设置来控制对仿制区域应用绘制的方式。选择不同的笔刷直径会影响绘制的范围，而不同的笔刷硬度会影响绘制区域的边缘融合效果。,样本，可选择从指定的图层中进行数据取样。单击“取样”选择右侧的“关闭以在仿制时包含调整图层”图标，意味着从调整图层以外的所有可见图层中取样。,项目任务分析,任务四,制作商品描述模板,2.,图案图章工具,用来复制预先定义好的图案。当通过“编辑”菜单的“定义图案”后，所定以的图案需为矩形。通过点按图案图章工具属性栏