經過長達 N 個月的等待,我終於決定發布此該 Photoshop 濾鏡,實際上該濾鏡的主要算法和 UI 交互是在 2012 年 8 月大致開發成型,2012年11或者12月份經歷一次代碼的穩定,修復了一些隱藏的不易察覺的 bug,基本功能已經在此時全部完成。由於去年同時忙於工作上的其他開發任務,導致該濾鏡(我的業余時間產品)一直壓在手里沒能立即發布,一個主要原因是大概想換個思路,做成免費試用但是也可以有注冊版本的。因此這使得它的發布周期大大延長。
該濾鏡的主要用途是協助用戶在 Photoshop 中繪制表格。或許有人會說,這個任務 PS 有很多種方法可以完成,例如一些重復性操作,例如可以先對 Excel 截圖,再復制粘貼到 PS 里。問題是這些都需要比較繁瑣的手工操作,在多個軟件,多個界面之間不斷切換。工作成果不容易積累,當你下次再次繪制表格時,你發現依然要花上一些精力,尤其是要精確的控制每一行距離要相等,不借用網格線的話就沒法完成,而網格線又要根據不同需求和文檔時刻修改設置。久而久之讓人對此感到頭痛。這正是讓人感覺疲憊的所在(這也是為什么編程開發是一個很累的工作)。而如果你始終把注意力集中在一個軟件里面,這樣工作量會感覺輕松很多。
由於 PS 是以位圖處理為核心和優勢,而不可避免的它在矢量圖等一些方面不如其他專注矢量圖的軟件哪么得心應手。這個濾鏡的需求實際上在我剛接觸 PS 插件開發的早期就形成了這樣的一個想法,我認為擴展 PS 的這個功能是非常自然的,而且對於計算機來說應該是比較容易的。但那時候有一些地方沒想明白,因為 PS 是位圖為核心的,因此一個濾鏡的輸出通常是位圖,這和矢量圖那種數學描述是格格不入的。因此帶來一個很大的挑戰就是,所有的對最終結果的控制都必須在用戶界面這一步一次性設置完成,而事后是不能“調整和修改”的。因此盡管繪制表格這個任務相對簡單,但這里的用戶界面是非常復雜和困難的(截至發布,僅負責接收用戶設置參數的該 UI 對話框由超過 3500 行 C++代碼實現,比濾鏡核心算法代碼量更多),例如,如何讓用戶能夠個性化的調整表格的各個行列尺寸,以及是否在 UI 界面上由用戶去編輯文字(這個需求經過我和一個同事 danchen 的交流,因為沒有必要,另外實現起來頗為困難,而被舍棄了)。
在 2012 年我和我的一位搞設計的同事 danchen 偶然談起說我有這樣一個想法,當即得到她的支持。她並因此為我提供了 UI 界面的一個粗略設計稿,盡管我覺得她的設計思路和實現思路有點距離,但最終界面是非常接近她的設計的。例如,界面中的三角形箭頭拖動(手柄)等元素都是來自與該設計草稿。早期的界面是沒有縮略圖顯示的,只有一些文本框,組合框來輸入參數,用戶可以手工計算行列的像素數,來輸入,但這很不直觀。最終我決定實現這一個非常有難度的設計,就是提供縮略圖和縮放,拖動等操作。當然,這的確是非常具有挑戰性的工作,是我做過的最復雜的 UI 之一。很多消息處理都非常復雜,尤其是鼠標消息。因為界面上可以點擊,拖動的元素非常多。最終界面如下圖所示:
在對表格的尺寸控制上,采用了非常靈活的設計。例如,可以由手工拖動界面上的三角形箭頭來改變表格的布局。同時也可以在界面上輸入精確到像素的數字。例如,每列寬度,如果只提供前幾列的數字,則剩余列會被剩余寬度均分。
注意:
(1)表格模型:表格邊框是外擴的(在表格外部,類似PS里描邊時的外部),中間表格線是盡量以數學意義上的無寬度線為中線的。因此:
表格尺寸=行/列尺寸總和 + 邊框寬度 * 2;(具體模型參考后面的圖)。
(2)繪制表格的建議步驟如下:不建議在當前已有圖案圖層中直接繪制,因為這會覆蓋原來的像素。建議方法是新建一個空圖層,然后用菜單:濾鏡-hoodlum1980-drawtable調用濾鏡,這樣可以繪制在一個新圖層,也可以設置像素透明度。(如果在無 transparent 通道的圖層上繪制時,透明度參數被忽略)
(3)點擊標題欄問號按鈕,然后點擊界面上的控件,可以看到相關功能提示(如果有)。(這一點非常重要,因為我時間有限,來不及為它制作用戶文檔,所以這個功能可以幫助用戶理解軟件的各個 UI 交互細節的設計者用意和使用方法。)
(4)注冊版最多可以繪制 100 * 100 (后續版本可考慮增加到更多)行列的表格,試用版限制為 10 * 10。界面上的三角形箭頭(grips)最多大概為 12 或 20 個。
(5)界面上的顏色小方塊,單一數字文本框都可以用鼠標操作。例如,點擊或者拖動文本框前面的 label 修改其數字。
以下是比較重要的表格布局功能:
(6)點擊每行/列尺寸右側的帶有紅色X的小按鈕,可以取消尺寸個性化設置,讓表格均分寬度或高度(所有行/列尺寸相同)。
(7)表格居中按鈕的作用是讓表格相對於文檔(實際是 filterRect “濾鏡矩形”,在沒有任何選區的情況下,濾鏡矩形等同於文檔矩形)中居中。
(8)拖動最左上方的三角形抓手,調整表格在文檔中的位置。拖動最右下方的三角形抓手,調整的是表格的寬度(以及最后一個行列的尺寸),拖動中間的三角形,調整的是相鄰兩行/列的尺寸(表格整體寬度高度不變)。
(9)每行每列尺寸可以僅提供前面幾項的尺寸,剩余的行和列將用剩余的表格寬度/高度均分。(除非已提供的數據總和已經超出表格總寬度/高度)。點擊“更新縮略圖”按鈕,以讓縮略圖更新那些沒有立即做出回饋的參數變更。
如果要計算精確到像素,就必須了解濾鏡采用的表格模型,如下圖所示:
可見當前表格模型采用的是邊框位於“表格外部”包裹的模型,未來版本考慮增加邊框在表格邊界線上居中,邊框位於表格內部的配置。
下載鏈接:(是一個合集,里面也包括了 ICO 插件等我開發的其他插件,適用於 Photoshop 32-bit)
PsPlugIns_V2013.zip 備注:這是舊的版本(唯一好處是自帶安裝工具),強烈建議下載下方的鏈接(需手工復制安裝)。
----(2016年7月6日 補充)----[begin]
對於 Photoshop 64-bit,請下載 DrawTable 濾鏡的 64 位版本(適用於 32 位操作系統的插件也同時提供):
DrawTable_X64_20160707.zip (首次發布的版本,有 BUG,建議下載最新版)
DrawTable_v104_20190703.zip (x86 和 x64 同時提供,修復了繪制邊框時,在特殊情況下,邊框沒有被繪制的 BUG。增加對 16 位,32 位通道的圖像模式的支持)
-------------------------------[end]
壓縮包內,有一個EXE文件,可以幫助用戶簡化安裝插件的操作。壓縮包內另有兩個 DrawTable 插件可以加載的表格配色文件,來自於 Office Excel 2007,這使得 Photoshop 可以繪制出類似 Excel 中的表格。安裝后可以在 Photoshop 軟件中使用以下兩個菜單:
(1)濾鏡 - hoodlum1980 - DrawTable ;調用濾鏡。
(2)幫助 - 關於增效工具 - DrawTable... ;可以看到本濾鏡的關於對話框。
2013 年 5 月 12 日。
開發時的草稿(縮略圖模型和表格模型):
更新歷史:
(1)修復特征碼代碼 BUG。2013年5月14日。
(2)修復參數對話框右下角“我的博客”鏈接在 WIN7 系統下顯示不完整的問題。2013 年 5 月 17 日。
(3)縮短序列號長度,版本號變更到 1.0.2。2013 年 5 月 21 日。
(4)細微調整序列號字符內容。2013 年 7 月 9 日。
(5)修正一個與功能無關的極其微小的 BUG(位於關於對話框)。2014 年 6 月 28 日。
(6)修正一下兩處細節的不完善,光標形狀的設置;拖動縮略圖時的顯示。細微修改了滑動光標(當鼠標位於 “不透明度” 標簽的范圍內時)的外觀。2015 年 2 月 6 日 22:25。
(7)同步提供 x86 / x64 版本插件。修復個別情況下,邊框未繪制的 BUG。增加對每通道 16 位,32 位圖像格式的支持。2019-07。