利用 PicCrop 工具來切圖

記得小學製作海報時，會用剪貼的方式分工，快速拼湊出一張教室海報。時代進步了，現在大家都用電腦，我好幾次觀察到現在美術人員幫忙設計 UI 時，也常常會先把整體畫出來，然後再一塊塊的剪下來。這些剪下來的圖，還有個貼切的稱呼，叫「切圖」

現在有很多現成的切圖工具，幾乎都搭配 Photoshop 使用，甚至 Phothoshop 本身對這道工序也提供一定的支援。不過我沒打算在這介紹這些搭配 Photoshop 的圖形化工具，而是想設計一個專用的語言，來執行這個切圖的動作。

這個語言要告知原始圖檔，然後再列出每張被切下來的圖的位置、大小、甚至名字等。舉個例子，假設我要把圖中八個紅線匡起來的部分，一一切下來存檔。


最簡單的描述方式，大概就長這樣子：

# source picture
#---------------
ipod-touch-5th-black.png

# x,   y,  w,  h, target picture
#------------------------------------
117, 139, 62, 62, ico_FaceTime.png
190, 139, 62, 62, ico_Calendar.png
263, 139, 62, 62, ico_Photos.png
336, 139, 62, 62, ico_Camera.png
117, 223, 62, 62, ico_Weather.png
190, 223, 62, 62, ico_Clock.png
263, 223, 62, 62, ico_Maps.png
336, 223, 62, 62, ico_Videos.png

依照慣例， # 開頭的代表該行是註解。

下面八張小圖就是剪下來的切圖：

這個工具可以一次對多張的原始圖寫好要怎麼切的描述，切之前還可以反覆用紅線匡起來確認大小跟位置沒錯，然後只要 "One Touch" 就一口氣全切出來了。

照慣例，程式是用 Python 寫的，細部的安裝跟使用說明可以參考PicCrop 的 Overview