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




  • 【 設計理論】詳細解析平面作品色彩提取及應用技巧




    詳細解析平面作品色彩提取及應用技巧

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

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

    教學大綱:

    把這幾年自己在工作中的經驗與技巧拿出來分享下,不過寫文字對我來說太糾結,還沒有作圖來的實在,哈哈。不管怎麼說還是寫完了,第一次寫教程,如果有沒說清楚的地方歡迎交流。感謝@韓雪冬老師半夜三點的支持,哈哈。


    設計理論教學開始

    把這幾年自己在工作中的經驗與技巧拿出來分享下,不過寫文字對我來說太糾結,還沒有作圖來的實在,哈哈。不管怎麼說還是寫完了,第一次寫教程,如果有沒說清楚的地方歡迎交流。感謝@韓雪冬老師半夜三點的支持,哈哈。

    在站酷網公開課第五期中有幸和冬哥配合了下,在裡面說到一點關於配色的技巧,有很多酷友在問怎樣操作的,今天拿出來和大家分享下,希望能夠幫到剛入行的朋友,如有不妥之處還望各位同行指正。

    作者大力推薦的:網頁配色進階篇:疊柔配色技巧

    色彩的問題很多朋友都在問,包括在前幾期的公開課中,都有問色彩的問題,大部分老師說感覺,嗯,在我看來也是感覺,但感覺着東西都是自己經歷多了才出現的,在剛接觸設計的時候,選擇色彩是有一些技巧的,咱們這次就說說這些技巧。這次分為兩部分,

    一部分是怎樣提取合適的色彩,一部分怎樣應用提取到的色彩。

    ONE · 怎樣提取合適的色彩

    主要用到ps里的一個功能:儲存為WEB所用格式 快捷鍵:Ctrl+Shift+Alt+S 如圖:

    詳細解析平面作品色彩提取及應用技巧

    這裡分成二個步驟:

    1.1:找圖

    關鍵步驟,確定自己想要的風格,找大量的符合風格要求的圖片,進行對比篩選,選出最符合自己要求的幾張圖片開始色彩的提取。

    因為這次沒有明確的風格和方向,我從佳作欣賞里找了一張色彩豐富,精神狀態積極向上,尺寸超大(選圖片是盡量找到大尺寸的圖,提取色彩時顏色會很正)的圖片開始咱們的教程,Galaxy S4自帶壁紙,見附圖。

    詳細解析平面作品色彩提取及應用技巧

    1.2:提取顏色

    把選中的圖片放入ps中,點擊“存儲為web所用格式”(如果沒有色彩非常合適的圖,可以再ps里適當的調整顏色再進行顏色提取),格式選為png-8,色塊選擇8,(數字越大色塊越多,視自己需求而定)。

    在顏色顯示區域就會留下8種顏色(按照顏色在畫面中所佔的單位面積程序自動篩選),點擊顏色區域右側的下拉按鈕,會找到“儲存顏色表”,把他儲存到桌面上或者你容易找到的地方。然後用ps打開,色斑中會顯示剛才提取到的顏色。

    詳細解析平面作品色彩提取及應用技巧

    OK,顏色提取成功,3個色相的8種顏色

    是不是非常簡單,大家感受一下,馬上進入第二部分

    TWO · 提取到的色彩怎樣應用

    按照咱們第一步提取的顏色做了一個Metro風格改進版的頁面(裡面的內容可以無視,都是替代文字),先感受下。。。

    詳細解析平面作品色彩提取及應用技巧

    單純說顏色的話,這個話題還真不好說,因為咱們最終要出的是呈現內容的頁面的內容,讓圖形、文字、色彩相互協調,而不是做排列顏色的色譜。所以就牽扯到框架布局和內容展示層級的問題,這兩個東西大家先跟着自己的經驗走,有機會下次聊,這次咱們先說色彩!

    詳細解析平面作品色彩提取及應用技巧

    這個頁面和現在的主流網站框架差不多,從上到下主要分為三個部分,導航區域、banner、內容區。

    具體的顏色應用為:

    1、導航文字及LOGO的顏色為最淺的藍色。

    2、Banner區域即大背景,這裡用了咱們開始的圖片,上邊的大標題LOGO則用了最深的藍色。

    3、內容區域出現的提取到的三哥色相的色彩,如果只是排列剩下的幾個顏色的話,顏色會很沖,我完全不能接受!所以找了幾張圖片用來過渡顏色,調整畫面的節奏,現在看來效果還不錯。內容區域的文字顏色與導航文字一致,都是很淺的藍色。

    4、內容區域的幾個按鈕並沒有用提取的顏色,而是用白色疊加然後調整透明度出來的。(大孔雀老師前段時間在經驗分享里發了一個色彩教程:網頁配色的天然范兒。推薦大家去看下,看完后受益匪淺。)

    這個技巧還望大家靈活應用,如果單純靠機器程序的話,自己的感覺依舊很難找。如果你真的對設計感興趣的話請不要忘記設計師的三多:多看、多想、多練,看到,理解,通過自己的形式表現出來。

    越努力,越幸運,與大家並肩前行。

    到這裡這教程就完了,我回頭看了下,好像沒有很深奧很難理解的東西,所以我在大標題的旁邊偷偷加了四個字“基礎教程”,哈哈,希望此教程能讓你的配色會說話,讓你的設計更有說服力,能夠幫到大家。

    — —

    文章永久連結為: 詳細解析平面作品色彩提取及應用技巧