查看: 12016|回复: 3
上一主题 下一主题 跳转到指定楼层

如何制作动态搜狗输入法皮肤

385

主题

961

存在感

79

活跃日
 5 

SOS团二星级★★

发帖: 1848
SOS币: 94114
注册: 2009-02-04
访问: 2023-02-20

楼主
发表于 2013/06/04 | 编辑

猜你喜欢: japng_editor_r119_2008-10-19rar, japng-editor, 搜狗动态皮肤制作


搜狗很早之前便提供了基本的静态输入法皮肤编辑器,也能够满足绝大多数DIY爱好者自行制作皮肤的需求了。虽然搜狗后期推出了Flash动态皮肤,可谓静态向动态转变的一大脚步,然而,面对Flash制作的一个技术门槛,加之修改所牵涉到的诸如“接口”等专业术语更是让人不明觉厉的同时让大量初心者望而却步。

然而,除了Flash动画外,其实搜狗也支持另一种动态皮肤的制作方式,即是用动态的图片做静态的皮肤,没错,就是使用GIF(Graphics Interchange Format)图像。然而GIF也有它自身的不足,作为一个位图图像,它并不能很好地支持alpha通道的透明像素。这就意味着,如果我们制作的GIF包含一个过渡的透明效果,在实际显示时可能就会显得惨不忍睹。

那么,难道没有解决的办法么?搜狗的静态皮肤支持JPG,PNG,GIF三种图片,JPG不支持透明,GIF的透明又不完全,PNG虽然支持透明但是没有动画……

等等,是谁告诉你PNG没有动画的?

解决方式就是使用动态的PNG格式,即APNG(Animated Portable Network Graphics)。发现这个格式简直就是一片新大陆,而搜狗居然支持APNG的显示更是让人欣喜若狂。因为APNG未能通过审议进入PNG官方标准,现有支持APNG动画的只有FireFox和Opera,其他浏览器需要通过安装插件才能正常显示,否则只能显示APNG动画的第一帧。

APNG和PNG拥有一样的扩展名(*.png),所以可以直接在搜狗输入法皮肤编辑器里面调用。若要制作APNG,你需要安装一个Java环境,并且使用这个Java程序:japng-editor。(你也可以选择安装一个FireFox和对应的插件。)

首先在Photoshop里按照做GIF的方式,做好动画的各个帧:
这里就用之前洛天依的动态皮肤做示范:

图片需登录后查看


然后将每一帧都保存成PNG图片:

图片需登录后查看


解压下载好的 japng_editor_r119_2008-10-19.rar(长期没有更新,你下载的应该和我是一样的),双击打开 japng_editor.jar (Java安装完毕的话这个文件应该是一个咖啡杯的图标,也可能被WinRAR识别成ZIP文件,请手动选择用Java打开)

图片需登录后查看


选择Load frames or animation,倒入之前的动画帧,然后设定好各帧的显示时间,右下角可以进行预览,最后选择Save animation保存就可以了。

剩下的过程和使用一般PNG图片没有任何区别,注意皮肤拉伸区域不要进入动态的部分即可。

关于我们|无图版|SOSG WIKI

Copyright © 2006-2024 SosG.Net
Total 0.043687(s) query 7, Gzip enabled,  沪ICP备07006640号-3