切图规范以及静动态素材使用的规范

切图规范

在搭建和切图的过程中需要考虑到后期会发生的修改和调整，例如文字可能会被替换或增加图标翻牌器等。由于可能会有其他人参与到后期修改工作中，因此切图和搭建时尽量考虑后期要更方便改动

图量

交互

地西

我的

金王驰名招商

标准商责

整体切图发生形变

标题与模块背景整体切图,高度变化时造成拉伸形变

标题与模块背景分开切图,高度变化时方便调节

只需替换LCON部分

想

装饰底盘与LCON分开切图,如要更改或增加新图标只需替换LCON部分

装饰底盘与LCON整体切图,如要更改或增加新图标需要拿到源文件

如果是合成背景图片或一些不会经常改动的图片则可以合并导出为一张，一来搭建时减少图层数量整理起来快速简洁，二来图片数量减少可提高页面加载数量尤其在进行过压缩处理后

节点管理

投融保研能力

13:52 0

GROUP 1378

投

保存为素材

312

3209

分开切图加起来有3.1MB

100

MASK GROUP

4465

光明

光照下

MASK GROUP

303

2651

合并切图通过压缩只有451KB

1542

西布 1920X1080 65%

素材格式与压缩

素材格式

常用的素材包含静态/动态两种格式：

静态格式：图片JPG+透明图片PNG

含有透明通道的图片导出PNG格式，不含透明通道的图片导出JPG格式（同张图片体积会小于PNG格式）

动态格式：动图APNG/WEBP+视频WEBM/MP4

Ae中制作的动态效果可以利用图片/视频组件展示，导出时选择判断如下：

1、播放时间较长或非透明背景的情况下导出成视频（MP4或WEBM格式）

MP4文件制作方法：AE导出为常用视频文件（MOV等格式），通过Permute3软件转换格式为MP4

WEBM文件制作方法：借助Me/Pr及Fnord插件将AE文件转换为WEBM格式文件导出

详细参考：

https://dtstack.yuque.com/tfclba/sld1wg/gaqy2k

2、播放时间较短或包含透明通道的情况下导出成动图（APNG或WEBP格式）

APNG/WEBP文件制作方法：AE导出为PNG序列帧，借助

Animatrice/Isparta等软件转换格式为

APNG/WEBP

详细参考：

https://dtstack.yuque.com/tfclba/sld1wg/yygcou

压缩

实际项目中客户电脑的性能配置不可控，上传的图片/视频体积过大会严重影响页面加载速度带来比较差的体验，所以在大屏搭建时在保证清晰度的情况下尽量压缩图片、视频等素材的大小，优化大屏性能。

📥

静态格式JPG/PNG文件压缩：

●

https://squoosh.app/

●

https://docsmall.com/image-compress

●

https://tinypng.com/

非动态图片尽量压缩到1M以内

📥

动态格式MP4/WebM文件压缩：

●

Permute 3（MAC）

https://www.macw.com/mac/47.html

●

HandBrake（MAC）

https://handbrake.fr

●

格式工厂（Windows）

http://formatfactory.org/CN/download.html

切图规范以及静动态素材使用的规范

分享方式

回答

全部1条回答

热门话题

关注我们

官方媒体