淘宝美工教程22集第17集_首页制作陈列区设计说明
淘宝页面装修教程
淘宝页面装修教程淘宝页面装修教程不要标题为了使淘宝页面更具个性化和吸引力，您可以使用以下装修技巧。
1. 使用图片和商品展示：在页面中添加高质量的产品图片，并确保它们清晰可见。
您还可以展示产品的不同颜色和规格。
2. 制作个性化的广告横幅：使用Photoshop或其他图像编辑软件设计一个独特的广告横幅，用于突出您的品牌和特色产品。
3. 设计独特的商品分类：为了方便顾客查找所需的产品，您可以设计独特的商品分类。
使用图标和文字组合来突出不同的分类。
4. 添加店铺动态：对于有活动和促销的店铺，您可以通过添加店铺动态来吸引顾客的注意。
例如，在首页上展示最新的促销活动或限时折扣。
5. 突出店铺特色：如果您的店铺有某些特色产品或独特的卖点，确保在页面中突出展示。
使用图标或特殊的字体来增加突出效果。
6. 设计友好的购物车页面：确保购物车页面简洁明了，让顾客可以清楚地看到他们选择的商品和总金额。
添加清晰的结算按钮，方便顾客进行下一步操作。
7. 页面配色和背景：选择适合您店铺风格的配色方案，并确保背景不会干扰顾客浏览商品。
避免使用过于花哨或闪耀的背景。
8. 使用大字体和清晰的字形：确保页面上的文字清晰易读，使用大字体突出重要信息。
选择易于阅读的字形，例如Arial或微软雅黑。
9. 良好的页面布局：确保页面布局整齐有序，不会让顾客感到混乱。
将不同区块分开，并留出足够的空白空间，让顾客能够轻松浏览页面。
10. 提供详细的商品描述和规格：在商品详情页提供清晰详细的描述和规格，帮助顾客更好地了解商品。
确保描述内容准确、简洁并且易于理解。
希望以上信息对您有所帮助，祝您成功装修您的淘宝页面！。
《展示陈列设计》教学大纲
《展示陈列设计》教学大纲课程中文名称：展示陈列设计课程英文名称：课程性质：实践性环节课程编号：06199150总学时：5周先修课程：、室内设计、面向对象：室内设计专业开课院系：艺术与设计学院艺术设计系一、课程性质、目的和要求展示陈列设计课程是艺术设计专业教学的实践性环节。
本课程旨在通过专业考察课程的学习和实践，应使学生掌握展示空间环境的创造的目的与方法，通过采用一定的视觉传达手段，照明方式以及道具设施，将信息和宣传内容展示给公众，培养具有较强设计水平，敏锐把握展示发展趋势，又有较强动手操作能力的新型人才。
教学要求:由于艺术设计对学生的综合能力要求比较高，本课程采取课堂理论教学与实践相结合的方法，重实践操作，以课堂教学为主，课堂实践与教师辅导相配合，并适当插入市场调查活动以及优秀作品评析，研究展示设计诸要素之间的关系与整体效果，加深学生对“展示”概念的全面理解和认识。
重点在于加强学生在展示设计的组织结构设计和视觉传达设计方面的构思和表现能力，让学生具备独立从事多类展示活动的设计工作能力。
课程要求：⑴要求了解展示陈列设计的性质、目的、任务、作用及特点⑵通过图纸设计、模型制作、调查报告等手段使学生获取学习成果。
⑶掌握多种工具与使用技法，并能灵活运用、举一反三。
⑷主要学习展示设计中陈列与设计的流程关系，对视觉元素与形式法则、与人体工程学、展示构成设计重点学习，掌握展示陈列的统筹规划与总体设计。
二、课程内容及学时分配1、课程内容：展示陈列设计是理论联系实践的重要课程。
课程安排如下：第一章概论第一节展示艺术表现派别第二节展示的历史地位与功用第三节现代展示的态势与特征第四节展示分类第五节展示设计的视觉元素与形式法则第二章展示总体设计与人体工程学1．第一节总体设计的程序与原则第二节展示设计的人体工程学因素1．尺度2．视觉3．视觉传达效率4．视觉与照明第三节展示总体设计的图面表现第三章展示构成设计（上）第一节千姿百态的展示建筑第二节展示空间设计1 . 动态的空间形式2. 展示区域的功能形式第三节构成形式设计第四章展示构成设计（下）第一节展示色彩设计第二节展示照明设计第三节音像设计、分类图设计第四节版式设计第五章橱窗设计第一节展示与陈列第二节陈列基本方法第三节橱窗设计第六章展示会展厅设计第一节展示会的统筹规划与总体设计第二节展厅陈列与构成第三节展厅个性化设计2、课程重点：（1）展示与陈列/陈列与构成（2）陈列基本方法3、课程难点：（1）展示设计的视觉元素与形式法则（2）展示空间设计/展示色彩设计/展示照明设计4、习题：1．小论文《展示表现》2．“总体设计”分类规划图3．构成设计图二张、实物设计一件4．展示模型1件5、学时分配：三、说明（1）本课程大纲适用于艺术设计室内设计专业本科教育，各专业方向根据专业要求可自行选择习题，学时数及习题应相应调整。
网店美工视觉设计实战教程课件-第1章网店美工基础
书法体包括楷体、叶根友毛笔行 书、篆书体、隶书体、行书体和燕书 体等，书法体具有古朴秀美、历史悠 久的特征，常用于古玉、茶叶、笔墨、 书籍等古典气息浓厚的店铺中。
1.2.3 文字的应用
10
2 字体的布局技巧
字体的选用与变化 排版网店广告文案时，选择2~3种 匹配度高的字体是最佳的视觉效果。
01
主色：主色调是页面中占用面积最大，也是最受瞩目的色彩，它决定了
01
整个店铺的风格，主色调不宜过多，一般控制在1~3种颜色，过多容易 造成视觉疲劳。主色调不是随意选择的，而是系统性分析自己品牌受众
人群的心理特征，找到群体中易于接受的色彩。
02
辅助色：辅助色是指占用面积略小于主色，用于烘托主色的颜色。合理 应用辅助色能丰富页面的色彩，使页面显示更加完整、美观。
✓ 恢复默认前景色与背景色：单击 按钮可恢复默认的
前景色与背景色。
✓ 切换前景色与背景色：单击 按钮，可在前景色与背
景色之间切换。
✓ 选区填充：创建选区后，按【Ctrl+Delete】组合键可
以用背景色填充当前图形，按【Alt+Delete】组合键 可以用前景色填充当前图形。
1.3.2 图层的基本操作
20
网店美工在抠取一些规则的矩形和圆形商品时，可通过对应的选择工具快速创建选区进行抠
图，如矩形选框工具、椭圆选框工具；对于边缘为直线的规则商品，可选择多边形套索工具进行
快速抠图。下面利用多边形套索工具和椭圆选框工具抠取图中的面膜，并为其更换背景，其具体
操作步骤如下。
1
2
使用多边形套索工具绘制选区
新建白色背景图片
作步骤如下。
3
4
调整图像尺寸
网店美工全书电子教案完整版课件全书教学课件
一、网店图片文件的类型
1. JPEG 格式 JPEG 是最常见的一种图片格式，文件的扩展名为 . jpg 或 . jpeg。
2. PNG 格式 PNG 是可移植的网络图形格式。
3. GIF 格式 GIF 是图形交换格式。
二、网店图片编辑软件
Photoshop CS6 是一款用于图像制作和处理的专业软件，具有 强大的功能，利用这些功能，可以有效地进行商品图片的编辑，是 网店美工必备的软件工具。
1. 文字编辑工具 2. “段落”调板
第 4 节 商品分类设计
一、商品类目的分类原则 二、商品类目的分类方式
1. 按商品种类按商品风格分类
三、商品类目导航条 四、商品分类设计的相关工具
1. 图层工具 2. 绘画工具 3. 图案图章工具 4. 切片工具
课件 制作
“动作”控制面板可以 对图像进行批量处理，避免 重复操作，提高处理图片的 效率。
课件 制作
第 2 章 网店图片设计
第 1 节 网店促销图设计 第 2 节 商品主图设计 第 3 节 商品详情页设计
第 1 节 网店促销图设计
一、促销图的类型
网店促销图一般分为整店促销图、单品促销图和活动推广促销图三种 类型。
一、色彩的分类
1. 无彩色
2. 有彩色 3. 特殊色
二、色彩的三要素
1. 色相：是区别不同色彩的名称。 2. 明度：是指色彩的明暗程度。 3. 纯度：是指色彩鲜艳的程度。
三、颜色的模式
1. RGB 模式 2. CMYK 模式 3. HSB 模式 4. Lab 模式
四、网店色彩的搭配
1. 同一色调搭配
文字栅格化后加滤镜的效果
2. 文字转换为形状 在图层面板中选择文字图层，右击鼠标转换为形状，可将文字转换为形
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学课件—第6章制作PC端网店首页
22
构图：构图的好坏直接影响海报的效果，构图主要分为左右构图、左中右三分式构图、上 下构图、底面构图和斜切构图6种。
左右构图
6.3.2 全屏海报的设计要点
23
配色：海报需要统一色调。在配色时，重要的文字信息用突出、醒目的颜色进行强调，通 过明暗对比以及不同颜色的搭配来确定对应的风格。海报的背景颜色应该统一，不要使用 太多的颜色，以免页面杂乱。
6.3.1 全屏海报的组成要点
20
全屏海报一般是由文案、商品图片、模特或背景中的至少两种元素组成的，下面分 别分别介绍。
文案：文案主要用来表现海报
主题，其组成部分包括标题、
01
副标题、促销信息等。
商品图片：可以让文案描述更
02
加具象化。
模特：模特是辅助商品展示的
03
元素。
背景：背景主要起烘托主题的
3 创建组 5 输入“农家果园”文字 6 输入其他文字
4 添加 Logo
6.2.5 制作通栏店招
17
7 输入其他文字 8 拖入水果素材 9 输入商品促销文字 10 绘制圆角矩形 11 绘制导航条
6.2.5 制作通栏店招
12 设置导航条文字
13 绘制矩形框 15 完成后的效果
18
14 设置色阶值
ห้องสมุดไป่ตู้
6.1 认识PC端网店首页 6.2 网店店招与导航条的制作 6.3 全屏海报的制作 6.4 优惠券的制作 6.5 商品分类的制作 6.6 其他板块的制作 6.7 课堂实训——制作女包PC端网首页
6.2.1 店招的制作要点
7
就淘宝网而言，按尺寸大小可以将店招分为常规店招和通栏店招两类。常规店招 为950×120像素，而通栏店招尺寸多为1920×150像素。一般来说，店招主要包括品 牌形象展示店招和商品导购店招两种。
《网店美工第4版》教案
第一节首焦轮播区及其设计思路一、认识首焦轮播区网店的首焦轮播区主要用于告知买家网店在某个时间段有广告商品或促销活动，其位于网店导航的下方位置，其主要作用就是告知买家网店在某个特定时间段的一些动态信息，帮助买家快速了解网店的活动或商品信息。
首焦轮播区根据设计的内容可以分为新品上架、网店动态、活动促销等，不同的内容其设计的重点是不同的。
另外，在首焦轮播区中通常情况下会使用字号较大的文字来突出主要信息,同时搭配字号较小的文字来进行补充说明，并利用文字之间的组合编排来突出艺术感。
二、首焦轮播区的设计思路首焦轮播区在设计时用来搭配的图片不能太复杂，这样才能突出主题。
同时，要采用符合网店商品形象的文字，以避免产生凌乱的感觉。
常见的商品陈列区布局方式有3种，包括方块式布局，以及下面将要介绍的折线型布局与随意型布局。
1.折线型布局折线型布局就是将商品图片按照错位的方式进行排列。
在这种布局中，买家的视线会沿着商品图片做折线运动。
这样的设计可以给人一种清爽、利落的感觉，具有韵律感。
2.随意型布局随意型布局就是将商品图片随意地放置在页面中。
这种随意往往需要营造出一种特定的氛围和感觉,让这些商品之间产生一种联系，否则画面中的商品会由于缺乏联系而显得突兀。
随意型布局在女装搭配、组合销售中使用得较多，是一种灵活性较强的布局方式。
第四节课堂案例：当季热卖商品陈列区设计一、设计理念•在色彩搭配上，颜色对比要强烈，以增强视觉冲击力。
画面主色调采用鲜艳的红色和蓝色进行对比，营造出明亮、大气的视觉效果，这样的颜色设计很容易吸引买家的注意力。
•使用蓝色矩形图案进行修饰，使画面看起来更加和谐。
•使用同色系的价格标签作为点缀，增强画面的设计感。
二、技术要点•使用翦贴蒙版来控制图像的显示部分。
•使用矩形工具绘制图像的背景及修饰形状，并应用图层样式进行修饰。
三、实操演练略第五节综合实训以提供的图片为素材，为某男装网店设计新品上架的首焦轮播区。
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》—教学教案
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学教案第1章小结1、掌握网店美工的工作范畴。
2、掌握网店美工需要遵循的设计原则。
3、掌握网店美工工作流程。
课后练习课后练习——赏析ESEDO网店首页的设计本练习要求以如图所示的网店首页为例，赏析其页面风格、色彩搭配、商品图片展现、设计手法等。
第2章2.4.1文案在网店美工中的重要性2.4.2文案的策划2.4.3文案的前期准备2.4.4文案的写作要点2.4.5主图文案的设计与编写2.4.6详情页文案的设计与编写2.4.7海报文案的设计与编写2.5课堂实训——鉴赏森林大叔旗舰店的首页2.6课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配练习2：赏析森马官方旗舰店首页的布局2.7拓展知识小结1、掌握色彩的搭配技巧。
2、掌握版式布局的知识。
3、掌握文字的运用原则。
4、掌握文案设计与编写。
课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配如图所示为戈美琪女鞋旗舰店首屏效果，要求对页面的设计元素、色彩搭配与字体搭配进行分析。
练习2：赏析森马官方旗舰店首页的布局如图所示为森马官方旗舰店首页，要求对首页的颜色、风格、搭配、构图方式、网页元素等进行分析。
第3章实训3：抠取耳机图片并合成3.5课后练习练习1：处理红毛丹污点练习2：抠取红酒商品图片并合成3.6拓展知识小结1、掌握修改商品图片尺寸及校正方法。
2、掌握优化图片的方法。
3、掌握抠取图片并合成的方法。
课后练习练习1：处理红毛丹污点本例将打开“红毛丹.jpg”素材文件，处理其中的污点并加深红毛丹的色泽。
处理前后的对比效果如图所示。
其具体要求如下。
熟练掌握商品图片的优化方法。
分别使用污点修复画笔工具、海绵工具、模糊工具对图片进行处理，使整个红毛丹更加美观。
练习2：抠取红酒商品图片并合成本例将对“红酒.jpg”素材文件进行抠图，将其抠取出来的红酒瓶应用到其他背景中，调整大小和位置后合成为更具有营销表现力的效果图片。
淘宝店铺首页设计资料ppt课件
ห้องสมุดไป่ตู้
41
30
四、淘宝店铺首页海报设计技法
5. 展示多种产 品：当海报 上要放置过 多的促销产 品，可以采 用这种版式。 产品平行排 版，中间利 用半透明的 框展现文案。
31
四、淘宝店铺首页海报设计技法
6. 斜切式构图： 斜切式构图 会让画面显 得时尚，动 感活跃。但 是画面平衡 感不是很好 控制。一般 文案倾斜角 度不超过30°， 文字往右上 方倾斜便于 阅读 。
– 适合店铺中推成爆款或者想要提高某款产品的转化率
• 新品上市、特价促销
– 适用于新品上市，并且打算全力推广的产品
23
四、淘宝店铺首页海报设计技法
（二）常见海报主题方案
3. 品牌宣传
• 品牌宣传适用达到一定认知度的品牌以及在行业 中有一定的知名度。
24
四、淘宝店铺首页海报设计技法
（三）海报设计原则： “3”原则
– 实物照片
• 直观形象的告诉客户自己店铺是卖什么的
– 产品特点
• 直接阐述自己店铺的产品特点，第一时间打动客户， 吸引客户
– 店铺（产品）优势和差异化
• 告诉我的店铺和产品的优势以及和其他的店铺的不
同，形成差异化竞争
12
三、淘宝店铺店招设计技法
（四）店招制作规范、流程：
1. 确定风格：视产品而定 2. 布局：店招尺寸、店招构成、区块划分
（一）海报设计思路：
1. 海报要与大色调统一
• 在设计海报时，先观察大环境，海报设计尽量避 免与主色调产生强烈对比，必须要用对比色设计 海报时，要考虑降低纯度或明度
18
四、淘宝店铺首页海报设计技法
（一）海报设计思路：
2. 观察产品亮点定背景色
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 实体店铺对商品的陈列展示。合理的商品陈列可以起到展示商品、 提升品牌形象、营造品牌氛围、提高品牌销售的作用。
陈列展示区的重要性
• 淘宝店铺宝贝陈列的目的是让顾客做出决策，让店铺宝贝超越自 身的价值，卖出好的价位，第一时间争夺顾客的眼球。
• 淘宝店铺宝贝的陈列是有其一定标准的，如果有30个单品，不假 思索的陈列展示给顾客和精心策划后摆放陈列在店铺中展示给顾 客的效果是完全不一样的。宝贝陈列展示区是首页的重要模块， 甚至可以说整个店铺首页就是由商品陈列展示构成的。
2020/1/21
（3）ቤተ መጻሕፍቲ ባይዱ配关联
• 在一个区域内把商品和商品之间有明显搭配关联的商品陈列展示 在一起。见图4-180，冲锋衣搭配裤子和鞋子一起显示。关联式 的陈列在很多单品中都会出现，比如科技产品、小家电等，买手 机联想到耳机、贴膜、保护套、支架等。
2020/1/21
（4）图文对应
• 在商品陈列展示中，可以进行产品+文案的展示方法，全方位的 展示一个单品，更能能提升单品的转化率。在店铺首页中，如果 出售商品较少，可以用图文对应的陈列方法，如果商品较多，则 最好少用，不然会操作首页屏幕数过长，也会造成顾客浏览商品 速度下降。
2020/1/21
2020/1/21
•宝贝陈列展示区设计
• 商品陈列是一门大学问，近年来陈列师也成了大家关注的热门职 业，有陈列设计师、百货陈列设计师、橱窗陈列设计师等。
• 陈列师的工作目的是利用艺术的、文化的、甚至另类的手段引起 顾客对商品的兴趣，满足消费者体验产品内涵和服务品质的需求， 从而最大限度地开发出产商品潜在的附加值，达到商业的目的。
• 在陈列展示中，可以通过以下几种方法有规划性的呈现在首页。
（1）整齐统一
• 把商品进行整齐的一排一排陈列展示，显得商品丰富、整洁、美 观，很容易让消费者找到自己喜欢的款式或颜色，引导消费进一 步对商品进行了解。这种是最常用的首页商品陈列展示方法之一
（2）重点突出
• 左侧模特商品占据了整个画面二分之一的位置，那么就形成了商 品主次分明、突出重点的效果。其目的就是主推产品能够很好的 展示，提升单品的转化率。这种陈列展示的方法往往也会用到促 销活动的陈列展示中。
•
（5）不规则表格式
• 不规则陈列展示的方法。每一个商品的展示四周以圆角形式，显 得随意自然、简洁大方，更有品味。不规则表格式的陈列展示， 在设计排版的时候，也是严格遵循黄金比例进行排版设计制作的。 不规则和毫无章法、胡乱摆放是不一个概念，这一点要明白。
• 每一
• 有关于店铺首页商品陈列展示的方法多种多样，但是有几点需要 记住：
•主题、风格、构图、 配色、背景、商品、
文案、修饰.
关于轮播图应用讲解
• 通过淘宝首页登陆卖家中心，进入旺铺装修后台。在模块中选择 1920智能版，基础模块中出现“全屏宽图”和“全屏轮播”两个 模块。其中“全屏宽图”模块只能上传一张图片，可以通过海报 信息引导用户点击图片跳转到指定的链接，而“全屏轮播”模块 可以通过展示最多5张图片的方式引导用户点击图片跳转到指定 的链接，添加“全屏宽图”模块。
让新顾客轻松找到你的产品； 在合适的位置推出主打产品； 陈列的图片规格既要节省空间又要清晰展示产品特征等。
希望大家在学习和工作中善于总结，多发现。
•
2020/1/21
2020/1/21
•
自定义陈列区的设计制作流程演示
素材如下图
•左
店铺首页的安装和测试
2020/1/21
知识回顾 Knowledge Review