项目五-设计店铺装修素材[]课件.pptx

1、设计店铺装修素材u 项目五任务一 设置制作公告栏淘宝店铺公告栏是客户了解店铺的一个窗口，同时也是店铺的一个宣传窗口，充分利用公告栏版块可以让客户更快了解店铺的基本信息，给客户更便捷的购物体验，从而提高店铺销售额。公告栏的常见类型一般有问候型、促销型和导购型三种。一一、什么是公告、什么是公告栏栏设计店铺装修素材u 项目五任务一 设置制作公告栏二、二、设计公告栏的注意事项设计公告栏的注意事项公告栏的核心是向消费者公告信息，在设计时应注意以下几点：突出公告栏的内容信息，尽量直观明了，切忌使用过多过花俏的装饰元素。公告栏的设计要符合店铺整体装修风格。在用色方面，文字和底色可用对比相对强烈的颜色搭配，使

2、其醒目突出，如浅色背景深色字等。图片公告栏上文字信息修改没有单纯文字公告栏方便，所以图片公栏上的文字尽量为不需要经常修改更新的文字信息。设计店铺装修素材u 项目五任务一 设置制作公告栏三、三、公告栏最终效果图公告栏最终效果图设计店铺装修素材u 项目五任务一 设置制作公告栏1.启动Photoshop CS6新建一个尺寸为宽750px高500px的文件，并将底色填充为色号#fff8ec。四、四、公告栏制作步骤公告栏制作步骤设计店铺装修素材u 项目五任务一 设置制作公告栏 2.运用工具栏“自定义形状工具”，绘制拼贴图案作为公告栏底纹，颜色为#f6b37f，设置图层不透明度为30%。绘制多个拼贴元素，

3、将元素进行拼接。四、四、公告栏制作步骤公告栏制作步骤设计店铺装修素材u 项目五任务一 设置制作公告栏3.运用工具栏“自定形状工具”，绘制“横幅3”图形，颜色为#cce198，执行“图层样式”“投影”、“描边”，描边大小为7，颜色为#ad7e4d。四、四、公告栏制作步骤公告栏制作步骤设计店铺装修素材u 项目五任务一 设置制作公告栏4.添加文字“小”、“店”、“公”、“告”，字体为华康海报体，字号为90，颜色为#90bfff，执行“图层样式”“内发光”、“描边”，描边大小为5，颜色为#20293d。四、四、公告栏制作步骤公告栏制作步骤设计店铺装修素材u 项目五任务一 设置制作公告栏5.运用工具栏“

4、自定形状工具”绘制图钉图形，颜色为#f39700；执行“图层样式”“投影”；复制多个图钉图形，运用“自由变换”面换其大小，置于合适位置。四、四、公告栏制作步骤公告栏制作步骤设计店铺装修素材u 项目五任务一 设置制作公告栏6.添加文字“掌柜有话说.”，字体为华康广告体，字号为20，颜色为#063c85。四、四、公告栏制作步骤公告栏制作步骤设计店铺装修素材u 项目五任务一 设置制作公告栏7、添加公告正文文字，字体为华康广告体，字号为24，颜色为#5b708d，调整各元素，完成公告栏制作。四、四、公告栏制作步骤公告栏制作步骤设计店铺装修素材u 项目五任务一 设置制作公告栏五、五、教学小结教学小结 本

5、任务介绍了什么是网店公告栏以及如何运用Photoshop软件来设计制作一个网店公告栏。在教学过程中，通过教师实例讲解示范，学生实例操作练习，发现大多数学生能够按照讲解实例来制作网店公告栏，总体来说，本任务实现了预定的教学目标。设计店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标店标是淘宝店铺的窗口，是店铺整体形象的重要标识，代表着店铺的类型、风格和特征，也可以起到店铺宣传的作用。根据图片的不同显示效果店标可以分为动态店标和静态店标两种。一一、认识、认识店标店标设计店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标一个好的店标能够让人产生深刻的印象，达到宣传的目的，设计时应注意一下几点

6、：店标简明清晰，店标因为本身的尺寸并不大，所以在设计时内容信息以简单为佳，一般为店名或店铺Logo。色彩上可运用对比相对强烈的颜色搭配，使其醒目突出。一般来说动态店标比静态店标更具视觉冲击力，但在制作动态店标时动画变换还是宜简单为主，不宜太过复杂。二、设计店标的注意事项二、设计店标的注意事项设计店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标三、三、店标最终效果图店标最终效果图设计店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标1.启动Photoshop CS6新建一个尺寸为宽80px高80px的文件，并将底色填充为色号#d7d3c5。四、四、店标制作步骤店标制作步骤设计店铺装修素

7、材u 项目五任务二 设计具有视觉冲击力的店标2.新建图层，运用工具栏“矩形工具”，12个矩形竖条，颜色分别为#aba123、#0b644d。将12个矩形条图层栅格化并合并图层，执行“滤镜”“扭曲”“极坐标”“平面坐标到极坐标”。四、四、店标制作步骤店标制作步骤设计店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标3.运用工具栏“自定形状工具”，绘制“圆形边框”图形，颜色为#962121。四、四、店标制作步骤店标制作步骤设计店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标4.载入元素“素材”“项目五”“设计具有视觉冲击力的店标”“小狗”，运用“钢笔工具”分别勾出小狗的头部和身体部分，分

8、别对“小狗头部”，“小狗身体”图层执行“图层样式”“描边”，描边大小为13，颜色为白色。四、四、店标制作步骤店标制作步骤设计店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标5.选择“圆环”图层，运用“套索工具”选取圆环右侧部分，运用快捷键Ctrl+J，复制并新建图层，将此图层命名为“圆环部分”，置于“小狗身体”图层上方。四、四、店标制作步骤店标制作步骤设计店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标6.添加店名文字“小宠之家”，字体为华康广告体，字号为42，颜色为#b3e4f9，执行“图层样式”“描边”，描边大小为13，颜色为#631111。四、四、店标制作步骤店标制作步骤设计

9、店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标7.运用工具栏“椭圆工具”和“钢笔工具”，绘制一个骨头形状元素，颜色为#e9ea71，执行“图层样式”“投影”。四、四、店标制作步骤店标制作步骤设计店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标8.运用“菜单栏”“窗口”“时间轴”，打开时间轴界面，创建帧动画。5-29 时间轴界面四、四、店标制作步骤店标制作步骤设计店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标9.在“时间轴”中再新建1帧，选择第1帧，在图层中将“骨头”、“小狗头部”、“底纹”图层分别复制1个图层，命名为“骨头2”、“小狗头部2”、“底纹2”；修改“底纹2”的

10、颜色为#109281、#e9ea71，运用“自由变换”分别调整“骨头2”、“小狗头部2”图层元素角度；设置“骨头2”、“小狗头部2”、“底纹2”图层不可见。四、四、店标制作步骤店标制作步骤设计店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标10.在“时间轴”中选择第2帧，在图层中将“骨头”、“小狗头部”、“底纹”图层设置为不可见，将“骨头2”、“小狗头部2”、“底纹2”图层设置为可见。执行“文件”“储存为Web所用格式”，将文件储存为.GIF格式。第1帧画面效果第2帧画面效果四、四、店标制作步骤店标制作步骤设计店铺装修素材u 项目五任务二 设计具有视觉冲击力的店标五、五、教学小结教学小结

11、 本任务介绍了什么是网店店标以及如何运用Photoshop软件来设计制作一个富有视觉冲击力的网店店标。在教学过程中，通过教师实例讲解示范，学生实例操作练习，发现大多数学生能够按照讲解实例来制作动态网店店标，总体来说，本任务实现了预定的教学目标。设计店铺装修素材u 项目五任务三 制作漂亮的商品分类按钮 商品分类按钮是店铺商品分类的按钮链接，通过商品分类按钮，客户可以便捷的在店铺内找到自己需要的商品，是淘宝店铺装修的重要元素之一。根据商品分类的设计内容，商品分类按钮可以分为文字型按钮和图片型按钮。一一、认识分类、认识分类按钮按钮设计店铺装修素材u 项目五任务三 制作漂亮的商品分类按钮商品分类按钮，

12、以便捷客户购物为主要目的，设计时应注意一下几点：分类信息明确，文字信息准确，字数不宜过多。适当运用对比相对强烈的颜色搭配，可使得按钮更加简明醒目。设计时，可结合店铺装修风格，进一步提升店铺整体形象。设计淘宝分类按钮时要注意，宽度不能超过150PX。二、设计商品分类按钮的注意事项二、设计商品分类按钮的注意事项设计店铺装修素材u 项目五任务三 制作漂亮的商品分类按钮三、三、分类按钮最终效果分类按钮最终效果设计店铺装修素材u 项目五任务三 制作漂亮的商品分类按钮四、四、分类按钮制作步骤分类按钮制作步骤1.启动Photoshop新建一个尺寸为宽455px高165px的文件。设置前景色为色号为#fff7

13、26的黄色，在工具栏中选择“圆角矩形工具”，绘制一个圆角矩形图案，运用工具栏中“钢笔工具”和“直接选取工具”调整圆角矩形图形基本型，得按钮基本型。设计店铺装修素材u 项目五任务三 制作漂亮的商品分类按钮2.添加“图层样式”“斜面和浮雕”、“内阴影”、“内发光”、“光泽”效果。四、四、分类按钮制作步骤分类按钮制作步骤设计店铺装修素材u 项目五任务三 制作漂亮的商品分类按钮3.在按钮上输入文字“热销商品”，颜色为#26458a，字体为文鼎粗特宋简体，字号为50。四、四、分类按钮制作步骤分类按钮制作步骤设计店铺装修素材u 项目五任务三 制作漂亮的商品分类按钮4.运用工具栏“自定形状工具“，选择火焰图

14、形，结合文字”hot”制作出热卖标志，标志颜色为#921d22。四、四、分类按钮制作步骤分类按钮制作步骤设计店铺装修素材u 项目五任务三 制作漂亮的商品分类按钮5.调整标志与文字之间的位置，完成分类按钮制作。发布图片前，使用Photoshop软件打开文件并合并所有图层。执行“图形”“图像大小”，将图像大小设置为符合淘宝网站要求的大小。四、四、分类按钮制作步骤分类按钮制作步骤设计店铺装修素材u 项目五任务三 制作漂亮的商品分类按钮五、五、教学小结教学小结 本任务介绍了什么是网店商品分类按钮以及如何运用Photoshop软件来设计制作一个商品分类按钮。在教学过程中，通过教师实例讲解示范，学生实例操

15、作练习，发现大多数学生能够按照讲解实例来制作商品分类按钮，总体来说，本任务实现了预定的教学目标。设计店铺装修素材u 项目五任务四 制作商品描述模板 商品描述及商品详情，是店铺中用来展示和说明所售卖商品的属性、材料、规格、实物照片等信息的版块。商品描述版块一般需要如下信息内容：店铺活动信息、商品展示信息、商品描述信息、买家须知信息、联系信息。一一、认识商品、认识商品描述描述设计店铺装修素材u 项目五任务四 制作商品描述模板商品主图的视觉效果要简单明了，将商品的亮点突出即可，避免过多的文字修饰对整体画面造成影响。尽可能多地展现商品的细节，这对提升用户体验有重大意义。模板设计要避免过于复杂花哨，以能

16、突出商品主图、符合店铺定位为主。对于网络商家来说，如何能通过一款商品能带动起整家店铺销量，这非常关键。所以，在商品描述模板中，可以适当添加与该商品相关联的其他商品，从而带动整个店铺业绩二、二、设计商品描述模板的注意事项设计商品描述模板的注意事项设计店铺装修素材u 项目五任务四 制作商品描述模板三、三、商品描述模板最终效果商品描述模板最终效果设计店铺装修素材u 项目五任务四 制作商品描述模板四、四、商品描述模板制作步骤商品描述模板制作步骤1.启动Photoshop新建一个尺寸为宽750px高1500px的文件，设置前景色为白色。新建图层组取名为“促销信息”，在图层组内进行促销信息板块设计。新建一

17、个图层，运用矩形选取框选取一个矩形区域，填充颜色#d0c6a2。设计店铺装修素材u 项目五任务四 制作商品描述模板2.打开元素“模块五”“制作商品描述模板”“牛仔底纹”截切长条形牛仔元素边条置于促销信息板块的上方和下方。添加文字“全场包邮”，字体为方正小标宋，字号为59，文字“全场”颜色为色号#0f1724的蓝色，文字“包邮”为色号#620a13的红色，移动到合适位置。四、四、商品描述模板制作步骤商品描述模板制作步骤设计店铺装修素材u 项目五任务四 制作商品描述模板3.添加文字“满200元省20元”，“满500元省60元”，字体为方正小标宋，文字“满200元”字号为12，“满500元”字号为2

18、4，颜色为色号#0f1724的蓝色，文字“省20元”字号为23，“省60元”字号为36，颜色为色号#620a13的红色，移动到合适位置。四、四、商品描述模板制作步骤商品描述模板制作步骤设计店铺装修素材u 项目五任务四 制作商品描述模板4.打开元素“模块五”“制作商品描述模板”“logo”为促销信息添加店铺logo。四、四、商品描述模板制作步骤商品描述模板制作步骤设计店铺装修素材u 项目五任务四 制作商品描述模板5.打开元素“模块五”“制作商品描述模板”“人物元素”，运用魔棒工具去掉元素图片背景并，运用全取工具和移动工具将人物单个选出，运用自由变化工具调整各个人物大小和位置。四、四、商品描述模板

19、制作步骤商品描述模板制作步骤设计店铺装修素材u 项目五任务四 制作商品描述模板6.新建图层置于人物图层下方，运用柔角画笔工具为人物添加阴影效果，设置图层不透明度为55%，完成促销信息板块制作。四、四、商品描述模板制作步骤商品描述模板制作步骤设计店铺装修素材u 项目五任务四 制作商品描述模板7.新建图层组命名为“商品展示”，打开元素“模块五”“制作商品描述模板”“牛仔底纹”，运用矩形选取工具选取出牛仔边框。四、四、商品描述模板制作步骤商品描述模板制作步骤设计店铺装修素材u 项目五任务四 制作商品描述模板8.打开元素“模块五”“制作商品描述模板”“牛仔补丁”，运用魔棒工具去除元素底色，调整到合适大

20、小和位置。四、四、商品描述模板制作步骤商品描述模板制作步骤设计店铺装修素材u 项目五任务四 制作商品描述模板9.打开元素“模块五”“制作商品描述模板”“螺丝元素”，运用椭圆选取工具选区一颗螺丝，调整到合适大小和位置。四、四、商品描述模板制作步骤商品描述模板制作步骤设计店铺装修素材u 项目五任务四 制作商品描述模板10.输入文字“商品展示”字体为方正小标宋，字号为23，色号#620a13，并未文字图层添加“图层样式”“描边”效果。四、四、商品描述模板制作步骤商品描述模板制作步骤设计店铺装修素材u 项目五任务四 制作商品描述模板11.适当调整各元素位置，完成商品展示版块。四、四、商品描述模板制作步骤商品描述模板制作步骤设计店铺装修素材u 项目五任务四 制作商品描述模板12.运用制作“商品展示”板块的方法，制作“商品描述”“买家须知”“联系我们”三个板块。调整各板块元素，完成商品描述模板制作。四、四、商品描述模板制作步骤商品描述模板制作步骤设计店铺装修素材u 项目五任务四 制作商品描述模板五、五、教学小结教学小结 本任务介绍了什么是商品描述以及如何运用Photoshop软件来设计制作一个商品描述模板。在教学过程中，通过教师实例讲解示范，学生实例操作练习，发现大多数学生能够按照讲解实例来制作商品描述模板，总体来说，本任务实现了预定的教学目标。