淘宝店铺装修
中小卖家店铺装修技术篇
2024-04-01  浏览:22

中小卖家装修过程中用到最多技术应该是切片和代码,今天就告诉大家怎样来切片和使用代码。

1丶需要2个软件,一个是photoshop 另一个是dreamwear ,我这里用的都是CS6版本的。
首先使用的是photoshop
先切图,用最简便的方式在图片上面拉出参考线,如下图
1.png
选择切片工具
2.png
选择基于参考线切片
3.png
选择基于参考线切片之后效果如下:
4.png
上面那个大图被切成了2个,太多了,现在需要给合并起来,用组合切片工具来实现。
选择切片选择工具:
5.png
选择第一个切片的时候会出现黄色的边框,然后按着Shift选择第二个切片,同时出现黄框,之后右键出现组合切片,完成组合。
6.png
完成组合之后效果如下:
7.png
现在上面的大图就变成了一个切片。
现在切片都切好并且按着自己的方式已经组合完毕,就可以导出图片和代码文件了。
选择文件,储存为web格式:
8.png
选择所有切片,并且格式设置为jpg,若需要透明图片的话可以选择png格式,质量80即可。
9.png
之后选择存储。
设置如下图所示:
10.png
文件名尽量设置一个可以识别的,有意义的名字,格式选择html和图像,切片选择所有切片,之后点击保存即可。
11.png
保存之后出现上述文件。
images里面的图片就是咱刚才切的图。
12.png
到这里photoshop已经用完了,下面就开始使用dreamwear来编辑代码。
先登录淘宝账号进入卖家中心点击图片空间上传图片
13.png
14.png
选择适合自己的图片上传方式上传图片。
15.png
16.png
点击立即上传即可。
上传之后就是使用dreamwear了,代码什么不懂的或者想了解更多资讯的可以
加群:17054982 (备注L001,不然不通过),可以交流一下。
打开之前生成的html文件
17.png
打开设计视图。
选择其中的图片,在下面属性里面看到如图效果(如果没有出现属性,可以在视图里面找到属性点击即可)
18.png
之后进入淘宝图片空间找到对应图片,点击链接
19.png
现在已经给图片地址复制下来了。
然后进入dreamwear给地址粘贴到属性下面地址当中,如图所示:
20.png
这个就给图片换好了,其他图片也是一样的步骤。如果需要给图片加链接,在属性里面那个链接的地方添加需要添加的链接即可。
这些都添加完成之后在dreamwear中点击代码模式,给里面的代码全部复制下来。
21.png
之后进入淘宝后台店铺装修页面,在自定义模块里面点击源码方式,给刚才复制的代码粘贴上面即可。
22.png
到此就完成了基本的装修。
发表评论
0评