第1章 网店美工概述
1 第1章 网店美工概述 教学目标：
1.理解网店美工的重要性
2.熟悉网店装修流程
3.熟悉新手装修容易步入的误区
4.熟悉网店装修的常用工具
5.掌握网店装修常用工具的安装 1.1 网店美工的重要性 1.1 节微课二维码 现在，我们已经非常习惯于网购，淘宝、天猫、唯品会、京东、当当网等都是我们熟悉的电子商务平台。
阿里巴巴无疑是中国电子商务的领军企业，旗下包含了淘宝网、天猫网等。
如今，在淘宝和天猫上开设的店铺数不胜数，在茫茫的店铺中，有的店铺让人相见恨晚，难以忘却；有的店铺即使买家看过，也毫无印象；有的店铺买家会重复购买，死心塌地；而有的店铺买家买了一次之后，就一去不返了。
这与买家看到的店铺“第一印象”——店铺装修有着十分重要的关联。
1.什么是店铺装修 店铺装修就是在淘宝、天猫、京东等网店平台允许的结构范围内，尽量通过图片、程序模板等途径让店铺看起来更加丰富美观。
网店的装修与实体店的装修是一个意思，都是让店铺变得更美、更吸引人。
2.什么是网店美工 网店美工是网店页面美化工作者的统称，周边工作有网店设计（平面设计）、P图（图片处理）等。
简单地说，网店美工就是进行店铺装修。
店铺装修主要可以分为两大模块：首页和宝贝详情页。
首页常见模块主要包括：店招、导航条、海报、商品展示区、分类区、店铺收藏区、客服区；宝贝详情页包含商品橱窗照（主图）和商品详情。
案例：在淘宝平台中搜索裂帛服饰旗舰店，赏析店铺装修模块。
2网店美工
3.网店美工的重要性 重要性1：美工是网店进行产品展示的主要方法，是提升宝贝质感和印象的重要手段。
在实体店买东西，买家可以通过看、闻、听、触摸等方法去感知商品的质量，但在网上买东西买家只能通过眼睛去看美工设计的图片、文字和视频。
案例1：苹果商品图片视觉效果对比，如图1-1所示。
图1-
1 苹果商品图片视觉效果对比 案例2：连衣裙商品美工处理前后效果对比，如图1-2所示。
图1-
2 连衣裙商品美工处理前后效果对比 重要性2：美工是一个店铺流量与转化率高低的基础。
美工的工作可以让店铺变得更漂亮、更简洁明了，促使店铺销量更好，提高转化率，美工、流量与转化率的关系如图1-3所示。
美工与运营是相辅相成的。
图1-
3 美工、流量与转化率的关系 第1章 网店美工概述
3 案例：旗王女包旗舰店和小小潮流女包店首页装修风格对比，如图1-
4、图1-5所示。
图1-
4 旗王女包旗舰店首页（部分）效果 图1-
5 小小潮流女包店首页（部分）效果 4网店美工 总之，美工是为了让产品吸引眼球，激发顾客购买的欲望，以达到调高销售的目的。
1.2 网店装修流程 网店的装修和实体店的装修、家庭的装修一样，都具有装修的一般流程。
1.2 节微课二维码
1.搜集整理网店装修素材 一个好的网店装修作品本身就是一件优秀的艺术品。
任何一个好的设计的完成都离不开大量的素材。
素材可以是网络上免费下载的素材、付费购买的素材以及拍摄的商品照片。
免费图片一般我们都通过百度等搜索引擎搜索获得，前提是不涉及版权的问题；付费购买的途径很多，大家可以到一些专业的素材网站上购买，如昵图网、红动中国网、全景网等；商品照片可以自己拍摄，也可以请专门的摄影师拍摄。
基本素材越丰富全面，设计的时候就越容易。
2.定位网店风格和布局 网店风格是指网店页面给买家的直观感受，买家在此过程中所感受到的店主品味、艺术气质、人的心境等。
在网上经营的过程中，应该让网店的风格最大限度地符合大众的审美观念，赢得顾客的一致好评。
我们以服装为例。
女装，大家都知道爱美是女性的天性，所以以浪漫、温馨、时尚个性的风格为主比较适宜；男装以沉稳大气的风格去装修设计会比较好；童装以天真、浪漫、阳光、温馨、可爱的氛围去装修，营造一个天使般柔美、天堂般美妙的神话空间；老年人首要的就是颜色搭配问题，很多老人忌讳刺眼的亮色，所以老年人服装的网店要注意色彩搭配问题，总体要表现出沉稳大气、健康权威、值得信赖的感觉。
网页中的色彩是网店统一风格的主要组成部分。
一个网店设计成功与否，在很大程度上取决于色彩的运用和搭配，页面色彩处理得好，可以锦上添花，达到事半功倍的效果。
因此，在设计页面时，必须要高度重视页面色彩的搭配。
网店页面设计虽然不同于平面设计，但它们也有很多相近之处。
为了达到最佳的视觉效果，应讲究整体布局的合理性，给浏览者一个流畅的视觉体验。
网店布局好比超市货架，有效合理的布局能够恰当地展现店铺与宝贝的特写、风格与理念，帮助消费者全方位地感受店铺信息，增加对店铺的好印象，形成潜在利润。
3.商品图片处理 商品图片的效果直接影响店铺的最终装修效果，优质的商品图片会使店铺装修具备很大的优势。
商品图片拍摄好之后并非马上可以使用，一方面，淘宝平台对商品图片的大小、格式有限制；另一方面，有的商品图片在拍摄过程中由于环境、技术、模特条件等因素的影响会存在一定的缺陷，因此，需要在后期对商品照片进行适当的处理，如调整照片尺寸、调整照片效果、打造特殊效果等。
第1章 网店美工概述5
4.页面模块化设计 美工在模块设计中可以充分发挥个人创意，同时要遵循一些基本原则：①注重用户体验；②风格统
一、高端大气；③文字与图片排版合理；④突出主次。
5.图像切片优化和上传 模块设计后的图像还不能直接应用到网店中去，需进行切片优化处理，使用Photoshop中的“切片工具”即可完成，切片操作后，通过“存储为Web所有格式”命令对切片进行优化处理，在得到一个images图片文件夹的同时，会产生一个HTML格式的网页文件。
切片优化后，将images文件夹的图片全部上传到网络存储空间中，以备后面步骤使用。
6.修改、编写代码 刚才已经提到，在Photoshop切片过程中会产生一个HTML格式的网页文件，但是因为这个网页文件是软件自动生成的，因此，其中涉及到的图片都是使用系统自动保存的images文件夹中的图片，而网店装修需使用存储在网络空间中的图片，因此，需要获取图片空间中的链接地址，在Dreamweaver软件中对HTML代码进行修改。
而对于网店中的一些特殊效果，像全屏轮播海报、全屏倒计时等，就需要美工自己编写代码或借助第三方软件（如淘宝美工助理）生成代码。
7.实现装修效果 在完成以上的步骤后，最后就是到淘宝平台上实现最终的装修效果。
1.3 新手装修容易步入的误区 1.3 节微课二维码
1.店铺名称过于简洁 淘宝店铺名称最多不能超过30个汉字，60个字符。
有的店铺相信简单就是美，店名取得很短。
比如做话费充值的店铺，取名为“话费点点充”，可是买家在搜索的时候，使用关键字“充值”、“话费充值”进行搜索，根本找不到你的店铺。
2.页面设计过于复杂 店铺装修切忌繁杂，不要把店铺设计成门户类网站。
虽然把店铺做成大网站看上去比较有气势，让人感觉店铺很有实力，但恰恰会影响买家的使用，会让买家在购物过程中觉得眼花。
总之一句话：要让买家进入你的店铺后能方便地找到自己需要的商品，能快捷地看清商品的详情。
3.色彩搭配混乱 有些新卖家会把店铺装修做得鲜艳华丽，五彩缤纷。
甚至有的首页配色多达10多种颜色，更可怕的是颜色还过于刺眼。
色彩搭配的应用原则应该是：总体协调，局部对比。
也就是说网店页面的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈的色彩 6网店美工 对比。
4.栏目分类太多 这也是一个非常大的误区。
在设置宝贝分类的时候，出发点是方便买家更好地搜索到铺子里他需要的商品。
但是，如果宝贝分类太繁复、分类太多，就会影响买家浏览店铺，因为这样无法做到让买家一目了然，自然就降低了店铺的浏览量，进而影响了商品的成交。
5.图片过大 图片的大小直接影响网页的加载速度，大的图片加载起来就很慢。
如果买家半天看不到页面，或者出现图片打不开的情况，那后果就可想而知了。
6.动画太多 动画固然可以吸引人的眼球，但是使用过多的动画和图片过大的道理是一样的，因此，要避免这种情况的出现。
1.4 网店装修常用工具 1.4 节微课二维码 准确地说，网店装修属于网页设计的范畴。
装修店铺无外乎图片编辑、网页制作，有关这方面的工具有很多。
Photoshop和Dreamweaver是目前普遍使用的网店装修工具。
Photoshop是Adobe公司开发的平面图像处理软件，它主要是对位图图像进行编辑、加工、处理和运用一些特殊效果，是专业设计人员的首选软件之
一，也是我们进行网店装修时最常用的一个专业设计软件，如图1-6所示。
当然，如果有些卖家对Photoshop软件操作不太熟悉，给大家推荐一款最易上手的修图软件——美图秀秀，它可以快速实现很多常用的操作，如图1-7所示。
图1-
6 Photoshop软件 图1-
7 美图秀秀软件 第1章 网店美工概述
7 在当前流行的“所见即所得”的可视化网页制作软件中，Adobe公司的Dreamweaver无疑是使用最广泛、可视化与代码编辑兼容最优秀的一个。
现在很多的电商平台都支持代码装修，通过专业的操作来实现一些较为复杂的链接和编辑。
作为一个专业的网店装修美工，应该掌握该软件的使用，如图1-8所示。
图1-
8 Dreamweaver软件 本章小结 本章我们在明确了为什么要进行店铺装修的基础上，理解了什么是网店美工及其网店美工的重要性。
在进行网店装修之前，首先要熟悉网店装修的一般流程，避免进入不必要的装修误区，浪费不必要的时间。
Photoshop、Dreamweaver是实现店铺装修的常用工具。
本章习题 选择题
1．以下（ ）项不属于电子商务平台。
A．亚马逊
B．唯品会
C．搜狐
D．京东
2．以下（ ）项属于C2C电子商务平台。
A．阿里巴巴
B．京东
C．中国制造网
D．淘宝
3．以下（ ）项不属于常见的图像文件格式。
A．JPG
B．HTML
C．PSD
D．GIF
4．以下（ ）项不属于新手装修容易步入的误区。
A．店铺名称过于简洁
B．不使用动画
C．图片过大
D．页面分类过于复杂 8
网店美工
5．以下（ ）项不属于首页的装修模块。
A．商品主图
C．店招
B．海报
D．商品展示区 调查题请调查你所在城市的电子商务发展总体情况（建议提供数据），包括有哪些电商园区，主要经营哪些类目产品，美工人才的需求等。
1 第1章 网店美工概述 教学目标：
1.理解网店美工的重要性
2.熟悉网店装修流程
3.熟悉新手装修容易步入的误区
4.熟悉网店装修的常用工具
5.掌握网店装修常用工具的安装 1.1 网店美工的重要性 1.1 节微课二维码 现在，我们已经非常习惯于网购，淘宝、天猫、唯品会、京东、当当网等都是我们熟悉的电子商务平台。
阿里巴巴无疑是中国电子商务的领军企业，旗下包含了淘宝网、天猫网等。
如今，在淘宝和天猫上开设的店铺数不胜数，在茫茫的店铺中，有的店铺让人相见恨晚，难以忘却；有的店铺即使买家看过，也毫无印象；有的店铺买家会重复购买，死心塌地；而有的店铺买家买了一次之后，就一去不返了。
这与买家看到的店铺“第一印象”——店铺装修有着十分重要的关联。
1.什么是店铺装修 店铺装修就是在淘宝、天猫、京东等网店平台允许的结构范围内，尽量通过图片、程序模板等途径让店铺看起来更加丰富美观。
网店的装修与实体店的装修是一个意思，都是让店铺变得更美、更吸引人。
2.什么是网店美工 网店美工是网店页面美化工作者的统称，周边工作有网店设计（平面设计）、P图（图片处理）等。
简单地说，网店美工就是进行店铺装修。
店铺装修主要可以分为两大模块：首页和宝贝详情页。
首页常见模块主要包括：店招、导航条、海报、商品展示区、分类区、店铺收藏区、客服区；宝贝详情页包含商品橱窗照（主图）和商品详情。
案例：在淘宝平台中搜索裂帛服饰旗舰店，赏析店铺装修模块。
2网店美工
3.网店美工的重要性 重要性1：美工是网店进行产品展示的主要方法，是提升宝贝质感和印象的重要手段。
在实体店买东西，买家可以通过看、闻、听、触摸等方法去感知商品的质量，但在网上买东西买家只能通过眼睛去看美工设计的图片、文字和视频。
案例1：苹果商品图片视觉效果对比，如图1-1所示。
图1-
1 苹果商品图片视觉效果对比 案例2：连衣裙商品美工处理前后效果对比，如图1-2所示。
图1-
2 连衣裙商品美工处理前后效果对比 重要性2：美工是一个店铺流量与转化率高低的基础。
美工的工作可以让店铺变得更漂亮、更简洁明了，促使店铺销量更好，提高转化率，美工、流量与转化率的关系如图1-3所示。
美工与运营是相辅相成的。
图1-
3 美工、流量与转化率的关系 第1章 网店美工概述
3 案例：旗王女包旗舰店和小小潮流女包店首页装修风格对比，如图1-
4、图1-5所示。
图1-
4 旗王女包旗舰店首页（部分）效果 图1-
5 小小潮流女包店首页（部分）效果 4网店美工 总之，美工是为了让产品吸引眼球，激发顾客购买的欲望，以达到调高销售的目的。
1.2 网店装修流程 网店的装修和实体店的装修、家庭的装修一样，都具有装修的一般流程。
1.2 节微课二维码
1.搜集整理网店装修素材 一个好的网店装修作品本身就是一件优秀的艺术品。
任何一个好的设计的完成都离不开大量的素材。
素材可以是网络上免费下载的素材、付费购买的素材以及拍摄的商品照片。
免费图片一般我们都通过百度等搜索引擎搜索获得，前提是不涉及版权的问题；付费购买的途径很多，大家可以到一些专业的素材网站上购买，如昵图网、红动中国网、全景网等；商品照片可以自己拍摄，也可以请专门的摄影师拍摄。
基本素材越丰富全面，设计的时候就越容易。
2.定位网店风格和布局 网店风格是指网店页面给买家的直观感受，买家在此过程中所感受到的店主品味、艺术气质、人的心境等。
在网上经营的过程中，应该让网店的风格最大限度地符合大众的审美观念，赢得顾客的一致好评。
我们以服装为例。
女装，大家都知道爱美是女性的天性，所以以浪漫、温馨、时尚个性的风格为主比较适宜；男装以沉稳大气的风格去装修设计会比较好；童装以天真、浪漫、阳光、温馨、可爱的氛围去装修，营造一个天使般柔美、天堂般美妙的神话空间；老年人首要的就是颜色搭配问题，很多老人忌讳刺眼的亮色，所以老年人服装的网店要注意色彩搭配问题，总体要表现出沉稳大气、健康权威、值得信赖的感觉。
网页中的色彩是网店统一风格的主要组成部分。
一个网店设计成功与否，在很大程度上取决于色彩的运用和搭配，页面色彩处理得好，可以锦上添花，达到事半功倍的效果。
因此，在设计页面时，必须要高度重视页面色彩的搭配。
网店页面设计虽然不同于平面设计，但它们也有很多相近之处。
为了达到最佳的视觉效果，应讲究整体布局的合理性，给浏览者一个流畅的视觉体验。
网店布局好比超市货架，有效合理的布局能够恰当地展现店铺与宝贝的特写、风格与理念，帮助消费者全方位地感受店铺信息，增加对店铺的好印象，形成潜在利润。
3.商品图片处理 商品图片的效果直接影响店铺的最终装修效果，优质的商品图片会使店铺装修具备很大的优势。
商品图片拍摄好之后并非马上可以使用，一方面，淘宝平台对商品图片的大小、格式有限制；另一方面，有的商品图片在拍摄过程中由于环境、技术、模特条件等因素的影响会存在一定的缺陷，因此，需要在后期对商品照片进行适当的处理，如调整照片尺寸、调整照片效果、打造特殊效果等。
第1章 网店美工概述5
4.页面模块化设计 美工在模块设计中可以充分发挥个人创意，同时要遵循一些基本原则：①注重用户体验；②风格统
一、高端大气；③文字与图片排版合理；④突出主次。
5.图像切片优化和上传 模块设计后的图像还不能直接应用到网店中去，需进行切片优化处理，使用Photoshop中的“切片工具”即可完成，切片操作后，通过“存储为Web所有格式”命令对切片进行优化处理，在得到一个images图片文件夹的同时，会产生一个HTML格式的网页文件。
切片优化后，将images文件夹的图片全部上传到网络存储空间中，以备后面步骤使用。
6.修改、编写代码 刚才已经提到，在Photoshop切片过程中会产生一个HTML格式的网页文件，但是因为这个网页文件是软件自动生成的，因此，其中涉及到的图片都是使用系统自动保存的images文件夹中的图片，而网店装修需使用存储在网络空间中的图片，因此，需要获取图片空间中的链接地址，在Dreamweaver软件中对HTML代码进行修改。
而对于网店中的一些特殊效果，像全屏轮播海报、全屏倒计时等，就需要美工自己编写代码或借助第三方软件（如淘宝美工助理）生成代码。
7.实现装修效果 在完成以上的步骤后，最后就是到淘宝平台上实现最终的装修效果。
1.3 新手装修容易步入的误区 1.3 节微课二维码
1.店铺名称过于简洁 淘宝店铺名称最多不能超过30个汉字，60个字符。
有的店铺相信简单就是美，店名取得很短。
比如做话费充值的店铺，取名为“话费点点充”，可是买家在搜索的时候，使用关键字“充值”、“话费充值”进行搜索，根本找不到你的店铺。
2.页面设计过于复杂 店铺装修切忌繁杂，不要把店铺设计成门户类网站。
虽然把店铺做成大网站看上去比较有气势，让人感觉店铺很有实力，但恰恰会影响买家的使用，会让买家在购物过程中觉得眼花。
总之一句话：要让买家进入你的店铺后能方便地找到自己需要的商品，能快捷地看清商品的详情。
3.色彩搭配混乱 有些新卖家会把店铺装修做得鲜艳华丽，五彩缤纷。
甚至有的首页配色多达10多种颜色，更可怕的是颜色还过于刺眼。
色彩搭配的应用原则应该是：总体协调，局部对比。
也就是说网店页面的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈的色彩 6网店美工 对比。
4.栏目分类太多 这也是一个非常大的误区。
在设置宝贝分类的时候，出发点是方便买家更好地搜索到铺子里他需要的商品。
但是，如果宝贝分类太繁复、分类太多，就会影响买家浏览店铺，因为这样无法做到让买家一目了然，自然就降低了店铺的浏览量，进而影响了商品的成交。
5.图片过大 图片的大小直接影响网页的加载速度，大的图片加载起来就很慢。
如果买家半天看不到页面，或者出现图片打不开的情况，那后果就可想而知了。
6.动画太多 动画固然可以吸引人的眼球，但是使用过多的动画和图片过大的道理是一样的，因此，要避免这种情况的出现。
1.4 网店装修常用工具 1.4 节微课二维码 准确地说，网店装修属于网页设计的范畴。
装修店铺无外乎图片编辑、网页制作，有关这方面的工具有很多。
Photoshop和Dreamweaver是目前普遍使用的网店装修工具。
Photoshop是Adobe公司开发的平面图像处理软件，它主要是对位图图像进行编辑、加工、处理和运用一些特殊效果，是专业设计人员的首选软件之
一，也是我们进行网店装修时最常用的一个专业设计软件，如图1-6所示。
当然，如果有些卖家对Photoshop软件操作不太熟悉，给大家推荐一款最易上手的修图软件——美图秀秀，它可以快速实现很多常用的操作，如图1-7所示。
图1-
6 Photoshop软件 图1-
7 美图秀秀软件 第1章 网店美工概述
7 在当前流行的“所见即所得”的可视化网页制作软件中，Adobe公司的Dreamweaver无疑是使用最广泛、可视化与代码编辑兼容最优秀的一个。
现在很多的电商平台都支持代码装修，通过专业的操作来实现一些较为复杂的链接和编辑。
作为一个专业的网店装修美工，应该掌握该软件的使用，如图1-8所示。
图1-
8 Dreamweaver软件 本章小结 本章我们在明确了为什么要进行店铺装修的基础上，理解了什么是网店美工及其网店美工的重要性。
在进行网店装修之前，首先要熟悉网店装修的一般流程，避免进入不必要的装修误区，浪费不必要的时间。
Photoshop、Dreamweaver是实现店铺装修的常用工具。
本章习题 选择题
1．以下（ ）项不属于电子商务平台。
A．亚马逊
B．唯品会
C．搜狐
D．京东
2．以下（ ）项属于C2C电子商务平台。
A．阿里巴巴
B．京东
C．中国制造网
D．淘宝
3．以下（ ）项不属于常见的图像文件格式。
A．JPG
B．HTML
C．PSD
D．GIF
4．以下（ ）项不属于新手装修容易步入的误区。
A．店铺名称过于简洁
B．不使用动画
C．图片过大
D．页面分类过于复杂 8
网店美工
5．以下（ ）项不属于首页的装修模块。
A．商品主图
C．店招
B．海报
D．商品展示区 调查题请调查你所在城市的电子商务发展总体情况（建议提供数据），包括有哪些电商园区，主要经营哪些类目产品，美工人才的需求等。
声明：
该资讯来自于互联网网友发布，如有侵犯您的权益请联系我们。
相关文章
