如何导出PAT的源文件用于css背景填充

我以前经常有这么一个需求,网站看到一些很赞的背景纹理,下载下来是.pat格式,用户在ps中导入背景填充,但是问题来了,怎么提取它的源文件,用于css的填充呢?

对于前端来说,源文件的图片才是王道!需求里设计师有时候也会给你一个psd,里面有一个bg的图层,上面做了图案的填充,神啊,这时候要不你就让设计师给你提供源文件,要不就自己动手搞出来。(不要和我说你整张图直接切出来)。。

一些重复边界很明显的图片以前有一个办法就是画布弄大点,找到纹理的边界裁剪,导出,带来的问题就是裁剪的时候如果裁剪不准,

今天才发现!!竟然可以看到pattern的源图片尺寸大小。

如上图,hover上去看到源文件的数据,新建一模一样的画布,填充图片,同时点击原点对齐。再导出即可得到一张可以填充的图。

假设我觉得原图的图案太大,也有一个简单的方法缩小,比如我缩小50%,就新建一张200*200的画布,设定设定图片的比例,再点击原点对齐即可,导出即可。

希望对你有帮助。