当前位置:

旺宝神器 > 卖家学院 > 旺铺知识 > 正文

【旺铺装修经验分享】简易图片排版装修 + 立体视觉装修

时间:19/11/19小编:Admin来源:http://www.6299.cc/

 

 

 

今天还是中午才起来,迷迷糊糊的处理着大家给我的留言,问题,订单,

问我在的不,我都回答一下,在。然后突然有一个蜘蛛侠头像的人,说我入围了

我当时没反应过来,然后仔细看了下,说装修比赛,我入围了

我顿时,激动的,一把鼻涕一把泪啊【打个比喻哦】我是又开心,又激动,又冷,又饿,又渴,完事还睡落枕了,脖子巨难受,一边僵硬着脖子,一边笑着,差点都没喘上来气儿,就一下蹬腿儿过去了【大家放心我坚强的活下来了】

那种感觉,我不知道该怎么形容啊,因为我就小时候得过一次奖状。完事上厕所没带纸,那张奖状就那样牺牲了- -!

这是我第2次得奖,所以非常非常的激动啊,激动的我一天都忘记自己叫什么名字了,然后入围不是送淘公仔么?我差一点就改名叫,叫 淘公仔了。哈哈,太开心了

                  首先贴出来一张我的店铺

  

 

 

 

 

 

淘小二,说让我写经验心得,其实我真的不知道该怎么写。

如果说让我说获奖感觉,我可能会说。首先我要感谢CCTV MTV AV WC

感谢我的父母给了我生命,感谢我的女朋友为了玩游戏离开了我,让我在失恋的绝望中

接触了淘宝做起了掌柜,刚接触淘宝的时候,我就看了很多家店铺

我发现有些店铺装修的太漂亮了,但是我发现买来的模板都很贵

特别是对于我们这种刚接触淘宝的人来说,花些钱,购买模板,很不划算

毕竟都还没开始盈利,就先投入一堆,很多人都会犹豫,这个钱到底投入的值不值

投入以后是否能收回成本了?很多人做淘宝的时候,都带着伟大的梦想,少量的资金来的

毕竟淘宝很多都是免费的,门槛很低,有钱没钱都能开,但是能不能赚到钱,还得看你自己的投入了

不管是资金方面,还是精神方面,都是很考验人的。

我第一次接触淘宝是10年的时候,在一家店铺里买了2件衣服,然后太小了,也不知道退换货一说

就自认倒霉,没在上过淘宝了。过了1年多,我失恋了,我本打算上淘宝上买点老鼠药了结自己一生的

但是逛着逛着,就看见了很多店铺非常漂亮。我就深深的被吸引住了。

我也开始注册了自己的店铺。在网上搜索了很多装修的教程,但是基本上,都是基础,基础,在基础的,

还有广告,广告,在广告的,我就自己研究装修店铺,我店开的时间并不长,正式开张。到现在才1个半月

我把更多的时间跟精力放在了装修当中,我很喜欢装修。但是我什么都不会

什么什么PS 什么什么代码啊?什么什么设计师啊。都跟我没什么关系

我店铺一共换了好多次装修,因为我把更多的精力跟时间都放在了研究装修中

所以也基本上没去发什么广告,做宣传方面。

这里我在贴张图是我在未发广告时,更换装修的流量走势

我是12号更换的现在的装修。其实这个装修,我还没有完成,因为我比较笨

每次做一点,就会想一点,构思一点。所以说这个未完成的装修。能入围

完全超乎我的意料之外了。

【接下来说说怎么做的】

 

【测量尺寸】

因为我看太多的拓展版都是一张大图,但是我放下面的话,店招我放什么呢?

所以就想,为什么大图,不能直接跟店招一起了。

所以找了一张大图,直接占据了,一进来的整个版面

本来想直接弄个GIF格式的3张大图,店招,左侧定义区,右侧自定义区,统一切换到下一张图那样

有点轮播大图的感觉,但是店招限制100K只是做不了,就放弃了

首先我们用QQ截图,来量一下,各区域的大小,然后记录下来。在PS里,裁剪工具,设置好大小后

在把在店铺商品里找的图片,框一下,双击立刻就有想要的大小了,在保存一下

 

【商品图片】

全部弄好后,在上传到图片空间,在进入到装修页面,点自定义内容区的编辑,出来编辑内容

里面有个黄色图片按钮,叫插入图片空间的图片。点一下以后,找到刚才上传图片

全部插入。插入进去以后,把输入法切换成英文 然后每张图片前后都输入一个句号

之前计算好了,每排能放入的图片是4张所以保存一下,预览一下看看图片有没有错误或着失效的

没问题以后,在编辑左侧自定义内容区,同样的方式插入图片空间的图片。在输入句号

点保存,预览一下,看看跟右侧是否对齐,如果没问题了,在点编辑,编辑内容里 点编辑HTML源码

把里面的图片连接 鼠标右键全选,复制,在桌面建一个文档,保存一下,免的一会编辑错了

又的从新插入图片。然后---切换到另外一个装修好的页面,点查看全部商品,对照图片找商品。

找到商品后,上面的地址。切换到装修页面,自定义内容区---编辑---点击对应的商品图片-----边上出现

几个白色的小点,然后点击上面的【铁链】按钮,把刚才复制的地址,粘贴在超连接里。

所有商品图片都是这么做的,

 

【收藏本店】---------切换到未装修的那个页面,把鼠标放在店铺最上面你的旺旺那里

有一个收藏,鼠标右键点收藏---属性------出来一个地址,复制那个地址,在切换到装修页面,点击大图。

点铁链按钮,把这个地址粘贴进去,就可以了。

 

【分类】------做4张小图插入到编辑内容区,点击图片,在切换到未装修的页面,点击左侧的分类,比如衣服,就点大分类。点进去以后,所有的衣服都显示了,复制网站最上面的那个地址,切换到装修页面,把这个地址,粘贴在超连接里。

 

就这样,一个模仿拓展版的图片装修模板,就完成了,是不是非常简单啊?

就是比较辛苦,特别是像咱不懂代码的人。

下面我发了一个,教程视频。。如果文字看不明白的可以看教程视频

 

如果这里不让播放视频可以去这里看 http://v.youku.com/v_show/id_XMzEyMTcwMjI0.html

如果屏蔽网址- -!哪就在,优酷里搜索【淘宝扶植版仿拓展版装修教程】

或者直接搜索 我的旺旺名【em1nd】,也可以找到

 

 

 

 

更新了装修,这次在原有的排版基础上,增加了,立体的视觉效果,无视了,扶植版各区域之间的缝隙

让整个版面,让店招左侧区,右侧区,连为一体的感觉,然后打破了扶植版装修太平面化的感觉。

店招跟右侧区分割的地方,在人物脸上增加了阴影效果,有种立体感觉

很多人问我,我的导航怎么弄的,那个,大家点装修店铺----最上面黑色横条----模板-----选择第一排第3个就出现了---

这个是淘宝给大家赠送的免费得装修哦

 

那个名字是红色,至于为什么变成蓝色 这个,我也不知道,反正免费得就对了哇卡卡

 

 

 

 

 

 

因为整个店铺,一直都是这样5张图片,显示的,有点太长了,中间的我就不发了。

发一个,上部分,跟下部分好了,有想看看实际效果的,可以去我店铺里面看

 

 

首先,我们在店铺里,收集一些商品图片

 

 

然后我们全部导入到PS里,选择剪裁工具,在最上面可以设置一下我们要剪裁的大小

这里我推荐 166X288的大小

设置好以后,在保存的图片上,选择一个区域,然后鼠标双击

就出现了166X288大小的图片了。

这样把图片全部裁剪好,在新建一个

让我们新建一个,空白的,1000X6000

按照左侧跟右侧区间隔的缝隙  把每张图片中间的缝隙,保持在一样

整齐排列5张,为一排。拉出参考线,让图片排得更整齐

然后我们在店铺里面截取一个,导航的图

 

 

在2边,做一点细节

选区导航的颜色。用钢笔勾出一个三角的形状,用加深 工具,涂抹一下

这样就有一种。弯曲的效果了

然后找一张大图。

裁剪为 900的宽度

 

然后把,导航放在图片上面,。在人物脸上,用加深工具,涂抹出一点阴影效果

 

在去店铺里面,截取,一下,各缝隙的大小,跟位置,在PS里,画出几条白色的线

来模拟店铺各区域的间隔,人物图片,添加投影效果

这样一个,立体感的,大图就出现了

 

接着在做分类。选区,导航的颜色。用矩形工具 拉出一个,长方形

用导航的方法,制作2边,然后在中间删除一个小缝隙,左右一定要对齐哦

接着,在2边,用加深工具,涂抹一下,

在上面按 T输入 分类的名称

现在我们打开刚才排版的衣服图片。

合并成一个图层,在衣服图层下面,新建一个空白层

用矩形工具,给商品图片下面做一个白色的背景层

然后在合并一个图层。

添加阴影效果。

 

最后在最下面结尾的地方做一个立体的转折效果。这样整个页面就做好了

现在开始选择。切片工具,

选择基于参考线的切片。

这样我们一开始设置的,参考线,就有效果了。点一下就自动完成切片了

在切片好的基础上,我们在把一些多余的切片,改一下,直接用切片工具,框出来这个地方的大小

就可以了。然后多余的地方,点右键,取消切片,就可以了

然后我们选择裁剪工具,把上面设置好的大小删除

首先我们直接框选,店招区域的。保存为GIF格式后

在按CTRL+ALT+Z 返回,框选促销区的,注意从店招跟左侧区的缝隙内侧框选哦

点文件,储存为Web所有格式


 

点击右上角 存储  储存为 仅限 HTML

 

 

储存后的样子是一个网页形式的

然后我们在把剪裁好的,图,储存为Web个格式

 

这次我们存储为GIF个格式

右侧区也是这么存储哦。

然后我们把切片好的小图都上传到图片空间去。

然后,双击打开。HTML 文件,就是那个网页图标的图片

点最上面有个文件----查看----源文件----复制里面的源代码

 

 

然后,点装修店铺-----自定义内容区-----编辑-------编辑HTML源码-----粘贴进去

在一点一下编辑HTML源码,这是大家可以看见很多框----上面还有红叉

点一下那些框,然后选择-------铁链或者图片按钮------就能看见上面写的是第几张图片了

然后打开图片空间-----复制对应的数字的图片的连接地址

粘贴自定义内容区,图片,地址里。

这样就显示了,比较麻烦。按照顺序,全部弄好后

 

 

在做一下超链接,就完成了。。。。。。。不过大家不要贪心哦,图片太多,容易超过20K 不让你保存的,

我就是个列子,然后我现在很多图片不能做超链接了,正在紧急修改中。。

 

我的店铺是 http://mxd01.taobao.com

我经常都会更新装修的,大家喜欢的话,可以随时关注哦。

 

 

 

 

 

 

 

旺宝平台

点击下方注册了解更多功能

  • 互动收藏
  • APP流量
  • 提升购物车
旺宝在线客服···