点击查看第一章
点击查看第二章
Photoshop+Dreamweaver淘宝天猫网店美工与广告设计一本通 : 实战版
创锐设计编著
写在处理之前
网店装修是指对网店页面进行美化和装饰设计，从而达到提高网店商品转化率的目的。在进行网店装修之前，我们需要先了解网店装修的重要性、网店装修后台的基本操作、网店装修的常用工具、网店装修的主要视觉元素、网店装修的工作流程等，以便在实际的装修过程中提高工作效率，达到事半功倍的效果。
也许有人会问，网店不装修可以卖东西吗？当然，现在很多电商平台都提供网店装修模板，卖家可以直接使用，无需额外装修就能卖东西。但是，这些装修模板往往千篇一律，很难体现特色，因此，还是会有很多卖家想尽一切办法将自己的网店装修得更加漂亮，以在众多网店中脱颖而出，获得更好的客源和更高的转化率。
这些卖家之所以如此重视网店装修，是因为网购具有一定的特殊性。在实体店，消费者可以通过看、尝、摸、闻、听去感知实物；而在网店中，买家只能通过看页面中的视频、图片和文字来了解商品。所以，网店装修就显得尤为重要。总体来说，网店装修是为了达到让网店页面更美观、吸引更多眼球、提升转化率等多种目的，如下图所示。
下面通过对比两家网店的页面，直观地感受一下网店装修的作用。如下左图所示的网店对店招、导航条、促销广告、商品分类等进行了艺术化设计，使得商品与页面整体风格形成视觉上的统一，更能吸引买家的注意，博得买家的好感；如下右图所示的网店则采用了电商平台最基本的装修设置，并没有做额外设计，给人的感觉是单调、简陋，买家很难对这样的网店产生信任感。
接下来再选择两家网店风格和价格都比较相近的两款商品进行比较。下一图所示为装修过的网店的商品，下二图所示为未装修的网店的商品，从图中可以看到，装修过的网店的商品，其交易数量、收藏人气和评论数都比未装修过的网店的商品高很多。由此可见，网店装修是促进商品销售的重要因素。
在进行网店装修之前，需要对网店装修后台的一些常用操作有一定了解，如设置并应用默认模板、添加页面及自定义模块等。下面以淘宝为例进行讲解。
1．上传图片到图片空间
装修网店之前，首先要做的就是将装修需要用到的图片上传到图片空间。淘宝有专门的图片空间来存储和管理装修图片。登录卖家后台管理中心，单击“店铺管理”下方的“图片空间”，即可进入图片管理页面，单击“上传”按钮，如下一图所示，弹出“上传图片”对话框，可以直接将图片拖动到对话框中间位置，也可以单击“上传”进行上传，如下二图所示。
上传完成后，页面中会显示上传后的文件或文件夹，选中文件或文件夹，可以单击“重命名”按钮，对上传的文件或文件夹进行重命名操作，如下图所示。在此页面中单击“删除”按钮，可以删除已经上传的文件或文件夹。
2．页面布局管理
页面布局管理是对页面整体结构的调整，包括店铺招牌（店招）、导航和页尾等，这也是进入网店装修进行模块添加的一个最基本的操作。登录卖家后台管理中心，找到并单击“店铺装修”，如下一图所示，进入网店装修后台页面，根据需要选择要装修的页面是手机端还是PC端，然后单击“装修页面”按钮，如下二图所示。
进入下一级装修后台页面，在页面中先单击“首页”右侧的下拉按钮，然后选择要装修的页面，如店内搜索页、详情页或个性化装修页面等。选定装修页面后，单击“布局管理”按钮，如下一图所示，进入“布局管理”页面，显示默认的页面布局效果，如下二图所示。
如果需要向页面添加新布局样式，单击页面中的“添加布局单元”按钮，如下一图所示，在弹出的对话框中单击选择想要的布局结构，如下二图所示。
添加新的布局单元后，在页面左侧单击选择相应的模块，将其拖动到添加的布局单元中，如下左图所示，即可完成页面的重新布局，如下右图所示。如果需要删除布局单元，则单击布局单元右侧的删除按钮。
3．应用模板快速装修网店
为了便于卖家快速完成基本的网店装修工作，电商平台通常会提供一些装修模板。淘宝平台提供的装修模板有简约时尚官方模板、动感红官方模板、收费店铺官方模板三套。淘宝卖家都是在这几套模板的基础上进行网店装修的，其中绝大部分的淘宝网店装修特效模板代码，如全屏海报代码、轮播代码、卡盘代码等，都是基于简约时尚官方模板制作出来的。
进入网店装修后台，单击顶部导航栏中的“模板管理”按钮，如下左图所示，进入“模板管理”页面，滚动鼠标滚轮，在下方的“可用的模板”区域中单击选择要应用的装修模板，然后单击“马上使用”按钮，如下右图所示，就可以应用所选模板快速装修网店。
4．添加自定义模块
电商平台提供的装修模板的风格并不总能匹配网店的整体形象或商品的特质，如果使用默认的装修模板不能达到理想的装修效果，就需要使用自定义装修模块。
进入网店装修后台，然后单击左侧的“自定义区”模块，将其拖动到右侧页面区中合适的位置，当出现“松开鼠标，模块会放到这里”的提示文字时，如下左图所示，释放鼠标，即可插入一个新的自定义模块，如下右图所示。
添加自定义模块后，模块右上角会显示“编辑”“删除”“添加模块”等按钮。单击“编辑”按钮，将弹出如下左图所示的“自定义内容区”对话框，在对话框中定义模块背景
色、图片和文本等。如果已经使用Dreamweaver编辑好装修代码，则可以单击“源码”按钮，将代码复制、粘贴到代码编辑区，单击“确定”按钮以完成装修，如下右图所示。
5．选择合适的默认装修配色
不同的颜色能带给人不同的感受。例如，蓝色能使人联想到科技、干净和理性；紫色能使人联想到神秘及高贵；绿色能使人联想到自然与生机等。淘宝为卖家提供了几种配色方案，大家可以根据所销售商品的特点选择合适的配色方案。
进入网店装修后台，单击左侧的“配色”选项，在右侧即显示系统提供的几种配色方案，只需要单击某个配色方案，如下左图所示，就能快速更改网店的整体装修配色，更改后的效果如下右图所示。
6．更改页面背景图
很多新手卖家总觉得自己的网店装修效果太过单调，其原因之一就是页面背景效果欠佳。此时可以通过装修后台为页面设置更美观的背景图。网店装修背景图通常都要经过一定的设计，可以通过抠取及合成等后期处理手段进行美化，使其与商品和网店整体装修风格形成更统一的视觉效果。
单击网店装修后台左侧的“页面”选项，如下左图所示，在右侧先取消勾选“页面背景色”右侧的“显示”复选框，如下中图所示，再单击“更换图”按钮，如下右图所示。
打开“打开”对话框，在对话框中选择需要应用的背景图，然后单击“打开”按钮，如下一图所示，再设置背景显示方式和对齐方式，如下二图所示，更换背景后的网店装修预览效果如下三图所示。
在进行网店装修时，常常需要使用一些软件对装修的素材进行优化或美化，如图片处理和网页架构设计等。网店装修中比较常用的两个软件是Photoshop和Dreamweaver，下面就来简单认识一下这两个软件。
1．Photoshop
Photoshop是Adobe公司开发的图像处理软件，它的专长是处理以像素构成的位图图像，包括编辑加工、校色调色、添加特效、抠图与合成等。
在计算机中安装好Photoshop软件后，双击桌面上的快捷方式图标即可启动软件。启动软件后可以看到界面由菜单栏、工具选项栏、工具箱、面板等几大部分组成。Photoshop界面的各组成部分及功能介绍如下图和下表所示。
2．Dreamweaver
在网店装修后台进行编辑时，我们会看到很多的源代码。如果需要对模板进行重构，可以在Dreamweaver里对模板的代码进行编辑。
Dreamweaver是一款“所见即所得”的网页编辑工具，是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具，利用其可以轻而易举地制作出跨越平台和浏览器限制的充满动感的网页。进行网店装修时，应用Dreamweaver对页面进行编排，可以创建具有网店自身特色的装修页面。Dreamweaver工作界面的各组成部分及其功能介绍如下图和下表所示。
前面提到过，相对于实体店来说，网店最大的局限是只能让买家通过视频、图片和文字了解所售商品，所以，网店装修最重要的就是视觉效果。视觉效果代表着网店的门面，其中颜色、文字和版式是网店装修的三大视觉要素，只有合理地规划这三大要素，才能获得理想的网店装修效果。
1．颜色
在浏览网店页面时，我们首先会被页面中的颜色所吸引，再根据颜色的走向，对网店中的商品进行更深层次的了解。因此，配色是树立网店形象的关键。页面的配色处理得当，能给人和谐、愉快的视觉感受，可以进一步提高商品的转化率。网店装修中使用的颜色可分为主色、辅助色和强调色三类，下面分别讲解它们的概念和作用。
主色是指展示网店形象和延伸其内涵的色调。主色主要用于网店标志、标题和主菜单等，给人以整体统一的感觉。主色好比一部电影的主角，串联起整部电影的主线，应该比其他搭配颜色更明显、清楚、强烈，以给人留下深刻的印象。但要注意的是，在一个网店的装修中使用的主色不宜超过3种，否则极易让人眼花缭乱。如下左图所示的网店页面以红色作为主色，通过调整红色的透明度和饱和度，营造出热烈、喜庆的氛围；如下右图所示的网店页面则选择了象征智慧、科技的蓝色作为主色，给人以稳重、冷静、严谨的感受。
辅助色是页面中仅次于主色的颜色，它的主要作用是烘托主色，支持和融合主色。辅助色与主色一样，也可以有一个或多个颜色，要根据网店装修风格和商品特点来选择与搭配。
如果在网店页面中整体采用统一的主色和辅助色进行搭配，那么可以在页面的一小块面积上使用强烈的颜色，即强调色。强调色使用的面积越小，颜色越鲜艳，起到的强调作用就越明显。因为强调色所占据的面积较小，所以无论是多么鲜艳的颜色，也不会影响整个网店的装修风格。
2．文字
文字的编排在网店装修中有着举足轻重的地位。优秀的文字编排会给浏览者带来良好的阅读情绪，从而使其能够进行深入的阅读。所以在编排文字时，要遵循一定的规则，使页面信息的传播度最大化，使商品的转化率得到较大的提高。总体来说，文字的编排规则包含三个部分：其一是文字编排的准确性；其二是段落排列的易读性；其三则是整体布局的审美性。
文字编排的准确性不仅仅是指文字所表达的信息要满足主题内容的要求，而且还要求整体排列风格要符合设计对象的形象。只有当文字内容与排列样式都达到画面主题的标准时，才能保证文字准确地传达相关的信息。
如下图所示，页面中的图片内容与文字信息在逻辑上存在一定的关联性，同时通过准确的文字叙述对商品的材质特点进行了更加全面的介绍。
网店页面中的文字还应该易于识别，即具有易读性。在实际的文字编排过程中，文字的字体、字距和行距等都可能影响文字的易读性。因此，在进行网店装修时，可以根据画面的需要，通过调整文字的字体及增大或缩小间距等方式来增强文字的易读性，给买家以顺畅的阅读感受。
如下图所示的优惠券，通过将版面中的部分文字设置为大号字体，并配以适当的间距，使其易读性得到了显著提高，同时也便于买家更加直观地了解优惠券的优惠额度和使用要求等信息。
文字的审美性是指文字编排在视觉上的美观度。在实际的装修过程中，为了满足编排设计的审美性，可以对字体本身添加一些带有艺术性的设计元素，如创建连体字、立体字效果等，从字体结构上增加其美感。
如下图所示的轮播广告图对主体文字的字体结构和笔画进行了有规则的改造，使其在外观上呈现出了特定的图形效果，提高了画面整体的艺术性和美观性。
3．版式
网店装修中的版面布局是让页面脱颖而出的关键。因此，进行网店装修时，除了要考虑页面的颜色和文字编排方式外，还应当考虑整个页面的视觉流程，即版面布局对买家的视觉引导，指引买家视线的关注范围和方位。清晰明确的视觉流程，不但可以增加买家在页面中的停留时间，还可以提高页面整体的美观性。
网店装修中比较常用的视觉流程有单向型和曲线型两种。单向视觉流程也称为线性视觉流程，它又可以分为横向视觉流程、纵向视觉流程和斜向视觉流程。横向视觉流程也称为水平视觉流程，是最符合人们阅读习惯的视觉流程，其通过版面各个元素的依次排列，引导观者的视线在水平线上左右来回移动。横向视觉流程在欢迎模块和促销广告中应用较多。下图所示的页面即从左至右依次展示了不同茶具的尺寸大小。
纵向视觉流程也称为垂直视觉流程。纵向视觉流程是将版面中的元素在垂直方向上进行编排，让观者的主要视线在页面的垂直方向上移动。该视觉流程常用于较为简洁的版面中，不仅能起到稳固画面的作用，还能为观者带来稳妥与坚定的心理感受。如右图所示的页面将各个元素基于页面的中轴线进行合理的编排，产生了一种纵向的视觉流程，让观者感受到页面整体的坚定与和谐。
斜向视觉流程是指通过将版面中的图片或文字进行斜向排列，引导观者的视线从左上角移动到右下角或从右上角移动到左下角。此类画面具有相对的不稳定性，因此会产生强烈的运动感和视觉吸引力，能更自然轻松地引导观者的视线和注意力。下图所示的页面通过文字和图片的方向引导观者的视线，如此既能赋予画面一定的动感，也能从侧面反映出鞋子的舒适性。
除了单向视觉流程，曲线视觉流程也是网店装修中运用较多的一种版面布局方式。曲线视觉流程是将页面中的图片和文字等元素，以S形或O形等曲线形态排列，使观者的视线随曲线移动。曲线视觉流程不但能使版面看起来饱满而灵活多变，还能让人从中感受到优雅的动态美。
右图所示的页面即采用了S形曲线视觉流程，将商品发货及售后处理流程置于S形曲线上，如此不但使得版面的上下和左右达到了相对平衡的效果，而且也让画面的视觉空间效果显得更加灵动和活泼。
无论做什么事，都有一个“先做什么，再做什么，最后做什么”的顺序，网店装修也是如此。按照下面的流程进行网店装修，可以减少工作失误，提高工作效率，得到理想的工作效果。
1．收集并整理装修素材
装修网店前，首先需要收集相关素材，如拍摄的商品照片、视频及其他一些装修中需要使用的素材等。将收集到的素材通过文件夹分门别类地存放，以便在装修过程中快速调用。
2．在Photoshop中设计页面
准备好素材后，就可以启动Photoshop软件。在Photoshop中对页面进行融合设计，对素材图片进行修饰、美化和设计，制作出网店的店招、导航、欢迎区及客服区等模块，如右图所示，然后存储处理后的图像文件。为方便随时进行修改，在存储图像文件时可以分别存储为PSD格式和JPG格式。
3．对图像进行切片处理
完成页面图像的设计后，接下来就需要对图像进行切片。切片可以帮助我们设计和优化单个网页图片或整个页面布局，并提高页面的下载速度。为了实现更精细的切片操作，可以先在图像中创建参考线，如下左图所示，然后基于参考线创建切片效果，如下中图所示，再应用“存储为Web所用格式”命令存储切片图像，如下右图所示。
4．将图像上传到图片空间
对图像进行切片优化后，在存储图像的文件夹中将出现一个“images”文件夹，此文件夹中包含了所有的切片图像。打开网店装修后台，将文件夹中的切片图像全部上传到后台指定的图片空间中，以便进行图像的链接和代码的制作，如下图所示。
5．在Dreamweaver中编辑自定义模块
启动Dreamweaver软件，创建一个空白文档，然后分别制作出网店的店招和页面自定义装修模块的代码。在制作代码时，需要通过网店装修后台，复制图片空间的图像链接和代码，并利用Dreamweaver调整代码，如右图所示。在文档窗口可以查看由一张张图片组成的页面效果，如下图所示。
6．复制代码完成装修
进入网店装修后台，删除多余的装修模块，将制作好的代码复制并粘贴到相应的装修模块编辑区域，最后单击“发布”按钮，发布装修后的网店。再次进入网店时，就可以看到装修后的页面效果，如下图所示。
