KULER - ps最受歡迎的配色小工具
經(jīng)常聽(tīng)朋友抱怨說(shuō)顏色如何難用,那今天圖趣網(wǎng)給大家推薦一個(gè)PS自帶的小工具,或許能幫你解決顏色使用方面的困擾
介紹工具之前,我們先簡(jiǎn)單復(fù)習(xí)下網(wǎng)頁(yè)設(shè)計(jì)中配色的基礎(chǔ)知識(shí)。
那么配色需要遵循什么規(guī)則或者原理么?
網(wǎng)頁(yè)配色的基本原則:
(1)色彩搭配的合理性。
每一種顏色都有自己的含義,如:紅色:熱情、奔放、喜悅、莊嚴(yán)等等,這可以向?yàn)g覽者準(zhǔn)確快速地傳遞出設(shè)計(jì)者想要表達(dá)的主題。
(2)色彩的鮮明性。
頁(yè)面的”視覺(jué)焦點(diǎn)區(qū)”一般是首屏的區(qū)域,在這區(qū)域中使用鮮明的色彩可以給瀏覽者留下深刻的印象并帶來(lái)第二次訪問(wèn)。
(3)色彩的獨(dú)特性。
如何在眾多同類(lèi)型的頁(yè)面中脫穎而出,這就需要獨(dú)特的配色方案。
如何根據(jù)上面的原理來(lái)找到方法?
(1)對(duì)比色彩的搭配
一般來(lái)說(shuō),色彩的三原色(紅、黃、藍(lán))最能體現(xiàn)色彩間的差異。色彩的強(qiáng)烈對(duì)比具有視覺(jué)誘惑力,可以突出重點(diǎn),產(chǎn)生強(qiáng)烈的視覺(jué)效果。
(2)冷色系的搭配
冷色系搭配是指使用綠色、藍(lán)色及紫色等色彩的搭配,可為網(wǎng)頁(yè)營(yíng)造出寧?kù)o、清涼和高雅的氛圍。
(3)暖色系的搭配
暖色系搭配是指使用紅色、橙色、黃色等色彩的搭配,可為網(wǎng)頁(yè)營(yíng)造出穩(wěn)性、和諧及熱情的氛圍。
(4)鄰近色的搭配
鄰近色是指在色環(huán)上相鄰的顏色,如綠色和藍(lán)色、紅色和黃色,可以易于達(dá)到頁(yè)面和諧統(tǒng)一的效果。
(5)同種色彩的搭配
同種色彩搭配是指首先選定一種色彩,然后調(diào)整其透明度和飽和度,將色彩變淡或加深,而產(chǎn)生新的色彩,這樣的頁(yè)面看起來(lái)色彩統(tǒng)一,具有層次感。
下面為大家介紹這個(gè)叫Kuler的PS小工具,它躲藏在擴(kuò)展面板里面。這個(gè)小工具需要大家安裝完整版的PS才能使用。
打開(kāi)面板后會(huì)發(fā)現(xiàn)里面已經(jīng)有了不少配色方案,左上方可以選擇列出方案的排布順序。如果這其中有”大廚”們中意的那么不多說(shuō),馬上開(kāi)工。如果都不盡如意,”大廚”只能自己動(dòng)手豐衣足食了。
點(diǎn)擊創(chuàng)建,可以進(jìn)入到編輯模式,耽誤當(dāng)務(wù)之急是要確定主色(基色),然后通過(guò)各種配色方案生成配色板。
很簡(jiǎn)單吧,現(xiàn)在我們已經(jīng)選好配色方案,那么如何使用呢?如果想使用某個(gè)色板為前景色,可以雙擊色塊,前景色就會(huì)同步為當(dāng)前色塊顏色。如果要把配色方案添加到色板中,可以點(diǎn)圖2下方的色板按鈕。還可以保存這個(gè)主題,點(diǎn)擊圖2下方保存按鈕,就可以了。
Tips:命名主題名時(shí)須為英文,不支持中文哦。
點(diǎn)擊瀏覽>選擇已保存,就能看到剛存儲(chǔ)的配色方案了,除此之外,”大廚”們也可以將自己滿意的配色方案上傳到網(wǎng)上。
如果你的PS版本不是完整安裝的,那么可以用Kuler的線上版本:
https://kuler.adobe.com/create/color-wheel/
下面列出幾種基礎(chǔ)配色方案,供大家參考:
潮流的扁平化配色
帶有情感傾向性配色
中國(guó)傳統(tǒng)顏色
kuler線上版地址:https://kuler.adobe.com/create/color-wheel/
本文地址:http://m.pkvc.cn/tutorial/ps1961.html
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏