• <blockquote id="ce2qy"><blockquote id="ce2qy"></blockquote></blockquote>
  • <nav id="ce2qy"></nav>
  • <menu id="ce2qy"></menu>
  • 為什么你的視覺稿導出后,顏色就變灰了? - 優設網 - UISDC

    為什么你的視覺稿導出后,顏色就變灰了?

    2019/06/11 17837評論 11

    平時在 PS/Sketch 上設計頁面時覺得色彩明亮艷麗,但是導出或上傳至標志平臺時畫面變得灰暗,其實是軟件顏色配置的影響。

    視覺走查是設計師在頁面被開發出來時進行的細節檢查與匯總,針對沒有還原設計稿的頁面細節反饋給工程師,并不斷循環這一步過程直到問題被修復,從而確保被開發出來的頁面與最初的設計稿一致。

    工程師與設計師在面對不同的兩個顏色時,工程師看的是兩個顏色的數據,設計師看的是兩個顏色的視覺色彩,因為 PS 與 Sketch 軟件上不同的顏色配置會出現同色值卻不同的視覺體驗,因此處理好 PS/Sketch 、iPhone 實時預覽插件、標注平臺三者顏色配置,是設計協助開發的細節之一。

    場景一

    我們平常在使用藍湖或 pxcook 進行頁面標注時,平臺與軟件默認無色彩管理,因此識別的色值與 PS 顏色配置「不做色彩管理」、Sketch 里的色彩描述「RGB-sRGB IEC61966-2.1」是一致的。

    場景二

    平常在手機預覽一些優秀的文章與作品時,會對優秀的頁面進行采集,但 iPhone 截屏圖片色彩格式卻是 Display P3,等到 PS/Sketch 打開 iPhone 截屏圖片時出現「嵌入的配置文件不匹配」,丟棄不匹配的配置文件之后畫面顯得灰暗。

    △ 手機視圖(左)PS視圖(右)

    這是因為 iOS 系統下截屏得到的圖片,其色彩配置文件是 Display P3,與 PS/Sketch 里的 sRGB 不同,因此丟棄不匹配的配置文件之后畫面顯得灰暗。

    于是使用了 PS 進行了以下 5 種方案測試,Sketch 同理。

    測試一

    PS里:編輯→顏色設置→RGB-sRGB IEC61966-2.1 環境下打開圖片。

    當顏色設置里的工作空間 RGB 設置為「顯示器RGB-sRGB IEC61966-2.1」時,色彩管理方案 RGB 會自動「關」閉,這個時候,電腦屏幕上 PS 顯示顏色與 iPhone 實時預覽顏色一致。但此時 PS 打開 iPhone 截屏圖片會出現「嵌入的配置文件不匹配」,丟棄不匹配的配置文件之后畫面顯得灰暗。

    △ PS視圖(左)手機視圖(中)PS打開截屏圖(右)

    測試二

    PS里:編輯→顏色設置Adobe RGB(1998)并「保留嵌入的配置文件」環境下打開圖片。

    當顏色設置里的工作空間 RGB 設置為「Adobe RGB(1998)」,色彩管理方案 RGB 選擇「保留嵌入的配置文件」,PS 打開 iPhone 系統下截屏的圖片不會再出現彈窗,截屏圖片在 PS 上顯示顏色正常,但 iPhone 實時預覽變得灰暗。

    △ PS視圖(左)手機視圖(中)PS打開截屏圖(右)

    測試三

    PS里:編輯→顏色設置 Adobe RGB(1998)環境下打開圖片,再調回顏色設置 RGB-sRGB IEC61966-2.1 環境下處理圖片。

    圖片正常被打開,iPhone 實時預覽顯示正常,但由于新建畫布顏色設置與截屏圖片顏色設置不同,因此將截屏圖層復制至新建畫布或者進行色彩提取時會被自動轉化成「顯示器RGB-sRGB IEC61966-2.1」下的顏色設置,色值雖然一樣,但是畫面明顯灰暗。

    △ 保留色彩配置(左)不做色彩管理(右)

    △ 不同顏色配置下的同色值顏色

    測試四

    PS里:編輯→顏色設置 Adobe RGB(1998)環境下打開圖片,再調回顏色設置 RGB-sRGB IEC61966-2.1環境里在截屏文件下處理圖片。

    圖片正常被打開,iPhone 實時預覽顯示正常,在截屏文件上進行設計,可正常吸取顏色。

    上傳至藍湖或 pxcook 進行頁面標注,平臺標注會自動丟棄不匹配的顏色配置文件,轉化成「顯示器RGB-sRGB IEC61966-2.1」下的顏色設置,標注平臺上的頁面數值顯示灰暗。

    △ PS視圖(左)手機視圖(中)標注平臺視圖(右)

    方案五 —— 完成同步

    PS里:編輯→顏色設置 Adobe RGB(1998)環境下打開圖片,再調回顏色設置 RGB-sRGB IEC61966-2.1,使用電腦截屏對手機截屏文件進行截屏,粘貼至不做色彩管理的新建畫布,色值雖然進行了改變,但經過電腦截屏的頁面色彩與手機截屏色彩一致,可正常吸取顏色。上傳至藍湖或 pxcook 進行頁面標注,標注平臺上的色彩數值與頁面效果一致。

    △ PS視圖(左)標注平臺視圖(右)

    補充

    由于 Sketch 處理方式同理,就不一一截圖解釋。

    Sketch 色彩設置修改路徑如下:

    • Sketch →偏好設置→sRGB IEC61966-2.1
    • 文件→修改顏色描述文件→sRGB IEC61966-2.1

    tip:Sketch 可以執行操作「查找/替換顏色」對所有同數值顏色進行處理。

    歡迎關注作者的微信公眾號:「大tip」

    優設大課堂

    非特殊說明,本文版權歸原作者所有,轉載請注明出處
    本文地址:http://www.010btvly.com/the-color-adjustment

    發表評論 加載中....

    評論加載中....

    uisdc

    評論區都快餓癟了,看看我期盼的小眼神...

    版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 優設專訪 優設大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規范 用戶體驗設計 海報設計 設計趨勢 平面設計 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

    您還沒有登錄

    優設啟用更安全省心的 微信掃碼登錄

    微信掃碼

    300萬設計師聚集地!優設網是極具人氣的設計師平臺
    2012年成立至今,一直專注于設計師的學習成長交流

    把好文章收藏到微信

    打開微信,掃碼分享
    學設計 優設網 在這里

    703彩票 馆陶 | 铜陵 | 简阳 | 张家口 | 台湾台湾 | 香港香港 | 黑龙江哈尔滨 | 上饶 | 淄博 | 永新 | 娄底 | 温州 | 蚌埠 | 甘孜 | 五指山 | 湖州 | 甘肃兰州 | 阜新 | 白银 | 阜新 | 哈密 | 鹤岗 | 扬中 | 梧州 | 鄢陵 | 衡水 | 包头 | 五指山 | 肥城 | 宜昌 | 宿州 | 潜江 | 五家渠 | 甘肃兰州 | 海宁 | 莱州 | 巴音郭楞 | 白城 | 淄博 | 黑河 | 东营 | 燕郊 | 白城 | 靖江 | 曲靖 | 任丘 | 抚州 | 泗阳 | 锦州 | 黄南 | 汕尾 | 台山 | 玉溪 | 任丘 | 库尔勒 | 新泰 | 南京 | 四平 | 香港香港 | 黔东南 | 屯昌 | 泰兴 | 延安 | 锦州 | 邹城 | 阿克苏 | 南京 | 陕西西安 | 来宾 | 怀化 | 云南昆明 | 陵水 | 兴安盟 | 青海西宁 | 天长 | 临夏 | 鸡西 | 株洲 | 乌兰察布 | 河北石家庄 | 潮州 | 三明 | 淮南 | 临夏 | 四川成都 | 大连 | 河池 | 海宁 | 景德镇 | 广州 | 万宁 | 通辽 | 玉树 | 长葛 | 泰安 | 喀什 | 广州 | 资阳 | 丹阳 | 六安 | 大理 | 贵州贵阳 | 九江 | 黄冈 | 黄山 | 唐山 | 酒泉 | 日照 | 新沂 | 台南 | 大庆 | 淄博 | 仁怀 |