《动画狗皮制作术》这是一篇小教程
这篇长微博中的内容仅针对于搜狗拼音输入法的皮肤。
繁琐的软件操作不是这篇的重点,我主要把皮肤的结构和所需的文件进行一些说明。
动态预览
既然是 动画 皮肤,大家会想到的便是使用GIF格式图片实现,可问题是透明背景的GIF边缘锯齿是其天生的硬伤,无法满足在各种有色背景下的无缝展示。好在这世上存在一种动态的PNG图片格式——APNG(基于PNG的位图动画格式),它集成了普通PNG和GIF的两大优势,问题从此完美解决(见上图)。
动手前先了解下狗皮的组成结构:状态栏+横排输入框+竖排输入框 ,需要绘制的图片素材数量还是不少的。
上图是制作狗皮所需的工具:通过Photoshop绘制整套皮肤的动态图库,交由APNG Anime Maker转换出最终所需的APNG格式图片,最后使用搜狗输入法皮肤编辑器耐心调试完成。
以下是获取APNG的方法
在Photoshop中绘制完动态后需要导出透明背景的图片序列,步骤如下:
千辛万苦画完所有动态并得到APNG后,接下来就是耐着性子在皮肤编辑器中调试了。
繁琐的软件操作不是这篇的重点,我主要把皮肤的结构和所需的文件进行一些说明。
格式显示对比 |
动态预览
既然是 动画 皮肤,大家会想到的便是使用GIF格式图片实现,可问题是透明背景的GIF边缘锯齿是其天生的硬伤,无法满足在各种有色背景下的无缝展示。好在这世上存在一种动态的PNG图片格式——APNG(基于PNG的位图动画格式),它集成了普通PNG和GIF的两大优势,问题从此完美解决(见上图)。
动手前先了解下狗皮的组成结构:状态栏+横排输入框+竖排输入框 ,需要绘制的图片素材数量还是不少的。
结构示意 |
工具们 |
上图是制作狗皮所需的工具:通过Photoshop绘制整套皮肤的动态图库,交由APNG Anime Maker转换出最终所需的APNG格式图片,最后使用搜狗输入法皮肤编辑器耐心调试完成。
以下是获取APNG的方法
在Photoshop中绘制完动态后需要导出透明背景的图片序列,步骤如下:
文件——导出——渲染视频… |
设置如图参数——渲染 |
APNG Anime Maker打开所有序列——保存 |
千辛万苦画完所有动态并得到APNG后,接下来就是耐着性子在皮肤编辑器中调试了。
感谢收看 |
热门话题 · · · · · · ( 去话题广场 )
- 解锁我的夏日旅行足迹地图 活动 20.3万次浏览
- 我给自己写了一个使用说明书 新话题
- 低谷期如何将“自怜”转化成“自爱”? 1.9万次浏览
- 遗落在草稿箱的过期日常 464次浏览
- 我在不同社交平台上的精神状态 2.9万次浏览
- 你画大家猜(猜电影) 11.8万次浏览