PS中的點與AI中的pt如何換算?

求精確數值。已知px與pt之間的轉換等式 求解析度發生變化時pt相應變化比例


結論會在比較後的地方,然而,結論前面的文字對釐清概念或有幫助。

------

1 pt = 1 / 72 Inch 是數字排版中對 pt 這個單位的定義。所以,無論是在 PS、AI 還是 ID 中,1 pt 對應的物理長度單位都是一樣的。

出現轉換問題的原因,是 Photoshop 的量度邏輯是基於數字圖像的(像素),而 AI 是基於真實世界(真實長度)的。而解析度 (Resolution) 則是在「像素長度」和真實長度之間進行轉換的橋樑。

如果在新建 Photoshop 文檔時,解析度 (Resolution) 使用默認的 72 Pixels / Inch, 那麼,1 pt 則等於 1 px; 如果使用 144 Pixels / Inch, 那麼則有 1 pt = 2 px, 以此類推。在 Photoshop 中,pt 與 px 的轉換, 可以這樣表示——

{S_2}=frac{S_1}{72}	imes{R}

其中,S_1代表以 pt 為單位的尺寸,R表示解析度 (Pixels / Inch),S_2則是以 px 為單位的尺寸。

所以,在 Photoshop 中 72 PPI (Pixels Per Inch) 解析度的文檔中 18 pt 的文字大小,比 300 PPI 的文檔中同樣是 18 pt 的文字要小得多——這是以像素為單位衡量的。但是,按照對應的解析度設置列印出來時,兩者的物理尺寸應該是一致的——只是 300 PPI 的文字要清晰得多。

而 AI 則不需要考慮解析度的問題。AI 是矢量軟體,其度量單位是以印刷為邏輯的,所以 1pt 的長度就定義為 1 / 72 英寸。在 AI 中出現解析度的場合,也只有對對象進行柵格化或者是導出點陣圖的時候了。而此時解析度更多是決定精度,和單位換算沒什麼關係。

------

回到結論——Photoshop 和 Illustrator 中的 pt 應當如何,視乎你要用這兩個軟體幹什麼事情,表達設計的媒介是什麼。

如果是做平面設計,最終的結果需要印刷,那麼不需轉換,Photoshop 中的 1 pt 和 AI、ID 中的 1 pt 是相等的。當然,要使用 Photoshop 獲得足夠質量的文字和圖形,解析度需要夠高(通常,至少 300 PPI)。而且,在 Photoshop 中需要以真實尺寸(比如,毫米、厘米、英寸等)作為設計單位,因為在這種情況下像素這個單位並沒多大意義了。

不過說實話,對於製作印刷品,Photoshop 並非太好的選擇。因為要獲得高精度的文字和圖形,矢量顯然比點陣圖更加合適;即使是需要使用一些用矢量難以表達的效果,也最好用 Photoshop 製作後作為插圖插入到 AI、ID 中。AI 和 ID 作為印刷品設計這一工作流程的基礎環境更為合適。

而如果要做 Web、UI 設計這樣的以屏幕為媒介的設計工作,在 Photoshop 中最好直接使用 72 PPI. 這樣,1 pt = 1 px, 在換算時能少出很多亂子。而且,72 PPI 是較為普遍的 Screen Resolution [1]. 況且,對於以屏幕為呈現媒介的設計,真實尺寸也沒多大意義 [2]。

而 AI 在設計中默認採用 72 Pixels / Inch, 所以,1 px = 1pt, 無論是使用網頁模板還是印刷模板。而因為 AI 是矢量軟體,所以 1 px 在畫板中也是「可再分」的,僅在最後導出點陣圖、並選擇 72 PPI 作為導出解析度時,才有生成圖像的 1 px 等於設計時的 1 px; 否則,使用之前 pt 與 px 的換算公式進行轉換。

在做以屏幕為媒介的設計時,直接在 PS 中使用 72 PPI, AI 中將各個單位調成像素(或者用 Web 模板),就能避免轉換。


------

[1] 在 Windows 中,默認的 DPI 是 96. 所以,在系統軟體(比如記事本)中 18 pt 的文字,和 Photoshop、AI 中 18 pt 的文字大小並不一致。此外,CSS 似乎也是使用 96 DPI 制(見 Surfin" Safari),也就是說,如果使用 18 pt 作為字型大小,則與 18 px 並不相同。不過,對於 CSS 來說,沒有必要使用 pt 作為單位。
[2] 真實尺寸取決於設備屏幕的 DPI——比如,同是 100 px 長的一根線的圖像,在沒有經過縮放的前提下,在 iPhone、rMBP 或是其他設備屏幕上的真實長度並不一致。


推薦閱讀:

Material Design的插圖中使用的陰影是如何製作的?
如何用AI繪製插畫?
如何做出這種有厚度的 APP 界面圖片?
請問怎樣做出這種插畫陰影部分的紋理?
這張海報的上半部分光屏是怎麼樣做出來的?

TAG:平面設計 | 視覺設計 | AdobeIllustrator |