论文部分内容阅读
淘宝旺铺的装修
上一期,我们介绍了如何在淘宝上开网店,以及淘宝普通店的简单装修流程。不过普通店的限制实在是太大了,可以改造的地方不多,而淘宝旺铺开放了多个自定义区域,可令我们大展手脚。网店装修的业务需求,大多数也来自旺铺店主。所以,今天我们就来聊聊旺铺装修。
人物专访
王珊、Carol,两位来自衣冠情秀的漂亮MM,主要负责店铺的设计装修。她们于美丽中带着些许的俏皮,喜欢看漂亮的东西积累灵感,闲来无事偶尔也会PS恶搞一下同事。当看到一个普普通通如初生婴儿赤裸裸的网店,经过精心设计摇身一变成为令人赏心悦目的花样少女般的个性网店时,总有一种成就感油然而生。
CFan:淘宝店铺有哪些元素构成,旺铺可装修的是哪些部分?
衣冠情秀:淘宝店铺页面主要由店铺招牌、掌柜档案、自定义内容区、搜索店内宝贝、掌柜推荐宝贝、宝贝分类、新品上架、宝贝排行榜、热卖宝贝、友情链接以及店铺交流区11个部分构成。
店铺招牌、自定义内容区和宝贝分类是装修的主要阵地。比如我们,会根据阶段性、季节性、节日性等特质来装修这三个部分,以浪漫、柔美温馨的格调让浏览店铺的顾客品尝到有爱情的甜蜜味道。
CFan:网店装修,需要哪些工具?
衣冠情秀:网店装修的必备软件工具,几乎已被Adobe CS套件所涵盖,常用的有:Photoshop、Dreamweaver、Flash、ImageReady。
Photoshop主要是对素材图片进行处理,包括抠图、做艺术字、更换背景图、制作店铺的水印以及切片等等。而ImageReady主要是对静态图片进行动态的处理。Dreamweaver则是将处理好的图片进行布局,在放上网店前进行测试,在淘宝装修中最常用到的就是表格布局,所以我们会使用表格的嵌套进行图片的布局。Flash主要是制作动态的广告条。另外也有人使用Illustrator或CorelDRAW,这类矢量绘图软件,用来制作LOGO图标非常合适。
【芝麻开门】
对于一般玩家来说,不一定要用专业工具,许多时候,美图秀秀、光影魔术手之类的工具就可以完成基本任务。这里以美图秀秀为例,介绍一下如何完成店主最常用的抠图任务。
美图秀秀自动抠图
启动美图秀秀并打开需要处理的图片,然后单击右上方“抠图”按钮打开独立的抠图窗口。点选左侧“方法1:自动抠图”,然后在需要抠取的图像上划线,美图秀秀即可自动选取。没有被选取到的部分,可以继续划线直到全部选中为止(见图1)。接下来点击左侧“启用删除背景笔”,在多选出来的区域划线,可以删除多选的图像。最后点击下方“保存抠好图片”,设置存储路径保存就可以啦(见图2)。
【任务实战】
淘宝店铺右侧的自定义内容区,即店主们常说的促销区,这里相当于店铺的门面,自然是装修的重点。
实战:旺铺促销海报先行
促销区大多以漂亮的图片装饰,如同电影的宣传海报。促销区的标准宽度为750像素,高度则没有太多限制,不过最好控制在600像素以内,否则访客需要向下拖滚动条才能看全,会很不方便。
借他人模板装自己门面
许多朋友不懂设计,看着别人漂亮的促销海报未免眼热。下面就教你一招免费“借”别人海报为已所用的方法。这里以Banner maker(http://banner.alimama.com)为例,打开它的主页后,点击上方“选择模板”,然后切换到“图文”选项卡,挑选自己喜欢的一款模板后点击进入编辑界面。分别点选模板上的各处文字,在右侧“标题”框中修改,尽可能都改成自己需要的内容。
修改完毕,可通过SnagIT,甚至是QQ的截图工具将模板截取保存下来。Banner maker提供的模板大小与淘宝店相当吻合,所以微调一下截图造成的误差即可:在Photoshop中打开模板图,点击菜单“图像→图像大小”,将宽度设置为750像素,高度设置为600像素,确定即可。
最后就是替换图片。将你自己准备的图片也在Photoshop中打开,并使用移动工具(快捷键为V)将其拖放到模板图上,然后按Ctrl+T键,拖过来的图片四周即会显示8个锚点,拖拉这些锚点可自由调整图片大小,使其与模板上的图片大小吻合即可(见图3)。图片修改完毕,保存为JPG或PNG格式文件。
为海报增加热点链接
启动网页编辑软件Dreamweaver CS3,新建一个HTML格式的空白文件,默认进入的是“设计”视图。点击菜单“插入记录→图像”,选择上面设计的海报图,连续点击“确定”导入网页中。
如图4所示,单击一下图片,然后点选属性框中的矩形热点工具,在要增加链接的照片上画出一个半透明的蓝色方框(此方框即热点区域),然后在下方属性的“链接”框中,删去原有的“#”,输入对应宝贝的页面链接(如:http://item.taobao.com/item.htm?id=6129240725),其他项忽略。同样方法,为所有的宝贝添加上热点链接。
应用到淘宝促销区
接下来,先将海报图片上传到店铺空间:登录“我的淘宝”,在“我是卖家”中单击店铺管理下的“图片空间”,按提示将上面制作的图片上传到淘宝空间,并点击图片下“复制本图地址”复制它的网址。
回到Dreamweaver中,单击上方“代码”进入代码视图,将![]()
标志中的src值,替换成海报图片的网址,然后将与之间的所有代码复制下来。
现在回到淘宝店铺,进入装修页面,单击自定义区域右侧“编辑”,在编辑框中再单击“编辑HTML源码”按钮,将刚才复制的代码粘贴到文本框,然后单击“保存”(见图5)。先点击一下右上方“预览”看看效果,满意的话再单击“发布”,一个有着超酷海报的店铺就完成啦。
★为促销区海报添加多个链接,网上另一个较流行的做法是:在Photoshop中制作好整体效果图,再通过切片工具切分图片,然后为每部分的图片添加链接。这种方法有一定的灵活性,不过较为繁琐,而且对初学者来说,也很容易出错,不如上例的方法来得简便。
★如果用Flash来装点旺铺的自定义区域,效果会更酷,不过这是需要付费的,所以一定要自己事先权衡好利弊。进入“我的淘宝→我是卖家→(软件产品/服务)我要订购”,找到“旺铺装修模板”,购买成功后挑选一款喜欢的模板,进入在线编辑状态,将其中的内容修改为自己的信息,应用即可。
不过一定要慎用Flash,花钱只是一个方面,另外,浏览器有时会拦截Flash、有些人的电脑中没有安装Flash播放插件、装载速度慢,这些都可能影响到访客的体验。
★不少店铺的促销海报中,每个宝贝的图片都加上了好看的边框效果,显得很酷。这其实很容易做到:以美图秀秀为例,打开宝贝图片后,点击上方“边框”选项卡,然后为图片应用一种边框即可。每个宝贝图片都可以这样单独处理,最后再在Photoshop中合成即可。
上一期,我们介绍了如何在淘宝上开网店,以及淘宝普通店的简单装修流程。不过普通店的限制实在是太大了,可以改造的地方不多,而淘宝旺铺开放了多个自定义区域,可令我们大展手脚。网店装修的业务需求,大多数也来自旺铺店主。所以,今天我们就来聊聊旺铺装修。
人物专访
王珊、Carol,两位来自衣冠情秀的漂亮MM,主要负责店铺的设计装修。她们于美丽中带着些许的俏皮,喜欢看漂亮的东西积累灵感,闲来无事偶尔也会PS恶搞一下同事。当看到一个普普通通如初生婴儿赤裸裸的网店,经过精心设计摇身一变成为令人赏心悦目的花样少女般的个性网店时,总有一种成就感油然而生。
CFan:淘宝店铺有哪些元素构成,旺铺可装修的是哪些部分?
衣冠情秀:淘宝店铺页面主要由店铺招牌、掌柜档案、自定义内容区、搜索店内宝贝、掌柜推荐宝贝、宝贝分类、新品上架、宝贝排行榜、热卖宝贝、友情链接以及店铺交流区11个部分构成。
店铺招牌、自定义内容区和宝贝分类是装修的主要阵地。比如我们,会根据阶段性、季节性、节日性等特质来装修这三个部分,以浪漫、柔美温馨的格调让浏览店铺的顾客品尝到有爱情的甜蜜味道。
CFan:网店装修,需要哪些工具?
衣冠情秀:网店装修的必备软件工具,几乎已被Adobe CS套件所涵盖,常用的有:Photoshop、Dreamweaver、Flash、ImageReady。
Photoshop主要是对素材图片进行处理,包括抠图、做艺术字、更换背景图、制作店铺的水印以及切片等等。而ImageReady主要是对静态图片进行动态的处理。Dreamweaver则是将处理好的图片进行布局,在放上网店前进行测试,在淘宝装修中最常用到的就是表格布局,所以我们会使用表格的嵌套进行图片的布局。Flash主要是制作动态的广告条。另外也有人使用Illustrator或CorelDRAW,这类矢量绘图软件,用来制作LOGO图标非常合适。
【芝麻开门】
对于一般玩家来说,不一定要用专业工具,许多时候,美图秀秀、光影魔术手之类的工具就可以完成基本任务。这里以美图秀秀为例,介绍一下如何完成店主最常用的抠图任务。
美图秀秀自动抠图
启动美图秀秀并打开需要处理的图片,然后单击右上方“抠图”按钮打开独立的抠图窗口。点选左侧“方法1:自动抠图”,然后在需要抠取的图像上划线,美图秀秀即可自动选取。没有被选取到的部分,可以继续划线直到全部选中为止(见图1)。接下来点击左侧“启用删除背景笔”,在多选出来的区域划线,可以删除多选的图像。最后点击下方“保存抠好图片”,设置存储路径保存就可以啦(见图2)。
【任务实战】
淘宝店铺右侧的自定义内容区,即店主们常说的促销区,这里相当于店铺的门面,自然是装修的重点。
实战:旺铺促销海报先行
促销区大多以漂亮的图片装饰,如同电影的宣传海报。促销区的标准宽度为750像素,高度则没有太多限制,不过最好控制在600像素以内,否则访客需要向下拖滚动条才能看全,会很不方便。
借他人模板装自己门面
许多朋友不懂设计,看着别人漂亮的促销海报未免眼热。下面就教你一招免费“借”别人海报为已所用的方法。这里以Banner maker(http://banner.alimama.com)为例,打开它的主页后,点击上方“选择模板”,然后切换到“图文”选项卡,挑选自己喜欢的一款模板后点击进入编辑界面。分别点选模板上的各处文字,在右侧“标题”框中修改,尽可能都改成自己需要的内容。
修改完毕,可通过SnagIT,甚至是QQ的截图工具将模板截取保存下来。Banner maker提供的模板大小与淘宝店相当吻合,所以微调一下截图造成的误差即可:在Photoshop中打开模板图,点击菜单“图像→图像大小”,将宽度设置为750像素,高度设置为600像素,确定即可。
最后就是替换图片。将你自己准备的图片也在Photoshop中打开,并使用移动工具(快捷键为V)将其拖放到模板图上,然后按Ctrl+T键,拖过来的图片四周即会显示8个锚点,拖拉这些锚点可自由调整图片大小,使其与模板上的图片大小吻合即可(见图3)。图片修改完毕,保存为JPG或PNG格式文件。
为海报增加热点链接
启动网页编辑软件Dreamweaver CS3,新建一个HTML格式的空白文件,默认进入的是“设计”视图。点击菜单“插入记录→图像”,选择上面设计的海报图,连续点击“确定”导入网页中。
如图4所示,单击一下图片,然后点选属性框中的矩形热点工具,在要增加链接的照片上画出一个半透明的蓝色方框(此方框即热点区域),然后在下方属性的“链接”框中,删去原有的“#”,输入对应宝贝的页面链接(如:http://item.taobao.com/item.htm?id=6129240725),其他项忽略。同样方法,为所有的宝贝添加上热点链接。
应用到淘宝促销区
接下来,先将海报图片上传到店铺空间:登录“我的淘宝”,在“我是卖家”中单击店铺管理下的“图片空间”,按提示将上面制作的图片上传到淘宝空间,并点击图片下“复制本图地址”复制它的网址。
回到Dreamweaver中,单击上方“代码”进入代码视图,将
现在回到淘宝店铺,进入装修页面,单击自定义区域右侧“编辑”,在编辑框中再单击“编辑HTML源码”按钮,将刚才复制的代码粘贴到文本框,然后单击“保存”(见图5)。先点击一下右上方“预览”看看效果,满意的话再单击“发布”,一个有着超酷海报的店铺就完成啦。
★为促销区海报添加多个链接,网上另一个较流行的做法是:在Photoshop中制作好整体效果图,再通过切片工具切分图片,然后为每部分的图片添加链接。这种方法有一定的灵活性,不过较为繁琐,而且对初学者来说,也很容易出错,不如上例的方法来得简便。
★如果用Flash来装点旺铺的自定义区域,效果会更酷,不过这是需要付费的,所以一定要自己事先权衡好利弊。进入“我的淘宝→我是卖家→(软件产品/服务)我要订购”,找到“旺铺装修模板”,购买成功后挑选一款喜欢的模板,进入在线编辑状态,将其中的内容修改为自己的信息,应用即可。
不过一定要慎用Flash,花钱只是一个方面,另外,浏览器有时会拦截Flash、有些人的电脑中没有安装Flash播放插件、装载速度慢,这些都可能影响到访客的体验。
★不少店铺的促销海报中,每个宝贝的图片都加上了好看的边框效果,显得很酷。这其实很容易做到:以美图秀秀为例,打开宝贝图片后,点击上方“边框”选项卡,然后为图片应用一种边框即可。每个宝贝图片都可以这样单独处理,最后再在Photoshop中合成即可。