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 進行色彩管理可強制將螢幕上的實際色值保存到文件中。以上是和切圖有關的設定。如果你的工作範圍包含修照片、印刷等等,就會需要進行色彩管理,請依工作內容調整不同的設定。

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
無損圖片的介面製作方式(下)

之前在無損圖片的介面製作方式(上) 提到製作 App 介面時會面臨各尺寸螢幕解析度不同的問題,PSD 需要放大縮小使得最後產出得切圖模糊失真。本文將介紹智慧型物件、智慧型濾鏡、在ai畫好、貼到ps的技巧、遮色片、調整圖層等不同的技巧。

試玩 Affinity Photo-Inpainting Brush

最近發佈 Affinity Photo 這修圖軟體的 Bate 版,官網影片看得超神奇的,尤其是修補工具,根本 +9 神器。現在可以免費下載,當然跑去載了份來玩玩。

習慣用 Photoshop 畫 Mockup 的理由
習慣用 Photoshop 畫 Mockup 的理由

繪製 Mockup 的工具,目前戰最兇的應該就是 PS 和 Sketch 吧,在課堂上有學員問了這個問題。我自己是 Photoshop 派的,會推薦初學者學習的也絕對是 Photoshop。

初學者的 Mockup

在畫好 Wireframe、定版後,就可以依照線框稿內容製作 Mockup 了。Mockup 有很多種說法,我當它是視覺稿,所有跟視覺有關的部份都會在這個階段產出。能夠用來製作 Mockup 的軟體有很多種,最大宗的就是 Photoshop。之前的文章都會說提升 PS 技巧,其實指的就是製作 Mockup 的能力,字體設計、按鈕樣式、扁平化、擬物風等等。

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close