訪客留言簿

星期一, 7月 14, 2014

【修圖】如何製作小而美的 PNG 圖片(適用黑白、灰階及 256 色內的圖片)

前言

單純是把最近的研究簡單整理一下。

這邊使用的工具為 GIMP 及 XnConvert 兩者,其他還有可以把圖轉成 GIF 再轉成 PNG 的工具,不過為了讓色盤能照自己的需求來調整,所以就不提轉 GIF 再把 GIF 轉成 PNG 的方法了。(而且轉 GIF 也不一定會變比較小)

《著作權聲明:本文所使用之已授權漫畫圖片,原作者為♞漢揚(奧茲墨坊)的下面這篇噗浪串來的,未經原作者同意,請勿轉載,感謝合作。》

♞漢揚 [巧黏誌] http://i.imgur.com/IHtlgM5.jpg 接下的發展大家都知道了 [HEE8] - #k7hvlg - Plurk

(※註:因為用 Blogger 上傳圖片,會被重新壓縮,所以原圖我存在 ImgUR 上,如果被刪除的話,還請再通知我補檔,謝謝。)

ImgUR:imgur.com/a/TaTAK
Google Drive:goo.gl/SEVSKl

基本工具

  • GIMP:需要對單張圖進行複雜修圖工作時使用
  • XnConvert:需要對大量圖進行批次處理時使用

存成減色 PNG 圖的好處

簡單說,「檔案容量會變比較小!」

PNG 本身是「無失真格式」,所以原先的設定值,不管如何壓縮,有點複雜的圖,檔案大小都會很大。(不過以一張純白的 1000x1000 的圖來說,PNG 的檔案大小會很小,減色處理後會變成最小的檔案格式)

而 PNG 會那麼肥大的原因,主要是「使用了 24 位元組(bytes)/32 位元組色盤」來保存的關係,但有些時候,你其實不需要用到這麼多色盤。

上句話的意思就是說,你的停車場有 100 個位子,但裡面其實平常只停了一輛車,所以你一開始就只要蓋 1~2 個停車位就好,不需要蓋到 100 個。(在數位的領域內,這停車場是可以隨時變大變小的,所以你也不必煩惱車位不夠用時該怎麼辦)

彩圖的處理方式

彩圖原則上,就只是把用色減到 256 色以下而已,所以一定會失真,但有時這失真是可以容許的。(亦即本來就不需要用到 24/32 位元組色盤那麼多也可以正確傳遞資訊)

GIMP 的彩圖處理方式

用 GIMP 開啟圖片後,在選單工具列上的「圖片 → 模式」中,有 RGB / 灰階 / 索引色3種可以選,這邊要用到的就是「索引色」來自訂色盤大小。

……原則上,選「使用最適合網頁的調色盤」就好,不過因為會把絕大多數乳白色、漸層色等的全變純白、破壞漸層,所以請自行看情況使用。

【適用情況】純文字但有些單純色彩的文件,掃瞄後想縮小尺寸及減少檔案大小,這樣子處理可以壓到很小很小很小,而且文字還會看得更清楚,可以說是有益無害。

【例圖】同樣是 A4 尺寸縮小尺寸成 1280x1810 的圖,用 JPG 存是 150~450KB 左右,有雜點,但用這方法存成 PNG,可以把雜點清除掉(部分折痕會留灰色區域必須自行選取起來塗白清掉),而且檔案大小只有 JPG 的 1/6~1/3 左右。(※註:下圖的折痕是我故意弄的)

(PNG 未減色、1280x1810、1.77 MB)

(JPEG 90、1280x1810、392 KB)

(PNG 調整色盤、1280x1810、91.9 KB)

XnConvert 的彩圖處理方式

嗯,很遺憾,彩圖這章節不適合用 XnConvert 來處理,因為沒有跟 GIMP 一樣的選項可以弄的關係。(在 linux 下,則是用純文字終端機呼叫 ImageMagick 等相關指令批次處理)

黑白圖的處理方式

黑白圖在減色處理時,必須要注意的唯一一件問題就是「漸層色可能會消失」,所以建議手上有未轉檔過的原始圖片編輯檔的,可以多試試不同的設定參數。

GIMP 的黑白圖處理方式

GIMP 一樣是在選單工具列上的「圖片 → 模式 → 索引色」中,選「使用最適合網頁的調色盤」就好,如果有其他需求的話,再去自行調整色盤。

【例圖】因為原始圖片是 JPEG 檔,所以部分漸層處理的地方(如網點),會發生漸層被吃掉跑出一堆白點的問題,但基本上不仔細注意,或拿原圖比較,也看不出有啥差別就是。

(JPEG、1600x1177、445 KB)

(PNG 調整色盤、1600x1177、197 KB)

XnConvert 的黑白圖處理方式

XnConvert,請在「動作」選單中,使用以下的參數處理。

「Add action → 圖片 → 變更顏色深度」「灰階 → 8」

(※註:使用 8 以上的話,檔案就會比 JPEG 圖還大,所以手上沒有圖片編輯檔的話,就將就點用吧。)

(PNG 灰階 8 色、1600x1177、329 KB)

比較:黑白圖在 GIMP 及 XnConvert 上的減色表現

基本上,兩者一樣都會讓漸層色(網點)跑出大量白點來,不過因為把乳白色或一些灰色給清除掉的關係,所以圖片中的白底會變成純白,對於要處理掃瞄圖雜點的人來說很方便。

在漸層色的處理方面,XnConvert 會比 GIMP 的要「自然一些」,GIMP 的感覺上會比較「強制去色」,但檔案也會比較小一些。

教學:GIMP 如何減色的同時加上半透明的圖層

PNG 經過減色後,開啟編輯時,你會發現你新加的半透明圖層,只剩下「有/無」兩種顏色,沒有透明度表現。

解決方法也很簡單,先把「模式」切回 RGB 後,再弄好半透明圖層,然後在「圖層」工具欄那,滑鼠右鍵選「影像平面化」,再去選索引色即可。(請注意,如果你是創作者,請不要把影像平面化後的圖存成編輯檔,因為這狀態的圖片會失去所有圖層資訊)

(※註:「影像平面化」選項,也可以在選單工具列的「圖片 → 影像平面化」中選取,如果你懶得動滑鼠的話就可以這樣弄啦)

(PNG 調整色盤+半透明圖層平面化、1600x1177、199 KB)

2014.09.10 補充教學:如何處理黑白掃瞄圖片

最近閒閒沒事,一直在試拆書、掃瞄、修圖的工作,發現到一些可以把掃圖變更小的方法。

基本上跟「教學:GIMP 如何減色的同時加上半透明的圖層」差不多,一樣用 GIMP 來處理,主要步驟如下。

讀圖 → (調整大小跟旋轉修正位置等等的) → Alt-I - M - I (索引色) → 最適合網頁(略) → Alt-I - M - R (RGB) → Alt-C - A - 白平衡 → Alt-I - M - I(下略) → 存成 PNG 檔

要注意,色彩自動做白平衡修正,這步驟一定要在 RGB 色盤下處理才行。索引色、白平衡兩步驟處理完,掃圖會變比較乾淨,這時再存回減色 PNG,圖檔可以壓到 1MB 以內,而且圖片也會比較接近原始的紙本書質感,不會一片死灰灰的,黑白對比也會好看點。

2016.03.12 補充教學:快速清掉黑白掃瞄圖片的不夠白的區域

GIMP 有個功能,可以讓你選取整張圖片,接近你點擊的某個取樣色的所有區域(包含不連續的),簡單來說就是組合鍵的「 Shift-o 」,即「依顏色來選取」工具,用這個把已經灰階處理過的圖,再用索引色清理一下,最後再去選取接近白色的所有區域,然後全部塗白,這樣子就能很簡單處理掉前項的「最適合網頁(略)」步驟時,會嚴重失真的灰階問題了。

結語

工具是人在用的,所以你必須自己決定要怎麼處理,但是 JPEG/GIF 不一定是最佳解,偶爾可以試試 PNG 及 PNG 減色,也許會更適合你的需求。

相關文章

0 comments:

 

本站著作(不包含圖片、影音以及回應留言)係採用 Creative Commons 姓名標示-非商業性-相同方式分享 2.5 台灣 (中華民國) 授權條款授權