當前位置:首頁>ps入門教程>ps基礎教程>設計知識>教程內容

顏色搭配,3個可視化信息圖的色彩搭配技巧(3)

來源:colacha 作者:十萬個為什麼 學習:13754人次

由于我總能看到這些自然的漸變,所以當我們在可視化圖表中看到對應的配色時,會感覺熟悉和愉快。

第3條:使用漸變,不要選擇一系列固定顏色

漸變配色結合不同色調,對兩者都最好。無論你需要2種顏色還是10種,漸變中都能提取出這些顏色,讓可視化圖表感覺自然,同時保有足夠的色調與明度差異。

改用漸變的思維并不容易,不過有個好方法,可以在Photoshop中拉輔助線到斷點位置,與數據的數量對應上,然后持續(xù)對漸變進行測試與調整。以下是我們在修正漸變時產生的屏幕截圖。

顏色搭配,3個可視化信息圖的色彩搭配技巧_www.theoat.com.cn

可以看到,我們將配色表緊挨著頂部的灰度漸變,調整漸變疊加(之后就能得到精確的漸變色值),然后從那些斷點處選取顏色,測試配色在實際運用中的效果。

我們的配色方案

我們對最終成果感到興奮。下面是我們使用的部分配色,它們都有從純白到純黑的漸變,以達到最大限度的明度差異。

顏色搭配,3個可視化信息圖的色彩搭配技巧_www.theoat.com.cn

顏色搭配,3個可視化信息圖的色彩搭配技巧_www.theoat.com.cn

顏色搭配,3個可視化信息圖的色彩搭配技巧_www.theoat.com.cn

冷色、暖色和霓虹色。

配色的實際運用

顏色搭配,3個可視化信息圖的色彩搭配技巧_www.theoat.com.cn

顏色搭配,3個可視化信息圖的色彩搭配技巧_www.theoat.com.cn

顏色搭配,3個可視化信息圖的色彩搭配技巧_www.theoat.com.cn

長話短說

盡管優(yōu)秀的配色方案越來越多,但并非所有都適用于圖表和數據可視化。我們的配色方法就是創(chuàng)建色調與明度變化都足夠大的自然漸變。這么做能使我們的配色便于色盲辨識,對其他人則更明顯,并且可以滿足1到12種數據。

這個過程中,我們發(fā)現了一些很棒的資源和文章,與我們得出的結論類似,但他們采用了更精確的方法,甚至鉆研了色彩理論。我們覺得應該分享出來,供大家深度閱讀:

閱讀

    如何避免等差的HSV顏色,作者Gregor Aisch通過chroma.js控制多色調的色彩比例,作者Gregor Aisch微妙的顏色,作者Robert Simmon翠綠配色方案,作者Bob Rudis、Noam Ross和Simon GarnierMATLAB色彩地圖,作者Steve Eddins

工具

    數據顏色采集工具——一件很趁手的工具,讓你保持濃度不變的同時輕松選擇配色Chroma.js——一個處理色彩的JavaScript庫Colorbrewer2——熱點圖與數據可視化顏色工具,自帶了多色調與單色調的方案

其他資源

我們還找到一些其他愛不釋手的配色資源。雖然它們并非專為數據可視化而設計,不過我們覺得或許對你有幫助。

    ColorHunt——高質量配色方案,能夠快速預覽,如果你只需要4種顏色,這是絕佳的資源COLOURlovers——很棒的顏色社區(qū),其中有許多工具可以創(chuàng)建配色方案,還有設計模式ColorSchemer Studio——強大的桌面取色應用Coolors——輕量級隨機配色生成器,你可以鎖定你想要的顏色,然后替換其他的Flat UI Colors——很棒的UI配色,這是最流行的配色之一Material Design Colors——另一套優(yōu)秀的UI配色。它不僅提供了跨度巨大的顏色,也為每種顏色提供了不同的“色深”,或者說明度Palettab——一個Chrome插件,在每個標簽頁里呈現一套新的配色方案和字體靈感Swiss Style Color Picker——另一個優(yōu)秀的配色方案集

希望本文對你有所幫助!

 

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網友求助,請回答!