2023年12月22日发(作者：)

第1章 店铺装修基础知识Chapter 01Chapter 1的图片格式，以及常用的店铺装修软件，做好店铺装修的前期准备。第1章

店铺装修基础知识随着互联网的发展，网上购物已经日益为人们所熟悉。而在诸多的网络交易平台中，淘宝网无疑是人气最旺的平台之一。

淘宝装修可以帮助成千上万的淘宝卖家，特别是中小卖家，更好地管理、经营自己的淘宝店铺，给访问者带来更好的网上购物体验。本章主要讲解了店铺装修的重要性，通过本章的学习，读者可以认识网店装修中常见学习重点

|

WHAT'S IMPORTANT了解店铺装修的重要性 /

做好店铺装修前的准备 /

准备店铺图片的存储空间 /

认识网店装修中常用的图片格式 /

常用店铺装修软件的学习01

淘宝网店装修实战1.1UNDER RECONSTRUTION了解店铺装修的重要性网店装修一直是个非常热门的话题，开网店，也要把门面装修得漂亮点才能吸引客人。店铺的第一印象对于人的认知会产生相当的影响，对于网络店铺来说，装修更是店铺兴旺的制胜法宝，任何物品的任何信息我们都只能通过眼球来获得，所以更要在美观上下一些功夫。一般来说，经过装修设计的网络店铺特别能吸引网友的目光。首先，网店设计可以起到一个品牌识别的作用。对于店铺来说，形象设计能为商店塑造完美的形象，加深消费者对企业的印象，如图1-1所示。

其次，网店的店铺装修可以让店铺变得更有附加值，更具信任感。因为网络购物者只能通过网店上的文字和图片来了解产品，一个好的店铺能增加用户的信任感，而店铺装修是提高产品附加值和店铺浏览量的重要手段，如图1-2所示。

所以说，开网店，也需要把店面装修得漂亮点才能吸引客人，如果你的店铺没有装修，空空荡荡的，让人没有一点购物的感觉，那么也很难激起消费者购物的欲望，因此，店铺装修就是为了让顾客在购物中感受到一种温暖的气息，从而增加销售额。

图1-2 漂亮的店铺图1-1 经过专业装修的店铺

02

第1章 店铺装修基础知识Chapter 011.2LET'S GETTING READY做好店铺装修前的准备

所谓网店装修，就是将原本平淡无奇的页面通过各种图片、动画、文字等元素进行美化，从而使网店变得更生动、形象。在对店铺进行装修前，首先应该做足准备，这样才可以达到事半功倍的效果。网店装修风格的确定

在进行网店装修之前，首先需要确定装修的风格，我们可以通过以下几个方面来考虑：2．合适的装修风格同一种商品也可以有不同的装修风格，比如首饰珠宝店，就可以有高贵、稳重、时尚、简约等多种装修风格，你可以根据自己的喜好1．主营商品的性质作为店主，自己所开店铺的主营项目肯定是熟悉的，因此可以根据店铺的主营项目决定装修的风格，比如你的店铺是卖儿童玩具的，那么可以选择可爱、活泼、卡通一点的风格，如果使用过于稳重的风格，显然是不太适合的，如图1-3所示。

进行选择，如图1-4所示。

图1-4 选择合适的装修风格收集装修素材因此，

店铺装修需要依靠很多图片素材完成，在确立好装修风格之后，我们就要开始寻找适图1-3 根据商品的性质装修的店面合的素材。我们可以在网络中搜集素材，方法03

淘宝网店装修实战非常灵活，比如在搜索引擎里面输入“素材”两字然后进行搜索，如图1-5所示。

图1-5 登录百度网站

在打开的页面中会显示很多符合条件的搜索结果，如图1-6所示。

图1-6 显示搜索结果从搜索结果中选择相应的素材网站，如图1-7所示。提 示如果使用网络上的图片素材，请注意不要涉及版权问题。04图1-7 打开图片素材网站找到合适的素材后，可以将图片素材存储到自己电脑中，并进行分类整理，方便以后使用，如图1-8所示。

图1-8 图片素材除了在网络中搜集素材外，还可以购买一些素材图库，从而方便自己的设计。

第1章 店铺装修基础知识Chapter 011.3

LET'S GETTING READY准备店铺图片的存储空间

目前淘宝普通店铺只支持基本图片的上传，图片的体积大小在500Kb以内，如果升级为淘宝旺铺，则可以使用30M免费图片空间。因此，店铺装修模板的图片、商品细节图片及商品说明等，建议放置在自己的空间中，从而方便调用。本节将介绍几种常用的获取网络空间的方式。使用免费的相册空间很多网站提供了免费相册服务，如网易、雅虎中国等，这样我们就可以将一些商品图片上传到免费相册中进行存储，具体步骤如下：1启动IE浏览器，在地址栏中输入“/”，打开网易相册首页，单击【注册】按钮，如图1-9所示。

图1-10 注册网易通行证3注册成功后，即会自动登录到网易相册中，将鼠标移至“我的相册”超链接上，弹出下拉菜单，在菜单中单击超链接，“我的相册”如图1-11所示。

图1-9 网易相册2弹出一个新的网页，根据提示信息填写正确的注册信息，如图1-10所示。

图1-11 打开“我的相册”05

淘宝网店装修实战4在打开的页面中单击按钮，从而调用图片使其显示，如图1-14所示。

【上传相片】在打开的页面中单击【添加相片】按钮，如图1-12所示。图1-12 添加照片5在弹出的“选择要上载的文件”对话框中选择需要上传的图片，单击【打开】按钮，上传需要的图片，如图1-13所示。

图1-13 选择需要上传的照片6添加好要上传的图片后，单击页面下方的【上传相片】按钮

，即可上传图片，图片上传完成后，在相册中可以看到上传成功的图片，这时我们就可以在淘宝中插入图片地址，06图1-14 上传照片免费相册有一定的局限性，其本身拒绝外链图片，对于图片大小、格式也有一定的限制，而且稳定性比较差，经常无法正常显示出图片，因此，使用这种方式比较适合初开网店的人群使用。使用淘宝图片空间淘宝本身提供了一定的图片空间，如果图片数量不是很大，可以考虑使用淘宝图片空间，具体操作步骤如下：1以会员身份登录淘宝，打开店铺的基本设置，单击【我是卖家】按钮，进入店铺基本设置页面，如图1-15所示。

图1-15 登录淘宝网2单击“图片空间”超链接，进入图片上传页面，如图1-16所示。

图1-16 进入图片上传页面3单击“上传图片”选项卡，在打开的页面中单击【添加图片】按钮，如图1-17所示。图1-17 准备上传图片第1章 店铺装修基础知识Chapter 014在弹出的【添加图片】对话框中选择要上传的图片，单击【选好了】按钮

，如图1-18所示。图1-18 选择要上传的图片文件5在打开的“上传图片”对话框中单击【立即上传】按钮，即可将图片上传至淘宝图片空间中，如图1-19所示。如果需要添加其他的图片，可以单击【还要加图片】按钮，从而再次选择新的图片。图1-19 上传图片至淘宝空间使用付费相册空间除了免费空间外，淘宝上还有很多收费空07

淘宝网店装修实战间和相册供大家选择，购买的时候，第一要注意相册的稳定性；第二要留意空间供应商的口建立的一些目录或上传测试的一些图片，如果购买相册后里面的目录和图片就完全由你掌控碑；第三要考查空间服务商经营时间有多久，了。我们先看看进入相册后的界面，如图1-22重点考虑老牌服务商；第四要注意产品的性价比，当然不能一味地只图低价。这里我们以价格适中的“网图相册”为例，指导大家使用相册空间。1首先打开浏览器，在地址栏中输入“”相册地址，进入该网站首页，如图1-20所示。

图1-20 打开网图相册首页2如果你还没打算购买此相册，我们可以先体验下这个相册的功能和速度等，单击【轻松体验】按钮便可以进入测试空间，如图1-21所示。

图1-21 体验相册3因为是测试空间，使用的是个公共账户，第2天数据会清空。里面会有其他朋友08所示。

图1-22 进入相册4接着我们来建立一个新的文件目录，单击【文件夹管理】按钮，然后输入目录的名字，比如“新文件”，如图1-23所示，这样就新建立了一个文件。

图1-23 新建图片文件夹5单击页面右上角的【上传图片】按钮，传送图片。在新窗口里面的存放目录中选择刚刚建立的“新文件”，然后单击右侧【添加图片】

按钮，一次添加图片几十张甚至几百张都是可以的，而且可以保持原始文件名上传。比如你的图片名称是“1．jpg”，那么上传后图片名称还是叫“1．jpg”，不会有其他的符号，相册有这样的功能对做模板很方便。此相册还有个“组”描述的功能，如果照片传多了，可以根据“组描述”里的文字查找，非常轻松。上传多个文件的同时，可以保持原始文件名，还可以对组进行描述，如图1-24所示。

图1-24 上传图片6图片上传成功后，就可以在相册中看到相应的图片了，如图1-25所示。

图1-25 图片上传成功第1章 店铺装修基础知识Chapter 01租用虚拟主机虚拟主机是企业网站存放网站内容的一种普通方式。虚拟主机有独立的域名和IP地址，系统稳定、管理方便，可以支持多种类型的文件，如图片、Flash动画、网页、数据库等，而价格也比较便宜，因此，租用虚拟主机的方式适用于图片及动画素材较多的淘宝卖家。我们可以通FTP软件将图片上传到虚拟主机中，如图1-26所示。

图1-26 使用FTP软件上传图片虚拟主机的具体使用方法在后面的章节中我们将会重点讲解。09

淘宝网店装修实战1.4IN COMMON USE PICTURE认识网店装修中常用的图片格式GIF格式GIF（Graphics Interchange Format）的原义是“图像互换格式”，是CompuServe公司在1987年开发的图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50％左右，它不属于任何应用程序。目前几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF图像文件。

GIF只支持256色以内的图像，采用无损压缩存储，在不影响图像质量的情况下，可以生成很小的文件。GIF支持透明色，可以使图像浮现在背景之上，而且可以制作动画，这是它最突出的一个特点，如图1-27所示。图1-27 GIF格式图片JPEG格式JPEG也是常见的一种图像格式，它由联合照片专家组（Joint Photographic Experts

Group）开发并命名为“ISO 10918-1”，JPEG仅仅是一种俗称而已。JPEG文件的扩展名为．jpg或．jpeg，其压缩技术十分先进，它用有损压缩方式去除冗余的图像和彩色数据，获得极高的压缩率的同时能展现十分丰富生动的图像，换句话说，就是可以用最少的磁盘空间得到较好的图像质量，如图1-28所示。

图1-28 JPEG格式图片同时JPEG还是一种很灵活的格式，具有调节图像质量的功能，允许你用不同的压缩比例对这种文件压缩，比如我们最高可以把1．37MB的BMP位图文件压缩至20．3KB。当然我们完全可以在图像质量和文件尺寸之间找到平衡点。

JPEG格式是目前网络上最流行的图像格式，是可以把文件压缩到最小的格式，由于JPEG优异的品质和杰出的表现，它

01010

的应用也非常广泛，特别是在网络和光盘读物上，都能找到它的影子。目前各类浏览器均支持JPEG这种图像格式，因为JPEG格式的文件尺寸较小，下载速度快，使得Web页有可能以较短的下载时间提供大量美观的图像，JPEG同时也就顺理成章地成为网络上最受欢迎的图像格式。

PNG格式PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性，PNG格式能够提供长度比GIF格式小30%的无损压缩图像文件，同时提供24位和48位真彩图像支持以及其他诸多技术性支持。PNG格式的文件背景颜色可以是透明的，所以用到的地方也非常多。例如在淘宝上我们可以用PNG格式的图片作为水印，如图1-29所示。

图1-29 PNG格式图片第1章 店铺装修基础知识Chapter 01PSD格式PSD：Photoshop Document（PSD）是著名的Adobe公司的图像处理软件Photoshop的专用格式。格式可以存储Photoshop中所有的图层、通道、参考线、注解和颜色模式等信息。在保存图像时，若图像中包含有层，则一般都用Photoshop（PSD）格式保存。PSD格式在保存时会将文件压缩，以减少占用磁盘空间，但PSD格式所包含图像数据信息较多（如图层、通道、剪辑路径、参考线等），因此比其它格式的图像文件还是要大得多。由于PSD文件保留所有原图像数据信息，因而修改起来较为方便，如图1-30所示。

图1-30 PSD格式图片PSD格式的文件是一种图形文件格式，因此，使用看图软件如ACDSee

或图形处理软件如我形我速、PhotoShop等都是可以打开的。01111

淘宝网店装修实战1.5IN COMMON USE SOFTWARE常用的店铺装修软件介绍PhotoshopPhotoshop是由Adobe公司开发的图形处理系列软件之一，目前最新版本为CS5，主要应用在图像处理、广告设计的一个电脑软件，是世界上公认的功能最强大的图像编辑软件，由于网店装修是利用精美图片把自己的网店进行装饰，所以需要先设计好图片，我们一般采用Photoshop制作图片。Photoshop CS5界面如图1-31所示。

图1-31 Photoshop CS5界面Dreamweaver Dreamweaver是Adobe公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页，其界面如图1-32所示。

图1-32 Dreamweaver界面网店装修所使用的是html代码，一般是用Dreamweaver

软件来制作，Dreamweaver是唯一提供视觉化编辑与原始码编辑同步的设计工具。光影魔术手

光影魔术手（nEO iMAGING）是一个对数码照片画质进行改善及效果处理的软件。简单、易用，每个人都能制作精美相框、艺术照、专业胶片效果，而且完全免费。不需要任何专业的图像技术，就可以制作出专业胶片摄影的色01212

第1章 店铺装修基础知识Chapter 01彩效果，是摄影作品后期处理、图片快速美容、数码照片冲印整理时必备的图像处理软件，界面如图1-33

所示。

图1-33 “光影魔术手”图像处理软件

Fireworks CS5Adobe Fireworks CS5

是Adobe推出的一款网页作图软件，软件可以加速 Web

设计与开发,

是一款创建与优化 Web

图像和快速构建网站与 Web

界面原型的理想工具。Fireworks

CS5

不仅具备编辑矢量图形与位图图像的灵活性,

还提供了一个预先构建资源的公用库,

由

Adobe Photoshop CS5、Adobe Illustrator CS5、Adobe Dreamweaver CS5

和 Adobe Flash CS5

软件省时集成。Fireworks

将设计迅速转变为模型,

或利用来自Illustrator、Photoshop和Flash的其他资源，然后直接置入Dreamweaver CS5中轻松地进行开发与部署，如图1-34所示。

图1-34 Fireworks CS5 工作界面Ulead Gif AnimatorUlead GIF Animator是由友立公司出版的一款专业制作GIF动画的软件，内建许多现成的特效可以立即套用，而且还能将动画GIF图片最佳化，如将放在网页上的动画GIF图档减肥，以便能更快速地浏览网页，如图1-35所示。

图1-35 Ulead GIF Animator提 示各种制作软件功能不同，我们可以结合使用，而且还有一些专业制作某些图形的软件，如专业制作按钮、广告横幅之类的软件，读者也可以下载使用，从而可以节省大量设计时间。

01313

淘宝网店装修实战小

结好的开始是成功的一半，本章主要是让读者了解店铺装修的重要性，做好店铺装修前的准备：认识了网店装修中常用软件及图片的格式，学习了根据商品类型去准备网店装修的材料和店铺图片的存储空间。这些也是网店装修必备的基础知识。总之，在装修之前我们必须做好充分的准备。014