[ 平面理論教程 ] 高效高質設計一個完整的配色方案- 其他教程 - 骨子愛創意

教學主題: 高效高質設計一個完整的配色方案

大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

今天的這個教學主題是: 高效高質設計一個完整的配色方案

這教學的重點為這幾點 [ 方案,完整,一個,高質,設計,高效,配色,色彩,自己,使用, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

之前發布過一篇文章《淺談如何使用軟件從零開始，高效高質設計一個完整的配色方案》，那篇文章主要是分享了一個傻瓜式的配色方案製作方法，但是沒有實際運用的例子，讓很多朋友都不了解具體怎麼運用。

之前發布過一篇文章《淺談如何使用軟件從零開始，高效高質設計一個完整的配色方案》，那篇文章主要是分享了一個傻瓜式的配色方案製作方法，但是沒有實際運用的例子，讓很多朋友都不了解具體怎麼運用。

為了提高自己的實際運用能力，也為了能和大家一起分享學習交流，共同進步，歡迎大家指出優缺，揚長補短，提高實際操作能力喔～

這次專門寫了一篇文章提供交流學習，講述網頁設計中的配色方案設計的實際操作。

我只是一名設計潘浚我不是擁有多年經驗的高手，也不是弄虛作假搞宣傳的遊客，我是一名愛設計，愛學習，愛交流的狂熱者，擁有自己的設計工作室沒位道，為了提高工作室的各項能力，不斷探索，不斷總結，不斷學習，希望能提高小團隊的各項能力，我是一個不斷向夢想靠近的有點二的騷年，每一次分享，都是一次提高和進步。

如果你是面試考試?如果你是獨立設計?如果不給你任何網頁參考，但是可以有素材圖片的參考?如果你是專門練習從零開始配色?如果你想多提高一點藝術細胞?

嘿嘿，那就來看看這個分享吧，可能也有很多不適合的地方，當然，方法是自己找的，多學習高手，多學習別人的優點，善於總結，總能找到最適合自己的方法，如果你有上述問題，對於實際運用配色很難入手，那就來看看自己的一點點小經驗吧。希望對大家有幫助。

好了，開始我們的實際操作吧，下面使用2個例子，來進行從零開始的配色方案。

配色是一個細心的過程，也是一個非常重要的過程，不能敷衍了是，一步一步來，即可提高工作效率。又可以提高配色成功率和配色質量。

(一)貴州黎明集團旗下的奧斯特酒店官方網站的配色方案設計(複雜點的配色方案)

這是一年前自己做SOHO接的項目，下面就來談談，怎樣開始它們網站的配色方案設計吧。嘿嘿～～

1.網站色彩需求分析

(1)客戶網站文字需求：

黎明酒店是貴州黎明能源集團有限責任公司投資興建項目，建設地點在金沙縣城關鎮新城區一號路轉盤。需要對酒店進行一個網站的設計，突出酒店的高檔次，突出視覺感。

(2)客戶提供的幾張酒店素材：

(3)配色需求分析：

不考慮Layout, 結合企業的LOGO,企業文化，簡單介紹，幾張素材圖進行配色分析

A) 不論什麼項目，只要提供LOGO的，一般首先考慮整站色彩與LOGO色彩相匹配

B)網站風格判斷：從文字需要上分析(當然此階段，你要盡量了解客戶的心理狀態，他想要的東西到底是什麼風格什麼色彩的，如果能了解到是最好不過的，減少項目的飛機率)，客戶需要視覺感比普通簡潔網站更強烈的頁面，當然不保證分析一定正確，這個階段就必須溝通客戶，做好草圖或者方案，及時溝通，如果客戶確認了，最好不過

(^_^~~~ 不過啊，這裡，客戶根本不知道自己喜歡什麼，不知道自己想要什麼，只知道讓你設計出來效果圖，過了就過，過不了改，這樣，我需求抓得就不是很多了)

C)根據一些網頁設計的經驗，從風格上判斷，網站要增強視覺感，最好使用深色設計，突出產品，突出對比，特別是針對酒店，品牌性產品展示的頁面，採用深色設計的也比較多

好了，目前不能保證整個頁面的色調是否能滿足客戶，溝通中客戶自己也沒判斷力，那好吧，就交給我們吧，下面開始配色方案設計過程

這個項目客戶要求上也不是很嚴格很極端，所以剩下的就是大膽的發揮，失誤難免會有，不多說，簡單的配色需求分析完畢，下面開始網站零配色。

2.零配色技巧實際運用，採用PS

(1)首先把LOGO色彩提出來，放到PS里開始配色方案，注意，事先擬定了整個頁面需要深色設計，那我們就采

用黑色作為底色吧。

【1】PS里新建一個 800 × 800 的文檔，鋪上底色黑色

【2】分別去除LOGO的色彩，這裡我們把最明顯的黃色和藍色取出來，使用“吸管工具”即可

把LOGO色(主色調)

(如果客戶沒有提供LOGO，您可以就自己的發揮擬定主色調)

【3】取出素材圖片的色彩放置到LOGO色彩層的上面，此時，把兩種LOGO色彩圖層合併成一個圖層

(如果客戶沒有提供素材，那你可以使用任意的攝影圖，或者插畫圖等素材，去搭配你所確定的主色調，來代替客戶素材，給自己配色提供一個參考和靈感)

下面我們選擇素材中較為顯眼的兩種-三種顏色，直接使用“吸管工具”把顏色取出來即可

這裡注意哦：這3個素材色彩圖層，是重合疊加起來的，並不是每個都是分開組合的，說哦重合起來的

這裡一定要注意，很多朋友說改變模式后沒有顏色，就是這裡的細節沒注意好(不過上次我沒說清楚，造成大家出現一些小問題，請大家原諒，嘿嘿。。。)

【4】把素材的色彩層模式改為“疊加”或者“柔光”(注意素材色彩層不要合併，每個素材色彩圖層都需要改變混合模式)，改變圖層混合模式時，都嘗試這兩種模式，太鮮艷的就不採用，感覺舒服的，就採用，這裡，我選擇使用“柔光”模式

(注意，底部的基本色藍色和黃色不要改變圖層模式喔，仍然為“正常”)

【5】為了視覺上不受干擾，我刪除多餘的部分

【6】上面的色彩，就是所謂的LOGO主色調的相似色，輔助色，下面，我們進行反差色的設計

我們先複製一下所有的層，便於保留之前的相似色方案

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

【7】複製完成之後，我們把複製的三個素材色彩層混合模式換成 “亮光”，式在頂層新建一層“白色或者黑色”，混合模式為“色相”(特別注意，這層色相層是調整飽和度的，不透明度一定要小於50%)

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

這三層素材色彩層也可以適當調整不透明度，這裡我就沒有調整叻，直接使用

【8】好了，差不多，LOGO的兩種主色調的相似色和對比色都出來了，但是因為使用了LOGO的兩種色彩來設計配色方案，肯定會覺得眼睛酸疼，那麼多色，那麼多方案，怎麼用?

不急，下面開始一個“乾坤大挪移”的方法，擬出最終的配色方案，我們現在先做一件事，就是把對比色圖層和相似色圖層，ctrl+G 合併到一個新的文件夾內

【9】對着文件夾鼠標右鍵，先“轉化成智能對象“，再”柵格化“，這樣就不會影響到混合模式改變后的色彩效果了

【10】使用乾坤大挪移方法之前，其實已經有了兩套配色方案，去掉一些對比度很強的色彩，減少那麼幾個色彩，就得到了一個配色方案，在這個方案下，有效分配色彩在整個頁面中的比例，就能在設計中減少零配色的失敗率，提高工作效率。它們分別如下

使用對比色時，根據頁面的實際情況，對比色一般不要超過整個頁面色彩分量的20%，否則可能造成視覺疲勞或者視覺差異過大，給人不愉快。具體情況具體分析，還要看網頁的設計風格和需求而定

【11】色彩方案有兩個，到底選哪一個呢?這個總不至於做兩套方案吧?當然，實際工作中做不同的配色方案是經常的事情，但是如果你時間很緊，客戶跟得緊，你就要選擇一個非常適合的方案 進行設計。

下面採用乾坤大法了

(a)分別把冷色方案和暖色方案，格一個格子，用選區工具選擇出來複制到新的圖層里，然後隱藏原來的配色方案圖E

(b)把取出的顏色，按照飽和度和冷暖的次序，從新排列到一起，湊成一套完成的最終方案，嘿嘿。

嘿嘿，這樣，一套最終的配色出來了

當然，你也可以忽略這一步，使用之前的兩種配色方案任意一種。

注意哦，使用這些任意一種配色方案，幾乎涉及了頁面的每一個角落的色彩，色彩比例，主次之分，自己要把握好，不要把次要的襯托色運用大面積哦。要學會取捨色彩。

最後要提醒的是，如果你還覺得配色方案不滿意，你可以最後在總方案上進行飽和度，色相的調整喔，這樣，就能設計出真正你想要，真正客戶想要的配色方案。不要太死了喔，千萬別被自己的配色方案弄死了～～

學會取捨色彩，不可能一個配色方案你就完全死活不動的使用它，被它束縛。配色方案設計是一種技巧，是一種方法，它能有效減少直接取色直接配色的失敗率，減少色彩的不協調感，你要善於駕馭它，運用它，讓它為你服務，而不是自己被自己做的配色方案駕馭。

更多的色彩取捨，就要看自己咯，可以多學習一些美術的配色理論知識，多了解色彩的各種屬性和代表意義，這樣更能幫助你完成一個成功的“零配色”。

3.不從別的素材上，不從別人網站界面行吸取色彩，零配色，就這樣完成了，這樣配出的色彩，能有效避免直接取色的不協調，提高工作效率。

當然，這樣最大的好處是，能讓你徒手創意一個屬於自己的網頁，手把手自己搭配協調的色彩，提高配色能力

結合客戶提供的資料的配色方案OK了，下面，我們開始網頁的構思和分析了，這裡就不詳細說了哦，這篇文章重在分享怎麼去設計配色方案。呵呵

利用自己做好的配色方案來設計網頁，一定要考慮一下啊因素(根據配色來設計網頁，又是一門大學問了，修行在個人，希望對大家有幫助，幫助大家能更好的發揮設計才能，嘿嘿)：

各種色彩在整個頁面中的比例，分別佔多少

色彩運用到哪些細節

整體色彩是什麼

反差色彩是什麼

通用的黑白灰色彩如果運用到恰到好處

等等…..(這個就涉及頁面設計的知識啦，這裡就不說咯)

最後，完成的最終效果圖如下(這個項目還算順利，直接過稿，虛驚一場，謝天謝地)

(二)加拿大Minglian Holdings Ltd.諮詢顧問有限公司配色方案設計(簡潔型配色方案)

下面進行一個簡潔的配色方案，具體的過程，就沒有上面的說的那麼詳細，都是一樣的PS使用技巧和原理，大家只要掌握一種，就可以通用咯，適合大家使用的，都司∏槌⑹裕不適合的，希望大家能尋找到更好的配色技巧。

客戶給的資料，就一張LOGO和一張素素材

廢話不多少，一看就知道，主色調，藍色，這個大家估計設計的頁面使用藍色調的也不少。

那我們還需要配色方案嗎?

沒錯，一個項目，不僅僅要完成它，個人覺得還要做的有價值，能提高自己的設計能力，每一個作品，不論它是簡單的，還是複雜的，都要有所收穫，否則就沒意義做網頁叻。(個人看法，做的頁面，一定要對自己有成長，否則就不會去做)

1.我們進行大眾化藍色配色方案的目的?

當然，我們要從配色方案中尋找其他的輔助色，對比色，讓網站不是那麼死板，無趣，讓設計更加有意思。

開始了，我們先老規矩，確認了底色和主色(白色，藍色)，PS一下

注意哦：這個主色調是直接從LOGO里選擇的，如果沒提供LOGO，你可以任意按照自己的思想，去任意選擇一個色彩，不用擔心最後配色不協調，丑到極致。

2.自己要心裡有數，使用其它什麼色彩去搭配?這裡我使用綠色和黃色去搭配。來吧，COME ON

不論是之前的那個複雜的配色方案，還是這個簡單的，切記，每個“輔助色彩圖層，都是這樣疊加起來的，並不是不重合的”

3.老方法，速度一點，設置混合模式為“柔光”或者“疊加”

4.光看這裡的色彩，覺得不是很爽，所以還是繼續配啊配，那開始其他的反差色設計

改變圖層混合模式為“亮光”(注意，底部的那個基本色藍色不要改變圖層模式喔)

頂部加一層黑色，模式為“色相”，改變飽和度，調整到協調

5.哈哈，不錯吧，好了，這個看起來順眼了，就這樣定下色彩方案了，使用黃色和綠色還有深藍作為相似色和對比色，進行頁面設計吧。

當然，你不一定及用“黃色和綠色”進行搭配設計色彩方案，可以用紅，灰，紫，青等等都可以的，完全是你的自由，嘿嘿。

這次的配色方案簡單吧?就是找出其他能搭配LOGO主色調的色彩，以便你設計網頁有頭緒。。

簡約而不簡單，配色不論如何都是重中之重，也是難中之難。所以啊，自己多實踐一下。

國外的網站，力求簡約，力求清潔易用。。。這個項目還算簡單，修改了一次，就OK了，所以，盡量能有技巧減少飛機率，是最好的。。

這個配色方法，很適合自己，不知道有沒有更多的人適合呢?一起啊分享學習吧，呵呵～～

希望這次的實戰運用，大家能更深入了解自己的這種配色方案設計大法，嘿嘿。歡迎拍磚，歡迎交流學習。

看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 高效高質設計一個完整的配色方案 這教學會喜歡

文章標題: 骨子愛創意- 高效高質設計一個完整的配色方案–轉載請註明來源處

本教學分類為平面理論教程中的 其他教程相關教學

文章相關關鍵字為: 方案,完整,一個,高質,設計,高效,配色,色彩,自己,使用,

本文永久連結 :高效高質設計一個完整的配色方案

本文轉載自 :VIA