超简单！不用代码纯PS打造自己的店招自定义导航和动画模版
查看:47601
| 回复:552
&&&&&&淘宝大学首页推荐，谢谢管理员！
谢谢管理员三番五次的审核和指正和给出修改意见终于申精了！
首先我自我介绍以下！我是小繁，也是新手来的。之前很多友友看到我店铺都问我怎么做的。我想一句两句也说不清。今天就写个详细介绍的帖子吧。这个帖子本来很早就要写了。不要意思最近一直忙。不多说。进入正题。(主要是为了像我们一样的新手不会代码写的！)好的店铺设计会给顾客带来好的印象，但是我们又不会代码。PS都是半路出身，那如果你也属于这一类。今天你要认真看帖子了!
&&&&&&&&&&&&&
今天主题：&&&&&& 第一：是店招（这个是旺铺拓展版的。不是的没有这个功能。下面才介绍到动画模版都可以用）
&&&&&& 第二：是动画模版（任何版本都适合，都是讲解不用代码。用PS巧做模版）用自己的PS让别人DW去吧
&&&&&&& 首先网上很多介绍制造店招和模版自定义我就不班门弄斧了。主要是不用代码的方法。很多友友看到代码就头疼。我用的是PS。全部用PS制作的。没有代码没有用到DW。呵呵。我用的的是CS5，安装这里就不做讲解了。
&&&&&&&&&&&&&&&&& PSCS5
&&&&& （1）：首先打开PS。新建一个画布。店招是950x250（高于250是不显示。自己看着定）我这是950x176：
&&&&&&&&&&&
&&&&&&& （打开后这里我主要是讲解店招超连接制作。图片具体怎么做就不在详细讲解。你可以找一些好看的图片。不要盗用。呵呵。坚持原创）
&&&&&&&&&&&
&&&&&&&& （2）：然后好好规划一下你要做连接的图，最好用参考线做出大概比例！
&&&&& （提示：为防止广告我做了处理。这个是我要举例的店招。（其实店招，不用太花哨。专业的你可以参考以下都是很简洁的最多有一个背景。一般构成:店名+导航+收藏连接+最近的促销要显眼。什么图片整一点看了不专业。）具体不讨论了。免得偏离主题。呵呵。用参考线做好规划。参考线主要是用语下一步做切片的准备！你要超链接的就用参考线拖出来；（ctrl+R参考线快捷键）规划完成）
&&&& （3）：开始进行切片了
&&&&&& 提示：不是很会切片的同学。可以直接点击基于参考线的切片，然后在根据自己做出优化。如果都要连接就不要修改！
&&&&&&用切片工具切在一起。就自动成一个切片了、
&&&&&& 下图是前后切片图的比较，整合成一个为后面传图做基础。这样就简单看起来一般切片是做连接的会生成好几个图。只要你切过的。所以不需要做连接的就让其成为一个整体。
&&&&&&&& （4）：切片做好了就要储存了。在文件菜单下。选择储存为WEB格式!
找不到命令的同学，可以使用快捷键是：Alt+shift+s很好使，谁用谁知道！
&&&&&&&&&& （5）：然后导出设置。一个设置成GIF格式的。以后只要做这个就选择这种格式。这样占内存小。质量还行。而且动画和透明都支持
保存一定要选择 HTML+图像。切记！
&&&&&&&&&&&&&
&（提示：导出之后。就生成了一个HTML的本地网页和image的文件。没有两个那说明之前你保存时候选择错误了。赶快重新保存下。）
&&&&&&&& （6）然后双击打开这个本地网页。
这个时候你就会看到你保存的哪个图片的整体效果，然后CTRL+A 复制。全选复制好
&&&&&&&&&&&&
&&&&&&&&&& （7）现在就开始进入装修店铺页面。这个要自定义页面。不要淘宝默认的店招。把店招删除。添加一个自定义页面。点击编辑，进入编辑状态粘贴之前复制的，如下图：&&&&&&&&&&&&&&&
这个时候全是叉叉。不用慌，跟着我做。很简单。是叉叉的原因是你的这个文件里面的图还在本地images所以不显示。
现在开始上传打开你保存的这个images文件。上传里面的全部图片，上传不要改名字。整个过程都不要改名字。不然下一步的插入图片你就麻烦了！
&&&&&&&& （8）现在开始插入图片。更换这些叉叉。不改名字的好处就是按照顺序一次插入即可。方便吧！
这是插入图片后的效果展示。
你能跟着做到这基本上已经完成一大半了。哈哈哈，
（9）这个连接按钮、要在选择你要连接的图片才能连接喔！
&&&&&&&&&&&&&&&&&&&&&&&&&
现在开始连接：连接很简单。点击超连接。上面是图片地址不用管，下面复制你要连接到的地方。
连接好后。你会发现我那里公告旁边留了两个白图。呵呵。一个我准备加入滚动字幕公告。一个是填写关键字。然后做超链接。怎么做。很简单！里面框出来的一个滚动代码喔。这个不做详解，要的友友我会在后面发出来。也很简单。主要是针对像我这样的新手蛮。选中这个代码。然后剪贴。因为我下面不想要了。直接换在里面的空白处。
&&&&&&&&&&
&&&&&& 方法：是先剪贴我的那个代码。在选中哪个白图。然后黏贴后就可以了。代码是之前弄好的。里面的字可以双击后修改。代码在最后！
&&&&&&& （10）：最后就保存吧。马上就可以看到效果了。
到这。基本上已经完了。记住别忘了发布喔。不然你的顾客是看不见的！。怎么样整个过程没有设计到代码吧。这个滚动代码也是复制黏贴。不会任何代码的都能做这个。呵呵。
&&&&&&&&&&&&
各种模版的尺寸
&&&&&&&&&店招:& 950x150px（默认150.大于250px不能显示）
&&&&&&左侧栏:
&&&&&&&&& 自定义：宽190像素。高不限制！
&&&&&&&&&&&&&&&&&& 类目：宽165像素。高不限制！
&&&&&&&&&&&右侧栏：自定义宽750像素。高不限制
总结：这是店招的制作。下面继续介绍广告动画模版制作。这个时候任何版本的店铺。扶植版也可以。新手可以看一下。大侠就不要拍砖了。也是不要代码。纯PS制作。版面有限。我先写在回复里面吧！
附滚动代码：&MARQUEE style=&WIDTH: 516 HEIGHT: 21px& height=21 width=516 scrollAmount=2 scrollDelay=45&打上你要的字&/MARQUEE&
（提示：复制代码到你的自定义页面。要先点击编辑代码，在复制。本文由于不涉及代码。这个是附言，要的可以复制。不要的亲可以不用管这个。不会影响你制作！呵呵。）
声明：上面店招不是我的。为了避免广告嫌疑。呵呵。只是举例说明。可能有些是网络图片。所以你们制作时候不要复制这些图片！谢谢
碎碎念：呼呼的图文并茂的写了这么多。各位亲，有什么不疑问的可以问我。和回帖。我都会认真看的。谢谢。支持。！问题回复在3楼，请注意！
由于每天问的人很多。掌柜时间也有限为了新手。我特意建立了一个群，是店铺设计方面的。大家可以一起讨论！有兴趣的新手可以加入，往往群号：
需要验证，回复你的楼层，你在几楼回复的帖子。写几楼即可，由于会有很多人加入。怕打广告的，请谅解需要验证！
楼主在帖子里擅自添加联系方式，给予下精和全网拉黑的处罚！
注册时间：
广告动画模版的制作：
由于每天问的人很多。掌柜时间也有限为了新手。我特意建立了一个群，是店铺设计方面的。大家可以一起讨论！有兴趣的新手可以加入，往往群号：。需要验证，回复你的楼层，你在几楼回复的帖子。写几楼即可，由于会有很多人加入。怕打广告的，请谅解需要验证！
&&&& 论坛也有不些动画模版带连接的帖子。但是都会涉及到DW（Dreamweaver）但是很多像我一样的新手就会一点PS。DW是神马都不知道。更何况会代码。我今天要教新手制作就是纯PS制作的动画模版。当然前面跟我上面写的制作店招大同小异。具体在哪自己去体会。呵呵
&&&& 废话少说开始上图。先我使用是PSCS5具体按照就不讲解了。
&&&&&&&&&&&&&&&&&&&&&&&&&& .
（1）新建画布。
这个根据自己情况。我没截图。直接用的是上面的。呵呵。不要说我懒哈
我这里主要是说明方法。图的制作没有说明。有任何疑问可以回帖哈。
这个是制作的规划好的图。很简单就是两个红色的正方形图和灰色背景。这个可以自己去定义。
这里我主要讲解的是想把右边红色的图做成我们自己的动画轮播。左边就是一个收藏连接。这个是750PX宽的。用好参考线。这个说的没上面的详细。前面基本上都是一样的工序。
（2）参考线的建立
跟主贴一样，然后简历切片。不会可以选择基于参考线创建切片。参照上面主贴！
使用切片工具。这个比较简单点。要切的不会太多。这里主要是右边的红图单独切出来。其他为自动的切片图就可以了。
（3）开始导出
&很简单。呵呵。找不到命令的可以使用快捷键就是上图显示的然后保存设置格式！
设置好后就可以点击保存了。这时候注意。要选择保存HTML和图像上面已经说过。
（4）生存一个HTML和一个文件夹images，打开文件夹。在用PS打开我们要制作的广告轮播动画。
这个是我准备好的几个店铺衣服图片这个你可以提前准备好。可以在你自己好的宝贝详细里面复制过来作为广告都行。这个关于图的制作我在这就不都详解了。呵呵。
(提示：这个是图遮住了背景红图。红色只是我们用来规划广告图的大小。不是显示的效果。下面是广告图遮住了。)
在做动画之前要先把图转换成RGB，之前写漏了、不好意思，有友友做到这一步了。很不错。发现问题不会做了及时提醒给我！
不转换是不能进行任何操作的！谢谢！
对不起，我的疏忽！
制作动画也简单。PScS5不用打开其他软件。直接在里面可以做动画。打开动画面板就可以了。
小技巧：就是把每个广告图放在不同图层。然后新建几个不同的动画图层在每个图层只显示一个。其他隐藏就是了。
右边的眼睛有就是显示。点击没有了就是隐藏。
然后在设置不同的时间就可以了。一般每个一秒多就可以了。可以根据自己的情况。比较多就时间短一点。就两张就长一点设置好了。可以店家左下角的那个小三角播放。然后就可以导出来。动画就完成。哈哈。简单吧。
（5）导出跟之前所以的导出一样
这里导出只要选择导出图像就可以了。不要选择两个。呵呵、
导出之后我们就开始把效果放到首页自定义里面了。扶植版只能在首页右侧添加一个自定义页面。直接添加。保存，后面跟上面的店招基本上就差不多了。
也是打开本地网页。
然后复制。在复制到你新建的自定义页面里面。这里的操作步骤我就不详细说明了。
（6）然后插入图片，
&一样。看到叉叉不要担心。呵呵。只要你的图片名字没有修改。按依次顺序插入更换就OK了。
（7）后面就简单了。连接啊。神马的就直接更换就可以了
这是最后的展示。右边的是会播放的。呵呵。赶快保存发布吧。
地址连接：收藏地址论坛很多都有说明就是在店铺把鼠标放在自己的额旺旺那右键收藏属性。复制地址就可以了。要复制自己的喔，
终于写完了。用了我一下午时间。新手写贴多多支持哈。建议新手卖家。
只要用心去做。我相信你不会也能做好。刚开始我们都是慢慢过来的。加油。
有任何问题可以回帖，我会在每天一早一晚看帖的。有急的问题也可以旺我。有时候不再电脑旁边回复可能比较慢。请谅解！
严正声明：为避免广告嫌疑后面的那个模版是我很久之前不用的了。今天拿来举例说明。衣服店铺也没有。
最后编辑时间为
由于每天问的人很多。掌柜时间也有限为了新手。我特意建立了一个群，是店铺设计方面的。大家可以一起讨论！有兴趣的新手可以加入，往往群号：。需要验证，回复你的楼层，你在几楼回复的帖子。写几楼即可，由于会有很多人加入。怕打广告的，请谅解需要验证！
各位亲，有神马不明白的，可以回帖提问，问题都会回复在这楼！一般在一早一晚回帖！如果比较急的。可以旺旺我。注明你的问题在几楼。我一有时间就去看。没有及时回复你们。亲。还请谅解！
回复18楼：有任何不明白的可以提出来哈。我会回复在这一楼！
回复19楼：代码已经放在主贴页尾。请注意！
回复44楼：呵呵。其实很多技巧别人稍稍以提醒就知道了。这样可以对新手少走很多弯路。重在分享！
回复49楼：直接滚动字代码在主贴结尾有。在图片上面加滚动字是也需要代码的。一般是别人做好的模版直接在上面编辑！
回复170楼：呵呵，觉得复杂的看不懂的可以回帖到哪就看不懂了。细节就是简单的事复杂做，复杂的事简单的看。谢谢！
回复221楼：版本不是问题，cs4都可以。只是界面有一点点不一样。我说明版本就是怕出现这个问题
回复312楼：谢谢提醒呵呵，
回复324楼：本帖主要是以简单为主，让很多新手卖家会做，所以觉得简单的大侠就不要拍砖了。谢谢！
?回复386楼：主贴主要是针对的自定义导航店招，非拓展版是看不见的，二楼写的动画模版是适合所有版本的，你去装修市场编辑的模版。是不能放在你自己的自定义去，淘宝扶植版在线编辑只支持店招编辑，免费的。其他都不行，你可以参考二楼的讲解用PS来制作，最后放在自定义，扶植版只有一个自定义很有限，所以你制作的全部要放在里面，你看还有什么问题，可以继续卸载帖子里面。谢谢！
回复390楼：不能直接保存。在文件菜单下&储存为Web格式才行，或者直接按快捷键：alt+shift+s也行。希望能解决你的问题！
回复391楼：谢谢！
回复405楼：关于收藏，在那里右键点击属性，然后复制弹出的属性地址。然后把地址复制到你需要连接的地方就可以了。回复519楼：不明白的可以回帖注明哪里。也可以加群讨论。
回复：助威的友友！同一种东西可能有很多种方法。所谓条条大路通罗马，但是只有适合自己的方法才是最好的方法，我只是分享一下我的方法，如果觉得烂。觉得无聊。觉得简单可以绕道。大侠就不要拍砖了。
最后编辑时间为
好贴！主持楼主！支持米客品尚---
米客&心&品尚,要你不一样！ 欢迎大家来我的小店逛逛~
米客通用会员 特价优惠喔~
最后编辑时间为
谢谢楼主哈！ 学到了很多！
这种实在的教学帖神马的，最给力了。
瞧一瞧，看一看咯，顺便学习学习
学习了 ，这个真不错哦，楼主很用心，给我们新手带来很大的帮助，希望有时间到我家坐坐
最后编辑时间为
好帖必须顶
& 很不错哦
呵呵,怎么还是看不明白哦,有时间好好研究下,
很实用的帖子，收藏了。楼主辛苦，挺你
好帖& 支持
原帖由 13楼 n多潮流数码
发表 好帖& 支持
图片太给力了
好简单实用！先收藏起来，慢慢研究！谢谢楼主的分享哦！
店铺装修得美美的，吸引顾客产生购买欲也是一种不错的营销哇！
&& 好贴~&&& 大家多来学习~&&&&&&&& 加油~~~~
太笨没怎么看懂
&顶下先&& 估计楼主哪个轮播的不能点击进去的吧& 轮播的没有超级链接的哦&&& 额& 还有那代码的什么的& 复制什么的额& 都没有说清楚哦& 要嘛就把代码一起弄出来的嘛 嘿嘿& 顶& 谢谢分享
最后编辑时间为
这个就是不用代码的。因为很多亲，做超链接用代码就晕了。呵呵。我代码也不是很熟悉。简单的会改改。不过PS还行。呵呵。见笑了
回复18楼。亲，哪里没看懂。看了一回帖提出来。
滚动代码我等会发上去。呵呵。
我来顶下21楼的！！！呵呵
谢谢大家支持哈。我顶。！有神马不明白的可以旺我。和回帖。！
图片太给力了
我来顶了，有空多教教啊，呵呵
继续添楼加砖
该帖处于完全锁定状态，不能回复
点,您的助威点数还有点
提醒:评论最多输入30个汉字，不支持英文和数字手机扫描二维码，把小组装进口袋
第三方登录：淘宝网如果用旺脯装修模版设置店招，需要我会PS吗？模版的图，人物图象是自己做的还是模版本身就有的？_百度知道
淘宝网如果用旺脯装修模版设置店招，需要我会PS吗？模版的图，人物图象是自己做的还是模版本身就有的？
人物图象是自己做的还是模版本身就有的？，只需要自己添加文字就可以了模版的图？&#47
任务图像什么的 要自己做
可以不会PS 只要会拍照 然后替换原来的图片就ok了
PS可以能更好的忽悠客户
其他类似问题
其他3条回答
是模版本身就有的
可以在网上下载的，有很多！
不需要你自己会PS，模板本身提供你图和模块。你直接输入你需要的文字即可。
等待您来回答
您可能关注的推广回答者：
下载知道APP
随时随地咨询
出门在外也不愁求助：宝贝详情页里面出现一个店铺活动模块是删不掉也不能更改的
& &真是奇怪了，才发现宝贝详情页里面冒出个店铺活动轮播图，不喜欢这种样子的，想删掉，或更改，在店铺装修里面看了，不能改也不能删，真是奇怪了。有谁知道怎样弄吗，求解，谢谢！&&
注册时间：
给您推荐一个免费引流的网站：http://t.cn/RhxmepS(复制网址到浏览器中打开) 我参加有半个月，每天花10分钟去宣传，效果挺不错
这个模块是淘宝免费推出的，一钻以下卖家，如果店内有活动信息，该模块会默认出现在详情页左侧栏最下面，除非店铺没有参加活动；一钻以上需要自己手动添加模块才会显示。不过找了很久，真不知道怎么删除这个默认自动出现的模块。
/catalog/thread/983096.htm?spm=0.0.0.0.dyDqyK希望这个链接的内容可以帮到你.....
上帝上先生 发表
这个模块是淘宝免费推出的，一钻以下卖家，如果店内有活动信息，该模块会默认出现在详情页左侧栏最下面，除非店铺没有参加活动；一钻以上需要自己手动添加模块才会显示。不过找了很久，真不知道怎么删除这个默认自动出现的模块。
谢谢，已经清楚了
上帝上先生 发表
/catalog/thread/983096.htm?spm=0.0.0.0.dyDqyK希望这个链接的内容可以帮到你.....
谢谢!已经清楚了。
我新手。也想删除，没找到怎么删，楼主能告知吗。
上帝上先生 发表
这个模块是淘宝免费推出的，一钻以下卖家，如果店内有活动信息，该模块会默认出现在详情页左侧栏最下面，除非店铺没有参加活动；一钻以上需要自己手动添加模块才会显示。不过找了很久，真不知道怎么删除这个默认自动出现的模块。
怎么删除的，还是不明白
亲是怎么删除的
有哪位亲人知道怎么删除吗，知道的加我旺旺联系我，谢谢好心人了
对啊 怎么删除的
淘宝卖家互助交流QQ群： ，期待你的加入！
使用有问题？
匿名回复（匿名回复的情况，大家不会看到你的身份）
点,您的助威点数还有点
提醒:评论最多输入30个汉字，不支持英文和数字淘宝店铺，买了模版装修，这之前自己用过的店招怎么还是会显示在单个宝贝的店招位置，怎么移除啊？_百度知道
淘宝店铺，买了模版装修，这之前自己用过的店招怎么还是会显示在单个宝贝的店招位置，怎么移除啊？
提问者采纳
装修完之后应该是可以换掉的，保存的时候有一个可选项：应用到所有页面
其他类似问题
按默认排序
其他1条回答
不可以删除？我购买的模板那一栏有一个查看购买的flash，看看这儿是不是能删除
您可能关注的推广回答者：回答者：
淘宝店铺的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}