《项目五设计店铺装修素材课件.pptx》由会员分享，可在线阅读，更多相关《项目五设计店铺装修素材课件.pptx（52页珍藏版）》请在三一办公上搜索。
1、重庆市中等职业教育重点专业建设电子商务技术专业,网店美工项目五 设计店铺装修素材,任务一 设置制作公告栏,淘宝店铺公告栏是客户了解店铺的一个窗口，同时也是店铺的一个宣传窗口，充分利用公告栏版块可以让客户更快了解店铺的基本信息，给客户更便捷的购物体验，从而提高店铺销售额。公告栏的常见类型一般有问候型、促销型和导购型三种。,一、什么是公告栏,任务一 设置制作公告栏,二、设计公告栏的注意事项,公告栏的核心是向消费者公告信息，在设计时应注意以下几点：突出公告栏的内容信息，尽量直观明了，切忌使用过多过花俏的装饰元素。公告栏的设计要符合店铺整体装修风格。在用色方面，文字和底色可用对比相对强烈的颜色搭配，使
2、其醒目突出，如浅色背景深色字等。图片公告栏上文字信息修改没有单纯文字公告栏方便，所以图片公栏上的文字尽量为不需要经常修改更新的文字信息。,任务一 设置制作公告栏,三、公告栏最终效果图,任务一 设置制作公告栏,1.启动Photoshop CS6新建一个尺寸为宽750px高500px的文件，并将底色填充为色号#fff8ec。,四、公告栏制作步骤,任务一 设置制作公告栏,2.运用工具栏 “自定义形状工具”，绘制拼贴图案作为公告栏底纹，颜色为#f6b37f，设置图层不透明度为30%。绘制多个拼贴元素，将元素进行拼接。,四、公告栏制作步骤,任务一 设置制作公告栏,3.运用工具栏 “自定形状工具”，绘制“
3、横幅3”图形，颜色为#cce198，执行“图层样式”“投影”、“描边”，描边大小为7，颜色为#ad7e4d。,四、公告栏制作步骤,任务一 设置制作公告栏,4.添加文字“小”、“店”、“公”、“告”，字体为华康海报体，字号为90，颜色为#90bfff，执行“图层样式”“内发光”、“描边”，描边大小为5，颜色为# 20293d。,四、公告栏制作步骤,任务一 设置制作公告栏,5.运用工具栏“自定形状工具”绘制图钉图形，颜色为#f39700；执行“图层样式”“投影”；复制多个图钉图形，运用“自由变换”面换其大小，置于合适位置。,四、公告栏制作步骤,任务一 设置制作公告栏,6.添加文字“掌柜有话说. .
4、”，字体为华康广告体，字号为20，颜色为# 063c85。,四、公告栏制作步骤,任务一 设置制作公告栏,7、添加公告正文文字，字体为华康广告体，字号为24，颜色为#5b708d，调整各元素，完成公告栏制作。,四、公告栏制作步骤,任务一 设置制作公告栏,五、教学小结,本任务介绍了什么是网店公告栏以及如何运用Photoshop软件来设计制作一个网店公告栏。在教学过程中，通过教师实例讲解示范，学生实例操作练习，发现大多数学生能够按照讲解实例来制作网店公告栏，总体来说，本任务实现了预定的教学目标。,任务二 设计具有视觉冲击力的店标,店标是淘宝店铺的窗口，是店铺整体形象的重要标识，代表着店铺的类型、风格
5、和特征，也可以起到店铺宣传的作用。根据图片的不同显示效果店标可以分为动态店标和静态店标两种。,一、认识店标,任务二 设计具有视觉冲击力的店标,一个好的店标能够让人产生深刻的印象，达到宣传的目的，设计时应注意一下几点：店标简明清晰，店标因为本身的尺寸并不大，所以在设计时内容信息以简单为佳，一般为店名或店铺Logo。色彩上可运用对比相对强烈的颜色搭配，使其醒目突出。一般来说动态店标比静态店标更具视觉冲击力，但在制作动态店标时动画变换还是宜简单为主，不宜太过复杂。,二、设计店标的注意事项,任务二 设计具有视觉冲击力的店标,三、店标最终效果图,任务二 设计具有视觉冲击力的店标,1.启动Photosho
6、p CS6新建一个尺寸为宽80px高80px的文件，并将底色填充为色号# d7d3c5。,四、店标制作步骤,任务二 设计具有视觉冲击力的店标,2.新建图层，运用工具栏 “矩形工具”，12个矩形竖条，颜色分别为# aba123、# 0b644d。将12个矩形条图层栅格化并合并图层，执行“滤镜”“扭曲”“极坐标”“平面坐标到极坐标” 。,四、店标制作步骤,任务二 设计具有视觉冲击力的店标,3. 运用工具栏 “自定形状工具”，绘制“圆形边框”图形，颜色为# 962121。,四、店标制作步骤,任务二 设计具有视觉冲击力的店标,4.载入元素“素材”“项目五”“设计具有视觉冲击力的店标”“小狗”，运用“钢
7、笔工具”分别勾出小狗的头部和身体部分，分别对“小狗头部”，“小狗身体”图层执行“图层样式”“描边”，描边大小为13，颜色为白色。,四、店标制作步骤,任务二 设计具有视觉冲击力的店标,5.选择“圆环”图层，运用“套索工具”选取圆环右侧部分，运用快捷键Ctrl+J，复制并新建图层，将此图层命名为“圆环部分”，置于“小狗身体”图层上方。,四、店标制作步骤,任务二 设计具有视觉冲击力的店标,6.添加店名文字“小宠之家”，字体为华康广告体，字号为42，颜色为#b3e4f9，执行“图层样式”“描边”，描边大小为13，颜色为#631111。,四、店标制作步骤,任务二 设计具有视觉冲击力的店标,7.运用工具栏
8、“椭圆工具”和“钢笔工具”，绘制一个骨头形状元素，颜色为#e9ea71，执行“图层样式”“投影”。,四、店标制作步骤,任务二 设计具有视觉冲击力的店标,8.运用“菜单栏”“窗口”“时间轴”，打开时间轴界面，创建帧动画。,5-29 时间轴界面,四、店标制作步骤,任务二 设计具有视觉冲击力的店标,9.在 “时间轴”中再新建1帧，选择第1帧，在图层中将“骨头”、“小狗头部”、“底纹”图层分别复制1个图层，命名为“骨头2”、“小狗头部2”、“底纹2”；修改“底纹2”的颜色为#109281、#e9ea71，运用“自由变换”分别调整“骨头2”、“小狗头部2”图层元素角度；设置“骨头2”、“小狗头部2”、“
9、底纹2”图层不可见。,四、店标制作步骤,任务二 设计具有视觉冲击力的店标,10.在 “时间轴”中选择第2帧，在图层中将“骨头”、“小狗头部”、“底纹”图层设置为不可见，将“骨头2”、“小狗头部2”、“底纹2” 图层设置为可见。执行“文件”“储存为Web所用格式”，将文件储存为.GIF格式。,第1帧画面效果,第2帧画面效果,四、店标制作步骤,任务二 设计具有视觉冲击力的店标,五、教学小结,本任务介绍了什么是网店店标以及如何运用Photoshop软件来设计制作一个富有视觉冲击力的网店店标。在教学过程中，通过教师实例讲解示范，学生实例操作练习，发现大多数学生能够按照讲解实例来制作动态网店店标，总体来
10、说，本任务实现了预定的教学目标。,任务三 制作漂亮的商品分类按钮,商品分类按钮是店铺商品分类的按钮链接，通过商品分类按钮，客户可以便捷的在店铺内找到自己需要的商品，是淘宝店铺装修的重要元素之一。根据商品分类的设计内容，商品分类按钮可以分为文字型按钮和图片型按钮。,一、认识分类按钮,任务三 制作漂亮的商品分类按钮,商品分类按钮，以便捷客户购物为主要目的，设计时应注意一下几点：分类信息明确，文字信息准确，字数不宜过多。适当运用对比相对强烈的颜色搭配，可使得按钮更加简明醒目。设计时，可结合店铺装修风格，进一步提升店铺整体形象。设计淘宝分类按钮时要注意，宽度不能超过150PX。,二、设计商品分类按钮的
11、注意事项,任务三 制作漂亮的商品分类按钮,三、分类按钮最终效果,任务三 制作漂亮的商品分类按钮,四、分类按钮制作步骤,1.启动Photoshop新建一个尺寸为宽455px高165px的文件。设置前景色为色号为#fff726的黄色，在工具栏中选择“圆角矩形工具”，绘制一个圆角矩形图案，运用工具栏中“钢笔工具”和“直接选取工具”调整圆角矩形图形基本型，得按钮基本型。,任务三 制作漂亮的商品分类按钮,2.添加“图层样式”“斜面和浮雕”、“内阴影”、“内发光”、“光泽”效果。,四、分类按钮制作步骤,任务三 制作漂亮的商品分类按钮,3.在按钮上输入文字“热销商品”，颜色为#26458a，字体为文鼎粗特宋
12、简体，字号为50。,四、分类按钮制作步骤,任务三 制作漂亮的商品分类按钮,4.运用工具栏“自定形状工具“，选择火焰图形，结合文字”hot”制作出热卖标志，标志颜色为# 921d22。,四、分类按钮制作步骤,任务三 制作漂亮的商品分类按钮,5. 调整标志与文字之间的位置，完成分类按钮制作。发布图片前，使用Photoshop软件打开文件并合并所有图层。执行“图形”“图像大小”，将图像大小设置为符合淘宝网站要求的大小。,四、分类按钮制作步骤,任务三 制作漂亮的商品分类按钮,五、教学小结,本任务介绍了什么是网店商品分类按钮以及如何运用Photoshop软件来设计制作一个商品分类按钮。在教学过程中，通过
13、教师实例讲解示范，学生实例操作练习，发现大多数学生能够按照讲解实例来制作商品分类按钮，总体来说，本任务实现了预定的教学目标。,任务四 制作商品描述模板,商品描述及商品详情，是店铺中用来展示和说明所售卖商品的属性、材料、规格、实物照片等信息的版块。商品描述版块一般需要如下信息内容：店铺活动信息、商品展示信息、商品描述信息、买家须知信息、联系信息。,一、认识商品描述,任务四 制作商品描述模板,商品主图的视觉效果要简单明了，将商品的亮点突出即可，避免过多的文字修饰对整体画面造成影响。尽可能多地展现商品的细节，这对提升用户体验有重大意义。模板设计要避免过于复杂花哨，以能突出商品主图、符合店铺定位为主。
14、对于网络商家来说，如何能通过一款商品能带动起整家店铺销量，这非常关键。所以，在商品描述模板中，可以适当添加与该商品相关联的其他商品，从而带动整个店铺业绩,二、设计商品描述模板的注意事项,任务四 制作商品描述模板,三、商品描述模板最终效果,任务四 制作商品描述模板,四、商品描述模板制作步骤,1.启动Photoshop新建一个尺寸为宽750px高1500px的文件，设置前景色为白色。新建图层组取名为“促销信息”，在图层组内进行促销信息板块设计。新建一个图层，运用矩形选取框选取一个矩形区域，填充颜色# d0c6a2。,任务四 制作商品描述模板,2.打开元素“模块五”“制作商品描述模板”“牛仔底纹”截
15、切长条形牛仔元素边条置于促销信息板块的上方和下方。添加文字“全场包邮”，字体为方正小标宋，字号为59，文字“全场”颜色为色号# 0f1724的蓝色，文字“包邮”为色号#620a13的红色，移动到合适位置。,四、商品描述模板制作步骤,任务四 制作商品描述模板,3.添加文字“满200元省20元”，“满500元省60元”，字体为方正小标宋，文字“满200元”字号为12，“满500元”字号为24，颜色为色号# 0f1724的蓝色，文字“省20元”字号为23，“省60元”字号为36，颜色为色号#620a13的红色，移动到合适位置。,四、商品描述模板制作步骤,任务四 制作商品描述模板,4.打开元素“模块五
16、”“制作商品描述模板”“logo”为促销信息添加店铺logo。,四、商品描述模板制作步骤,任务四 制作商品描述模板,5.打开元素“模块五”“制作商品描述模板”“人物元素”，运用魔棒工具去掉元素图片背景并，运用全取工具和移动工具将人物单个选出，运用自由变化工具调整各个人物大小和位置。,四、商品描述模板制作步骤,任务四 制作商品描述模板,6.新建图层置于人物图层下方，运用柔角画笔工具为人物添加阴影效果，设置图层不透明度为55%，完成促销信息板块制作。,四、商品描述模板制作步骤,任务四 制作商品描述模板,7.新建图层组命名为“商品展示”，打开元素“模块五”“制作商品描述模板”“牛仔底纹”，运用矩形选
17、取工具选取出牛仔边框。,四、商品描述模板制作步骤,任务四 制作商品描述模板,8.打开元素“模块五”“制作商品描述模板”“牛仔补丁”，运用魔棒工具去除元素底色，调整到合适大小和位置。,四、商品描述模板制作步骤,任务四 制作商品描述模板,9.打开元素“模块五”“制作商品描述模板”“螺丝元素”，运用椭圆选取工具选区一颗螺丝，调整到合适大小和位置。,四、商品描述模板制作步骤,任务四 制作商品描述模板,10.输入文字“商品展示”字体为方正小标宋，字号为23，色号#620a13，并未文字图层添加“图层样式”“描边”效果。,四、商品描述模板制作步骤,任务四 制作商品描述模板,11.适当调整各元素位置，完成商品展示版块。,四、商品描述模板制作步骤,任务四 制作商品描述模板,12.运用制作“商品展示”板块的方法，制作“商品描述”“买家须知”“联系我们”三个板块。调整各板块元素，完成商品描述模板制作。,四、商品描述模板制作步骤,任务四 制作商品描述模板,五、教学小结,本任务介绍了什么是商品描述以及如何运用Photoshop软件来设计制作一个商品描述模板。在教学过程中，通过教师实例讲解示范，学生实例操作练习，发现大多数学生能够按照讲解实例来制作商品描述模板，总体来说，本任务实现了预定的教学目标。,
