PS 色彩管理與解析度設定

關於螢幕有太多學問,以 UI 的角度來談談給 UI 用的 Photoshop 螢幕設定吧,就「色彩管理」和「解析度」的部份。本文參考 Colour management and UI designDesigning for Retina display, part two 所寫。

每一隻 iPhone、iPad、Android 螢幕顏色都會有偏差,我的 iPhone 5S 顏色還正常、原本的 iPhone 4 卻偏黃,老公的 iPhone 5 有點藍。目前的校色器已能針對手機進行校色,個人覺得沒這個必要,就算在自己手機螢幕上看顏色非常精準、但在其他人的設備上看起來還是有誤差。(當然有校過爽度比較高,看個人需求。)

延伸閱讀:你為什麼需要色彩管理?

原理不解釋,請直接去看原文。嫌看英文太苦的話,這邊有對岸翻好的中文:UI設計中的色彩管理

顏色設定


選擇 > 編輯 > 顏色設置。
在 RGB 選項中選擇 「顯示器RGB-Display」。
色彩管理策略,將RGB設定為「關」。

開新檔案

這邊有份關於 iOS 各螢幕尺寸解析度等等的小抄 Resolutions & Display Specifications 。可以看到 iPhone 5的螢幕尺寸是 640x1136px、326 ppi。別傻傻的就把 Photoshop 解析度設定 326,比例會跑掉。


「解析度設 72 ppi」,RGB 模式,不要對此文件進行色彩管理。
無論是做 1x 還是 2x 檔,解析度請設定為 72 dpi。關於這點我和老公有實際測試過,直接開 Photoshop 和 Xcode 切不同解析度下產生的圖檔扔進 iPhone 裡會長什麼樣子。也測過各種不同解析度下對字級的影響。在 Photoshop 製圖時設定 72 才會在 iPhone 等設備上呈現 1:1 的尺寸。至於為什麼請參考這篇:像素(Pixel)與解析度(dpi)、dpi 計算、dpi pixel、dpi ppi、dpi 像素、dpi calculator

輸出jpg、png 檔

只要不是給印刷用的圖檔,也不是丟進 Slicy 切圖,我都會採「儲存成網頁用…」的存檔方式。這種存檔方式可以針對需要的檔案格式進行輸出微調。


輸出時請確保「轉換為sRGB」被關閉。


關於 png-8、png-24 和 jpeg 的不同請參考 選擇適當的網頁圖片格式

結論

不管是 iOS 也好、Android 也好,Photoshop 製圖時解析度一律設72,禁用 Photoshop 進行色彩管理可強制將螢幕上的實際色值保存到文件中。以上是和切圖有關的設定。如果你的工作範圍包含修照片、印刷等等,就會需要進行色彩管理,請依工作內容調整不同的設定。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close