淘宝美工之banner设计三部曲PPT课件
合集下载
史上最牛：淘宝页面设计完整教程67页PPT
10、一个人应该：活泼而守纪律，天 真而不 幼稚， 勇敢而 鲁莽， 倔强而 有原则 ，热情 而不冲 动，乐 观而不 盲目。 ——马 克思
66、节制使快乐增加并使享受加强。 ——德 谟克利 特 67、今天应做的事没有做，明天再早也 是耽误 了。——裴斯 泰洛齐 68、决定一个人的一生，以及整个命运 的，只 是一瞬 之间。 ——歌 德 69、懒人无法享受休息之乐。——拉布 克 70牛：淘宝页面设 计完整教程
6、纪律是自由的第一条件。——黑格 尔 7、纪律是集体的面貌，集体的声音， 集体的 动作， 集体的 表情， 集体的 信念。 ——马 卡连柯
8、我们现在必须完全保持党的纪律， 否则一 切都会 陷入污 泥中。 ——马 克思 9、学校没有纪律便如磨坊没有水。— —夸美 纽斯
66、节制使快乐增加并使享受加强。 ——德 谟克利 特 67、今天应做的事没有做，明天再早也 是耽误 了。——裴斯 泰洛齐 68、决定一个人的一生，以及整个命运 的，只 是一瞬 之间。 ——歌 德 69、懒人无法享受休息之乐。——拉布 克 70牛：淘宝页面设 计完整教程
6、纪律是自由的第一条件。——黑格 尔 7、纪律是集体的面貌，集体的声音， 集体的 动作， 集体的 表情， 集体的 信念。 ——马 卡连柯
8、我们现在必须完全保持党的纪律， 否则一 切都会 陷入污 泥中。 ——马 克思 9、学校没有纪律便如磨坊没有水。— —夸美 纽斯
网店装修美工及视觉营销设计(宝贝图、海报、详情页) ppt课件
PPT课件
18
宝贝主图设计策划
淘宝主图为正方形 统一图片大小、格式
PPT课件
19
制作模板
logo
价签
PPT课件
图片整齐风格统一
模板实际就是做了一个整体规 范
统一品牌标记 标准位置
20
裂帛实体店宝贝统一模板
PPT课件
21
根据模板 调整透明度，统一酒瓶尺寸大小，调整倾斜度，校对位置
PPT课件
22
PPT课件
32
4、绿色
绿色给人一种新鲜、平静、安全等方面的感觉，是一种具有黄色和蓝色两种成 份的色。绿+黄=单纯、年轻；绿+黑=美丽、成熟；绿+浅红=春天的来临。 网店运用绿色系，显示出网店的年轻生命力，给人健康、成熟的心理感受。
PPT课件
33
5、紫色
紫色给人一种优雅、高贵、神秘的感觉，在所有色彩中明度是最低的。一般紫 色会用来代表女性相关的商品，在化妆品包装中也常使用紫色。网店设计中紫 色并不能在所有站点中使用，但紫色会给人留下深刻印象，容易抓住人的视线
细节又可以节约流量，节省图片显示时间
2、5张宝贝图建议分配为:1张正面图，2-3张侧面或细节图，1-2张宣传图 3、宝贝主图后期制作时有品牌统一在右上角加品牌logo、背景和产品位置 4、严格按规格批量统一裁剪为正方形(天猫、淘宝智能版自定义区则统一尺寸) 5、宣传图保持界面干净，文字简洁，不要覆盖商品本身，尽可能不要加水印 6、严禁牛皮癣，严禁盗图
网店装修与美工设计
为什么要做网店装修和设计？
PPT课件
2
网店装修及美工的重要性
网店美工的根本宗旨
一个好的网店美工，不仅仅是考虑观赏性， 更重要的是记住美工时刻服务于营销目的
手机淘宝页面设计介绍课件
05
广告区域：展示各种广告信息
06
页面背景：采用简洁、清晰的背景，提高用户体验
色彩搭配
主色调：手机淘宝的主色调为橙色，代表活 力、热情和温暖
辅助色：辅助色包括蓝色、绿色、紫色等， 用于强调和区分不同功能区域
对比色：使用对比色可以突出重点信息，如 红色、黄色等
渐变色：渐变色可以增加页面的层次感和 立体感，如从浅到深的渐变效果
搜索页面设计：快速准确找到 ห้องสมุดไป่ตู้需商品，提高用户体验
市场竞争力：优秀的页面设计可以提高手机淘宝 在市场竞争中的优势，吸引更多用户和商家。
手机淘宝页面设计的原则
简洁明了：页面设计应简 洁明了，让用户能够快速 找到所需信息。
易于操作：页面设计应易 于操作，让用户能够轻松 完成购物流程。
视觉吸引力：页面设计应 具有视觉吸引力，吸引用 户关注并激发购买欲望。
6
设计页面风格：设计手机淘宝页面的整体风 格，包括色彩、字体、背景等
7
测试与优化：对手机淘宝页面进行测试和优 化，确保页面的可用性和易用性
8
发布与维护：发布手机淘宝页面，并根据用 户反馈进行维护和更新
设计实践技巧
01
简化页面：减少不必要的元素，突出重点信息
02
色彩搭配：选择合适的色彩搭配，提高页面视觉效果
03
布局合理：合理安排页面元素，提高页面可读性
04
响应式设计：考虑不同设备的屏幕尺寸，实现页面自适应
设计实践成果展示
首页设计：简洁明了，突出重 点
分类页面设计：清晰明了，易 于查找
商品详情页设计：详细展示商 品信息，提高购买欲望
购物车页面设计：方便用户管 理购买商品，提高购买效率
淘宝天猫等电商美工培训讲义
淘宝电商美工讲义目录第一章：初识淘宝1、淘宝美工的岗位职责和学习内容2、了解店铺构造3、为什么要进行网店装修工作优秀店铺欣赏第二章：Photoshop软件基础操作1、软件基础知识及界面介绍2、工具箱介绍3、图层操作4、图层蒙版调色命令第三章店铺总体设计要领1、店铺装修注意事项2、操作练习3、作业点评第四章店招制作1、店招制作2、操作练习3、作业点评第五章：分类导航及客服中心制作1、分类导航及客服中心制作2、操作练习3、作业点评第六章：宝贝陈列设计1、宝贝陈列设计2、操作练习3、作业点评第七章：内页制作1、内页制作规则（以家纺内页制作规则为例）2、内页制作前准备（修图、美化图片、抠图、调色）2、操作练习3、作业点评第八章：产品上架1、上传宝贝及主图制作2、操作练习3、作业点评第九章：海报设计与制作1、海报设计与制作2、操作练习3、作业点评第十章：店铺整体色彩风格设计与装修1、整店风格设计与装修作业点评第一章：初识淘宝1、淘宝美工的岗位职责（淘宝店铺页面设计、美化、网店促销海报制做、宝贝内页设计、图片美化、切片、上传宝贝等）淘宝美工应该熟练使用Photoshop、Flash、fireworks、Dreamweaver 等常用设计制作软件2、了解店铺构造（店招、首页海报、分类导航、客服中心、分区、侧边栏、主图、宝贝详情、内页海报、页尾）淘宝店铺首页的结构一般如下：3、为什么要进行店铺装修如果—个买家找到了三家店铺做对比，如果你的店铺装修得更专业到位，买家的眼球自然会被你的店铺吸引，那么你给这位买家之第—印象已经很好很深刻了。
电视广告为什么要花血本做那么多动画广告呢？丢几张图片不为更省事，当然目的就为用动画营造视觉效果，让你对他们的产品印象更深刻！或许您会说，我店铺不装修生意—样非常好，商品质量才为王道，但有好的商品同样未必会有很好的生意，还要在装修上下点工夫，这里就要谈到淘宝店铺的装修了，试问有哪位买家有耐心看你写之乱七八糟之东西呢？装修不只为装修店铺，还要装修你的商品，把你的描述写得尽量言简意赅，宝贝图片尽量清晰！你要时刻站在买家之立场来装修你的店铺，还要时刻站在买家之立场来经营你的生意！4、网店装修之优秀店铺赏析从设计师和买家的角度，我们来对一些店铺的设计进行分析，希望对大家有所帮助。
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学课件—第3章商品图片的基本处理
其具体操作如2.2 商品图片降噪优化处理
11
3 表面模糊图片 5 设置图层混合模式
4设置高反差保留参数 6 完成后的效果
3.2.3 去除商品图片中的多余对象
12
为了完整地展现商品的特点，有时会扩大取景范围，这可能导致商品图片中出现多余的 对象，如人物、街道等，特别是外景拍摄时这种情况更加常见。遇到这种情况时，网店美工 可以使用修复工具去除图片中多余的对象。
3.3.1 抠取单色背景商品图片并合成
18
对于单色背景的商品图片，可直接使用快速选择工具和魔棒工具进行抠取，其抠取方法 基本相同。
其具体操作如下。
1 打开素材并复制图层
2 创建选区
3.3.1 抠取单色背景商品图片并合成
19
3 选中空调
4 移动空调到背景
5 选择“垂直翻转”命令
3.3.1 抠取单色背景商品图片并合成
20
6 添加投影效果
2 创建选区
7 设置投影参数
8 完成后的效果
3.3.2 抠取精细商品图片并合成
21
当商品图片中的商品轮廓和背景比较复杂时，直接使用魔棒工具很难得到较好的抠图效 果，此时可使用钢笔工具抠取商品细节，在抠取时要注意锚点、平滑点的调整方法。
其具体操作如下。
1 打开素材文件
2 确定起始点
其具体操作如下。
1 打开素材文件
2 去色图层
3.2.1 商品图片清晰度优化处理
9
3 设置高反差保留参数
4 设置图层混合模式
5 复制图层
6 调整色阶增加亮度
3.2.2 商品图片降噪优化处理
10
商品图片中的噪点主要有两类：颜色噪点和明亮度噪点。颜色噪点是指图片中单纯的色 彩区域内出现的五颜六色的杂色块。明亮度噪点是指图片中亮度一致的区域内出现的斑斑点 点，以及亮度不一的灰色颗粒。网店美工在处理有噪点的商品图片时，可使用减少杂色、表 面模糊等功能。
11
3 表面模糊图片 5 设置图层混合模式
4设置高反差保留参数 6 完成后的效果
3.2.3 去除商品图片中的多余对象
12
为了完整地展现商品的特点，有时会扩大取景范围，这可能导致商品图片中出现多余的 对象，如人物、街道等，特别是外景拍摄时这种情况更加常见。遇到这种情况时，网店美工 可以使用修复工具去除图片中多余的对象。
3.3.1 抠取单色背景商品图片并合成
18
对于单色背景的商品图片，可直接使用快速选择工具和魔棒工具进行抠取，其抠取方法 基本相同。
其具体操作如下。
1 打开素材并复制图层
2 创建选区
3.3.1 抠取单色背景商品图片并合成
19
3 选中空调
4 移动空调到背景
5 选择“垂直翻转”命令
3.3.1 抠取单色背景商品图片并合成
20
6 添加投影效果
2 创建选区
7 设置投影参数
8 完成后的效果
3.3.2 抠取精细商品图片并合成
21
当商品图片中的商品轮廓和背景比较复杂时，直接使用魔棒工具很难得到较好的抠图效 果，此时可使用钢笔工具抠取商品细节，在抠取时要注意锚点、平滑点的调整方法。
其具体操作如下。
1 打开素材文件
2 确定起始点
其具体操作如下。
1 打开素材文件
2 去色图层
3.2.1 商品图片清晰度优化处理
9
3 设置高反差保留参数
4 设置图层混合模式
5 复制图层
6 调整色阶增加亮度
3.2.2 商品图片降噪优化处理
10
商品图片中的噪点主要有两类：颜色噪点和明亮度噪点。颜色噪点是指图片中单纯的色 彩区域内出现的五颜六色的杂色块。明亮度噪点是指图片中亮度一致的区域内出现的斑斑点 点，以及亮度不一的灰色颗粒。网店美工在处理有噪点的商品图片时，可使用减少杂色、表 面模糊等功能。
淘宝天猫美工 第6章 淘宝店铺首页设计
店招风格：店招的风格要和店铺整体统一，同时也要和店 铺产品的风格有一定的关联性。
店招背景：店招左右两侧为店招的背景区域，在设计店招 后还需要对店招的背景进行相应设计。
店铺 logo ：好的店铺 logo 更能深入人心，并逐渐形成 品牌文化。
收藏和关注图标：在店招中加入店铺收藏和关注图标的链 接，可以留着更多潜在客户。
淘宝店铺的首页相当于一家实体店的门面，其首页 设计的好坏将直接影响顾客的购物体验和店铺的转化率， 好的首页一定由合适的版块布局组成。店铺首页布局并 不是将所有模块都堆积到界面中，而是将模块按照合适 的组合进行排列，组成整体格局。不同类型的店铺其首 页模块也不一样，在布局时还要考虑店铺的定位和类型。
图 6-7
图 6-8
客服中心：店铺的客服组所占的高度不多，有些店铺将客 服组设置在店招上，有的则放在首页页面的最后。如果店 铺首页特别长，那一定要把客服组放在最显眼的位置，让 顾客一看就能看到，这样才能在顾客需要帮助时发挥作用。
店铺页尾：在 PC 端的店铺页尾模块，通常会放置“商品 分类”“回到顶部”以及“购物须知”等信息，如图 6-9 所示。
图 6-28
导航的主要作用是列出店铺的分类信息，选择不同的分类 可以进行不同的商品页面，淘宝店铺中的导航是默认存在且不 可删除的。
导航的设置并不是越多越好，要结合店铺的实际运营需要。 店招导航位于店铺店招下方，宽度同店招相同，为 30 像素， 淘宝店铺的导航的文字信息部分建议在 950 像素以内；活动 导航的尺寸建议选择宽度小于 200 像素、高度小于 600 像素， 图片格式为 jpg、png、gif。
STEP 1 打开“店招 .psd”文件，将画布大小更改为 150 像素宽，然后在店招下方绘制一个红色的矩形，如图 6-29 所示。
店招背景：店招左右两侧为店招的背景区域，在设计店招 后还需要对店招的背景进行相应设计。
店铺 logo ：好的店铺 logo 更能深入人心，并逐渐形成 品牌文化。
收藏和关注图标：在店招中加入店铺收藏和关注图标的链 接，可以留着更多潜在客户。
淘宝店铺的首页相当于一家实体店的门面，其首页 设计的好坏将直接影响顾客的购物体验和店铺的转化率， 好的首页一定由合适的版块布局组成。店铺首页布局并 不是将所有模块都堆积到界面中，而是将模块按照合适 的组合进行排列，组成整体格局。不同类型的店铺其首 页模块也不一样，在布局时还要考虑店铺的定位和类型。
图 6-7
图 6-8
客服中心：店铺的客服组所占的高度不多，有些店铺将客 服组设置在店招上，有的则放在首页页面的最后。如果店 铺首页特别长，那一定要把客服组放在最显眼的位置，让 顾客一看就能看到，这样才能在顾客需要帮助时发挥作用。
店铺页尾：在 PC 端的店铺页尾模块，通常会放置“商品 分类”“回到顶部”以及“购物须知”等信息，如图 6-9 所示。
图 6-28
导航的主要作用是列出店铺的分类信息，选择不同的分类 可以进行不同的商品页面，淘宝店铺中的导航是默认存在且不 可删除的。
导航的设置并不是越多越好，要结合店铺的实际运营需要。 店招导航位于店铺店招下方，宽度同店招相同，为 30 像素， 淘宝店铺的导航的文字信息部分建议在 950 像素以内；活动 导航的尺寸建议选择宽度小于 200 像素、高度小于 600 像素， 图片格式为 jpg、png、gif。
STEP 1 打开“店招 .psd”文件，将画布大小更改为 150 像素宽，然后在店招下方绘制一个红色的矩形，如图 6-29 所示。
Banner设计(课堂PPT)
Banner 計 4
2
1
Banner形象鲜明表达最主要的情 感思想的表达。
主要类型： • 页面中的横幅广告 • 游行活动时的旗帜 • 报纸杂志上的大标题
2
2
2020/4/26
3
Banner設計 --- Banner设计心理学
广告心理包含以下流程： 无意注意→有意注意→增强说服效果(记忆与再现、意象与联想)→情感与决策。
2020/4/26
33
Banner設計---- Banner的标准
2020/4/26
34
Banner設計---- Banner的标准
• f.特殊肌理的组合 • 适当的运用肌理以及拼贴效果，让画面
变得有质感且意味深长，是让Banner与众不 同的好办法之一。
2020/4/26
35
Banner設計---- Banner的标准
的画面。点的连续排列构成线，点与点之间的距离越近，
线的特性就越显著。点的密集排列构成面，同样，点的距
离越近，面的特性就越显著。
2020/4/26
18
Banner設計---- Banner的标准
• 无数图形的点聚合在一起，增强画面的韵律感
2020/4/26
19
Banner設計---- Banner的标准
(1)背景饱和度和亮度偏低 为了突出banner中的重点，在重要位置选择饱和度较高的颜色，产
生明确的视觉中心，而为了不干扰用户的阅读，背景颜色则推荐使用饱 和度和亮度偏低的颜色，突出重点避免视觉疲劳。
2020/4/26
8
Banner設計 --- Banner设计心理学
(2)背景简单 简单的背景能烘托出所要表达内容，使整个banner主次分明。
2
1
Banner形象鲜明表达最主要的情 感思想的表达。
主要类型： • 页面中的横幅广告 • 游行活动时的旗帜 • 报纸杂志上的大标题
2
2
2020/4/26
3
Banner設計 --- Banner设计心理学
广告心理包含以下流程： 无意注意→有意注意→增强说服效果(记忆与再现、意象与联想)→情感与决策。
2020/4/26
33
Banner設計---- Banner的标准
2020/4/26
34
Banner設計---- Banner的标准
• f.特殊肌理的组合 • 适当的运用肌理以及拼贴效果，让画面
变得有质感且意味深长，是让Banner与众不 同的好办法之一。
2020/4/26
35
Banner設計---- Banner的标准
的画面。点的连续排列构成线，点与点之间的距离越近，
线的特性就越显著。点的密集排列构成面，同样，点的距
离越近，面的特性就越显著。
2020/4/26
18
Banner設計---- Banner的标准
• 无数图形的点聚合在一起，增强画面的韵律感
2020/4/26
19
Banner設計---- Banner的标准
(1)背景饱和度和亮度偏低 为了突出banner中的重点，在重要位置选择饱和度较高的颜色，产
生明确的视觉中心，而为了不干扰用户的阅读，背景颜色则推荐使用饱 和度和亮度偏低的颜色，突出重点避免视觉疲劳。
2020/4/26
8
Banner設計 --- Banner设计心理学
(2)背景简单 简单的背景能烘托出所要表达内容，使整个banner主次分明。
网店美工首页、详情页、轮播图设计
三 商品详情页视觉设计
28
1、认识商品详情页
（2）赢得消费者信任。网店美工在设计商品详情页时，可从商品细节、消费者痛点、商 品卖点、同类商品对比、第三方评价、品牌附加值、消费者情感、品质证明、售后服务等方面 赢得消费者信任，激发消费者的潜在需求，提高消费者的购买欲。
右图所示为某洗衣机的商品详情页，通 过详细展示洗衣机功能，展示该商品的 优越之处，提高消费者的购买欲。
（1）主题。无论全屏海报数量的 多与少，全屏海报中的内容都需要围 绕同一个主题，并根据主题确定对应 的全屏海报效果。
（2）字体。在添加文字时，文字 的字体不要超过3种，建议用稍大或个 性化的字体突出海报主题和商品特征。
（3）构图。构图方式直接影响着全屏海报的 视觉效果。 （4）配色。网店美工在配色时，对重要的文 字信息需要用突出醒目的颜色进行强调，通 过明暗对比以及不同颜色的搭配来确定对应 的风格，但要使其背景颜色统一，并且不要 使用太多的颜色，以免使画面显得杂乱。
二 店铺首页核心模块设计
16
3、设计与制作店招与导航
在进行店招与导航设计时，网店美工要想给更多消费者留下深刻印象需要遵循以下设计要求。
01
02
03
04
展示品牌形象 网店名称和网店Logo
进行店铺定位 茶叶
进行店铺风格定位
烘托茶叶绿色、天然的 特点
符合设计规范
常规尺寸多为950像素×120像素（不含 导航栏） 通栏店招的尺寸多为1920像素×150像 素（导航栏位于店招下方），
商品搜索
消费者从某一款商品进入网店首页， 意味着消费者有可能会购买网店的其他商 品。当消费者有明确的购买目的时，网店 首页需要提供搜索功能，帮助消费者快速 方便地找到需要的商品，使消费者快速下 单。
淘宝美工教程 ppt课件
12
PHOTOSHOP淘宝网店美工培训教程 ◎抠图——不规则选框工具
湖州新视觉职业技能培训学校
多边形套索工具：通过鼠标的单击作选区，如果要闭合选区，将光标放于 起点位置单击或在其他位置双击。
磁性套索工具：根据对比度选择图象(注意DEL删除键的使用)
“对比度”输入 1% 到 100% 之间的一个值。较高的数值只检测与它们的 环境对比鲜明的边缘，较低的数值则检测低对比度边缘。
“频率”输入 0 到 100 之间的数值。较高的数值会更快地固定选区边框。
选区修改：按SHIHT键加选区，按ALT键减选区，两个键同时按为选区交 叉，即保留两个选区公共部分。
完成选区后如果边缘有杂边，用图层菜单中的“修边”-“去边”，设1-2个 像素，按确定去除杂边。
ppt课件
13
PHOTOSHOP淘宝网店美工培训教程
对 齐 与 分 布 ： 多 选 多 个 图 层 （ SHIFT 多 选 连 续 图 层 ， CTRL 跳 选 多 个 图 层），单击选项栏中的对应的按钮。
复制对象：按住ALT键拖动对象。原位复制是CTRL+J
得到图层选区：按CTRL键在图层面板的缩略图上单击。
取消选区：CTRL+D。
反转选区：CTRL+SHIFT+I。 ppt课件
注：视图的调节还可以通过导航器面板来操作。
ppt课件
5
PHOTOSHOP淘宝网店美工培训教程
湖州新视觉职业技能培训学校
◎文件的建立： Ctrl+N；按Ctrl双击Photoshop的桌面空白处
网络图片尺寸按实际要求给定，单位用像素，分辨率设置为：72-96dpi
ppt课件
6
PHOTOSHOP淘宝网店美工培训教程