快消品货源批发市场
快消品货源分销平台
 
 
当前位置: 货源批发网 » 网商学院 » 网店装修 » 淘宝店铺装修 » 透明个性店招完美呈现的打造过程

透明个性店招完美呈现的打造过程

放大字体  缩小字体 发布日期:2024-04-03 07:47:57  来源:电商联盟  作者:乐发网  浏览次数:22

  在装修旺铺专业版的个性全屏页头时,发现存在一个问题:插入的全屏页头背景图与店铺招牌中的图片错位,没有完美的重叠在一起,如图显示。

  
  针对如何解决这个问题,我有一些心得与大家分享,希望能帮助到碰到这个问题的新手卖家们。
  
  提前说明:本人使用的是PHOTOSHOP CS2(简称PS)中,其他版本的PS软件同样可以按照图示操作的。
  
  第一阶段:关于制作个性的全屏页头背景图片,在这里就没有必要多说了。大家都是根据店铺活动制作的。亲们可以参考将背景图片大小设置为宽度1920PX,高度150PX.
  
  第二阶段:在PS 中,将全屏页头背景图片中的店招部分截取出来(宽度950PX;高度150PX)。
  
  PS打开页头背景图片后,点击工具面板中的‘矩形选框工具“->设置”样式“为固定大小,宽度950PX,高度150PX。任选取虚线选区,创建与选区同等大小的图层1.
  
  选中图层1,填充图层内容为方便操作的颜色。
  
  按CTRL+D快捷键取消图层1的选区,按CTRL选中图层1和背景。
  
  点击菜单栏上的”图层“->”对齐“->”水平居中“。这样可以正确截取背景图片中店招的内容。
  
  在图层面板中,选中图层1,按住CTRL键不放,再次点击图层1,完成对图层1的全选,形成宽度950PX、高度150PX的选区->删除图层1.
  
  删除图层1后,虚线选区直接出现在背景中,按住CTRL+C,对背景中店招部分的图片进行复制。
  
  点击文件->新建->在弹出窗口,默认设置,按确认->生成新的图片。
  
  按住CTRL+v快捷键,将选区的内容粘贴在新图片文件中,自动生成图层1.将背景图片店招部分的图片截取出来,
  
  第三阶段:利用PS的切片工具,对店招图片进行切片;编辑切片选项,插入相对应的页面链接地址。
  
  弹出如下窗口,在URL输入页面链接地址,其他默认,按确定
  
  对需要插入页面链接的切片区域,重复第2-4步的操作。
  
  第四阶段:在ImageReady中,生成image文件夹和html网页文件。
  
  点击”文件“->”在ImageReady中编辑“,打开ImageReady程序。
  
  在ImageReady打开切片的背景图片后,点击”文件->-“将优化结果存储为(m)。
  
  在弹出窗口中,为方便管理文件,建议如下图新建文件夹,让自动生成的文件放入该文件夹。(第3步也可以不考虑操作,视个人需要)。输入新建的文件名,同时必须将保存类型设置为”html和图像(*.html)。
  
  按保存即可在新创建的文件夹里自动生成image文件夹和HTML网页。
  
  双击打开image文件夹,看到自动生成的都是GIF图片。
  
  第五阶段:针对image文件夹中的每一个GIF图片,在PS中,制作与其同等大小的PNG图片。
  
  在PS中,打开image文件夹里的gif图片,按住CTRL+A,全选,再按住CTRL+C,复制选区的内容。点击“文件”->“新建”。
  
  弹出对话窗口,背景内容必须设置为透明。按确定后,生成背景透明的图片。
  
  将图片存储为WEB所用格式,保存图片为PNG图片。
  
  在弹出的对话框中, 图片格式必须设置为“PNG-8”,按存储。
  
  弹出“将优化结果存储为”窗口,建议新建的png图片命名与同等大小的gif图片命名一样,方便后续网页代码中图片地址的替换。保存类型必须为:PNG格式。
  
  针对其他的GIF图片,重复第1-11步的操作,生成同等大小的PNG图片。操作完毕,将新建的PNG图片都上传至图片空间。
  
  第六阶段:将网页代码中原先的GIF图片替换成PNG图片。
  
  用记事本方式打开网页代码进行编辑。
  
  进入图片空间,复制PNG图片地址,再返回记事本中替换GIF图片地址。
  
  第七阶段:制作透明店招
  
  所有png图片地址替换后,复制整个代码。登录店铺装修页面,从首页进去店铺招牌编辑窗口。
  
  透明店招的效果如下图:
  
  第八阶段:插入页头全屏背景图片
  
  保存的全屏效果如下;

乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。

本文内容整合网站:百度百科知乎淘宝平台规则

本文来源: 透明个性店招完美呈现的打造过程

分享与收藏:  网商学院搜索  告诉好友  关闭窗口  打印本文 本文关键字:
 
更多..资源下载
淘宝店铺装修图文
淘宝装修子账号设置流程 淘宝店铺装修如何实现全屏轮播
7个步骤打造史上最牛详情页 淘宝店铺,天猫店铺背景固定的方法。
淘宝店铺装修网商学院推荐
淘宝店铺装修点击排行
 
手机版 手机扫描访问