拓展版如何设计网店店招及店招导航

时间:2011-07-18 20:11 来源:未知 作者:地瓜 浏览: 3904

我是拓展版,导航可以做到店招的上面吗?最近有看到挺多卖家在问使用拓展版导航的问题。那么拓展版如何设计网店店招及店招导航?今天要跟大家一起学习怎么做一个漂亮的店招和店招下面的淘宝网店导航连接。注意:本教程仅仅适合拓展版!

步骤一:打开PS作图软件,进去软件之后按组合键 Ctrl+N 新建图片 宽度为950 高度为264 如下图:

点击右上角的确定之后 会出现一个您刚刚建立的大小为950*264的空白图片,接下来保存,点击左上角的 文件 然后存储为,不懂看下图:

注意:存储时候的格式一定要是下面图片显示的格式

点击确定保存

这个时候应该在桌面上出现了一个名为 未命名-1(未标题)的文件

这个时候可以说是完成了三分之一了吧 ,这会还需要另外一个软件“美图秀秀”。ps入门级选手可以采用ps作图,不会ps的且看接下来看美图秀秀的表演:

步骤一:用美图秀秀打开刚刚创建的图片,如下图

主意下 我画红线的地方,左边显示的是刚刚图片的名字右面显示的是图片的尺寸

步骤二:为该图添加您想要的文字说明 和文字导航,点击美图秀秀上面的文字按钮,点击左侧的输入静态文字

会出下面的界面

由于图片是白色的,所以咱们文字颜色就用黑色的!为了让文字更漂亮一点,我们选择了字体是立体字。

为了让文字的结构好看 我把"小花"两个字分开输入的 这样就可以自由移动两个字的位置了,“小”我选择大小为135号字“花”我选择了大小为115号字,字的位置尽量往上面放

为了让左下角看起来不那么空缺,那么就在那加个英文单词吧!看着也潮流一些!我就加个 FLOWER吧!选择一个漂亮的字体,就用@华文行楷好了,注意字体要让他竖着显示不要横着显示如图:

这样左面是不空了,可是右面又空了,所以我干脆就在右面给自己提首诗吧“花为凌寒独自开”好了!

接下来为大家揭秘一个疑问,为什么这字的位置都是往上,而下面还空了好多了,呵呵,这个地方是最重要的地方啦,因为你的店铺导航就放在那里,没有这个店铺就不够完美了!导航怎么可以和店招放在一起??等着为大家揭晓吧。用同样的方式给这个地方添加文字,选择一个喜欢的字体,我选择了苏轼字体,没有的可以找我要,大小我选择了30号字,

注意地方可以添加任何你想要的导航,比如首页、 信誉评价、友情热荐、关于本店、交流区,等等 等等,我就不用这些了 因为那样和以前就一样了我觉得就没有了个性,我是卖女装的 所以我干脆就改成了首页、全部宝贝、背心、开衫、裤子、裙子,等等这样也方便买家搜索:

到了这可以说店招导航弄了快一半了,整体效果也就这样了 ,把这个保存到电脑上,应该名字是未命名-1的副本,接下来看看神奇的事吧, 我们要让那些导航能用才行 现在这样放进去肯定什么都点击不了。这个时候我们还得用到PS软件了,这就是我要说的PS切片工具了,来大家和我继续研究。

步骤一:用PS打开刚刚做好的图片,找到左侧的工具栏,选择切片工具

这个时候把鼠标放在图片上应该会显示一个 刀子样式的光标, 那么我们有了刀子就可以切了,但是也不要乱切,需要哪里切到哪里,我们要切的就是 全部宝贝、背心、开衫、裤子、裙子,这些地方,从现在开始大家要用心看,是最关键的步骤也是最难的地方,注意啦

选择好切片工具大家看上面 有个样式 那里选择固定大小 由于我的导航大部分都是两个字的 所以我尺寸弄到64*32这样操作更方便一些 宽度不够自己拉伸一下就可以

现在开始切图 把鼠标放在导航文字周围进行一个个的切图 看图

这样 图片就被我们切了然后 点击PS左上角的文件 选择存储如图

接下来点击存储 一定记得选择这个

 

因为切图是html和图像一起使用的 但弄一个都不能正常使用。现在我们看看桌面上多了两个东西

如果能找到这个说明我们之前操作全都正确!

步骤二:将images里面的图片全都上传到图片空间里面,将另外一个文件用记事本的方式打开 会出现我们熟悉的 源代码,接下来我想大家都应该明白了,把源代码复制下来,在店铺首页创建一个自定义内容区 将代码黏贴上去,看看大家看到了什么,

呵呵呵 大家应该很惊讶的 因为大家看到的是一大堆叉叉,不用担心我们要让这些叉叉变成我想要的图片。

接下来的步骤大家就可以松口气了 因为大家比我都熟悉的装修步骤,现在可以说就是一个装修模版了。双击显示叉叉的地方

出现了这个界面,我刚刚告诉大家把images的图片上传到了图片空间里,那么现在去里面找到你想要的图片,记住图片不用乱黏贴,大家看到我这个后面显示的是05.gif 所以大家找到图片空间里面的05.gif 把这个地址黏贴上去,所有的图片都这样黏贴上去就OK了,等您保存的时候就能看到一个完整的图片了。然后像什么 首页啦 全部宝贝啦 您双击进去下面有个连接地址输入您要链接的地址就全部OK啦,这样就可以正常使用了!

觉得本文有用?

精彩评论

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • 赵芳
    2015-04-07 09:47:57发表

    拓展版什么意思 和平时用的有什么不一样

  • 小可
    2011-09-15 17:06:10发表

    旺旺下面怎么添加底图啊?

  • 游客
    2011-07-20 23:16:48发表

    我的PS怎么没看到有切片功能啊?只有剪裁功能?这个是怎么回事啊?做到切片这1步都没办法继续学下去了……楼主用的是哪个版本的PS啊?有下载地址吗???是否是收费的啊?? 管理员回复: 我用的是CS4的PS,应该都有

推荐阅读

  • 淘宝店铺装修在线制作

    很多新手朋友对ps并不是很懂,或者说一窍不通,那么想制作一些自己的店招,分类,店标等等怎么办呢?淘宝学堂装修...

  • 如何让店铺视觉直接提升销售额

    最近碰到很多的卖家都在纠结自己的店铺视觉,总感觉自己的店铺风格不是自己需要的,我发现很多店主还是在凭自己的...

热点排行