• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】高效高質設計一個完整的配色方案




    高效高質設計一個完整的配色方案

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自站酷的設計理論類文章,寫教學的作者是xizon,感謝xizon提供設計理論的實作教學。

    教學大綱:

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


    設計理論教學開始

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

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

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

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

    高效高質設計一個完整的配色方案

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

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

    好了,開始我們的實際操作吧,下面使用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主色調的相似色,輔助色,下面,我們進行反差色的設計

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

    高效高質設計一個完整的配色方案

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

    高效高質設計一個完整的配色方案

    高效高質設計一個完整的配色方案

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

    【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了,所以,盡量能有技巧減少飛機率,是最好的。。

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

    高效高質設計一個完整的配色方案

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

    — —

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