前端UI：给切图仔升级新技能，学会 PS 动图制作

前言

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

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

image.png image.png

沸点地址：这个户型我是，爱了，要存钱存到什么时候才可以^[2]

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

这个动图其实也简单；如果感兴趣可以点赞+收藏+关注+评论哟，正在参加比赛，后续仍然会在该专题下更新我更多的小创作哈哈哈

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

步骤

平面深化步骤：

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

2，导入PS进行编辑，这里要注意大小是1:1或者3:4的画布哦。

3，填充白色底图后，开始拉动态贴图摆好位置，动态贴图PSD没法上传，需要可以找我

4，深化平面布置，地面材质，墙体填充，家具投影，哈哈这个步骤是平面图的设计，内容太多，以后再说，去网上找一个你自己喜欢的平面图也可以。

5，关键步骤来了，这里才是我主要想说的， PS打开→窗口→时间轴。

image.png

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

image.png

7，点击播放键，预览没问题的话就点击左上角文件 →导出→储存为 WEB所有格式，:储存页面选择画质为原稿，点击储存(此时文件保存为 GIF 格式)后面重命名为WEBP格式就可以啦。

1.png QQ20230209-210457.gif

注意事项：

1，尽量采用1:1或者3:4比例，大小不可以超过20M，时间不要超过3秒，为了保证长宽差距不大。
2，图片格式必须是WEBP，如果是GIF可以直接右键通过重命名改名称。

赠送

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

dong.gif

因为是参赛文章，所以希望您能点赞、评论、转发或者评论+666

补充说明

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

关于本文

作者：糖墨夕

https://juejin.cn/post/7198135791234613303

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

 》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持