前语

真让我有点意外，我今日也只是顺手发了一张，自己喜爱的日常日子户型的PS合成图，引来了一波JYM的围观。没想到，这个效果图有这么多掘友们的喜爱，其时我也只是出于打卡的心态，发一发日常牢骚哈哈哈。有掘友说为啥我到朋友圈之后，动图变成静态图了（那是由于我上传的是webp格局，后边内容我会附带上导出的Gif格局图给掘友们发朋友圈）。

还有甚者，私信我，要我赶紧出图，，突然脑壳大了起来；既然如此，我就萌生了一个想法，出一波小教程，持续更新下去；我想着，PS的技术在做前端独立完结页面规划和图片交互、图标规划方面，是个大大的助攻；倒也不失为一种技术分享；此前我也怀着这样的一个心态去学习捣鼓的，由于兴趣使然，究竟做前端，更多的是对视觉性更感兴趣。

沸点地址：这个户型我是，爱了，要存钱存到什么时候才能够

在没有UI规划师的时候，前端想要完结独立的项目规划，要想规划好看的页面，真的少不了切图仔专用的PS技术；另外一方面，在日常日子中，也是处处带有规划，有时候空有灵感，却止步于想象，而无法将其描绘出来；但假如咱们增加多PS这一项技术，是否更助于咱们的日子和作业呢？我是觉得多学一项技术是不错的，；

这个动图其实也简单；假如感兴趣能够点赞+收藏+重视+谈论哟，正在参与比赛，后续依然会在该专题下更新我更多的小创造哈哈哈

不废话了，直接上我的小笔记；

过程

平面深化过程：

1，导出平面图为PDF格局，打印尺寸尽量挑选小的尺寸，这个你们能够自由发挥，找张网络图做底图，或许有功底的友们能够用procreate绘出来；

2，导入PS进行编辑，这儿要注意巨细是1:1或许3:4的画布哦。

3，填充白色底图后，开端拉动态贴图摆好方位，动态贴图PSD没法上传，需要能够找我

4，深化平面布置，地上原料，墙体填充，家具投影，哈哈这个过程是平面图的规划，内容太多，以后再说，去网上找一个你自己喜爱的平面图也能够。

5，关键过程来了，这儿才是我首要想说的， PS打开→窗口→时刻轴。

6，在时刻轴操作页面，按每一帧显示内容（逻辑就是一帧为一个图片，组合起来就是动画），设置一下顺序，上图每帧0.1秒，重复方法为永远。

7，点击播映键，预览没问题的话就点击左上角文件 →导出→贮存为 WEB所有格局，:贮存页面挑选画质为原稿，点击贮存(此时文件保存为 GIF 格局)后边重命名为WEBP格局就能够啦。

注意事项：

1，尽量采用1:1或许3:4份额，巨细不能够超越20M，时刻不要超越3秒，为了保证长宽距离不大。
2，图片格局必须是WEBP，假如是GIF能够直接右键经过重命名改名称。

赠送

在这，因PSD文件无法上传，就先赠送两张GIF(在文章最后)，满意感兴趣的掘友们，hah,能够发朋友圈了； 喜爱的话，欢迎重视，我的专题栏：前端UI+绘图；

由于是参赛文章，所以希望您能点赞、谈论、转发或许谈论+666

弥补阐明

我上传的是gif图，可是自动转换成了webp,你能够电脑对着图片鼠标右键保存下来，然后本地修正文件后缀名为gif就能够了。