PngQuant 转出柔边png256色档的好工具

mogom

PngQuant 转出柔边png256色档的好工具

PngQuant是个非常好用的一转档工具，它能把一张全彩并带有alpha柔边去背的png图，转成256色图并最佳化alpha柔边的png图，因而得到一张png256色并带有柔边的去背的图。在下所使用的是photoshop7，在使用上输出成png256色时，去背的边缘锐利是一直无法解决的问题，所以才用PngQuant工具来达到成果。

!!PngQuant并非是一个能够将有锐利边缘的图转成无锐利边缘的图，邊緣的的綐利要先經影像處理軟件處理。


图解教学(以能利于RPGViewer汇入太阁立志传Ｖ为主)

PngQuant主要功能是把一张去背的png图，转成256色以下的去能图，其特点就在于转存后能保有全彩时的alpha。PngQuant只有转档的功能，对于图片的编辑就得利用其它的软体来完成，而在下所使用的是繁体photoshop7来编缉图片，造成不便还请多包含。


photoshop的前制作业

０１. 首先准备一张自己想要转的图。(图1)

(图1)

０２. 在photoshop里建立一个图层，用黑色填满新图层，填完后放至最下层。(图2)

(图2)
！在填满色彩时用其他色也行，在此习惯用黑色来填。

０３. 放至好后按住ctrl键点选另一张自己所要输出图的主图层，让图片出现了选择区。(图3)

(图3)

０４. 按下shift加ctrl加e键来合并可见图层，或进入 图层→合并可见图层。(图4)

(图4)

０５. 当图片在有选取范围的情况下进入 图层→增加图层遮色片→显现选取范围(图5-1)或键下图中箭头所指地方，以来完成用alpha(图层遮色片)去背的步骤。

(图5-1)
！用alpha去背完成后，看看色版的部份，可以看到多出了一张以的对应去背图层的色版。(图5-2)

(图5-2)

０６. 为能在汇入RPGViewer不至于出现去背的错误，要再对遮色片做处理，选取图层右边的黑白图片，再进入 编辑→填满，填入1%的黑色。(图6-1)

(图6-1)
！如果不这样做，在汇入RPGViewer后就会出以下图片的状况(图6-2)

(图6-2)

０７. 完成后进入 影像→影像尺寸，将图片设定为宽度304图素、高400图素的大小，按下确定完成后存成png档，完成一张png全彩及用alpha(图层遮色片)去背的图片。(图7)

(图7)
！如果要制作太阁Ｖ的小图示话宽高都为80图素

在合并可见图层选取区会不见的话，在做出选取区后储存选取范围，进入 选取→储存选取范围，待要利用選取區再取出使用。
图解教学是利用于太阁立志传Ｖ的作法，在过程中比较麻烦，如果要利用于网页的话，只要在photoshop里挖空背景成为透明区域，就可以直接给PngQuant转成256色的png档。但如果用此方法汇入给太阁Ｖ使用的话，在游戏时仔细看图片，发现图片中会出现不必的色彩。


PngQuant的使用

０１. 打开PngQuant

０２. 按下PngQuant视窗中出现数字8的地方选择256(图8)，再按下Open filrs，出现视窗后选择要转换的图片

(图8)

０３. 按下确定后，会出现dos视窗，完成转档后dos视窗会自动关毕，之后PngQuant就会自动生成档名后带有-fs8的字样，这才是PngQuant的完成档。


PngQuant Options选项说明(图9)

(图9)

色阶
选项有8 16 32 64 128 256选项的数字越高所表现的效果越好。

Force Overwrite Existing Files(s)
强行复盖转档的档案。勾选此选项，要转的图片如果有先前转出来带有-fs8档尾的图，就会强行取代。

Ordered
勾选(图10)

(图10)
没勾选(图11)

(图11)



!!转完后如果边缘还是很锐利，就再回到photoshop里，在(图6-1)箭头所指示的地方，套用滤镜中微量的模糊效果。
!!而要转的图片要放在PngQuant主程式同一资料夹内才能转成功。


PngQuant的缺点
PngQuant能便利转出png256抗锐利边缘的效果，但这方便的工具也有缺点在，就是当柔边的范围太大时就会出现以下的情况(图10)(图11)(图12)。柔边的效果并不是那么完美，不过比起在下用的photoshop7所制作出来的png256色效果是好上太多了。

(图12)



在下因兴趣而有机会接触PngQuant，在此所做的小小研究和各位分享，还请各位多多指教。



PngQuant相关位址

参考来源： http://blog.bcse.info/making-png-8-along-with-alpha-channel
工具网站： http://www.libpng.org/pub/png/apps/pngquant.html
应下载档案：PngQuant Fe.zip
              参考页：http://jedisthlm.com/2006/03/16/manfred-a-pngquant-gui/
              下载位址：http://jedisthlm.com/download/PngQuant%20Fe.zip
            pngquant-0.95-win32.zip
              参考页：http://www.libpng.org/pub/png/apps/pngquant.html
              下载位址：http://prdownloads.sourceforge.net/png-mng/pngquant-0.95-win32.zip?download
            pngquant-1.0-src.zip
              参考页：http://www.libpng.org/pub/png/apps/pngquant.html
              下载位址：http://prdownloads.sourceforge.net/png-mng/pngquant-1.0-src.zip?download


PngQuant整合版(这是在下自己下载后整合成一个档放在网盘供各至下载，两个都是同样的档)
badogo http://www.badongo.com/cn/file/14743653
纳米盘  http://www.namipan.com/d/ce4d225 ... 35db0bb466206e10100


使用PngQuant如不能正常运作就需要安装Microsoft .NET Framework Version 1.1 Redistributable Package

参考页
http://jedisthlm.com/2006/03/16/manfred-a-pngquant-gui/
此页面上有提到需要用到这

下载页
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=262d25e3-f589-4842-8157-034d1e7cf3a3


下完后把PngQuant Fe.zip和pngquant-0.95-win32.zip解在同一资料夹内，之后再解开pngquant-1.0-src.zip复盖之前的档案。
!!!!!!在使用PngQuant时，一定不能让档案的所在路径有非英文字的路径上使用，例如把pngquant放在C:\Documents and Settings\Administrator\桌面，这样就会无法正常使用，所以建议把整个软体直接放在c槽使用。而要转的图片也一定要放到PngQuant主程式同一资料夹内才能转成功。



如果连不上的话请到以下文章，文章中的17楼aiyoka大大帮在下所建立的新位址，因为是另建在下不方便引来。
http://game.ali213.net/thread-2693539-1-1.html
主题：太阁立志传V "自制新武将形象档"



在此非常感谢aiyoka大大帮在下建立新的连捷，带给其他朋友的方便，也感谢各位支持的朋友。

[ 本帖最后由 mogom 于 2009-5-3 14:04 编辑 ]

zhuoludian

图片制作的高手都在这了，小的甘愿犯天下之不惟，厚颜无耻伸手求图。

不另外开求助帖了，实在目标太大。
aiyoka帮帮我吧！
战战兢兢地将偶粗陋的半成品传上，就当义务为哎哟咔提供素材练手吧。
虽然楼主放出了这般神奇的好工具，然不才实在能力不及，万恶的锯齿啊！ 真是欲哭无泪。。。
望aiyoka或者楼主抬手援助，将之修补成型，不胜感激~~

伸手党路人丙拜上。

[ 本帖最后由 zhuoludian 于 2009-5-3 11:53 编辑 ]

aiyoka

第一時間前來支持，鋸齒的問題困擾我好久了

qilin95

始终有一个问题困扰我
希望 aiyouka 继续帮我解决

iamchenchao

支持支持     
能做出越来越高质量的图了

长门大明神万岁!   : D

aiyoka

我還是轉不出實際效果……  難道真是我本身的問題……

qilin95

啊 啊 啊  
没人 帮忙 么
我 晕 啊
我 的 图 有 万恶的 锯齿 啊  

aiyoka

下完后把PngQuant Fe.zip和pngquant-0.95-win32.zip解在同一资料夹内，之后再解开pngquant-1.0-src.zip复盖之前的档案。
!!!!!!在使用PngQuant时，一定不能让档案的所在路径有非英文字的路径上使用，例如把pngquant放在C:\Documents and Settings\Administrator\桌面，这样就会无法正常使用，所以建议把整个软体直接放在c槽使用。

其實不用我回答的，你仔細看看樓主帖子的內容應該能看見這一段  而且 你把我名字打錯了……

[ 本帖最后由 aiyoka 于 2009-5-2 17:39 编辑 ]

aiyoka

Oh yes ！ 終于弄懂了，太感謝樓主了，謝謝～

qilin95

我 按照 步骤 解 了 啊

但 还是 出现 这个

aiyoka

你用的是vista系統嗎？  可能是系統不兼容的原因吧

baimao3721

最近論壇圖床不穩定 插入圖片經常顯示不能

如無法正常顯示 建議外鏈圖片

qilin95

我 用 的 是 XP

aiyoka

原帖由 qilin95 于 2009-5-2 22:11 发表

我 用 的 是 XP

我也搞不懂了  你PM一下樓主吧……

mogom

to qilin95

关於问题，在下想可能是少了Microsoft .NET Framework Version 1.1 Redistributable Package

参考页
http://jedisthlm.com/2006/03/16/manfred-a-pngquant-gui/
此页面上有提到需要用到这

下载页
http://www.microsoft.com/downloa ... 2-8157-034d1e7cf3a3

qilin95

还好 会 看 英文
不然 楼主 又 要 网盘 了  

rockymei2k

路过，纯支持！

mogom

TO zhuoludian

在下看了zhuoludian大大上传的图是gif的格式，所以在下想会不会是图片格式用错了，PngQuant只能轉png的图，所以其他格式的图会转不了。(基本上还是可以运作，一样会生成-fs8档尾的档，但是运作后的图不管用什麽软体都读不出来，也就是说非png档转的话会出现一个不是图片的档案。)
如果不是的话，那要不要看看PngQuant的所在路径是不是有在非英文的路径下。
再来就是将要转的图片放在和PngQuant同一个资料夹转看看，转完后PngQuant会自动生成一个带有-fs8的档名，看看是否。
再不是的话要不要检查看看，在影像处理软件里去背处理时是不是就是很锐利，因为PngQuant并非是一个能够将有锐利边缘的图转成无锐利边缘的图，也就是说在边缘的锐利是在先在影像处理软件里完成后，存出全彩png图，再让PngQuant转成256色的png档。(影像处理软件如在下用的photoshop7，转出png256色边缘的会很锐利，而PngQuant的特色就在於，转全彩png图转到256色png图时，让全彩中的alpha最佳化的转给256色的png来达到边缘柔化的效果。)

如果都不是的话，在下建議上传在影像处理软件工作时的图片看看，或是方便的话把工作档图片传上让在下分析。

aiyoka

已經做好，點頭你要的是附件里那兩張嗎？

做的效果有些不好，原因有二：1.點頭你給我的素材不僅有鋸齒而且白邊也很嚴重，像素也有些低
                            2.pngquant這個軟件存在一定的瑕疵，這一點只能等我我慢慢研究了

  話說你都不怎么露面啊，新人三人眾

zhuoludian

终于遭遇到一次灵异事件了，幸运地意外强占了实际的沙发。
aiyoka的好图收下了，正而巴经道声谢。此外作为mogom楼主更须郑重的道谢，专门为此发短信的诚意。
感动啊，难道这既是不二的诚心待人，好的，为了这样的楼主，我在此呼吁斑竹为这二位同学各加互助。
嘛米嘛里哄，斑竹快降临啊！

[ 本帖最后由 zhuoludian 于 2009-5-3 20:10 编辑 ]