當前位置:才華齋>設計>美工設計>

網頁美工設計色彩基礎

美工設計 閱讀(1.34W)

我們都知道網頁美工設計是一項重要並複雜的工作,我們的網頁美工設計不僅要兼顧網頁的整體風格的設計還要兼顧圖片的設計。下面是小編為大家整理的網頁美工設計色彩基礎,歡迎參考~

網頁美工設計色彩基礎
  網頁美工設計色彩基礎

色彩做為的第一視覺語言在任何設計中都佔據重要地位,網頁製作必須深入理解和運用色彩,掌握進行色彩選擇和匹配的原則和方法。

一、 網頁美工設計色彩的一些基本概念

首先了解一下色彩的一些基本概念。自然界中有好多好多種色彩,比如玫瑰是紅色的,大海是藍色的,桔子是橙色的但是最基本的有三種(紅,黃,藍),其它的色彩都可以由這三種色彩調和而成。我們稱這三種色彩為“三原色”。

現實生活中的色彩可以分為彩色和非彩色。其中黑白灰屬於非彩色系列。其它的色彩都屬於彩色。任何一種彩色具備三個特徵:色相,明度和純度。其中非彩色只有明度屬性。 色相,指的是色彩的名稱。

這是色彩最基本的特徵,是一種色彩區別於另一種色彩的最主要的因素。比如說紫色,綠色,黃顏色等等都代表了不同的色相。同一色相的色彩,調整一下亮度,或者純度很容易搭配,比如,深綠,暗綠,草綠,亮綠。 明度,也叫亮度,指的是色彩的明暗程度,明度越大,色彩越亮。 比如一些購物,兒童類網站。用的是一些鮮亮的顏色,讓人感覺絢麗多姿,生氣勃勃。明度越低,顏色越暗。主要用於一些遊戲類網站,充滿神祕感;一些個人站長為了體現自身的個性,也可以運用一些暗色調來表達個人的一些孤僻,或者憂鬱等性格。有明度差的色彩更容易調和。如紫色(#993399)跟黃顏色(#ffff00),暗紅(#cc3300)跟草綠(#99cc00),暗藍(#0066cc)跟橙色(#ff9933)等。圖1中的(1)就是明度由高到低變化的例子。 圖1 (1)明度變化(2)純度變化 純度,指色彩的鮮豔程度,純度高的色彩純,鮮亮。純度底的色彩暗淡,含灰色。如圖1中的(2)是純度從低到高的變化。 相近色:色環中相鄰的三種顏色。如圖2中的黃綠色,黃顏色和桔黃顏色。相近色的搭配給人的視覺效果很舒適,很自然。所以相近色在網站設計中極為常用。 圖2 相近色 圖3 互補色 互補色,色環中相對的兩種色彩。如圖3中的亮綠色跟紫色,另外如紅色跟綠色,藍色和橙色等。對互補色,調整一下補色的亮度,有時候是一種很好的搭配。就拿藍色跟橙色來打個比方吧,看圖6,調整了藍色的亮度以後其搭配效果是不是更好呢?補色在網站設計中用得也極為普遍。 圖4 補色亮度調節 暖色,如圖5中的黃顏色,橙色,紅色,紫色等都屬於暖色系列。暖色跟黑色調和可以達到很好的效果。暖色一般應用於購物類網站,電子商務網站,兒童類網站等等,用以體現商品的琳琅滿目,兒童類網站的活潑,溫馨等等效果。 冷色,如圖6中的綠色,藍色,藍紫色等等都屬於冷色系列。冷色一般跟白色調和可以達到一種很好的效果。冷色一般應用於一些高科技,遊戲類網站,主要表達嚴肅,穩重等效果。色彩均衡,網頁讓人看上去舒適,協調,除了文字,圖片等內容的合理排版,色彩的均衡也是相當重要的一個部分。比如一個網站不可能單一的運用一種顏色,所以色彩的均衡問題是設計者必須要考慮的問題。色彩的均衡,包括色彩的位置,每種色彩所佔的比例,面積等等。比如鮮豔明亮的色彩面積應小一點,讓人感覺舒適,不刺眼。這就是一種均衡的色彩搭配。

二、 色彩的聯想

色彩在人們的生活中都是有豐富的感情和含義的。比如紅色讓人聯想到玫瑰,聯想到喜慶,聯想到興奮。白色聯想到純潔,乾淨,簡潔;紫色象徵著女性化,高雅,浪漫;藍色象徵高科技,穩重,理智;橙色代表了歡快,甜美,收穫;綠色代表了充滿青春的活力,舒適,希望等等。當然不是說某種色彩一定代表了什麼含義。在特定的場合下,同種色彩可以代表不同的含義。

三、 黑白灰的運用

黑白灰是萬能色,可以跟任意一種色彩搭配。當你為某種色彩的搭配苦惱的時候,不防試試用黑白灰。當你覺得兩種色彩的搭配不協調,試試加入黑色,或者灰色,或許會有意想不到的效果哦。 對一些明度較高的網站,配以黑色,可以適當地降低其明度。 白色是網站用的最普遍的一種顏色。很多網站甚至留出大塊的白色空間,作為網站的一個組成部分。這就是留白藝術。很多設計性網站較多運用留白藝術。留白,給人一個遐想的空間,讓人感覺心情舒適,暢快。恰當的留白對於協調頁面的均衡起到相當大的作用。

四、 確定網站的主題色

一個網站不可能單一的運用一種顏色,讓人感覺單調,乏味;但是也不可能將所有的顏色都運用到網站中,讓人感覺輕浮,花俏。一個網站必須有一種或兩種主題色,不至於讓客戶迷失方向,也不到於單調,乏味。所以確定網站的主題色也是設計者必須考慮的問題之一。一個頁面儘量不要超過4種色彩,用太多的色彩讓人沒有方向,沒有側重。當主題色確定好以後,考慮其它配色時,一定要考慮其它配色與主題色的關係,要體現什麼樣的效果。另外哪種因素佔主要地位,是明度,純度還是色相。

五、 頁面各要素

上面學習了顏色的一些基本概念及顏色的一些搭配問題,具體運用到網頁中,各要素的`色彩又是如何搭配的呢?

1. 背景與文字

如果一個網站用了背景顏色,必須要考慮到背景顏色的用色,與前景文字的搭配等問題。一般的網站側重的是文字,所以背景可以選擇純度或者明度較低的色彩,文字用較為突出的亮色。讓人一目瞭然。當然,有些網站為了讓瀏覽者對網站留有深刻的印象,他在背景上作文章。比如一個空白頁的某一個部分用了很亮的一個大色塊,是不是讓你豁然開朗呢!此時他為了吸引瀏覽者的視線,突出的是背景,所以文字就要顯得暗一些,這樣文字才能跟背景分離開來,便於瀏覽者閱讀文字。

2. LOGO和BANNER

LOGO和BANNER是宣傳網站最重要的部分之一,所以這兩個部分一定要在頁面上突迎而出。怎樣做到這一點呢?我們將LOGO和BANNER做的鮮亮一些,也就是色彩方面跟網頁的主題色分離開來。有時候為了更突出,也可以使用與主題色相反的顏色。

3. 導航,小標題

導航,小標題是網站的指路燈。瀏覽者要在網頁間跳轉,要了解網站的結構,網站的內容,都必須通過導航或者頁面中的一些小標題。所以我們可以使用稍微具有跳躍性的色彩,吸引瀏覽者的視線,讓他們感覺網站清晰,明瞭,層次分明。想往哪裡走都不會迷失方向。

4. 連結顏色設定

一個網站不可能只是單一的一頁,所以文字與圖片的連結是網站中不可缺少的一部分。這裡特別指出文字的連結,因為連結區別於文字,所以連結的顏色不能跟文字的顏色一樣。現代人的生活節奏相當快,不可能浪費太多的時間在尋找你網站的連結上。設定了獨特的連結顏色,讓人感覺他的獨特性,自然而然好奇心必然趨使他移動滑鼠,點選滑鼠。

可見我們網頁美工設計色彩基礎是多方面的,我們在網頁美工設計色彩選擇的時候我們要注意色彩的明度和亮度,還要注意色彩的聯想,注意相近色和互補色的運用,注意確定網站的主題色。我們網頁美工設計顏色運用是靈活多變的。