项目六--装修网店实例[156页]课件

1、重庆市中等职业教育重点专业建设电子商务技术专业网店美工项目六 装修网店任务一 装修美容化妆网店 美容化妆品市场以女性消费者为主，设计网店色调和元素时，可以考虑去迎合女性的大众审美，如在色彩上可以运用橙黄色、粉色、红色、淡绿色等颜色，以体现女性柔和的性格特点。设计元素上可以尽量使用适合的曲线元素，来体现女性的温柔婉约。同时，美容化妆商品一般包装颜色比较醒目，特别是彩妆品，所以在设计店铺模板时不宜设计得过于复杂，以能突显商品特点为主要设计原则，避免喧宾夺主。一、初识美容化妆网店二、美容化妆网店最终效果图任务一 装修美容化妆网店1.美容网站店招与导航栏制作方法。(1).启动Photoshop CS6

2、新建一个尺寸为宽950px高1597px，分辨率为120dpi的文件，设置文件名为“美容化妆网店”。为了方便后期制作，先将图层进行分组，如图6-2所示。三、美容化妆网店制作步骤任务一 装修美容化妆网店 (2).在图层组“底色”中新建图层，填充色号为# ffe9f6的粉色作为网店底色，在图层组“店招”中新建图层运用矩形工具绘制矩形作为店招底色，色号为# de6bae。任务一 装修美容化妆网店三、美容化妆网店制作步骤(3).设置前景色为白色，绘制白色矩形，并为矩形添加蒙版，在蒙版中执行黑白渐变，制作出从白色到透明色的矩形长条作为底纹，并复制5个，置于底纹右边。任务一 装修美容化妆网店三、美容化妆网

3、店制作步骤(4).设置前景色为# b53894，运用矩形工具绘制矩形条，并执行“图层样式”“投影”。任务一 装修美容化妆网店三、美容化妆网店制作步骤(5).运用工具栏“自定形状工具”绘制图钉图形，颜色为#f39700；执行“图层样式”“投影”。任务一 装修美容化妆网店三、美容化妆网店制作步骤(6).输入文字“TATA”，字体为Castellar，字号为31，颜色为# 831867。输入文字“她他美妆”，字体为方正粗倩简体，字号为18，颜色为#eff88f，执行“图层样式”“描边”，描边大小为3，颜色为#771e5f，运用自由变化工具和移动工具调整字体位置。任务一 装修美容化妆网店三、美容化妆网

4、店制作步骤(7).设置前景色为色号# fff100的黄色，运用工具栏“自定义形状”工具选择皇冠图案绘制并执行“图层样式”“描边”，描边颜色为# b53894，大小为3。设置前景色为色号# 500047的深紫色，运用工具栏“自定义形状”绘制心形图案，并输入文字“分享”，字体为黑体，字号为7，颜色为# 500047，将心形图案和文字置于皇冠之上。任务一 装修美容化妆网店三、美容化妆网店制作步骤(8).复制之前制作的透明渐变矩形长条底纹图层，运用自由变换工具执行垂直翻转并将此底纹层置于制作好的店名图层上方。任务一 装修美容化妆网店三、美容化妆网店制作步骤(9).添加文字“全/球/美/妆/正/品/保/

5、证”，字体为黑体，字号为9，颜色为#fff100。任务一 装修美容化妆网店三、美容化妆网店制作步骤(10).设置前景色为#eeeeee，运用工具栏“圆角矩形工具”绘制圆角矩形条作为搜索输入栏。设置前景色为#b53894，运用工具栏“自定义形状”选择“横幅三”绘制两个不规则色块，在色块上添加文字“搜索”“+关注”，字体为黑体，字号为8，颜色为白色。任务一 装修美容化妆网店三、美容化妆网店制作步骤(11).设置前景色为#fff45c，运用工具栏“自定义形状”选择“警长绘制”绘制图案，并在图案上添加文字“收藏本店”，字体为方正大黑，字号为9，颜色为#500047。任务一 装修美容化妆网店三、美容化妆

6、网店制作步骤(12).调整店招内各元素位置，完成店招设计。任务一 装修美容化妆网店三、美容化妆网店制作步骤（13）选择图层组“导航栏”，设置前景色为#c490bf，运用工具栏“矩形工具”绘制矩形长条，并执行“图层样式”“斜面浮雕” 。任务一 装修美容化妆网店三、美容化妆网店制作步骤（14）添加文字“所有分类”“首页”“促销专区”“美容护发”“彩妆香水”“美发护发”“美妆工具”“美妆顾问”，字体为方正大黑，字号为9，“所有分类”和“美妆顾问”颜色为# fff100，其他文字颜色为# 500047 。任务一 装修美容化妆网店三、美容化妆网店制作步骤（15）设置前景色为# fff100，运用多边形工

7、具选择边数为3，绘制三角形并置于“所有分类”文字后边，调整导航栏中文字位置，完成导航栏制作。任务一 装修美容化妆网店三、美容化妆网店制作步骤2.美容化妆网店公告栏制作。任务一 装修美容化妆网店(1) 打开“任务1”制作文件 ，选择图层组“公告栏”，设置前景色为#fbd8d8，运用工具栏“矩形工具”绘制一个宽为950px高为482px的矩形。三、美容化妆网店制作步骤任务一 装修美容化妆网店(2)运用工具栏“自定义形状”选择蝴蝶元素进行绘制，执行“图层样式”“渐变叠加”为蝴蝶元素添加渐变颜色。三、美容化妆网店制作步骤（3）运用以上同样方法制作多个不同色彩蝴蝶并运用自由变化工具和移动工具调整蝴蝶大小

8、和位置，制作出底纹效果。任务一 装修美容化妆网店三、美容化妆网店制作步骤（4）打开元素“素材”“模块六”“美容化妆网店”“公告元素1”至“公告元素7”，运用钢笔工具选取出商品元素，运用自由变换工具和移动工具调整商品元素到合适大小和位置。任务一 美容化妆网店三、美容化妆网店制作步骤（5）.添加文字“超值彩妆团”，字体为方正粗倩简体，字号为80，颜色为#3e5a84，执行菜单栏“文字”“文字变形”为文字添加鱼形变形效果，执行“图层样式”“描边”为文字添加大小为7，颜色为白色的描边效果。任务一 装修美容化妆网店三、美容化妆网店制作步骤（6）添加文字“2.14 10:00 准时开团”，字体为方正粗倩简

9、体，字号为30，颜色为#fbd8d8，执行菜单栏“文字”“文字变形”为文字添加鱼形变形效果，弯曲度55%，执行“图层样式”“描边”为文字添加大小为7，颜色为白色的描边效果。任务一 装修美容化妆网店三、美容化妆网店制作步骤（7）运用工具栏“椭圆工具”绘制4个圆形图案，宽和高均为17，颜色为1个#eb6877，其他3个#fbd8d8，作为公告栏的分页显示标识，并为其中三个颜色形同的圆形标识添加“图层样式”“内阴影”效果。任务一 美容化妆网店三、美容化妆网店制作步骤(8) 调整公告栏文件中各元素位置，完成公告栏设计制作。任务一 装修美容化妆网店三、美容化妆网店制作步骤3.美容化妆网店侧边栏制作。任务

10、一 装修美容化妆网店(1)打开任务1“美容化妆网店”制作文件 ，选择图层组“侧边栏”，在图层组内新建图层组“客服中心”“热销商品”“宝贝分类” 。三、美容化妆网店制作步骤(2) 选择图层组“客服中心”，在组内新建图层设置前景色为#dc69ad深粉色，运用工具栏“矩形工具”绘制矩形长条，作为客服中心标题底色，运用制作店招底纹的方法，为客服中心标题底色添加渐变透明条纹底纹。任务一 美容化妆网店三、美容化妆网店制作步骤(3) 运用工具栏“自定义形状工具”绘制信封图标，颜色为黄色。添加文字“客服中心”，字体为方正粗倩简体，字号为11，颜色为黄色。任务一 装修美容化妆网店三、美容化妆网店制作步骤(4).

11、设置前景色为#6a005f，运用工具栏“圆角矩形工具”绘制圆角矩形。载入元素“素材”“模块六”“美容化妆网店”“淘宝旺旺图标”，添加文字“美妆达人”，字体为黑体，字号为12，颜色为#a8f7ff，制作出美妆达人图标。任务一 装修美容化妆网店三、美容化妆网店制作步骤(5)添加文字“工作时间”“周一至周五：9:00-21:00”“周六至周日：0:00-24:00” “售前”“售后”，字体为黑体，字号为8，颜色为585657。载入元素“素材”“模块六”“美容化妆网店”“和我联系图标”，分别置于售前和售后文字的下方，一边4个。调整客服中心各元素位置，完成客服中心制作。任务一 装修美容化妆网店三、美容化

12、妆网店制作步骤（6）选择图层组“宝贝分类”，运用制作客服中心标题的方法制作宝贝分类标题。输入分类项目文字，制作分类信息。运用工具栏“直线工具”绘制直线段，设置直线填充为无色，描边颜色为#f19ec2，宽度为2，选项为虚线。任务一 装修美容化妆网店三、美容化妆网店制作步骤（7）选择图层组“热销宝贝”，运用制作客服中心标题底纹的方法制作热卖宝贝标题底纹。输入文字“热销宝贝”，字体为方正粗倩简体，字号为11，颜色为黄色。运用工具栏“自定义图形”绘制爆炸标，颜色为黄色。输入文字“HOT”，字体Impact，字号9，颜色# 6a0f44，并将文字置于爆炸标上层。任务一 装修美容化妆网店三、美容化妆网店制

13、作步骤（8）运用工具栏“矩形工具”绘制矩形，设置矩形属性。载入已处理好的商品图片元素，去除元素背景色。输入商品名称文字“韩国正品SNP动物面膜贴”。输入价格文字“99”，输入单位文字“元/盒” 。任务一 装修美容化妆网店三、美容化妆网店制作步骤（9）载入已处理好的商品图片元素，运用步骤5的方法制作另一个商品展示框。任务一 装修美容化妆网店三、美容化妆网店制作步骤（10）调整侧边栏文件内各元素位置，完成侧边栏设计制作。任务一 装修美容化妆网店三、美容化妆网店制作步骤4 .美容化妆网店宝贝展示区制作。任务一 装修美容化妆网店（1）打开任务1“美容化妆网店”制作文件 ，选择图层组“宝贝展示区”，在图

14、层组内新建图层组“男士专区”“掌柜推荐”。三、美容化妆网店制作步骤（2）运用工具栏“矩形工具”绘制一个矩形，并运用钢笔工具在矩形和直接选取工具对矩形的节点进行修改，使其形状为丝带状。输入文字“掌柜推荐” 。运用工具栏“直线工具”绘制两条直线。任务一 装修美容化妆网店三、美容化妆网店制作步骤（3）设置前景色为白色，运用工具栏“矩形工具”绘制矩形，并执行描边效果。载入已处理好的商品图片元素，并将其放置于矩形框内。 运用工具栏“圆角矩形工具”绘制圆角矩形图案。添加商品名称和价格，并将价格文字置于圆角矩形图案上层。任务一 装修美容化妆网店三、美容化妆网店制作步骤（4）载入已处理好的商品图片元素，运用步

15、骤3的方法制作出其余商品展示框任务一 装修美容化妆网店三、美容化妆网店制作步骤（5）复制掌柜推荐分类标识，将“飘带端头”对颜色和文字进行修改，制作出男士专区标题。任务一 装修美容化妆网店三、美容化妆网店制作步骤（6）运用工具栏“矩形工具”绘制矩形，调整描边大小为2。载入已处理好的商品图片元素，将其放置于矩形框内。添加商品名称和价格文字。任务一 装修美容化妆网店三、美容化妆网店制作步骤（7）载入已处理好的商品图片元素，运用步骤6的方法制作出其余商品展示框。任务一 装修美容化妆网店三、美容化妆网店制作步骤（8）调整“宝贝展示区”各板块元素位置，完成“宝贝展示区”设计制作。调整“美容化妆网店”文件内

16、各板块元素位置，完成网店整体设计。任务一 装修美容化妆网店三、美容化妆网店制作步骤四、教学小结 本任务介绍了美容化妆网店的装修设计技巧以及如何运用Photoshop软件来对美容化妆网店进行装修设计。在教学过程中，通过教师实例讲解示范，学生实例操作练习，发现大多数学生能够按照讲解实例来进行美容化妆网店装修设计，总体来说，本任务实现了预定的教学目标。任务一 装修美容化妆网店 计算机数码类产品属于科技较强的商品，为了突出此类产品的现代感，在店铺颜色上可以选择蓝色系的科技色调，也可以选择灰色系的品味色调来进行设计，切忌色彩搭配过于花哨。使用元素时可以参考简单几何体等具有稳重大方感的元素，尽量避免多过使

17、用复杂花边元素，以突出商品，体现特色为主。一、初识计算机数码类产品网店任务二 装修计算机数码类网店二、计算机数码类产品网店最终效果图任务二 装修计算机数码类网店1.计算机数码类网店店招与导航栏制作。三、装修计算机数码类网店制作步骤任务二 装修计算机数码类网店（1）启动Photoshop C6新建一个尺寸为宽950px高2014px，分辨率为120dpi的文件，设置文件名为“计算机数码类网店”。为了方便后期制作，先将图层进行分组。任务二 装修计算机数码类网店(2)在图层组“底色及底部信息”中新建图层，设置前景色为# b6cf96，背景色为#498589为图层填充渐变效果作为网店底色三、装修计算机

18、数码类网店制作步骤（3）选择图层组“店招”，在组中新建图层，设置前景色为白色，运用矩形工具绘制一个长为950px高为134px的白色矩形作为店招底色，新建一个图层，运用矩形选区工具选区矩形长条，为其填充渐变效果，将渐变长条置于白色矩形底色下方位置，渐变颜色为 # 696bb2、# ad89d2 、# c0f4fb任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（4）运用工具栏“自定义形状工具”绘制拼图图案，执行“图层样式”“渐变叠加”为拼图图案添加于渐变长条相同的渐变效果。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（5）载入元素“素材”“模块六”“计算机数码类网店

19、”“Logo”，运用自由变换工具调整Logo大小，将其置于店招左侧。在Logo右边添加店名文字“多维数码旗舰店”，字体为黑体，字号为19，颜色为#0b2136。添加文字“贴心服务 用心品质”，字体为黑体，字号为8，颜色为0b2136，调整文字间距并置于Logo和店名文字下方。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（6）运用工具栏“矩形工具”绘制矩形，设置矩形为白色，描边大小为0.55，描边颜色为# 1d2088。运用工具栏“矩形工具”绘制颜色为# 1d2088矩形，并在矩形上层运用工具栏“自定义图形工具”绘制放大镜元素，颜色为白色。运用工具栏“矩形工具”绘制矩形，设置2个

20、矩形，颜色分别为# 1d2088、# ff0078，并在矩形上层添加文字“+收藏”、“+分享”，字体为黑体，字号为8，颜色为白色。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤(7)在店招下方渐变矩形条上添加分类文字“本店所有商品”、“首页”、“手机周边”、“电脑配件”、“相机配件”、“影音专区”，字体为黑体，字号为8，颜色为白色。在文字“本店所有商品”右边运用工具栏“自定义工具”绘制箭头圆圈图标，颜色为白色，在文字下方运用矩形工具绘制矩形，颜色为#a3a4a5。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（7）调整店招和导航栏各元素，完成设计。任务二 装修计算机

21、数码类网店三、装修计算机数码类网店制作步骤2.计算机数码网店公告栏制作。（1）打开任务1“计算机数码类网店”制作文件 ，选择图层组“公告栏”，运用工具栏“矩形工具”绘制一个宽为950px高为500px的矩形，执行“图层样式”“渐变叠加”为矩形添加渐变效果。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（2）新建图层，运用画笔工具，调整画笔硬度为0%，颜色为白色，绘制光点效果。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（3）运用工具栏“自定义形状工具”绘制各种雪花效果，颜色为白色，并适当调整雪花大小和透明度。任务二 装修计算机数码类网店三、装修计算机数码类网店制作

22、步骤（5）载入元素“素材”“模块六”“计算机数码网店”“公告元素1”至“公告元素4”，运用魔棒工具选取出商品元素，运用自由变换工具和移动工具调整商品元素到合适大小和位置。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（6）载入元素“素材”“模块六”“计算机数码网店”“公告元素5”，运用钢笔工具勾选出蝴蝶结部分，为步骤4中商品元素添加新色蝴蝶结效果。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（7）运用工具栏“直线工具”绘制4条线段，颜色为#737272，置于每个商品图片的蝴蝶结上方。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（8）载入元素“素材”

23、“模块六”“计算机数码网店”“公告元素6”雪人图片，选择“图层混合模式”“正片叠底”，并将元素置于公告栏画面左下角。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（8）添加文字“温暖随身带”字体为方正粗倩简体，字号为39，颜色为# 900a0f。添加文字“移动不断电”字体为方正粗倩简体，字号为43，颜色为# 900a0f。添加文字“可爱暖手移动电源，正在热卖中。”字体为方正粗倩简体，字号为12，颜色为# 3f345df。运用移动工具调整文字到合适位置。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（9）运用工具栏“矩形工具”绘制1各矩形条，颜色填充为f6b37f，描

24、边大小为0.52，描边颜色为#898989。将绘制好的矩形条复制3各，填充颜色修改为#bfbfbf，再将4个矩形条并排对齐于公告栏画面下边缘，制作出翻页显示效果。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（10）调整公告栏各元素位置，完成公告栏设计。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤3.计算机数码网店侧边栏制作。（1）打开任务1“计算机数码网店”制作文件 ，选择图层组“侧边栏”，在图层组内新建图层组“收藏”、“客服中心”、“热销商品”、“宝贝分类”。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（2）选择图层组“收藏”，在组内新建图层设

25、置前景色为# 6c6bb3，运用工具栏“矩形工具”绘制矩形，作为收藏标识底色。运用工具栏“多边形工具”设置边数为3，绘制三角形，颜色为# bdc8ec。复制一个绘制好的三角形，执行“自由变换”“水平翻转”，将两个三角形分别对齐矩形的左右两个边。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（3）添加文字“BOOK MARK”，字体为04b_21，字号为19，颜色为白色，执行“图层样式”“投影” 。添加文字“收藏本店”，字体为幼圆，字号为6，颜色为白色。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（4）选择图层组“客服中心”，新建一个图层，设置前景色为白色，运用工具

26、栏“矩形工具”绘制白色矩形作为客服中心底色。载入元素“素材”“模块六”“计算机数码网店”“阿里在线”元素，并复制7个，添加客服中心相关文字，字体为幼圆，颜色为黑体。运用工具栏“直线工具”绘制分割区域直线段，颜色为灰色。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（5）选择图层组“分类导航”，新建一个图层，设置前景设为白色，运用工具栏“矩形工具”绘制白色矩形作为宝贝导航区域底色。运用工具栏“矩形工具”绘制矩形，颜色为# 6b6bb3，添加文字“宝贝分类”，字体为幼圆，字号为10，颜色为白色，执行“图层样式”“投影”，为文字添加阴影效果。任务二 装修计算机数码类网店三、装修计算机数

27、码类网店制作步骤（6）运用工具栏“矩形工具”绘制矩形，颜色为# b496d9，运用画笔工具在矩形上绘制出光点效果。添加文字“手机配件”，字体为幼圆，字号为7，颜色为白色，执行“图层样式”“投影”，为文字添加阴影效果。运用工具栏“自定义图形工具”绘制圆圈加好图标，颜色为白色，为其加上与文字相同的阴影效果。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（7）输入手机配件分类相关文字，字体为幼圆，字号为7，颜色为#7f7e7e。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（8）运用制作“手机配件”分类版块的方法制作出“电脑配件”、“相机配件”、“音响配件”分类版块。任务

28、二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（9）选择图层组“分类导航”，新建一个图层，设置前景设为白色，运用工具栏“矩形工具”绘制白色矩形作为宝贝导航区域底色。运用工具栏“矩形工具”绘制矩形，颜色为# 6b6bb3，添加文字“热销宝贝”，字体为幼圆，字号为10，颜色为白色，执行“图层样式”“投影”，为文字添加阴影效果。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（10）载入已处理好的商品图片元素“素材”“模块六”“计算机数码网店”“商品元素1”，添加商品价格文字“126.0”，字体为Impact，字号为15，颜色为#870000。添加商品品名文字“萌宠可爱卡通迷你

29、暖手移动电源”，字体为幼圆，字号为6，颜色为# 5a5959。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（11）载入已处理好的商品图片元素“素材”“模块六”“计算机数码网店”“商品元素5”，运用步骤10的方法添加商品文字信息，完成热销商品版块设计。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤4.计算机数码网店商品展示区制作。（1）打开任务1“计算机数码网店”制作文件 ，选择图层组“商品展示区”，在图层组内新建图层组“特价专区”、“手机配件”、“电脑配件”、“电脑配件”、“相机配件”、“音响专区”。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（2

30、）选择图层组“特价商品”，新建一个图层，设置前景色为# 6b6bb3，运用工具栏“多边形工具”设置边数为3，绘制一个三角形。运用工具栏“矩形工具”绘制矩形长条，颜色为# 6b6bb3，将矩形长条与三角形上边对齐。添加文字“距活动结束还有：”，字体为幼圆，字号为7，颜色为白色。添加文字“0天6小时42分20秒”，字体为幼圆，字号为6.3，颜色为# 790202，在数字“0”“6”“42”“20”下层运用“矩形工具”绘制白色矩形框。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（3）添加文字“SALE”，字体为Agency FB，字号为34，颜色为# 790202。执行“图层样式”“

31、投影”为文字添加阴影效果，如图6-95所示。添加文字“特价”，字体为幼圆，字号为6，颜色为白色。执行与“SALE”同样的阴影效果。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（4）运用工具栏“矩形工具”绘制白色矩形，运用工具栏“直接选取工具”，选取矩形右上角节点向左移动，调整矩形为侧边梯形。复制切边梯形，执行“自由变换”“水平翻转”，将两个侧边梯形放置于三角形标题的左右两侧。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（5）载入已处理好的商品图片元素“素材”“模块六”“计算机数码网店”“商品元素5”，添加商品品名文字“二合一数据线”，字体为黑体，字号为8，颜色为

32、黑色。添加价格符号“”，字体为Arial，字号为16，颜色为#790202。添加价格文字“29.9”，字体为Arial，字号为27，颜色为#790202。载入已处理好的商品图片元素“模块六”“计算机数码网店”“商品元素6”，运用同样的方法添加商品信息文字。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（6）运用工具栏“矩形工具”绘制白色矩形，载入已处理好的商品图片元素“素材”“模块六”“计算机数码网店”“商品元素14”，添加商品品名文字“惠普无线鼠标”，字体为黑体，字号为8，颜色为黑色。添加价格符号“”，字体为Arial，字号为16，颜色为#790202。添加价格文字“69.9”

33、，字体为Arial，字号为27，颜色为#790202。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（7）运用步骤6的方法添加其他商品图片及信息，完成“特价商品”版块设计。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（8）运用工具栏“矩形工具”绘制矩形长条，颜色为# 88abda。运用工具栏“矩形工具”绘制矩形，颜色为# 6b6bb3。运用工具栏“直排文字工具”，添加文字“手机配件”，字体为黑体，字号为18，颜色为白色。执行“图层样式”“投影”为文字添加阴影效果。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（9）载入已处理好的商品图片元素“素材”“

34、模块六”“计算机数码网店”“商品元素7”，添加商品品名文字“iphone6s手机保护套”，字体为黑体，字号为8，颜色为黑色。添加价格符号“”，字体为Arial，字号为16，颜色为#790202。添加价格文字“9.9”，字体为Arial，字号为27，颜色为#790202。载入已处理好的商品图片元素“模块六”“计算机数码网店”“商品元素8”，运用同样的方法添加商品信息文字。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤（10）运用步骤9同样的方法设计制作“电脑配件”、“电脑配件”、“相机配件”、“音响专区”版块。任务二 装修计算机数码类网店三、装修计算机数码类网店制作步骤四、教学小结

35、 本任务介绍了装修计算机数码类网店的思路以及如何运用Photoshop软件来对计算机数码类网店进行装修设计。在教学过程中，通过教师实例讲解示范，学生实例操作练习，发现大多数学生能够按照讲解实例来进行计算机数码类网店装修设计，总体来说，本任务实现了预定的教学目标。任务二 装修计算机数码类网店 男性商品类网店的消费群体非常有针对性，在设计风格上要尽量符合男性大众审美，而同时又要突出店铺特色。在设计时，可以运用一些稳重与活泼的颜色相搭配方式，如运动而富有活力的浅蓝色搭配沉稳的深灰、黑色等。也可以根据其售卖的商品特点来进行色彩的运用，如男性剃须刀可使用相对干净的色调，男士运动服装、鞋包可使用活泼而富有

36、生命力的色调，男士西装等比较正式的商品则可只用灰色、黑色等相对稳重的色调。设计版块元素时，可采用相对硬线条的元素，体现男性的个性特征。一、初识男性商品类网店任务三 装修男性商品类网店二、男性商品类网店最终效果图任务三 装修男性商品类网店（1）启动Photoshop新建一个尺寸为宽950px高1700px，分辨率为120dpi的文件，设置文件名为“男性商品网店”。为了方便后期制作，先将图层进行分组。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店1.男性商品类网店店招与导航栏制作。（2）在图层组“底色及底部信息”中新建图层，填充颜色为# 51aedd，作为网站底色。 载入元素“素材”“项

37、目六”“男性商品类网站”“齿轮元素”，设置图层混合模式为“正片叠底” ， 为齿轮元素图层添加图层蒙版，运用画笔工具涂抹元素边缘，是齿轮元素边缘自然过度。再复制一个齿轮元素图层做少量修改后置于画面合适位置。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（3）选择图层组“店招”，在组中新建图层，运用工具栏“矩形工具”绘制矩形作为店招底色；再运用“矩形工具”绘制一个矩形，颜色为# 405a5f，将此图层置于店招底色图层上方。运用工具栏“矩形工具”绘制一个黑色矩形，运用工具栏“直接选取工具”选中矩形节点，将矩形变换为侧边梯形并为侧边梯形添加阴影效果。三、装修男性商品类网店制作步骤任务三 装修

38、男性商品类网店（4）载入元素“素材”“模块六”“男性商品类网店”“Logo”；运用“矩形工具”绘制白色矩形置于Logo图层下方。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（5）添加文字“男士馆”，字体为华文中宋，字号为28，颜色为白色；添加文字“剃须刀 / Zippo / 皮具”，字体为黑体，字号为7，颜色为白色。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（6）运用工具栏“自定义形状工具”绘制徽章图形，颜色为白色；添加文字“品质保证”，字体为方正大黑，字号为7，颜色为黑色。运用制作“质保保证”图标的方法制作“如实描述”、“消保认证”、“无忧售后”标识。三、装修男性商

39、品类网店制作步骤任务三 装修男性商品类网店（8）选择“导航栏”图层组，新建一个图层，运用工具栏“矩形工具”，绘制1个矩形条。添加分类相关文字。运用店招绘制侧边梯形的方法绘制两个侧边梯形，颜色为#666a25，置于“所有宝贝”文字图层下方，颜色为# 4e1b28，置于“VIP专区”文字图层下方。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店三、装修男性商品类网店制作步骤任务三 装修男性商品类网店2.男性商品类网店公告栏制作。（1）打开任务1“男性商品类网店”制作文件 ，选择图层组“公告栏”，运用工具栏“矩形工具”绘制一个宽为950px高为460px的矩形，颜色为# 183a58 。（2

40、）载入元素“素材”“项目六”“男性商品类网店”“人物”，将其置于画面右下方，设置图层不透明度为90%，图层混合模式为叠加，运用蒙版工具去除人物元素边缘部分；复制一个人物图层，去掉图层蒙版，修改图层不透明度为60%。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（3）新建一个图层，运用工具栏“矩形选区工具”，选区公告栏画面左侧位置，填充白色，设置图层混合模式为叠加，添加图层蒙版，将矩形生硬的边缘涂抹模糊，为底色添加光亮效果。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（4）运用工具栏“矩形工具”绘制白色矩形条，将其修改为上小下大的梯形，设置图层不透明度为20%，添加图层蒙版

41、，运用画笔工具涂抹矩形下方使白色矩形条形成由白到透明的渐变效果；复制一个矩形条图层，执行“自由变换”“水平翻转”，将其置于适当位置。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（5）载入已处理好的商品图片元素“素材”“项目六”“男性商品类网店”“飞利浦RQ1150”;执行“图层样式”“外发光”;新建图层运用画笔工具绘制阴影在商品元素下方。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（6）添加文字“轻松掌握”，执行“图层样式”“描边”，设置描边大小为4，颜色为#695c18；执行“图层样式”“颜色叠加”，混色模式为颜色加深，颜色为# f2b85c，不透明度为50%，执行“

42、图层样式”“内发光”、“渐变叠加”、“投影” 。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（7）运用步骤6的方法添加文字“准确切剃” 。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（8）运用工具栏“钢笔工具”绘制不规则梯形，颜色为# 581616；执行“图层样式”“描边”，描边大小为3，颜色为白色；执行“图层样式”“阴影”，描边大小为3，颜色为白色。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（9）添加文字“RQ1150”、“电动剃须刀”，字体为方正大黑，字号为18，颜色为# f8ff37 。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（ 9）

43、添加文字“飞利浦2D臻峰系列”，字体为方正大黑，字号为12，颜色为白色；添加文字“每次滑动切剃20%以上胡须”，字体为方正大黑，字号为16，颜色为白色。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（9）运用工具栏“自定义图形工具”绘制圆圈箭头图标；复制该图标，执行“自由变换”“水平翻转”，将两个图标分别置于公告栏画面左右两侧。运用工具栏“矩形工具”绘制4个方块，将4个方块并排置于画面中下位置。调整各元素位置，完成公告栏设计制作。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（1）打开任务1“男性商品类网店”制作文件 ，选择图层组“侧边栏”，在图层组内新建图层组“收藏本店”

44、、“客服中心”、“会员招募”、“宝贝分类”、“搜索”、“销售排行榜”。三、装修男性商品类网店制作步骤3.男性商品类网店侧边栏制作。任务三 装修男性商品类网店（2）选择图层组“收藏店铺”，在组内新建图层设置前景色为黑色，运用工具栏“矩形工具”绘制矩形，作为客服中心标题底色。添加文字“收藏店铺”，字体为黑体，字号为27，“收、本、店”3字颜色为白色，“藏”字颜色为# ff7e00。添加文字“BOOK MARK”，字体为Arial，字号为8，颜色为黑色。运用“矩形工具”绘制白色矩形置于“BOOK MARK”文字图层的下层。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（3）选择图层组“客服

45、中心”，新建图层，运用工具栏“矩形工具”绘制矩形条，颜色为黑色；运用工具栏“矩形工具”绘制正方形，颜色为# 581616，设置属性描边大小为1，颜色为# 666823，执行“自由变换”命令90度旋转正方形图形；将正方形置于黑色矩形条中间位置，为正方形图层添加“图层蒙版”去掉方正方形超出黑色矩形条上方的一个角。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（4）添加文字“客服中心” “营业时间” “9：00-22：00” “节假日不休息” 。运用工具栏“矩形工具”绘制白色矩形，设置图层不透明度为30%，将此图层置于“客服中心”图层组所有图层的最底层。三、装修男性商品类网店制作步骤任务三

46、 装修男性商品类网店（5）运用工具栏“矩形工具”绘制4个矩形色块，2个白色，2个黑色；添加文字“售前客服” “售后客服” ；载入元素“素材”“项目六”“男性商品类网店”“淘宝在线”，将其置于合适位置。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（6）选择图层组“会员招募”，新建图层运用工具栏“矩形工具”绘制矩形条，颜色为# 666a25；添加文字“会员招募”字体为黑体，字号为13，颜色为白色。添加文字“VIP”字体为Bell MT，字号为48，颜色为白色，执行“图层样式”“描边”，设置描边大小为3，颜色为# 666a25。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（7

47、）选择图层组“宝贝分类”，新建图层运用工具栏“矩形工具”绘制2个黑色矩形条，添加文字“宝贝分类”字体为方正大黑，字号为10，颜色为白色。运用 “矩形工具”绘制矩形条，颜色为# c3c3c3，添加文字“查看所有宝贝”，字体为黑体，字号为6，颜色为黑色；运用工具栏“多边形工具”绘制黑色三角形置于“查看所有宝贝”文字左侧。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（8）运用步骤7的方法添加“宝贝分类”版块其他信息。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（9）选择图层组“搜索栏”，运用“矩形工具”和“文字工具”制作搜索栏。三、装修男性商品类网店制作步骤任务三 装修男性商

48、品类网店（10）选择图层组“销售排行榜”，运用“矩形工具”、“自定义形状工具”、“文字工具”制作销售排行榜版块。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（11）调整各元素位置，完成侧边栏设计制作。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店4.男性商品类网店商品展示区制作。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（1）打开任务1“男性商品类网店”制作文件 ，选择图层组“商品展示区”，在图层组内新建图层组“折扣券”、“热销宝贝”。（6）添加文字“轻松掌握”，执行“图层样式”“描边”，设置描边大小为4，颜色为#695c18；执行“图层样式”“颜色叠加”，

49、混色模式为颜色加深，颜色为# f2b85c，不透明度为50%，执行“图层样式”“内发光”、“渐变叠加”、“投影” 。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（2）选择图层组“折扣券”，新建一个图层，运用工具栏“矩形工具”绘制一个矩形作为折扣券底色，颜色为# e07219。添加文字“”，字体为Arial，大小100，颜色为白色，设置图层不透明度为15%，运用组合键Ctrl+Alt+G，创建剪切蒙版将文字置于底色矩形内。添加文字“单笔消费满200可以使用”，字体为黑体，大小6，颜色为白色；添加文字“RMB”，字体为Arial，大小8，颜色为白色；添加文字“20”，字体为Impact

50、，大小70，颜色为白色。运用上述方法制作其他折扣券。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（3）选择图层组“热销宝贝”，在组内新建3个图层组，分别为“剃须刀”、“皮具”、“Zippo”。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（4）选择图层组“剃须刀”，新建图层，运用工具栏“矩形工具”绘制黑色矩形，作为剃须刀商品版块底色。运用工具栏“钢笔工具”绘制一个直角等边三角形，颜色为#581616，置于黑色底色左上角；添加文字“剃须刀”，字体为黑体，字号为19，颜色为白色；添加文字“男士”，字体为黑体，字号为8，颜色为白色；运用“自由变换”将文字旋转到适当角度，置于三角

51、形图层文字上层。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（5）运用工具栏“矩形工具”绘制一个白色矩形，载入已处理好的商品图片元素“素材”“项目六”“男性商品网店”“飞利浦PT786”，调整图片大小置于合适位置, 运用组合键Ctrl+Alt+G，创建剪切蒙版将商品图片置于白色矩形内；添加商品品名文字“飞利浦充电式剃须刀PT786”，字体为黑体，字号为8，颜色为白色；添加价格文字“368.00”，字体为Arial，字号为21，颜色为白色。运用上诉方法添加其他商品信息。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（6）运用步骤4、步骤5的方法制作“Zippo”、“皮具”，

52、商品展示区。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（7）调整版块内各元素，完成“商品展示区”版块设计。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店（8）选择图层组“底色及底部信息”，新建图层，运用工具栏“矩形工具”绘制4个黑色矩形条。分别在每个矩形条上添加文字“品质保证”、“如实描述”、“消保保证”、“无忧售后”，字体为方正大黑，字号为12，颜色为白色。 调整“男性商品类网店”文件内各板块元素位置，完成网店整体设计。三、装修男性商品类网店制作步骤任务三 装修男性商品类网店四、教学小结任务三 装修男性商品类网店 本任务介绍了装修男性商品类网店的思路以及如何运用Pho

53、toshop软件来对男性商品类网店进行装修设计。在教学过程中，通过教师实例讲解示范，学生实例操作练习，发现大多数学生能够按照讲解实例来进行男性商品类网店装修设计，总体来说，本任务实现了预定的教学目标。 鞋类网店在设计时要注意面向的销售对象。例如，潮流时尚运动鞋销售群体大部分为学生或者年轻群体，在设计上要紧贴时尚潮流，以能迎合并带动销售对象的审美为主。比如当今流行时尚复古，那么设计中就可加入复古潮流元素，以紧贴消费大众审美，从而起到维护销售对象群体的作用。色彩上可以选择墨绿，土黄等复古色彩元素，搭配喷溅的街头涂鸦风格。任务四 装修鞋类网店一、初识鞋类网店任务四 装修鞋类网店二、鞋类网店最终效果图

54、任务四 装修鞋类网店1.鞋类网店店招与导航栏制作。（1）启动Photoshop CS6新建一个尺寸为宽950px高1660px，分辨率为120dpi的文件，设置文件名为“鞋类网店”。为了方便后期制作，先将图层进行分组。三、装修鞋类网店制作步骤任务四 装修鞋类网店（2）选择图层组“底色及底部信息”，新建图层并载入元素 “底纹”，复制该图层，执行 “垂直翻转” 将两个底纹元素上下拼接。载入元素 “老广告”，设置“图层混合模式”“叠加”，创建图层蒙版，去掉元素边缘多余部分，复制该图层，将两个“老照片”元素置于相应位置。三、装修鞋类网店制作步骤任务四 装修鞋类网店（3）选择图层组“店招”，在组中新建图

55、层，运用工具栏“矩形工具”绘制一个的矩形，设置“图层混合模式”“叠加”，作为店招底色。载入元素 “底纹2”，将其置于店招底色图层下方。载入元素 “老广告”，设置“图层混合模式”“叠加”，创建图层蒙版，去掉元素边缘多余部分，运用组合Ctrl+Alt+G为图层创建剪切蒙版。三、装修鞋类网店制作步骤任务四 装修鞋类网店（4）载入元素“素材”“项目六”“鞋类网店”“Logo”；添加文字“诚信店铺”、“品质保证”、“如实描述”、“优质服务”，字体为黑体，字号为10，颜色为白色；运用工具栏“自定义形状工具”，绘制图形，置于每一组文字左侧。三、装修鞋类网店制作步骤任务四 装修鞋类网店（5）选择图层组“导航栏

56、”，运用工具栏“矩形工具”绘制矩形条，颜色为#264d45；添加文字“所有宝贝”、“首页”、“新款上架”、“男款”、“女款”、“情侣款”、“儿童款”、“断码促销”，字体为黑体，字号为10，颜色为白色；运用“矩形工具”绘制矩形，颜色为#c6af2f，置于“首页”文字下层。三、装修鞋类网店制作步骤任务四 装修鞋类网店2.鞋类网店公告栏制作方法。（1）打开任务1“箱包网店”制作文件 ，选择图层组“公告栏”，运用工具栏“矩形工具”，绘制一个长840dpi高440dpi的矩形，载入元素 “风景”，创建剪切蒙版,在该矩形左右两边，运用“矩形工具”绘制一个矩形条；运用工具栏“自定形状工具”，绘制2个箭头图形置于，公告栏矩形左右两侧。三、装修鞋类网店制作步骤任务四 装修鞋类网店（2）载入元素“春”、“夏”、“秋”、“冬”，执行“图层样式”“描边” 。载入已处理好的商品图片元素“白鞋