不擅長配色也沒問題!網頁快速配色的方法!

2022-09-25 08:24:11 字數 2444 閱讀 6268

由@喪心病狂十六夜貓 編譯自國外設計部落格 smashing magazine

如何只決定乙個顏色,就能輕鬆的決定最適合**的整體配色?下面便將這個方法介紹給大家。這一次,究竟會出現什麼樣的配色技巧,不妨一起來嘗試一下。令人驚奇的簡單,在短時間內,您可以建立和您的專案相匹配的美麗的配色方案。

目錄1、決定基色。

2、決定強調色

3、決定深色

4、讓我們應用配色方案。

5、配色方案的總結。

01.首先決定基色

首先,來決定**的基色吧!雖然說你可以使用任何你喜歡的顏色,但為了讓別人理解你的設計意圖和理念,盡量還是需要注意以下幾點。

善於使用手邊的資料

客戶端的標誌上常用的顏色,往往是成功的。

避免使用競爭對手的顏色

品牌顏色的差異性是非常重要的。

了解你的使用者層所喜歡的顏色

不管面對的是怎樣的使用者,你都要知道他們適合什麼樣的顏色。

不要使用千篇一律的顏色

少女向的設計並不意味著就是粉紅色,要將你的創意展現出來。

決定乙個關鍵字

為了展現出品牌和專案的氛圍、將關鍵字塗上顏色,在配色遇到困難時是非常便利的方法。

為你的作品設計乙個良好的配色方案,參考別人的優秀的設計是非常有必要的!通過在下列**上點選【color】按鈕,你可以根據你的直覺來選擇乙個顏色。

dribbble

designspiration

選擇喜歡的顏色之後點選update、與之相關聯的就以設計列表的形式表現出來了。這個時候你再來建立乙個配色版,再選取顏色時我想應該會更加順利。

在 designspiration 這可以選擇五種顏色相互組合、在形象更相符的作品中選擇合適的配色作為參考。舉個例子,在這裡選擇淡藍色和粉紅色。

點選search按鈕、與之相關聯的作品就顯示程式設計客棧出來了。

在調色盤中選擇顏色作為參考時、調色盤的上段顯示的作品是最新的,設計思維最活躍的作品。而下面的,則是更值得信賴的,給企業的配色作為參考的作品。

如果你找到了喜歡的作品、可以用chrome的拓展程式將顏色抽出、你也可以也可以用photoshop直接將顏色選取出來(在吸管工具的狀態程式設計客棧下,先按住滑鼠左鍵,然後按住鍵盤上的option鍵,就可以將【如果是windows請按alt鍵cs5以上版本可以使用】將滑鼠拖動到螢幕外面選取顏色了。)

02.接下來決定強調色

強調色就是讓觀眾特別的引起注意的,但是使用的機會不多,起到強調效果的顏色。paletton這個**,使用色彩的基本原理程式設計客棧,可以很輕鬆的建立乙個美麗的配色方案。

paletton

基色在前面已經決定好了,「 淡藍色(#57cbec)」輸入到左下角的 base rgb中、下面的設計案例用來參考,讓我們來點選「addcomplementary(追加上輔色)」按鈕。另外、通過點選左上角的圖示,有大量的可供你決定的配色方案。

在這一次,我們的強調色、就選擇顯眼的紅色程式設計客棧(#ff6f59)吧。

03.然後決定深色

在web專案中,你可能需要靈活運用同種顏色的不同深淺來進行配色。乙個是深灰色的文字文字,而另乙個,則是用來作為背景設計時布置不同的內容時所運用的較淺的灰色。

通過執行下面的步驟,選擇配色進行調和,你可以建立乙個最初的灰色。

開啟photoshop、建立乙個新檔案,建立兩個矩形,填充色分別為#424242和#fafafa

然後建立乙個新圖層,在上面填充基本色(#57cbec)。

在圖層上右鍵選擇混合模式,設定為「疊加」、不透明度在「4-40%」的範圍內調整。

然後用吸管工具將顏色選取出來就完成了。

這是基本顏色適用之前的樣子。不管怎樣的配色都可以用這個點來對應。

然後這個基本顏www.cppcns.com色適用之後。只有一點點藍色,我們建立出了#404d51和#fafbfb 這兩種顏色。

最後在這裡新增上白色(#ffffff),全部5種顏色配色的配色版就順利的做成了。

04.讓我們來使用已經弄好的配色吧

那麼讓我們將已經做成的配色板上的配色,運用到你的網頁中吧!這一次的設計案例,我們在這個簡單的**線框上練習使用配色吧,、在這裡你可以利用免費的psd檔案 one pagewebsite wireframes :

然後這就是應用了我們之前配置好的配色版之後的樣子。這是只需要五分鐘左右就能完成的工作,乙個擁有你個人風格的網頁設計就完成了。

我們再嘗試著做一些別的調色版,然後再相同的模版上使用。這是用橘黃色和藍色組合出來的配色。

如果你想表現出更平靜的氛圍時可以使用這樣的配色。

就算是相同顏色的配色版,應用的設計要素不同,給人的印象也就不同。如果你想突出的重點沒有被凸顯出來,那就回到上色時的那一步好好想想吧。

如果你還需要更多的豐富多彩的配色方案,通過重複上面的步驟,你可以將你的調色盤無限的延長。

05.做好總結和練習

那麼,全文到這裡就結束了,步驟總結起來還是很簡單的,大家不妨也去試一試,一起來感受設計的樂趣吧~

本文標題: 不擅長配色也沒問題!網頁快速配色的方法!

本文位址:

程式設計師不擅長溝通

總是聽到有人說 程式設計師不擅長與人打交道 不擅長溝通和交流,更有甚者還提到程式設計師不太明白人情世故。如果說 與人打交道就是陪客戶吃飯說好話 擅長溝通就是對銷售人員不切實際的承諾保持沉默 明白人情世故就是見了客戶 領導就大唱喜歌的話 那程式設計師確實不擅長or不屑於擅長。否則,什麼不擅長與人打交道...

為什麼程式設計師不擅長估算時間?

乙個曾經與我一起工作過的經驗豐富的專案經理聲稱,他拿到程式設計師的時間估算以後,先將它乘以 然後轉化下乙個時間數量級後,才能得到真正的值。1天轉化成3.14周。他過去因為程式設計師不擅長估算時間而吃盡了苦頭。我建立了乙個用來翻譯程式設計師時間估算的 來盡量縮小估算錯誤。時間估算是困難的。每乙個程式設...

為什麼程式設計師不擅長估算時間

乙個曾經與我一起工作過的經驗豐富的專案經理聲稱,他拿到程式設計師的時間估算以後,先將它乘以 然後轉化下乙個時間數量級後,才能得到真正的值。1 天轉化成3.14周。他過去因為程式設計師不擅長估算時間而吃盡了苦頭。我建立了乙個用來翻譯程式設計師時間估算的 來盡量縮小估算錯誤。時間估算時困難的。每乙個程式...