首页 电商 正文

如何自己制作个性店铺导航条

2024-03-21 09:08
admin

店铺导航是网店的一个关键部分,谁都想让店铺导航有特色,那么这就需要自己设计,自己制作了,今天我们就来介绍下如何自己制作店铺导航。 

一、我们现在去找一张图片,就是要做成底图的图片,宽度建议为1500以上,因为现在很多电脑都是宽屏的,如果太小了,两边会出现背景的填充了,我找到的是下面这张图片!这张图片命名为1

二、以下是PS处理,懂的可以了解下,不懂的可以跳过!

1、用PS打开这张图片

2、然后新建一个图层,画一个950PX*150PX的矩形!并靠顶部居中!

3、用裁剪工具剪下上面部分

4、裁剪好的图片尺寸是1500*150的,然后将那块红色的矩形隐藏(不要删除,后面还有用),保存图片就得到了下面这个图片,你将它命名为2

5、接下来将隐藏的矩形显示,之后按照矩形的大小裁剪,裁剪出950*150的效果图

6、裁剪好的图片效果就是下面这张了!将其命名为3

7、现在就按照自己的意思去设计自己喜欢的导航咯,内容自己选,你不喜欢首页按钮,不做就可以了,你如果需要联系QQ的按钮也都可以自己加进去的,我现在做了的分别有(首页、宝贝分类、关于我们、店铺动态、友情链接和收藏)

效果如下

7.1、以上效果做的过程为,先画一个矩形,用编辑→变形→倾斜效果将其做成倾斜的,透明度为44%,阴影颜色跟前色相同,达到以下效果

7.2、在加上斜线和文字就完成效果了!

8、接下来就是最重要的步骤了,想学的要耐心看下去哦!利用PS的切片工具将导航中的每一块按钮都分别切开,切好效果如下

9、接下来我们就保存它,选择PS菜单栏上的文件→储存为Web所用格式(快捷键:shift+ctrl+aly+s),在弹出的窗口中,格式选为jpeg品质为最高100

x

10、单击下面的“储存”,在弹出的窗口中,将格式选为“HTML和图像”然后再保存!

11、保存下来有一个images文件夹,还有一个网页文件!

12images文件夹里面就是切开的图片!

13、我们用记事本工具打开3.html文件(网页文件)

14、我们可以看到一切代码,看到这些先别头疼,其实很简单的,按照我说的做就可以了!

14.1、先删除……这部分以上的内容,也就是删除前面7行代码!

14.2、后面以后的内容也删除掉,也就是最后的3行代码!

14.3、剩下的就是我们需要的代码!

14.4、现在先将images文件夹里的图片上传到淘宝的图片空间里!名字不要改!

14.5、将代码中红线标出的本地图片连接换成刚刚上传上去的图片连接!

14.6、换的时候只要对应的名字去换就不会错了,比如images/3_01.jpg就换成图片空间里3_01的图片,全部换好后的效果如下

15、这样我们PS中要做的事情就全部做好了,接下来就要到自己的店铺里去装修了!先打开装修页面

16、我们先设置店招,选为“自定义招牌”,然后按下工具栏中的“源码”按钮,之后将刚刚我们修改好的代码全部复制到编辑框内!还有将高度设置为“150”!

  18、然后在点店铺编辑,选中“首页”图片

  19、再按下工具栏中的“插入连接”,输入你的店铺地址,按确定!

  20、这样做好之后,首页按钮就起作用了,其它分类都是这样添加就可以了!,找连接的方式很简单,只要你在原来的店铺中单击相应的按钮,打开页面后复制那个地址就对了!,比如“宝贝分类”,你单击一下宝贝分类之后就会进入宝贝分类的页面,然后复制地址栏里的连接,拿来做超链接就可以了!

是不是很简单,大家只要按照教程自己操作一遍就会了,如果有不明白的地方,欢迎到提问。

相关文章

  • 京东店铺在哪里修改价格?主图修改注意什么?

    京东店铺在哪里修改价格?主图修改注意什么? 现在有很多人在京东上开了第三方的店铺,京东对于这些第三方店铺还是有不少扶持计划的,而且现在马上就要到京东的618活动了,很多商家想要提前把商品价格修改下,那么京东店铺在哪里去修改价格?进入商家后台-促销推广-创建促销-单品促销,在这里就可以去修改价格了!京东商品主图修改要注意什么?1、京东商品主图图片在800*800像素以上,提供5张(不同视角,如正面、侧面、反面、产品细节图等,必须有一张商品主体

    2024-03-13 19:09
  • 京东快车上创意图片怎么换?要注意什么?

    京东快车上创意图片怎么换?要注意什么? 在商家选择使用京东快车来推广的时候,就经常需要调整推广的计划。因为在推广商品的时候肯定会需要进行测图测款的操作的,如果测图的结果不理想的话,商家也就需要考虑更换创意图了。那么京东快车上创意图片怎么换?要注意什么?京东快车上创意图片怎么换?京东快车的创意图片不能直接修改的,只能通过添加新的SKU 来添加新的创意。在“我的投放平台推广推广创意”这里加入的SKU ID后,选择添加,之后就看自己对应的商

    2024-03-13 18:41
  • 京东智铺店铺轮播图/图片热区配置操作步骤

    京东智铺店铺轮播图/图片热区配置操作步骤 本篇文章为大家介绍京东商家朋友最常用的轮播图&图片热区模块如何设置及常见问题,来看看吧:Q1: 如何设置轮播图&图片热区模块?操作路径:移动端/电脑端:进入装修页面-左侧装修模块中选择【轮播图】/【图片热区】-右侧属性窗口进行属性信息配置。,Q3:尺寸要求是什么?移动端:轮播图:请保证每帧图片尺寸一致。,导航主要包括店铺首页和商品栏目及各个单页面的导入链接。

    2024-03-13 18:18
  • 京东主图怎么做?要注意什么?

    京东主图怎么做?要注意什么? 相反主图不合格可能会造成商品下架、扣分。,方法就是通过搜索关键词,在首页展示的产品主图,都整体出来。,京东做主图要确定好自己产品的受众群体,了解这个品类是什么人群喜欢的产品。

    2024-03-13 18:15
  • 京东详情页图片怎么弄下来?图片有什么要求?

    京东详情页图片怎么弄下来?图片有什么要求? 第二步:这时候会跳出一个代码小窗口,选择下图红色选框中后缀为.jpg的一串网址进行复制。,各入口图大小规范:1、项目页首屏图主图,此图不需要出现品牌或者宝贝名称,只需一句核心广告语和若干几个主要卖点尺寸 :650×420px体积:小于100k2、新版众筹首页列表图尺寸:280高( 220< 高<500,表示宽度为280px,高度可以在220px到500这个区间,此图无文字)体积:小于5

    2024-03-13 18:10
  • 京东快车创意图规则是什么?怎么做?

    京东快车创意图规则是什么?怎么做? 一般消费者购买茶叶,对于是否是新茶相当在乎,对于这种具有时令特性的产品,在创意图上说明茶叶采制时间,就相当关键了。,2、图片简洁大方现在逼格高的网站图片或者app,版式设计都是简洁大方,给人一种高逼格的感觉,尤其是高档产品,创意图尽量选择简约风格。,3、突出利益点一张创意图不仅要说明产品特点,能够满足消费者什么需求,例如“买二送一”,像这种利益点,一定要说明,充分利用人爱贪小便宜这种心理弱点。

    2024-03-13 18:08
  • 京东的图怎么扒下来?如何保存?

    京东的图怎么扒下来?如何保存? 现如今有很多在京东平台上购物的消费者,吸引了很多卖家选择在平台上开店发展,而在上架产品后需要设置好产品的图片,很多卖家会想要使用别人店铺的图片,下面来介绍京东的图怎么拔下来了?京东商品主图保存方法一:第一步:打开京东商城,找到自己喜欢的产品。,第二步:在打开的商品页面中缩略图区域,鼠标“右键”点击任意一张要查看原图的缩略图,选择“在新标签页中打开图片”,出现一个缩略图的新页面。,我们了解到京东的图

    2024-03-13 17:56
  • 京喜店铺新品发布素材需要准备什么?

    京喜店铺新品发布素材需要准备什么? 商家在京东开放平台开设京喜店铺,新品发布需要准备好以下这些素材,那样在发布新品的时候就会水到渠成。一、商品主图商品主图可以提升点击率,建议10张图上传满,可以依照核心卖点图、细节图、场景图、资质图等顺序上传。图片规范有强制要求,不合规会影响产品上架同时系统会自动检测违规扣罚。①尺寸:800*800PX②分辨率:72DPI③格式:JPG/JPEG/PNG④大小:小于2M⑤禁止出现:涉黄内容、违禁商品

    2024-03-13 17:54
  • 京东快车怎么修改创意图片尺寸?有哪些尺寸?

    京东快车怎么修改创意图片尺寸?有哪些尺寸? 那么,京东快车怎么修改创意图片尺寸?有哪些尺寸需要注意?本文将为您详细介绍。,图片大小需要控制在合理范围内,以保证广告的加载速度和用户体验。,希望这篇文章能够帮助您更好地了解京东快车创意图片尺寸的修改方法和注意事项。

    2024-03-13 17:50
  • 京东快车如何更改创意图片尺寸?尺寸要求

    京东快车如何更改创意图片尺寸?尺寸要求 京东快车作为平台商家经常使用的付费推广工具,能够将商品直接推荐到精准客户面前,但想要吸引用户点击,就得在创意图上面下功夫。,只有定位清楚才能更好的制定创意设计方案,使创意更具有针对性。,同时创意图中的文字要简洁明了、有针对性,图片一定要有吸引力、表现力,能够让目标客户看一眼就知道产品卖点,从而愿意点击进入到商品详情页里面查看。

    2024-03-13 17:49