网店美工(第3版 全彩微课版)

发布时间:2022-5-21 | 杂志分类:其他
免费制作
更多内容

网店美工(第3版 全彩微课版)

内 容 提 要<br>随着电子商务行业竞争的日益加剧,网店美工设计逐渐成为提高客流量与转化率的重要着<br>力点。如何通过有吸引力的美工设计让网店商品在众多竞争对手中脱颖而出、引导买家点击浏<br>览并下单购买,已经成为每个卖家进行网店装修时必须认真考虑的问题。<br>本书结合作者多年的网店美工设计经验,从“学以致用”的角度出发,旨在引领读者全面<br>掌握网店美工设计的相关技能。本书共分为 11 章,内容包括网店装修美工设计快速入门,网店<br>装修四大要点,网店装修六大技能,店标与店招设计,首焦轮播区和商品陈列区设计,服饰网<br>店与箱包网店首页设计,商品详情页设计,商品短视频制作,移动端网店装修美工设计,以及<br>移动端网店首页与详情页装修设计等。<br>本书内容新颖,图文并茂,不仅适合网店卖家、美工设计人员等电子商务从业者学习参考,<br>还可作为本科院校、职业院校相关专业及培训机构的教材。<br>网店美工(第3版) - 改三22-1-10.i... [收起]
[展开]
网店美工(第3版 全彩微课版)
粉丝: {{bookData.followerCount}}
人民邮电出版社是工业和信息化部主管的大型专业出版社,成立于1953年10月1日。人民邮电出版社坚持“立足信息产业、面向现代社会、传播科学知识、服务科教兴国”的出版宗旨,不断发展壮大,成为集图书、期刊、音像电子出版物和网络出版为一体的,在国内外有专业特色和品牌影响的综合性科技出版大社。
文本内容
第2页

内 容 提 要<br>随着电子商务行业竞争的日益加剧,网店美工设计逐渐成为提高客流量与转化率的重要着<br>力点。如何通过有吸引力的美工设计让网店商品在众多竞争对手中脱颖而出、引导买家点击浏<br>览并下单购买,已经成为每个卖家进行网店装修时必须认真考虑的问题。<br>本书结合作者多年的网店美工设计经验,从“学以致用”的角度出发,旨在引领读者全面<br>掌握网店美工设计的相关技能。本书共分为 11 章,内容包括网店装修美工设计快速入门,网店<br>装修四大要点,网店装修六大技能,店标与店招设计,首焦轮播区和商品陈列区设计,服饰网<br>店与箱包网店首页设计,商品详情页设计,商品短视频制作,移动端网店装修美工设计,以及<br>移动端网店首页与详情页装修设计等。<br>本书内容新颖,图文并茂,不仅适合网店卖家、美工设计人员等电子商务从业者学习参考,<br>还可作为本科院校、职业院校相关专业及培训机构的教材。<br>网店美工(第3版) - 改三22-1-10.indd 2 2022\/1\/12 13:10:20

第3页

前言 P R E FAC E<br>随着电子商务的飞速发展,越来越多的人和企业投入到开网店的浪潮中来。随着卖<br>家数量的持续增长,买家的选择越来越多,买家对于网购体验的要求越来越高。很多人<br>认为电子商务越来越难做了,尤其是“淘系”电子商务,但是每年还会有很多新的网店<br>脱颖而出。我们深入了解这些网店时,就会发现它们不仅有着过硬的爆款商品,还有颇<br>具视觉冲击力的网店装修。<br>如何通过精美的网店装修来吸引买家、提高网店的关注度是每个卖家都需要考虑<br>的问题。网店美工设计就是要吸引更多的买家进入网店、提高网店的转化率。网店美工<br>人员不仅要学会挖掘商品卖点、对商品详情页进行个性化的设计,还要掌握网店风格定<br>位、色彩搭配、页面布局的方法,以及店标、店招、首焦轮播区、商品陈列区、首页、<br>商品详情页、商品短视频等的设计技巧。<br>本书内容安排<br>本书主要依托Photoshop CS6 讲解,内容新颖,案例丰富,在上一版的基础上进行<br>了全新升级。本书立足电子商务卖家的实际需求,与时俱进,特别安排了商品短视频制<br>作、移动端网店装修设计等内容,并在核心章节设置了“综合实训”模块,帮助读者真<br>正掌握网店美工设计技能。此外,本书还利用“技能扩展”模块对京东平台上的网店装<br>修设计进行了讲解。<br>本书编写特色<br>● 融入思政,案例主导。本书选取符合广告相关法律法规要求、体现社会主义核<br>心价值观、弘扬传统文化的案例,体现课程思政。案例涵盖店标、店招、首焦轮播区、<br>商品陈列区、首页、商品详情页、商品主图视频、商品详情页视频、直播主图、移动端<br>网店首页与详情页等网店美工设计内容,并给出详细的设计思路和操作步骤,通过“设<br>计理念”“技术要点”“实操演练”等环节对案例进行专业的剖析与讲解,简单易学。<br>● 重在实操,学以致用。本书特别注重设计方法和实操技巧的归纳总结,在网店<br>美工设计知识点和实操案例的讲解过程中穿插了软件操作,让“学以致用”这一教学思<br>想得以实现,使读者能够在实践中深入掌握所学知识。<br>● 同步微课,全彩印刷。读者用手机扫描书中的二维码,即可观看案例操作的微<br>课视频,强化学习效果。此外,为了帮助读者更直观地观察图像效果、对照微课视频进<br>网店美工(第3版) - 核红22-1-27.indd 3 2022\/1\/27 9:22:18

第4页

行深入学习,本书采用全彩印刷,并设计了精美的版式,帮助读者在赏心悦目的阅读体<br>验中快速掌握网店美工设计的各种技能。<br>● 资源丰富,拿来即用:本书提供了丰富的立体化教学资源,除微课视频外,还<br>有素材文件、效果文件、PPT、教学大纲、教案、习题答案、试卷等,读者可以登录人<br>邮教育社区(www.ryjiaoyu.com)下载并获取相关教学资源。<br>虽然我们在编写过程中力求准确、完善,但书中仍可能存在疏漏与不足之处,恳请<br>广大读者批评指正,在此深表谢意!<br>编 者<br>2021年10月<br>网店美工(第3版) - 核红22-1-27.indd 4 2022\/1\/27 9:22:28

第5页

CONTENT S 目录<br>网店装修美工设计<br>快速入门<br>■ 1.1∣初步了解网店装修 ..... 001<br>1.1.1 什么是网店装修 ............ 001<br>1.1.2 网店装修的重要性 ......... 005<br>1.1.3 网店装修与转化率的<br> 关系 .............................. 006<br>■ 1.2∣网店装修的风格 ........ 008<br>1.2.1 如何确定网店装修的<br> 风格 ............................... 009<br>1.2.2 不同行业网店装修的<br> 风格 ................................011<br>■ 1.3∣网店装修中需要注意<br> 的问题 ....................... 012<br>1.3.1 装修图片的显示 ............ 012<br>1.3.2 适量使用闪图和特效 ..... 012<br>1.3.3 添加音乐要有讲究 ......... 013<br>1.3.4 控制装修图片的色彩 ..... 013<br>1.3.5 网店风格的选择 ............ 013<br>1.3.6 网店视频切忌过长 ......... 013<br>课后练习 ........................................... 014<br>网店装修四大要点<br>■ 2.1∣准备图片素材 ............ 015<br>2.1.1 拍摄商品图片 ................ 015<br>2.1.2 收集修饰素材 ................ 017<br>■ 2.2∣网店色彩搭配 ............ 018<br>第1章<br>第2章<br>2.2.1 常见的配色方法 ............ 018<br>2.2.2 色彩与网店营销 ............ 020<br>2.2.3 不同色调的页面 ............ 021<br>■ 2.3∣不拘一格的页面<br> 布局 ..........................023<br>2.3.1 页面布局的组成要素 ..... 023<br>2.3.2 常用的页面布局方式 ..... 024<br>■ 2.4∣准确、抢眼的文字 ..... 026<br>2.4.1 网店页面段落文字的<br> 排列方式 ....................... 026<br>2.4.2 打造具有高表现力的<br> 文字造型 ....................... 028<br>2.4.3 利用文字营造特定的<br> 氛围 .............................. 030<br>课后练习 ........................................... 031<br>网店装修六大技能<br>■ 3.1∣裁图——纠正商品图片<br> 角度 ..........................032<br>3.1.1 调整图片大小 ................ 032<br>3.1.2 裁剪商品图片中多余的<br> 图像 .............................. 033<br>3.1.3 对商品外形进行校正 ..... 034<br>■ 3.2∣抠图——选取商品替换<br> 背景 ..........................035<br>3.2.1 快速抠取单色背景<br> 图片 .............................. 035<br>3.2.2 抠取规则的商品图片 ..... 036<br>第3章<br>网店美工(第3版) - 改三22-1-10.indd 5 2022\/1\/12 13:10:20

第6页

3.2.3 抠取多边形对象 ............ 037<br>3.2.4 抠取轮廓清晰的图片 ..... 038<br>3.2.5 精细抠取图像 ................ 039<br>3.2.6 抠取复杂或半透明图像 ... 040<br>3.2.7 调整抠取的商品图像<br> 边缘 .............................. 043<br>■ 3.3∣修图——完美展现商品<br> 细节 ..........................044<br>3.3.1 去除多余的水印 ............ 044<br>3.3.2 局部去除多余内容 ......... 046<br>3.3.3 对模特进行美化处理 ..... 047<br>3.3.4 调整模特身形 ................ 049<br>3.3.5 对商品图像进行锐化<br> 处理 .............................. 050<br>■ 3.4∣调色——校正有色差的<br> 商品图片 ................... 051<br>3.4.1 调整图片的亮度 ............ 051<br>3.4.2 校正商品图片的白平衡 ... 053<br>3.4.3 调整商品图片的色调 ..... 054<br>■ 3.5∣编辑——美化与修饰商品<br> 图像 .......................... 055<br>3.5.1 利用图层样式增强特<br> 效感 .............................. 055<br>3.5.2 利用图层混合模式制作<br> 特殊效果 ....................... 056<br>3.5.3 利用蒙版控制图像显示<br> 效果 .............................. 058<br>3.5.4 制作GIF动态闪图 .......... 059<br>■ 3.6∣文字——商品信息辅助<br> 说明 ..........................061<br>3.6.1 添加文字并设置格式 ..... 061<br>3.6.2 制作创意标题文字 ......... 062<br>3.6.3 对段落文字进行艺术化<br> 编排 .............................. 063<br>课后练习 ........................................... 063<br>店标与店招设计<br>■ 4.1∣网店店标的设计 ........ 065<br>4.1.1 店标的设计形态 ............ 065<br>4.1.2 不同行业的店标设计 ..... 066<br>■ 4.2∣课堂案例:水果网店店标<br> 设计 ..........................067<br>4.2.1 设计理念 ....................... 067<br>4.2.2 技术要点 ....................... 068<br>4.2.3 实操演练 ....................... 068<br>■ 4.3∣了解网店店招与<br> 导航 ..........................070<br>4.3.1 认识店招与导航 ............ 070<br>4.3.2 店招与导航的设计<br> 思路 .............................. 071<br>■ 4.4∣课堂案例:母婴网店<br> 店招与导航设计 ........ 072<br>4.4.1 设计理念 ....................... 072<br>4.4.2 技术要点 ....................... 072<br>4.4.3 实操演练 ....................... 072<br>■ 4.5∣综合实训 ................... 077<br>■ 4.6∣技能拓展 ................... 077<br>课后练习 ........................................... 078<br>首焦轮播区和商品<br>陈列区设计<br>■ 5.1∣首焦轮播区及其设计<br> 思路 ..........................079<br>5.1.1 认识首焦轮播区 ............ 079<br>5.1.2 首焦轮播区的设计思路 ... 081<br>■ 5.2∣课堂案例:节日主题的<br> 首焦轮播区设计 ........... 081<br>5.2.1 设计理念 ....................... 081<br>第4章<br>第5章<br>网店美工(第3版) - 改三22-1-10.indd 6 2022\/1\/12 13:10:21

第7页

5.2.2 技术要点 ....................... 082<br>5.2.3 实操演练 ....................... 082<br>■ 5.3∣商品陈列区视觉<br> 设计 ..........................085<br>5.3.1 营造视觉动线 ................ 086<br>5.3.2 商品布局艺术化 ............ 088<br>■ 5.4∣课堂案例:当季热卖<br> 商品陈列区设计 ........ 089<br>5.4.1 设计理念 ....................... 090<br>5.4.2 技术要点 ....................... 090<br>5.4.3 实操演练 ....................... 090<br>■ 5.5∣综合实训 ................... 095<br>■ 5.6∣技能拓展 ................... 096<br>课后练习 ........................................... 097<br>首页设计——服饰<br>网店<br>■ 6.1∣课堂案例:甜美女装网店<br> 首页设计 ................... 098<br>6.1.1 设计理念 ....................... 098<br>6.1.2 技术要点 ....................... 099<br>6.1.3 实操演练 ....................... 099<br>■ 6.2∣课堂案例:可爱童装网店<br> 首页设计 ................... 105<br>6.2.1 设计理念 ....................... 105<br>6.2.2 技术要点 ....................... 105<br>6.2.3 实操演练 ....................... 105<br>■ 6.3∣综合实训 ................... 113<br>课后练习 ............................................114<br>首页设计——箱包<br>网店<br>■ 7.1∣课堂案例:时尚拉杆箱<br> 网店首页设计 ............ 115<br>第6章<br>第7章<br>7.1.1 设计理念 ........................115<br>7.1.2 技术要点 ........................115<br>7.1.3 实操演练 ........................116<br>■ 7.2∣课堂案例:女式箱包网店<br> 首页设计 ................... 125<br>7.2.1 设计理念 ....................... 125<br>7.2.2 技术要点 ....................... 125<br>7.2.3 实操演练 ....................... 125<br>■ 7.3∣综合实训 ................... 133<br>课后练习 ........................................... 134<br>商品详情页设计<br>■ 8.1∣商品详情页及其设计<br> 思路 ..........................135<br>8.1.1 认识商品详情页 ............ 135<br>8.1.2 商品详情页的设计<br> 思路 .............................. 136<br>■ 8.2∣课堂案例:零食网店商品<br> 详情页设计 ................ 138<br>8.2.1 设计理念 ....................... 139<br>8.2.2 技术要点 ....................... 139<br>8.2.3 实操演练 ....................... 139<br>■ 8.3∣课堂案例:数码网店商品<br> 详情页设计 ................ 145<br>8.3.1 设计理念 ....................... 145<br>8.3.2 技术要点 ....................... 145<br>8.3.3 实操演练 ....................... 145<br>■ 8.4∣综合实训 ................... 150<br>■ 8.5∣技能拓展 ................... 150<br>课后练习 ........................................... 152<br>商品短视频制作<br>■ 9.1∣商品短视频的作用 ..... 153<br>■ 9.2∣商品主图视频制作 ..... 154<br>第8章<br>第9章<br>网店美工(第3版) - 改三22-1-10.indd 7 2022\/1\/12 13:10:21

第8页

9.2.1 设置视频项目属性并<br> 导入素材 ....................... 155<br>9.2.2 修整素材 ....................... 156<br>9.2.3 添加字幕 ....................... 157<br>9.2.4 导出商品主图视频 ......... 159<br>9.2.5 按电商平台要求转换<br> 视频文件 ....................... 161<br>■ 9.3∣商品详情页视频<br> 制作 ..........................162<br>9.3.1 设置视频项目属性并<br> 导入素材 ....................... 162<br>9.3.2 修整素材 ....................... 163<br>9.3.3 添加滤镜效果 ................ 165<br>9.3.4 添加转场效果 ................ 166<br>9.3.5 制作运动追踪动画 ......... 167<br>9.3.6 制作短视频字幕 ............ 169<br>9.3.7 添加音效并导出视频 ..... 170<br>■ 9.4∣综合实训 ................... 171<br>课后练习 ........................................... 172<br>移动端网店装修<br>美工设计<br>■ 10.1∣移动端网店页面结构<br> 分析 ........................ 173<br>10.1.1 移动端网店页面的框架<br> 结构 ............................ 173<br>10.1.2 移动端网店图片发布尺寸<br> 要求 ............................ 174<br>■ 10.2∣移动端网店装修快速<br> 入门 ........................ 176<br>10.2.1 保持网店设计风格的<br> 一致性......................... 176<br>10.2.2 采用简单且便于操作的<br> 设计方式 ..................... 176<br>第10章<br>10.2.3 网店色彩的设计与<br> 选择 ............................ 178<br>■ 10.3∣课堂案例:美妆商品<br> 直播主图设计 .......... 180<br>10.3.1 设计理念 ..................... 180<br>10.3.2 技术要点 ..................... 181<br>10.3.3 实操演练 ..................... 181<br>课后练习 ........................................... 185<br> 移动端网店首页与<br>详情页装修设计<br>■ 11.1∣移动端网店首页装修<br> 设计 ........................ 186<br>11.1.1 店招的装修设计 .......... 187<br>11.1.2 轮播图片的装修设计 ... 189<br>11.1.3 优惠券的装修设计 ....... 190<br>11.1.4 商品分类导航的装修<br> 设计 ............................ 191<br>11.1.5 商品分类展示的装修<br> 设计 ............................ 191<br>■ 11.2∣移动端网店详情页装修<br> 设计 ........................ 193<br>11.2.1 详情页装修设计的FABE<br> 原则 ............................ 193<br>11.2.2 直截了当地突出商品<br> 信息 ............................ 196<br>■ 11.3∣课堂案例:女装网店<br> 年中盛典首页设计 ... 197<br>11.3.1 设计理念 ..................... 197<br>11.3.2 技术要点 ..................... 197<br>11.3.3 实操演练 ..................... 197<br>课后练习 ........................................... 204<br>第11章<br>网店美工(第3版) - 核红22-1-27.indd 8 2022\/1\/27 9:24:49

第9页

001<br>网店装修美工设计快速入门<br>第1章<br>1 理解网店装修的重要性。<br>2 明白网店装修与转化率的关系。<br>3 学会用有效的方法确定网店装修的风格。<br>4 注意网店装修细节问题,避免客流量的流失。<br>5 切实体会“打铁还需自身硬”的道理,培养求真务实的职业素养。<br>6 培养一丝不苟、精益求精的工匠精神。<br>对于同样的商品,有的网店卖家就能把商品卖出去,生意做得风生水起,有的卖家发布<br>的商品则会石沉大海,无人问津。买家为什么会对相同的商品有截然不同的态度呢?除了推<br>广方式和营销手段外,网店装修的作用不可小觑。商品再好,吸引不来买家也毫无用处。因<br>此,对于卖家来说,网店装修是决定网店成败的重要因素之一。<br>1.1 初步了解网店装修<br>如何让自己的网店在浩如烟海的网店中脱颖而出呢?网店的装修至关重要。如今,买家<br>的眼光越来越高,对网店的视觉要求也越来越高。买家进店不仅需要享受优质的服务,还需<br>要浏览到赏心悦目的购物环境,因此网店装修成为网店营销中不可或缺的重要部分。<br>例如,某网店首页装修效果和具体分析如图1-1所示,整个首页的色彩和修饰元素和谐<br>统一,并且通过合理的布局将画面分为多个不同的功能区域,页面每一处都经过了精心的设<br>计和美化,将商品的特点和网店的风格展示在买家的面前。<br>1.1.1 什么是网店装修<br>用户通过电商平台注册会员并开通了卖家服务后,就可以在电商平台上将商品上架,通<br>过商品图片、活动海报等内容让买家了解网店的销售信息。<br>网店装修通过图形图像软件对商品图片进行修饰,利用美学设计对素材、文字和图片进<br>行组合,给人以舒适、直观的视觉感受,让买家从设计好的网店中了解到更多的商品信息和<br>网店信息。买家进入一个网店,首先看到的就是网店的装修,没有专业、恰当的装修,网店<br>学习目标<br>网店美工(第3版) - 核红22-1-27.indd 1 2022\/1\/27 9:28:14

第10页

002<br>网店美工(第 3 版 全彩微课版)<br>中的商品质量再好,也不一定能销售出去。<br>图1-1 某网店首页装修效果和具体分析<br>57667--网店美工(第3版 全彩微课版) .indd 2 2022\/2\/14 15:18:04

第11页

003<br>网店装修美工设计快速入门<br>第1章<br>直接拍摄的箱包商品图片如图1-2所示。如果没有进行后期的美化和修饰,直接将这样<br>的图片放到网店页面上,商品就很难销售出去。网店美工可以用专业的图形图像处理软件对<br>图片进行抠图,同时调整箱包的层次和色彩,使其与人们观看到的真实效果一致,如图1-3<br>所示。最后,将编辑处理好的商品图片添加到网店页面中,达到对买家具有视觉吸引力的展<br>示效果,如图1-4所示。从处理商品图片开始,将各种修饰素材有机组合,制作成网店装饰<br>页面的过程就是网店装修。<br> <br> 图1-2 直接拍摄的商品图片 图1-3 经过处理的商品图片<br>图1-4 添加图片到网店页面中<br>网店装修与网店的货源一样重要,绝对不能忽视。正所谓“三分长相,七分打扮”,网<br>店的美化就如同实体店的装修,可以让买家从视觉和心理上感受到网店的专业性和权威性,<br>以及卖家对网店的用心。<br>美观、大气、恰如其分的网店装修可以延长买家在网店中的停留时间,使买家在浏览网<br>页时不易出现视觉疲劳,自然会细心浏览网店,从而实现提高网店销售额的目的。<br>网店美工(第3版) - 改三22-1-10.indd 3 2022\/1\/12 13:10:25

第12页

004<br>网店美工(第 3 版 全彩微课版)<br>优秀的网店设计能够最大限度地提升网店的形象,有利于网店品牌的形成,并能提高网<br>店的浏览量及销售转化率。那么,网店装修主要是对网店中的哪些位置进行装修呢?<br>从图1-5和图1-6中可以发现,网店中需要装修的区域非常多,而且它需要根据商品的变<br>化、季节的变换、节日的变化等进行相应的调整。也就是说,网店装修是一个持续性较强的<br>工作,需要付出很多时间和精力。<br> <br> 图1-5 首页装修 图1-6 详情页装修<br>57667--网店美工(第3版 全彩微课版) .indd 4 2022\/2\/14 15:53:26

第13页

005<br>网店装修美工设计快速入门<br>第1章<br>1.1.2 网店装修的重要性<br>买家进入一个网店后,是否会购买这个网店中的商品会受很多因素的影响(见<br>图1-7)。分析这些因素,不难发现大部分是需要依靠网店装修来解决的。<br>图1-7 决定买家购买的因素<br>首页是一个网店的门面,需要用心策划和布局。商品图片如果没有经过后期的美化与<br>修饰,是很难让买家产生兴趣的,如图1-8所示。手表商品图片在没有处理之前显得毫无<br>质感,经过后期的色调调整,所呈现出来的效果会增强其质感,如图1-9所示。对商品的<br>细节进行分解,还可以提升商品图片的表现力,将商品的各个方面都展示出来,如图1-10<br>所示。<br> <br> 图1-8 没有经过润色的图片 图1-9 经过后期调整的图片<br>图1-10 展示商品细节<br>57667--网店美工(第3版 全彩微课版) .indd 5 2022\/2\/14 15:20:31

第14页

006<br>网店美工(第 3 版 全彩微课版)<br>图1-11所示为两个销售相同商品的网店首页对比图:图1-11(a)将商品包装在纸箱<br>中,橱窗中展示的图片很难显示清销售的是什么商品,也没有对网店进行装修和美化;图<br>1-11(b)将商品具体的使用效果图放在橱窗中细致地展示出来,并利用图形、广告画和活<br>动文字等元素对首页进行装修,使商品品质感更强,这样更容易被买家接受,无形之中为网<br>店增添了可信任度和关注度。<br> <br> (a) (b)<br>图1-11 网店首页对比图<br>网店装修是提高网店销售额的法宝,因此网店经营者需要对网店进行美化,以吸引更多<br>的买家。<br>1.1.3 网店装修与转化率的关系<br>当网店的装修准备工作做到一定程度后,就可以进行宣传和推广了。在经营的过程中,<br>卖家可以逐步完善网店的装修,既不能一味地装修,也不能一味地宣传。只装修不宣传,没<br>有人知道网店的存在,没有浏览量,销量不可能增加;只宣传不装修,买家不信任网店,不<br>敢买,浏览量虽然增加了,但是销量不会增加。因此,装修是做好网店的基础,宣传则是催<br>化剂,宣传能让网店的生意兴旺起来。<br>网店的经营看似简单,其实涉及的内容很复杂。现在开网店的人非常多,买家对网店<br>的要求也越来越高。为了让自己的网店经营得更好,很多卖家会绞尽脑汁地推广自己的网<br>店,从而获取更高的收益。一个网店,不管卖的是什么,都要经常更新货架,目的就是让<br>买家有惊喜。要想新品在上架后得到更多的关注,商品图片的修饰、商品详情页的制作、新<br>网店美工(第3版) - 改三22-1-10.indd 6 2022\/1\/12 13:10:28

第15页

007<br>网店装修美工设计快速入门<br>第1章<br>品上架广告的制作等都需要依靠网店装修来完成,因此网店装修的好看与否直接决定浏览量<br>的高低。<br>在网店营销中有一个公式,如图1-12所示。它展示了哪些因素会影响网店内容对访问者<br>的吸引程度。在这4个因素中,视觉吸引力是一个重要的因素。由于网店中的所有信息都是<br>依靠图片来进行传达的,所以提升图片的表现力是网店装修工作的重点。<br>图1-12 网店营销公式<br>网店的销量高低直接与转化率相关,而影响转化率的主要因素包括商品的图片、买家的<br>评价、卖家的促销活动等。这些因素都涉及网店装修,可见网店装修与网店的转化率是密不<br>可分的。图1-13所示为提高转化率与相关因素之间的关系。<br>㳂ⷀ䓋⿐㔫 㼜⨞㕓コ⭥㋚㈽㾥㏎<br>图1-13 提高转化率与相关因素之间的关系<br>在网店营销中,图片在整个交易环节中起到非常重要的作用,因为买家不可能直接接触<br>商品,只能通过图片进行观看,所以卖家所拍摄的图片质量直接决定了交易的达成情况。除<br>了图片要精美、清晰之外,商品描述同样必不可少。商品描述越详细越好,要把商品的功<br>能、款式、规格等描述得细致入微,把每一个细节都展示给买家。如果卖家能够做到图片和<br>文字的高效结合,那么订单会大幅度增加。<br>例如,图1-14没有突出细节,虽然将商品信息在画面的顶端进行了说明,但是没有针对<br>商品的细节进行有目的的讲解,而大段的文字会让买家失去阅读的兴趣;图1-15放大了商品<br>的重要细节,充分地表现出了商品的特点。由此可以看出,只有经过深思熟虑、精心装修的<br>网店才能吸引买家的消费兴趣,进而提高网店的转化率。<br>在装修网店时,大多数设计者会按照品牌形象来装修,很有意境。然而,这种网店只适<br>57667--网店美工(第3版 全彩微课版) .indd 7 2022\/2\/14 15:21:08

第16页

008<br>网店美工(第 3 版 全彩微课版)<br>合用来展示品牌,真正要做到销售转化是很难的,因为买家网购的目的很明确,之所以进到<br>店里,主要是对商品感兴趣,所以在装修时需要注意两个方面:一是用来展示网店定位的店<br>招不需要太花哨,只需要说明网店销售什么商品即可;二是充分展示商品的精美度。某些时<br>候还可以使用一些特殊手法来增强商品的视觉效果,由此吸引买家的兴趣,达到提高转化率<br>的目的。<br> <br> 图1-14 没有突出细节 图1-15 放大细节<br>1.2 网店装修的风格<br>网店装修虽然有很多漂亮的淘宝模板可以使用,但是这些网店模板都是有特点风格的,<br>如果不符合自己网店的定位,那么就不是一个理想的可使用的装修模板。下面将介绍如何确<br>定网店装修的风格,以及不同行业网店装修的风格。<br>网店美工(第3版) - 核红22-1-27.indd 8 2022\/1\/27 9:34:50

第17页

009<br>网店装修美工设计快速入门<br>第1章<br>1.2.1 如何确定网店装修的风格<br>网店装修流程如图1-16所示。在对网店进行装修时,需要先确定网店装修的风格。<br>图1-16 网店装修流程<br>网店装修的风格在一定程度上可以影响网店的运<br>营。定位准确、美观大方的网店装修可以提升网店的<br>品位,从而吸引目标人群,增加潜在买家的浏览概率<br>及停留时长,最终提高网店的销售额。<br>卖家在确定网店的风格时可以借鉴一些时尚网站<br>中的设计风格,如图1-17所示。<br>网店装修的风格一般体现在网店的整体色彩、<br>色调及图片的拍摄风格上。交易平台网站上有多种网<br>店风格,卖家可以选择这些固定的网店模板来进行装<br>修,也可以根据店内商品的特点和风格重新设计,使<br>网店独具特色,更符合网店的定位。<br>想要确定网店装修的风格,不能只靠网店卖家或<br>美工人员的个人品位,还需要一种系统的方法,如图<br>1-18所示。 图1-17 某时尚网站设计<br>网店美工(第3版) - 改三22-1-10.indd 9 2022\/1\/12 13:10:30

第18页

010<br>网店美工(第 3 版 全彩微课版)<br>图1-18 确定网店装修风格的方法<br>在确定网店风格时,首先需要做的就是通过综合用户研究结果、品牌营销策略,采用内<br>部讨论等方式明确关键词,如“清爽”“专业”“有趣”“活力”等。然后邀请用户、美工<br>人员或决策层参与素材的收集工作,使用图片展示风格、情感。接下来分析选择图片的原<br>因,挖掘更多背后的故事和细节。最后,将素材图片按照关键词进行分类,提取色彩、配色<br>方案、机理材质等特征,作为最后的视觉风格产出物。<br>这里以关键词“清新”为例,通过联想关于“清新”的颜色得到一组色彩较为淡雅的配<br>色;接着联想与“清新”相关的材质,即衣裙、天空等,再进一步分析这些材质带给人的视<br>觉、心理和物化上的映射词组,从而大致把握有关“清新”这个风格的素材;最后对这些信<br>息进行组合和提炼,如图1-19所示,基本完成网店装修素材的收集工作。<br>图1-19 将素材进行组合提炼(以“清新”为例)<br>确定网店的风格除了要独树一帜以外,还要关注同行。要时刻关注竞争对手网店的新品<br>上架、网店装修等情况,将同行网店与自身网店进行深入的对比,总结出更适合自己网店的<br>销售方案和装修风格。<br>总之,在网店装修的过程中首先要准确定位,突出网店风格和主打品牌,并且适时借鉴<br>57667--网店美工(第3版 全彩微课版) .indd 10 2022\/2\/14 15:22:22

第19页

011<br>网店装修美工设计快速入门<br>第1章<br>别人的方法与经验,才会有一个好的开端。<br>1.2.2 不同行业网店装修的风格<br>图1-20、图1-21和图1-22所示分别为三种不同行业、不同风格的网店首页装修效果,依<br>次为暗黑酷炫风格、北欧风格和淑女风格。通过对比可以发现,它们各自选择了适合自己行<br>业和网店风格的修饰元素,并且使用了不同的配色方案,如图1-23所示。<br> <br> 图1-20 暗黑酷炫风格 图1-21 北欧风格 图1-22 淑女风格<br>图1-23 不同网店风格与配色<br>根据网店销售商品的不同,对商品进行有效的包装和设计,使商品和网店所呈现出来的<br>视觉效果独具特色,让买家更加容易区分,在买家心中形成特定的印象,有助于自身网店形<br>象的树立。<br>网店美工(第3版) - 改三22-1-10.indd 11 2022\/1\/12 13:10:33

第20页

012<br>网店美工(第 3 版 全彩微课版)<br>1.3 网店装修中需要注意的问题<br>在确定了网店装修的风格之后,在网店装修具体的制作和维护过程中还要关注一些细节<br>问题。如果不注意这些细节,就可能让买家在浏览网店的时候体验不佳,从而导致客流量的<br>丢失,最终使成交率无法提高。<br>1.3.1 装修图片的显示<br>装修网店所用的图片要存放在卖家自己账户的网络空间中,使用某些免费的存储空间或<br>者盗用别人的图片,可能会出现图片正常显示几天后就不能显示的情况,如图1-24所示。因<br>此,要将装修的图片管理好,使用正规的网络存储空间网站来管理图片,并且及时在计算机<br>上进行备份,以免图片丢失。<br>图1-24 图片无法显示<br>1.3.2 适量使用闪图和特效<br>有的卖家在进行网店装修时喜欢使用大量的闪图和特效。闪图是GIF格式的,能够通过<br>动画的方式显示,如图1-25所示;特效是网页脚本特效,如浮动广告等。<br>图1-25 闪图<br>在装修网店时要适量使用闪图和特效,因为闪图和特效非常耗费计算机空间,计算机配<br>置不是很高的买家进入网店后计算机运行速度会变慢,买家会感觉等待时间过长,以致购物<br>体验变差。过多的闪图和特效也很容易让买家感到视觉疲劳,而且会喧宾夺主,突出不了商<br>品的重点。<br>网店美工(第3版) - 改三22-1-10.indd 12 2022\/1\/12 13:10:33

第21页

013<br>网店装修美工设计快速入门<br>第1章<br>1.3.3 添加音乐要有讲究<br>在网店中添加音乐(见图1-26)时要深思熟虑。如果买家不开音响,添加的音乐不仅毫<br>无作用,还会占用网络数据的传输空间;如果买家开了音响,进入网店后,网店音乐与买家<br>播放器的音乐出现重合,买家可能会立刻关闭网店页面。如果确实想添加音乐,建议添加一<br>些比较柔和、悦耳的音乐,让人感觉舒服的音乐会让买家在店内的停留时间变长。<br>图1-26 添加音乐<br>1.3.4 控制装修图片的色彩<br>巧妙地运用色彩可以使网店页面变得鲜艳、生动、富<br>有活力,但是页面的颜色不能太多、太杂,要保持统一,要<br>有一个固定的配色方案对色彩进行规范,以减少视觉干扰。<br>颜色过多容易造成版面的视觉效果复杂、混乱,对买家获<br>取商品信息毫无帮助,反而可能会带来负面作用,如图1-27<br>所示。<br>1.3.5 网店风格的选择<br>在网店装修之初就要确定风格,通常情况下会选用“默<br>认风格”,因为商品的图片大多是通过抠图抠出来的,背景<br>是白色的,“默认风格”的背景基本上也是白色的,整体会<br>显得简明、舒适,如图1-28所示。如果商品图片的背景不是<br>白色的,就可以选择其他风格。此外,在把握网店整体风格<br>的同时,还要考虑其稳定性和可更改性。<br>1.3.6 网店视频切忌过长<br>随着互联网技术的高速发展,各大电商平台都逐渐开始<br>支持视频功能。很多网店选择用动态的视频取代静态的图片<br>作为商品主图(见图1-29)或者在商品详情页中插入视频广 图1-27 颜色过多<br>网店美工(第3版) - 改三22-1-10.indd 13 2022\/1\/12 13:10:34

第22页

014<br>网店美工(第 3 版 全彩微课版)<br>告,以达到吸引买家购物、提高商品转化率的目的。卖家为了在激烈的竞争中占据优势,的<br>确需要紧跟视频这一热潮,但是要注意控制视频的时长。<br>图1-28 “默认风格”<br>图1-29 主图视频<br>据淘宝官方数据统计,仅有50%的买家会在商品详情页上停留超过30秒,80%的买家浏<br>览不到8屏,并且1~5屏的转化率为16.8%。因此,要想提高商品的转化率,就要在短时间内<br>将有效的信息传递给买家。一张静态的图片通常一两眼就能看完,而一段视频却需要花上几<br>秒甚至更多的时间。因此,尽管各电商平台规定的视频时长上限并不短,但是卖家在制作视<br>频时仍然要控制好时间,让买家能在极短的时间内了解商品并做出购买的决定。<br>课后练习<br>1.根据本章所讲内容,结合实例简述网店装修的重要性。<br>2.在淘宝上搜索“永言旗舰店”“AK男装旗舰店”,并分析它们的装修风格。<br>3.试分析淘宝网店“七匹狼官方旗舰店”“韩都衣舍旗舰店”在网店装修上的优势。<br>网店美工(第3版) - 核红22-1-27.indd 14 2022\/1\/27 9:36:09

第23页

015<br>1 掌握拍摄商品图片的基本技巧,并能根据设计风格收集修饰素材。<br>2 熟知常见的配色方法,学会如何对网店页面进行配色。<br>3 了解页面布局的组成要素和方式,学会使用布局来突出画面的层次感<br> 和主次感。<br>4 能够对段落文字进行合理排列,打造具有高表现力的文字造型,并利<br> 用文字营造特定的氛围。<br>5 在进行作品创意设计时,可植入中国传统文化元素,增强民族自豪感<br> 和文化自信。<br>6 发挥创新能力,激发创意,与时俱进,勤于探索,勇于实践。<br>买家进入网店,如果视觉体验不好,就更不用说去看网店中的商品了,所以不能忽视最<br>基本的网店装修环节。本章主要从图片、配色、布局与文字4个方面介绍如何进行网店装修<br>才能吸引买家眼球,提高转化率。<br>2.1 准备图片素材<br>在对网店进行装修之前,首先要准备大量的图片素材,包括商品图片和修饰页面的素材<br>图片等。将这些图片素材准备好以后,才能通过图形图像处理软件对其进行组合和编辑,制<br>作出吸引眼球的网店页面效果。由此可见,准备图片素材是网店装修工作的第一步。<br>2.1.1 拍摄商品图片<br>在网店装修之前,首先需要拍摄足够的商品图片。由于网上购物的特殊性,消费者无法<br>接触到商品实物,所以商品的所有信息只得以图片的形式传达。然而,商品的某些物理特性<br>无法被消费者感触到,如商品的质地、分量等,这就对商品图片提出了更高的要求。只有从<br>不同的角度拍摄商品,力求展示出商品更多的细节,才能最终打动消费者。图2-1所示为从<br>不同角度拍摄的商品细节图片。<br>在拍摄某些商品的过程中,为了让商品的色泽和质感更加接近人眼看到的效果,还需要布<br>置简易的拍摄场景,让拍摄中的光线满足所需要的强度,使图片中的商品清晰地展现出来。<br>学习目标<br>网店装修四大要点<br>第2章<br>网店美工(第3版) - 核红22-1-27.indd 15 2022\/1\/27 9:46:52

第24页

016<br>网店美工(第 3 版 全彩微课版)<br>图2-2所示为为拍摄饰品网店中的银饰而制作的简易“影棚”,因为银饰本身比较小,<br>使用两张A4白纸即可制作成一个小型“影棚”。在制作时,需要将白纸折叠成立体的形<br>状,形成一个小型的简易“影棚”。<br>图2-2 简易“影棚”<br>布置好拍摄环境之后,就可以将银饰放置在这个“影棚”中央,然后从高处向下俯拍,<br>如图2-3所示。最终拍摄出来的银饰图片效果如图2-4所示。<br> <br> 图2-3 俯拍银饰 图2-4 银饰图片<br>除了要自己创造拍摄环境拍摄商品的细节图以外,大多数时候为了展示商品的实用特<br>性,让买家更直观地感受商品的实物效果,卖家还需要拍摄模特使用或穿戴商品的图片。图<br>2-5所示为手表网店卖家所拍摄的商品图片以及手表试戴效果图片,其中手表试戴效果图片<br>图2-1 从不同角度拍摄的商品细节图片<br>网店美工(第3版) - 核红22-1-27.indd 16 2022\/1\/27 9:41:14

第25页

017<br>网店装修四大要点<br>第2章<br>可以让买家更直观地感受到商品的适用性。<br>图2-5 商品图片及试戴效果图片<br>2.1.2 收集修饰素材<br>在网店装修过程中,除了使用拍摄的商品图片以外,页面修饰素材的使用也是必不可少<br>的,它们往往会让页面效果更加绚丽,呈现的视觉元素更加丰富。因此,在进行网店装修之<br>前,要根据网店的设计风格以及商品特点为网店装修准备所需的修饰素材。<br>是否添加图片修饰素材对商品的表现有很大的影响。例如,从图2-6和图2-7中饰品添加<br>和未添加光线素材的效果对比可以看出,添加光线素材的图片视觉效果更为惊艳,更能表现<br>出商品的材质与特点。<br> <br> 图2-6 添加光线素材修饰 图2-7 未添加光线素材修饰<br>在商品图片上添加修饰素材是为了提升商品的品质,而大多数的网店装修中需要使用大<br>量的修饰素材来让整个页面呈现出完整、统一和丰富的视觉效果。例如,森女风格的网店会<br>选用色彩清新、淡雅的植物素材作为修饰,而可爱风格的网店会选用外形可爱且色彩多变的<br>卡通人物进行点缀,这些素材的添加会让网店页面的整体效果显得更加丰富、精致。<br>图2-8和图2-9最大的区别在于后者对使用的图片素材进行了修饰与美化,而前者只用了<br>纯色的背景和文字,从视觉冲击力的角度来看,后者比前者更容易使人印象深刻。<br>网店美工(第3版) - 改三22-1-10.indd 17 2022\/1\/12 13:10:37

第26页

018<br>网店美工(第 3 版 全彩微课版)<br>图2-8 纯色背景和文字<br>图2-9 对图片素材进行修饰与美化<br>2.2 网店色彩搭配<br>在网店装修中,色彩是一种非常重要的视觉表达元素,它能烘托出各种各样的设计氛<br>围,对人们的心理产生极大的影响。同时,色彩会影响买家对商品风格和形象的判断,只有<br>掌握了色彩搭配的方法,卖家才能设计制作出吸引买家眼球的页面效果。<br>2.2.1 常见的配色方法<br>在网店装修设计中,常用的配色方法主要有同一色相配色、类似色相配色、相反色相配<br>色、渐变效果配色和重色调配色。<br>1.同一色相配色<br>同一色相配色以单一颜色为对象,调整其明度和彩度,使其呈现出不同的特色。这种配<br>色在表现一种秩序井然的感觉时比较适用,可以传达出一种安静之美,如图2-10所示。<br>图2-10 同一色相配色<br>网店美工(第3版) - 核红22-1-27.indd 18 2022\/1\/27 9:43:26

第27页

019<br>网店装修四大要点<br>第2章<br>2.类似色相配色<br>类似色相配色将色相环上相连的颜色组合进行配色,或者将相连的颜色进行明度和彩度<br>上的微调后进行配色,色相之间和谐、协调,适合表现温馨、甜美、浪漫的视觉效果,如<br>图2-11所示。<br>3.相反色相配色<br>相反色相配色使用色相环上相反方向的颜色进行配色,可给人一种强势和生动的感觉,<br>因为色相之间差异较大,更容易营造出一种动态、华丽的视觉效果,如图2-12所示。<br> 图2-11 类似色相配色 图2-12 相反色相配色<br>4.渐变效果配色<br>渐变效果配色是将所选颜色的明度、彩度和色相等逐层给予适当的变化之后再组合起来<br>的一种配色方案,通常用于表现一种和谐、自然的视觉效果,如图2-13所示。<br>5.重色调配色<br>重色调配色是在相对单调的配色氛围中,通过使用对照色相与色调,从而起到强调效<br>果的一种配色方式。这样的配色会打破平淡、枯燥的页面效果,更加引人关注,如图2-14<br>所示。<br>网店美工(第3版) - 改三22-1-10.indd 19 2022\/1\/12 13:10:38

第28页

020<br>网店美工(第 3 版 全彩微课版)<br> 图2-13 渐变效果配色 图2-14 重色调配色<br>2.2.2 色彩与网店营销<br>色彩对于网店营销而言是一个极其重要的影响因素。虽然有些消费者对于网店首页以<br>及商品页面的颜色搭配并不是太在意,但是颜色通过人的视觉,会对买家的心理与思维<br>产生重大的影响。图2-15中使用能够提起人们味觉的暖色进行搭配,给人一种暖意融融的<br>感觉。<br>图2-15 暖色搭配<br>在运营网店时,为了提高销售的业绩可以使用的有效策略很多,有时不用支付昂贵的广<br>告费用,只要灵活地运用颜色营销方案就可以取得良好的效果。<br>相对于男性而言,女性往往有更大的网购决定权。另外,女性比男性对新潮的变化反应<br>更为敏感。因此,网店配色方案要能够抓住女性的消费心理。<br>充满自信的女性对于可以提升自身价值的事物颇具好感,所以色泽华丽的商品更能受到<br>网店美工(第3版) - 改三22-1-10.indd 20 2022\/1\/12 13:10:40

第29页

021<br>网店装修四大要点<br>第2章<br>她们的青睐,像金、银等金属系列的颜色和给人以高档感的低彩度颜色都是很好的选择,如<br>图2-16和图2-17所示。<br> <br> 图2-16 金属系列颜色 图2-17 低彩度颜色<br>追求温柔形象的女性更喜欢隐约且柔和的颜色,如高明度的轻色调系列,也就是清淡色<br>调,如图2-18所示。<br> <br>图2-18 高明度的轻色调系列颜色<br>追求时尚张扬、都市风采的女性对色彩强烈的配色页面更容易产生兴趣。高明度、高彩<br>度的暖色系列色相是比较有代表性的,同时采用灰白色进行搭配,可以突显时尚的气息,如<br>图2-19所示。<br> <br>图2-19 高明度、高彩度的暖色系列<br>2.2.3 不同色调的页面<br>页面给人的第一印象非常重要,买家首次看到商品展示页面的那一瞬间有什么样的心理<br>感受,对其判断是否购买商品可能起到50%以上的决定作用。为了更好地体现商品的特征,<br>给页面选择合适的颜色相当重要。<br>根据配色方案的不同,页面给人的感觉和氛围也有很多种。分析商品的特征,选择<br>一种合适的颜色,能够将商品特征有效地传递给买家,这一点在商品页面的制作上至关<br>重要。<br>1.浅色调页面<br>形象单纯的儿童用品、礼服等需要体现出清纯感觉的商品可以使用浅色调进行配色,让<br>页面中的商品形象干净、整洁,如图2-20所示。<br>2.清新色调页面<br>表现文静、平和的商品可以使用清新的色调来进行配色,高明度和高纯度的颜色可以增<br>加页面的柔和感,营造出高档的氛围,如图2-21所示。<br>3.蓝色调页面<br>蓝色调散发着清爽、凉爽之感,适合表现夏季商品、电子商品、清洁用品等,并且蓝色<br>调具有稳定感,容易让买家产生踏实、积极的感觉,如图2-22所示。<br>网店美工(第3版) - 改三22-1-10.indd 21 2022\/1\/12 13:10:40

第30页

022<br>网店美工(第 3 版 全彩微课版)<br>4.绿色调页面<br>绿色调适用于环保型的用品,利用绿色对画面进行配色,可以营造出一种干净、整洁的<br>氛围,增强买家在商品使用安全性方面的信赖度,如图2-23所示。<br>图2-20 浅色调页面 图2-21 清新色调页面<br>网店美工(第3版) - 改三22-1-10.indd 22 2022\/1\/12 13:10:41

第31页

023<br>网店装修四大要点<br>第2章<br> <br> 图2-22 蓝色调页面 图2-23 绿色调页面<br>2.3 不拘一格的页面布局<br>在网店运营中,为了提高销售业绩,卖家要制作美观大方、适合该商品的页面,将图片<br>或者文字说明等组成要素合理地进行布局,使商品更加引人注目,以提高买家的购买率。其<br>中,将商品页面的组成要素进行合理的排布就是装修设计中的页面布局。<br>2.3.1 页面布局的组成要素<br>在网店中销售商品与在实体店中销售商品有很大的区别。在网店中销售商品时,商品的<br>各个方面无法面面俱到、一清二楚地传递给买家。因此,需要在首页及商品详情页这些限定<br>的空间内尽可能多地将商品和活动的相关信息传递给买家。<br>网店装修的页面不一定要制作得非常华丽,但是要能引起买家的注意。为了把商品和活<br>网店美工(第3版) - 改三22-1-10.indd 23 2022\/1\/12 13:10:42

第32页

024<br>网店美工(第 3 版 全彩微课版)<br>动信息最大限度、有效、正确地传达给买家,就需要进行合理的页面布局。在进行布局之<br>前,要首先了解装修页面布局的组成要素,如图2-24所示。<br>㵝㼒ᷛ㶙⮋䓑㾿⤝㈷䐱⭥㵝㼒<br>䑘䄋䐙㩭㠘㵝㼒᱃㚄㲹㵝㼒⼮<br>䇤䇻㾿㬯䄔㘇⭥㾯䓕᱃ⴜ⼦⼮<br>⥆⿎⭩᷍䎃㾊㵝㼒⡟㪎⟝⼍䓦<br>䄜Ⰹ⭥㾦㻃᷍㋪ⰵ㩭㠘〓ⶉ䑛<br>㩭㠘㆙㾱䍚㬟᷍⤃㸋䄔㘇䇋䋍<br>䄜䐷㲹Ⰹ⭥⳶㸈<br>⡔㈑ᷛ㸋㑬䇱㾈⭹䇋䋍⨗<br>䈌㩭㠘〓』Ⱀ䑘㳃㼁㵔䄜<br>⭥䄔㘇⳶㸈᷍㋪䄵ⰵ⡔㈑<br>㆙㾱㪉ェ᷍㬚䇤㵝➙᱃⪠<br>㩌⼮㵝㼒⭩䊋㯹⭥⡔㈑<br>㒕➸ᷛ㒕➸䐙⤝㈷⼤㩭㠘᱃<br>㸥䓷䈌㾿㬯䊋㯹䐏⽔᷍䈁<br>㻣⭥㋶➸⤠⳷㋶ヅ᱄䊻⤝<br>㈷䐱⤜䓃䅃㒕➸᷍ㅌ䄔㘇<br>㳏⨅⭤㕛㕛⭒⭒᷍。ⷙ㦬<br>⫙㎕䄜䐷⧢㗧⭥ⶱ㉖᷍<br>䋍⧪㬴㉖㠄㎮<br>㸥䓷ᷛ㸥䓷䑘䄋ⰵ㩭㠘㾦㻃㆙<br>㾱㯖㘘᷍㬨䄔㘇⤝㈷䄋㯹䐱䔏<br>⼬㾥⭥⤠⳷䐏䄜᷍㡅㪉ェⴈⷒ<br>䄋䈌㩭㠘⭥ⴈⷒ⡄⧷䄜䐣᱄㸥<br>䓷⨞㑬䇤䇻⪌⭾㩭㠘㾦㻃䄵<br>㶃᷍⿚㋪䄵䔘㸋㾿㬯䊋㯹⳦䊻䄔<br>㘇䐱᷍䄵⫐⭞㠞⽃⤝㈷⭥㾈⺜<br>图2-24 页面布局的组成要素<br>在对网店进行装修之前,无论是设计首页还是商品详情页,在把握整体页面布局时,首先<br>要抓住比较大的一块确定下来,然后进行细节的设计,这样整体布局流程就会比较流畅,最<br>后确定页面中各个组成要素的位置,将所要表达的信息更形象、更具真实感地传达出来。<br>2.3.2 常用的页面布局方式<br>买家在浏览商品页面时,通常会将图像视为一个整体图,然后才将视线定位到比较突出<br>或抢眼的位置,所以在排列商品图像或模特图像时,为了突出商品的特征,可以将一些希望<br>强调的图像放大并布局于显眼的位置,这样效果会更加理想。下面介绍几种较为常用的商品<br>页面的布局方式。<br>1.中间对齐的页面布局<br>图2-25所示为中间对齐的页面布局。这种布局方式具有可以吸引买家视线的优点,但是<br>会显得整体页面比较狭窄。通常情况下,可以调整一些图像的尺寸,将留白部分的特色发挥<br>出来,从而清除沉闷、狭窄等弊端,产生安静、稳定的感觉。<br>57667--网店美工(第3版 全彩微课版) .indd 24 2022\/2\/14 15:23:02

第33页

025<br>网店装修四大要点<br>第2章<br>2.对角线排列的页面布局<br>图2-26所示为对角线排列的页面布局。这种布局方式适合表达自由奔放的动态的感觉,<br>并且会形成自然的Z字形视觉牵引效果,给人一种清爽、利落的感觉。当然,无论怎样的自<br>由式布局,都要以指引线为准对图片和文字进行设计和布置。<br> <br> 图2-25 中间对齐的页面布局 图2-26 对角线排列的页面布局<br>3.棋盘式的页面布局<br>图2-27所示为棋盘式的页面布局。这种布局将图像按照棋盘表面的方格样式进行布局,把<br>众多的图像一次性地展示给买家。这种布局方式适合用于展示商品的各个细节部分。其优点就<br>是将众多的图像集合为视觉上的一个整体,形成一种统一感,将买家的视线集中到一处。<br>4.左对齐的页面布局<br>图2-28所示为左对齐的页面布局。由于人们的视线一般是从左向右移动的,所以这种页面<br>布局会吸引更多的视线,适合用在表现那些有顺序之分的内容上,如商品使用的说明顺序、<br>商品的制作过程等。这些连贯性的主题采用左对齐模式的页面布局来表现,效果极佳。<br> <br> 图2-27 棋盘式的页面布局 图2-28 左对齐的页面布局<br>5.对称型的页面布局<br>图2-29所示为对称型的页面布局。这种布局方式是指画面的横向或纵向以中心线为轴,<br>将页面组成要素按照彼此相对的方式进行两侧布局。在页面布局中,即使两侧的组成要素不<br>网店美工(第3版) - 改三22-1-10.indd 25 2022\/1\/12 13:10:43

第34页

026<br>网店美工(第 3 版 全彩微课版)<br>是按照完全相同的尺寸和排列方式来进行的,只要两侧的空间宽度和重量感相同,就可以体<br>现出对称的布局效果。这种布局能够营造出一种文静、安定的整体氛围。<br>图2-29 对称型的页面布局<br>商品的图像和说明文字的排列、布局会影响到页面的整体氛围和感觉。为了更有效地进<br>行页面布局,需要确定商品的特定用途和需要表现的氛围,并据此合理运用上述布局方式,<br>让设计出来的页面给人带来视觉上的舒适感,并将商品的特点传达给买家。<br>2.4 准确、抢眼的文字<br>首页是一个网店的门面,商品详情页是网店的灵魂。无论是网店的首页,还是商品的详<br>情页,都要包含文字信息。设计者如果不明白商品优点及活动的精髓,那么制作出来的页面<br>效果肯定是不理想的。<br>网店页面中究竟要包含哪些信息?这些信息又该如何编排?图片和模块该如何布局?这<br>些问题直接影响着页面的转化率及用户体验。下面将介绍如何在网店装修中制作出准确、抢<br>眼的文字效果。<br>2.4.1 网店页面段落文字的排列方式<br>在网店装修设计的文字编辑过程中经常会使用段落文字。段落文字的文本信息较多,其<br>排列方式也是多种多样的。<br>1.自由对齐<br>自由对齐就是让每段文字自由地组合在一起,没有固定的方向或位置,如图2-30所示。<br>采用这种对齐方式排列的文字表现形式较为自由,给人以活泼、自然的感觉,能够表现出不<br>拘一格的效果。<br>2.左对齐<br>左对齐就是将每行文字的左侧边缘对齐,较为常用,如图2-31所示。左对齐排列通常能<br>网店美工(第3版) - 改三22-1-10.indd 26 2022\/1\/12 13:10:43

第35页

027<br>网店装修四大要点<br>第2章<br>够呈现出一种整齐、利落的感觉,具有很强的协调感,并且只要合理地调整文字的大小,就<br>可以轻松地制作出层次感。<br>图2-30 自由对齐<br>图2-31 左对齐<br>3.居中对齐<br>居中对齐就是将每行文字的中间对齐到一个垂直线上,如图2-32所示。这种对齐方式<br>可以将人的视线集中起来,减少周围元素对文字的影响,是段落文字编排中常用的一种对齐<br>方式。<br>图2-32 居中对齐<br>4.右对齐<br>右对齐与左对齐的效果正好相反,它是将每行文字的右侧边缘对齐,如图2-33所示。这<br>种对齐方式可以让买家的视觉集中到文字的右侧,并且利用每行文字的长短不一在左侧形成<br>网店美工(第3版) - 改三22-1-10.indd 27 2022\/1\/12 13:10:44

第36页

028<br>网店美工(第 3 版 全彩微课版)<br>一定的波形,从而产生流动感。<br>图2-33 右对齐<br>对段落文字进行编排是为了更好地归纳、区分页面中的各项文字内容,使页面更具条理<br>性。在编排过程中,需要注意段落文字之间的间隔距离,让文字的组合符合页面的需求,创<br>建出理想、有序的页面结构。<br>当页面中有多个段落组合在一起时,可以利用文字的色彩、字号等的差异将某些段落与<br>其他文字信息区分开,形成鲜明的对比,这样有利于突出和强调页面中的重要信息,让买家<br>优先注意到这些内容,从而增强内容的易读性,如图2-34所示。<br>图2-34 利用文字色彩、字号差异区分文字信息<br>2.4.2 打造具有高表现力的文字造型<br>在网店装修的过程中,为了让主题文字更富有艺术感和设计感,通常在设计时会使用一<br>些简单的创意来对文字进行处理。文字的创意设计实际上就是以字体的结构为基础,通过丰<br>富的联想,利用多种不同的创作手法,打造出具有高表现力的文字造型。<br>1.连笔<br>连笔的设计是指字体的前后笔画一笔紧连着一笔,呈现出紧密相连的状态,使同一个字<br>或不同字的笔画之间流畅、自然地衔接起来。连笔讲究的是字体书写节奏的流畅,能使信息<br>更为突出和鲜明。<br>连笔的创作设计能够展现出笔画脉络与字体的整体形态,让笔画的特点片段得到补充和<br>网店美工(第3版) - 改三22-1-10.indd 28 2022\/1\/12 13:10:44

第37页

029<br>网店装修四大要点<br>第2章<br>延伸。图2-35所示为某网店活动海报中的文字“北欧风情”使用连笔设计后的效果。<br>图2-35 连笔效果<br>2.省略<br>字体形态的省略设计需要对字体的基本结构有全面的掌握。在进行省略设计时要充分发<br>挥联想,既要使字体呈现出独特的个性,又要使文字具有可读性,让字体形态易于区分。<br>图2-36所示为使用省略的方式设计的文字效果,其中通过两条斜线将字体的另外一<br>部分隐藏起来,有利于引起人们的联想,产生若隐若现的感觉,与商品活动的主题相互<br>辉映。<br>图2-36 省略效果<br>此外,省略方式的合理运用可使字体失去部分笔画,只利用显示的笔画来表现字体的形<br>态,让文字具有独特的影像魅力,有助于增强文字的表现力,引起买家的关注。<br>3.装饰<br>为了让文字的表现更加具象化,增强网店<br>商品的传播力度,在设计某些文字的过程中,<br>可以在不改变文字整体效果的情况下,在适当<br>位置添加一些修饰元素。<br>在文字上添加修饰元素,如圆圈、加号等<br>(见图2-37),会给买家留下深刻的印象,从而<br>体现出网店视觉形象的独特审美,带来美好的视<br>觉感受。<br>图2-37 在文字上添加修饰元素<br>网店美工(第3版) - 改三22-1-10.indd 29 2022\/1\/12 13:10:44

第38页

030<br>网店美工(第 3 版 全彩微课版)<br>2.4.3 利用文字营造特定的氛围<br>在网店装修中,除了利用文字表达传递商品和活动信息之外,还可以利用文字营造一种<br>特定的氛围。例如,在中秋节主题模块中使用带有月亮、云彩等元素的文字效果来表达团圆<br>的意境,而在夏季活动模块中使用带有冰块、水流等元素的文字效果来传达冰爽的感觉。<br>网店的装修设计除了要符合网店风格以外,大部分情况下还要随着节气、节日而发生相<br>应的改变。利用文字这一简单的元素,通过字体形状的变化、修饰元素的添加和色彩的巧妙<br>搭配就可以营造出一些特定的氛围。<br>1.喜庆<br>图2-38所示为春节主题的网店欢迎模块。其中添加了一些具有节日气息的素材,并使用<br>与春节主题相吻合的大红色来渲染节日的氛围。除此之外,在海报中还放置了网店活动的主<br>要促销内容,让买家一目了然。<br>图2-38 喜庆的氛围<br>2.冰爽<br>图2-39所示为夏季主题的欢迎模块。其中使用蓝色调的背景与文字作为主要的表现对象,<br>将冰块素材与文字组合在一起。冰块在人们的印象中是凉爽、寒冷的象征,在夏季使用蓝色<br>和冰块来修饰文字会让人联想到海洋、天空、水、宇宙等,给买家带来冰爽的视觉感受。<br>图2-39 冰爽的氛围<br>3.天然<br>图2-40所示为端午节主题的欢迎模块。其中使用一些绿叶对文字进行修饰,传递出浓浓<br>的端午节氛围。外形厚实的字体能够表现出宽厚、亲切的感觉,而画面中绿色调与粽子的色<br>彩相似,也与网店商品所倡导的天然、绿色的健康理念一致,能给买家带来一种清新、自然<br>的感觉。<br>网店美工(第3版) - 改三22-1-10.indd 30 2022\/1\/12 13:10:45

第39页

031<br>网店装修四大要点<br>第2章<br>图2-40 天然的氛围<br>4.可爱<br>图2-41所示为儿童节主题的欢迎模块。其中使用与儿童认知比较吻合的多种字体,通过<br>稚拙的文字造型来表现儿童天真、可爱的一面,并使用丰富的修饰元素来进行衬托,让整个<br>画面充满了灵性和美感。这样的设计手法让整个画面充满活泼、生动和快乐的气息,传递出<br>浓浓的欢乐之情。<br>图2-41 可爱的氛围<br>课后练习<br>1.在百度或淘宝上搜索“MG小象欧美街拍时尚女<br>装”网店,分析其装修配色方法。<br>2.试分析图2-42所示的商品详情页采用的是哪几种<br>页面布局。<br>图2-42 商品详情页<br>网店美工(第3版) - 核红22-1-27.indd 31 2022\/1\/27 9:44:46

第40页

032<br>1 掌握对商品图片的尺寸、构图进行调整和对商品外形进行校正的方法。<br>2 能够根据网店装修设计的需要抠出商品图像并替换背景。<br>3 掌握去除水印、局部擦除、美化处理、调整模特身形、锐化图像的方法。<br>4 掌握调整图片亮度、校正图片白平衡、调整图片色调的方法与技巧。<br>5 能够制作具有创意感的标题文字,并对段落文字进行艺术化编排。<br>6 在工作中弘扬工匠精神,增强责任意识。<br>由于拍摄环境、拍摄器材以及摄影水平等条件的限制,网店装修准备阶段拍摄的商品图<br>片往往是不能直接使用的,需要对图片的尺寸、构图、水印、色差、影调等进行调整和编<br>辑。在完成这些基本操作后,还要根据实际的设计需要进行抠图、添加文字等操作。本章将<br>讲解网店装修的六大技能:裁图、抠图、修图、调色、编辑与文字。<br>3.1 裁图——纠正商品图片角度<br>处理商品图片的第一步就是对图片的尺寸、构图和畸形进行调整,让图片的文件大小、<br>视觉中心和外形状态等符合网店装修的需要。下面将介绍如何重设图片大小,如何裁剪图片<br>改变构图,以及如何校正倾斜、变形的图片。<br>3.1.1 调整图片大小<br>网店平台通常会对装修图片的大小有一定的限制,这是为了让图片能够<br>在网上快速地传输和显示,所以在拿到商品图片素材之后,大多数情况下都<br>需要重新对商品图片的大小进行设置,使其符合网店平台的要求。<br>在Photoshop中,可以使用“图像大小”命令调整商品图片的尺寸。在<br>Photoshop中打开一张商品图片(“素材文件第3章01.jpg”),单击“图像”|“图像大<br>小”命令,在弹出的“图像大小”对话框中设置图像的宽度、高度和分辨率等参数,然后单<br>击“确定”按钮,如图3-1所示。此时商品图片的大小会发生明显改变。<br>学习目标<br>网店装修六大技能<br>第3章<br>调整图片大小<br>网店美工(第3版) - 核红22-1-27.indd 32 2022\/1\/27 9:46:27

第41页

033<br>网店装修六大技能<br>第3章<br>图3-1 调整图像大小<br>通过“图像大小”对话框还可以了解到商品图片的更多信息,如图像大小、尺寸、分辨<br>率等。单击“尺寸”选项右侧的下三角按钮 ,在弹出的下拉列表中可以选择所需的尺寸单<br>位,以便按照设计需要更准确地调整图片大小,如图3-2所示。<br>图3-2 选择尺寸单位<br>3.1.2 裁剪商品图片中多余的图像<br>摄影师在拍摄商品时,为了将商品全部囊括到画面中,有时可能会忽略<br>图片的构图,或者将不需要的对象也纳入画面中,此时可以使用Photoshop中<br>的裁剪工具或“裁剪”命令来快速裁剪图片中多余的图像,以达到重新定义<br>图片构图的目的。<br>打开一张需要裁剪的商品图片(“素材文件第3章02.jpg”),选择工具箱中的裁剪工<br>具,在图像窗口中可以看到图片周围出现了裁剪框,用鼠标单击并拖动裁剪框的边线即可调整<br>裁剪框的大小。调整裁剪框,将其中一套餐具的图像置于裁剪框的中心,并按【Enter】键确<br>认裁剪操作,如图3-3所示,此时可以看到裁剪后在图像窗口中只留下了一套餐具。<br>图3-3 使用裁剪工具裁剪商品图片<br>裁剪商品图片中<br>多余的图像<br>网店美工(第3版) - 改三22-1-10.indd 33 2022\/1\/12 13:10:47

第42页

034<br>网店美工(第 3 版 全彩微课版)<br>在使用裁剪工具对商品图片进行裁剪时,可以采用多种方法对裁剪操作进行确认:一是<br>直接按键盘上的【Enter】键,二是选择裁剪工具以外的其他工具,三是单击裁剪工具选项<br>栏中的“提交当前裁剪操作”按钮 。<br>除了使用裁剪工具外,还可以使用“裁剪”命令进行商品图片的裁剪操作。在使用“裁<br>剪”命令进行裁剪操作之前,需要使用选区工具创建选区,Photoshop会根据选区来定义裁<br>剪的内容。<br>选择工具箱中的矩形选框工具,在图像上拖动鼠标创建选区将其框选出来,接着单击<br>“图像”|“裁剪”命令,即可将选区以外的图像裁剪掉,如图3-4所示。<br>图3-4 使用“裁剪”命令裁剪商品图片<br>3.1.3 对商品外形进行校正<br>在拍摄商品图片时,由于拍摄角度等存在问题,图片中的商品外形出现<br>畸形,这会影响买家对于商品外形的判断和理解,此时需要对商品的外形进<br>行校正。在Photoshop中能够轻松地解决这个问题,使用透视裁剪工具可以校<br>正商品外形的透视角度,还可以在裁剪图像的同时变换图像的透视方式,更<br>加准确地校正商品图片的透视效果,让图片中的商品恢复正常的透视效果。<br>对于不是以平直视角拍摄的商品图片而言,商品图像的外形经常会发生透视扭曲的情<br>况。例如,以90°以下的角度拍摄商品,就会使图片中商品的底部比顶部看起来宽一些,近<br>似梯形,此时可以使用透视裁剪工具快速进行校正。<br>图3-5所示的图片中,俯拍的角度与商品过于接近,导致宝宝针织衫外观出现了梯形效<br>果(“素材文件第3章03.jpg”),使领子等细节展示效果不佳,此时可以使用透视裁剪工<br>具对其进行校正。我们可以看到校正后的透视角度趋于正常,商品展示效果也趋于理想。<br>图3-5 校正商品图片透视角度<br>对商品外形<br>进行校正<br>网店美工(第3版) - 改三22-1-10.indd 34 2022\/1\/12 13:10:47

第43页

035<br>网店装修六大技能<br>第3章<br>3.2 抠图——选取商品替换背景<br>抠图在网店装修中是一项很常见的图像操作,就是将商品图像选中并从背景中分离出<br>来,以便更加自由地进行图像合成与设计。抠图的方法有很多,每种方法的适用范围不同,<br>抠图方法与商品图片背景的色彩和纯净度、商品的外形轮廓等都有关系。下面将介绍几种常<br>用的抠图方法。<br>3.2.1 快速抠取单色背景图片<br>在商品图片中,如果背景为纯色,且商品的颜色与背景的颜色差异很<br>大,就可以使用Photoshop中的快速选择工具和魔棒工具将商品图像快速地抠<br>取出来。<br>1.快速选择工具<br>使用快速选择工具可以像使用画笔工具绘画一样快速绘制选区,选区会随着鼠标的拖动<br>向外扩展,并自动查找和跟随图像的边缘。<br>打开一张纯色背景的帽子图片(“素材文件第3章04.jpg”),选择快速选择工具,在<br>其选项栏中设置各项参数,接着在背景上单击并拖动鼠标,Photoshop会根据鼠标拖过的范<br>围自动创建选区,如图3-6所示。<br>图3-6 选择快速选择工具<br>继续拖动鼠标,直到将帽子图像全部添加到选区中。按【Ctrl+J】组合键,将选区中的<br>帽子图像复制为新图层,即可完成抠图操作,如图3-7所示。<br>图3-7 用快速选择工具抠图<br>在使用快速选择工具时,若选中其选项栏中的“自动增强”复选框,则能够减少选区边<br>快速抠取单色<br>背景图片<br>网店美工(第3版) - 改三22-1-10.indd 35 2022\/1\/12 13:10:48

第44页

036<br>网店美工(第 3 版 全彩微课版)<br>界的粗糙度和块效应,Photoshop会自动将选区向图像边缘进一步流动并进行一些边缘调整。<br>2.魔棒工具<br>魔棒工具用于选择图像中像素颜色相似的不规则区域,主要通过图像的色调、饱和度和<br>亮度等信息来决定选取的图像范围。魔棒工具的选取操作比应用快速选择工具更加快捷,只<br>需在要选取的位置单击即可创建选区。<br>打开一张商品图片(“素材文件第3章05.jpg”),可以看到其背景颜色相对单一。选<br>择工具箱中的魔棒工具,在其选项栏中设置“容差”为20,并单击“添加到选区”按钮 ,<br>然后用鼠标在背景上单击,即可选择与单击位置色彩相似的图像。继续使用该工具在背景上<br>单击,就能将除了商品之外的其他图像选中,再进行反向选择即可将商品抠取出来,如图<br>3-8所示。<br>图3-8 用魔棒工具抠图<br>在魔棒工具的选项栏中,“容差”选项会影响选取的范围,其参数取值范围为0~255。<br>如果输入的数值较小,那么单击鼠标后会选择与所单击像素非常相似的少数几种颜色;如果<br>输入的数值较大,那么单击鼠标后会选择范围更广的颜色。<br>3.2.2 抠取规则的商品图片<br>对于一些外形较为规则、轮廓较为清晰的商品,如外形轮廓为矩形或圆形<br>的商品,可以使用Photoshop中的矩形选框工具和椭圆选框工具进行快速选取。<br>使用这两个工具创建的选区边缘更加平滑,能够更加准确地抠取商品的边缘。<br>1.用矩形选框工具抠取矩形商品<br>矩形选框工具主要是通过单击并拖动鼠标来创建矩形或正方形的选区。当商品的外形为<br>矩形或正方形时,使用该工具可以快速地将商品框选出来。<br>在Photoshop中打开一张商品图片(“素材文件第3章06.jpg”),可以看到墙上相框<br>的外形轮廓为标准的矩形,所以先选择工具箱中的矩形选框工具,然后在图像窗口中的适<br>当位置单击并拖动鼠标绘制矩形选区,当选区完全包围相框图像后松开鼠标,即可创建矩<br>抠取规则的<br>商品图片<br>网店美工(第3版) - 改三22-1-10.indd 36 2022\/1\/12 13:10:48

第45页

037<br>网店装修六大技能<br>第3章<br>形选区,将相框框选出来,如图3-9所示。若想创建正方形选区,则在拖动鼠标的同时按住<br>【Shift】键不放。<br>图3-9 用矩形选框工具抠图<br>2.用椭圆选框工具抠取圆形商品<br>椭圆选框工具的使用方法与矩形选框工具相同,都是通过单击并拖动鼠标来创建选区,<br>不同的是椭圆选框工具创建的是椭圆或正圆形的选区。该工具同样可以通过在拖住鼠标的同<br>时按住【Shift】键来创建正圆形选区。<br>打开一张外形为圆形的商品图片(“素材文件第3章07.jpg”),选择工具箱中的椭圆<br>选框工具,在图像窗口中单击并拖动鼠标创建椭圆形选区,将图像框选出来,抠取图像后即<br>可替换背景,如图3-10所示。<br>图3-10 用椭圆选框工具抠图<br>3.2.3 抠取多边形对象<br>有的商品形状并不是规则图形,此时矩形选框工具和椭圆选框工具就不<br>适用了。如果商品的外形为多边形,并且有非常明显的棱角,使用多边形套<br>索工具可以快速完成商品对象的抠取。<br>在Photoshop中打开一张笔记本礼盒图片(“素材文件第3章08.jpg”),<br>选择多边形套索工具,在礼盒边缘单击确定选区的起点,随后移动鼠标指针至外形轮廓的转<br>角位置,再次单击鼠标左键,就会创建与起始位置相连接的线段;采用相同的方法多次单击<br>鼠标创建多边形,当终点与起点重合时单击鼠标左键,即可创建闭合的多边形选区,此时即<br>抠取多边形对象<br>网店美工(第3版) - 改三22-1-10.indd 37 2022\/1\/12 13:10:48

第46页

038<br>网店美工(第 3 版 全彩微课版)<br>可抠出图像并替换背景,如图3-11所示。<br>图3-11 用多边形套索工具抠图<br>3.2.4 抠取轮廓清晰的图片<br>对于一些边缘轮廓清晰但不规则的商品来说,使用磁性套索工具更容易<br>抠取,但商品与背景之间最好在颜色或明暗上存在较大的反差,否则抠取效<br>果不会太理想。<br>磁性套索工具特别适用于快速选择与背景对比强烈且边缘复杂的对象,<br>在Photoshop中打开一张旅行箱图片(“素材文件第3章09.jpg”),选择磁性<br>套索工具,在其选项栏中设置各项参数后,在图像窗口中需要选取的旅行箱图像边缘单击确<br>定起点,接着沿旅行箱图像边缘移动鼠标,Photoshop将会根据鼠标移动的轨迹自动创建带<br>有锚点的路径,双击鼠标左键将起点与终点位置进行合并,Photoshop自动创建出闭合的路<br>径,即可完成框选,如图3-12所示。<br>图3-12 用磁性套索工具抠图<br>在磁性套索工具选项栏中,部分选项的作用如下。<br>● 对比度:用于指定套索检测图像边缘的灵敏度。该选项参数的取值范围为1%~100%,<br>较高的数值会使套索工具只检测与其周边对比鲜明的边缘,较低的数值会使套索工具检测对<br>比度低的边缘。<br>● 频率:用于指定以什么频率生成锚点。设置的数值越大,移动鼠标指针时自动生成<br>的锚点越多,图像的选取就越精确。<br>用户可以根据商品图片的色彩对比和明暗对比情况来对“对比度”和“频率”选项的参<br>数进行设置。<br>抠取轮廓清晰<br>的图片<br>网店美工(第3版) - 改三22-1-10.indd 38 2022\/1\/12 13:10:48

第47页

039<br>网店装修六大技能<br>第3章<br>3.2.5 精细抠取图像<br>前面介绍的4种抠图方法只能在对画质要求不高的情况下使用,因为有些<br>方法抠出的商品图像边缘平滑度不够,甚至会产生一定的锯齿,如果需要制<br>作较大画幅的活动海报,这些方法就不适用了。如果商品图像的边缘不规整<br>但对抠图质量又有较高的要求,那么使用钢笔工具抠取图像会更加精细,能<br>让合成的画面更加精致。<br>钢笔工具是通过在图像的边缘绘制矢量路径来完成抠图操作的,所以在学习使用钢笔工<br>具抠图之前需要先认识路径的组成。<br>路径由一条或多条直线线段或曲线线段组成,每条线段的起点和终点由锚点标记。路径<br>可以是闭合的,也可以是开放的,并且具有不同的端点。通过拖动路径的锚点、方向点或线<br>段,可以改变路径的形状。<br>认识路径之后,就可以使用钢笔工具进行抠图操作了。使用钢笔工具抠图要养成放大图<br>片的习惯,放得越大,抠取的边缘越细致。<br>打开一张伸缩杯图片(“素材文件第3章10.jpg”),放大图片至合适的比例,选择钢<br>笔工具,在图片中要开始抠图的地方单击鼠标左键,就会出现一个路径锚点。沿着伸缩杯的<br>边缘再次单击生成第二个锚点,不要松开鼠标,拖动一下就会出现一对控制杆,这时会发现<br>两个锚点之间的线段变成了曲线,按住【Alt】键可以用鼠标对锚点的控制杆进行调整,以<br>改变曲线线段的弯曲弧度。采用相同的方法继续进行绘制,即可得到紧密贴合伸缩杯边缘的<br>闭合路径,如图3-13所示。<br>图3-13 用钢笔工具抠图<br>在创建的路径上单击鼠标右键,在弹出的快捷菜单中选择“建立选区”命令,弹出“建<br>立选区”对话框,根据需要设置各项参数,然后单击“确定”按钮,此时在图像窗口中即可<br>看到伸缩杯被框选到选区中,此时即可抠取图像,如图3-14所示。<br>图3-14 将路径转化为选区<br>精细抠取图像<br>网店美工(第3版) - 改三22-1-10.indd 39 2022\/1\/12 13:10:49

第48页

040<br>网店美工(第 3 版 全彩微课版)<br>钢笔工具选项栏中提供了“形状”“路径”“像素”3种编辑模式,这3种模式所创建出<br>来的对象是不同的。在使用钢笔工具进行抠图时,通常使用“路径”模式来进行操作。<br>3.2.6 抠取复杂或半透明图像<br>在网店装修过程中,还会遇到一些抠取起来比较麻烦的图像,如模特杂<br>乱的发丝、半透明的玻璃等。这些图像的抠取就不能依靠单一的工具,还要<br>用一些特殊的命令或面板进行一些较为复杂的操作才能完成。下面将介绍如<br>何使用“通道”面板和“色彩范围”命令抠取这类图像。<br>1.用“通道”面板抠取复杂图像<br>对于一些轮廓较为复杂的图像,可以通过复制通道的方式进行精细的抠图。先在“通<br>道”面板中复制对比度较为强烈的颜色通道,然后使用画笔工具对通道中的图像进行编辑,<br>接着将通道中的图像创建为选区,并对选区中的图像进行复制,即可完成抠图操作。<br>下面以抠取服装模特复杂的发丝为例进行介绍,具体操作方法如下。<br>步骤 01 在Photoshop中打开服装模特图片(“素材文件第3章11.jpg”),打开“通<br>道”面板,观察各通道中的图像,如图3-15所示。<br>图3-15 观察各通道中的图像<br>步骤 02 经过对比,发现“绿”通道中的图像对比度比较强烈。用鼠标右键单击“绿”<br>通道,在弹出的快捷菜单中选择“复制通道”命令,在弹出的对话框中直接单击“确定”按<br>钮,得到“绿 拷贝”通道,如图3-16所示。<br>图3-16 复制通道<br>抠取复杂或<br>半透明图像<br>网店美工(第3版) - 改三22-1-10.indd 40 2022\/1\/12 13:10:49

第49页

041<br>网店装修六大技能<br>第3章<br>步骤 03 选中“绿 拷贝”通道,单击“图像”|“调整”|“色阶”命令,在弹出的“色<br>阶”对话框中设置“绿 拷贝”通道下的色阶值分别为0、0.70、255,然后单击“确定”按<br>钮,如图3-17所示。<br>图3-17 调整色阶值<br>步骤 04 选中“绿 拷贝”通道,选择工具箱中的画笔工具,设置前景色为黑色,并在模<br>特身上进行涂抹,将其涂抹成黑色,如图3-18所示。<br>图3-18 涂抹颜色<br>步骤 05 在编辑“绿 拷贝”通道的过程中,可以不编辑头发边缘位置,只对其他位置进<br>行涂抹,在图像窗口中可以看到涂抹效果,如图3-19所示。<br>图3-19 涂抹效果<br>网店美工(第3版) - 改三22-1-10.indd 41 2022\/1\/12 13:10:49

第50页

042<br>网店美工(第 3 版 全彩微课版)<br>步骤 06 选中“绿 拷贝”通道,单击“图像”|“调整”|“反相”命令,然后单击“图<br>像”|“自动对比度”命令,在图像窗口中可以看到模特图像显示为白色,如图3-20所示。<br>图3-20 将图像进行反相<br>步骤 07 单击“通道”面板底部的“将通道作为选区载入”按钮 ,再单击“RGB”通<br>道显示彩色图像,按【Ctrl+J】组合键复制选区中的图像至新图层中,如图3-21所示。<br>图3-21 复制图像到新图层中<br>步骤 08 完成模特图像的抠取<br>后,添加新的背景颜色进行画面合<br>成。画面合成后,我们可以看到模特<br>的头发非常自然,如图3-22所示。<br>2.用“色彩范围”命令抠<br>取半透明图像<br>对于一些半透明的商品图像,使<br>用“色彩范围”命令可以快速地将其<br>抠取出来。在Photoshop中打开琉璃 图3-22 画面合成<br>网店美工(第3版) - 改三22-1-10.indd 42 2022\/1\/12 13:10:50

百万用户使用云展网进行多媒体电子书制作,只要您有文档,即可一键上传,自动生成链接和二维码(独立电子书),支持分享到微信和网站!
收藏
转发
下载
免费制作
其他案例
更多案例
免费制作
x
{{item.desc}}
下载
{{item.title}}
{{toast}}