淘宝装修满屏通栏设计方法,有图有真相

2021年1月25日发(作者：蓝洄)




淘宝店铺全屏漂亮背景大图制作详细图解，直接进入正题。 想大多数卖都看到很多商城卖
家的首页那漂亮大气的全屏
（宽屏）
背景大图了吧，有没有想自己的店里也弄一个？只要你
会一点
PS
，错！只要你有个
PS
软件，






我就教你做出来，

但前提是你的旺铺版本支持，设置背景图片据我了解应该是拓展版 以上
或商城才可以的。如果你的版本是拓展版以上的，那我们现在开始动手做吧！






因为商城跟集市的制作有点不一样，
现在我们以集 市店的为例，
集市店拓展版最终效果展示：

















一、准备工作








一个
PHOTOSHOP
图片处理软件，
一张你准备做 店铺首页背景宣传的大图片，
建议
图片宽度是大于或等于
1440PX
，没有
PHOTOSHOP
的朋友，可以去下载一个哦，
（我用的
是
CS4
版本，至于什么版本好，这个根据个人习惯）

安装很容易的，所以安装的步骤我也< br>不详说了。不要怕麻烦，凡事都要自己动手了，能才从中学到东西，学到经验。


二、图片处理

1
、
安
装
好
PS
后
，
打
开
界
面




接着点击

文件

打开

，








把
你
要
的
制
作
的
图
片
打
开
到
PS
里
面







2
、把图片裁成宽度大于或等于
1440
像素的宽度，高度取决于你自己的要求，一般是
600
－
750
像素就可以了。首先打开剪裁工具，






淘巧好，好淘巧



然后操作就 跟
QQ
软件里的的剪图类似，
裁出来的图片如果宽度跟
1440
像素 相差不大的话，
就可以通过图像大小来调整一下，


在宽度里输入
1440
，后面的记得是像素，不是厘米哦！还有下面的约束比例也要勾上，这
样图片就不会变 形了。


3
、
1440
像素宽度的图片剪裁完后，接着在 这个图片里剪裁出
950
像素的图片，因为淘宝全
通栏的大小是
950
像素。至于
950
的图片怎么剪裁，这里就比较重要了。


首先 我们可以把图片
1440
像素分成三份，
245+950+245
＝
1440
！
245
是
19
寸宽屏两侧背景
其中一边的像素。

4
、我们新建一个
PS
文件

宽度是
245
像素的新文件，高度可以随便。

在左侧工具栏，切
换到
“
矩形选框工具
”
，
选中新建的文件
“
未标题－
1”
按着
CTRL+A
键， 会有虚线显示全选
了这个空白的图像，

点着鼠标左键不放，把虚线边框接到左边的宣传图片，并如左边边缘
对齐。

在这里需要把标尺调出来作为参考


接着在工具栏里选择
“
移动工具
”
，
在标尺里面拉出一条浅蓝色的辅助线，
跟虚线边框右边缘对齐，
那么宣传图片左边边缘到辅助线的宽度就是
245
像素了，
右边的 操作同样，
这里就不
再详说了。


两边的辅助线出来后，就使用< br>“
剪裁工具
”
，两边对齐辅助线


按一下回车，就可以把
950
宽度的图片剪裁出来了。


然后把
950
像素宽度
700
像素高度的图片保存成
JPG
格式的图片。



漂亮的淘宝店铺全屏背景大图制作详细图解
(2)

5
、按编辑， 后退一步。把图片恢复成没有剪裁前的
1440
像素的宽度。前面的工作，无论
商城或 集市店都是一样的。
那么下面的两侧的背景图，
就有点不一样了。
因为商城上面有一< br>栏是红色信息置顶，
所以背景图不会覆盖到上面，
但集市店就不样了。
集市店头 部导航上面，
还会显示背景图片的。
所以这两个地方有点不一样，
这个也只是大同小异 ，
原理还是一样的！

6
、背景图，以集市店拓展版为例，新建一个宽是1440
像素，高是
934
像素的。








图片上面的
1
是顶部
112PX
的高度，
2
是我本店导航的高度
135PX
，
3
是 分隔线的高度
10PX
，
一共是
257PX
，
这个你们可以 根据自己的导航高度调整，
不是固定死的。
然后用
”
移动工具
“把
1440
宽
度
的
图