- Photoshop淘寶天貓網店設計裝修從入門到精通
- 蔣珍珍
- 4651字
- 2020-11-28 17:16:15
2.1 色彩常識:色彩設計知識解析
把店鋪裝修好,讓自己的店鋪更好看一點,更漂亮一點,這樣就會在視覺上吸引顧客,給店鋪帶來更多的生意。對進入店鋪的顧客來說,他們首先會被店鋪中的色彩所吸引,然后根據色彩的走向對畫面的主次進行逐一的了解。本節主要對網店的色彩設計知識進行講解,這些基礎知識也是后期網店裝修配色中的關鍵所在。
2.1.1 無色系與彩色系
為了便于認識網店裝修配色中的色彩變換,認識色彩的基本屬性與基本規律,我們必須對色彩的種類進行分類與了解。豐富多樣的顏色可以分成兩大類:無彩色系和有彩色系。有彩色系的顏色具有3個基本特性:色相、純度(也稱彩度、飽和度)、明度,在色彩學上也稱為色彩的三大要素或色彩的三屬性。其中,飽和度為0的顏色為無彩色系。
在網店裝修設計中,無彩色系和有彩色系都占有舉足輕重的地位。無論是以有彩色為主體的畫面效果,還是以單純黑白灰構成的畫面效果,都能給人帶來一種奇幻無比的色彩感覺。充分、合理地利用色彩的類別與特性,可以使網店裝修的畫面獲得意想不到的效果。
1.無彩色系
無彩色系是指白色、黑色和由白色黑色調和形成的各種深淺不同的灰色。無彩色按照一定的變化規律,可以排成一個系列,由白色漸變到淺灰、中灰、深灰到黑色,色度學上稱此為黑白系列。如圖2-1所示,為無彩色系的店鋪首頁。

圖2-1 無彩色系的店鋪首頁
無彩色沒有色相的種類,只能以明度的差異來區分,如圖2-2所示。無彩色沒有冷暖的色彩傾向,因此也被稱為中性色。

圖2-2 無彩色系
在無彩色系中,純白是理想的完全反射的物體;純黑是理想的完全吸收的物體。在現實生活中,并不存在純白與純黑的物體。顏料中采用的鋅白和鉛白只能接近純白;煤黑只能接近純黑。色彩的明度可用黑白度來表示,越接近白色,明度越高;越接近黑色,明度越低。黑與白作為顏料,可以調節物體色的反射率,使物體色提高明度或降低明度。
無彩色中的黑色是所有色彩中最黑暗的色彩,通常能夠給人以沉重的印象,而白色是無彩色中最容易受到環境影響的顏色。如果設計的畫面中白色的成分越多,畫面效果就越單純。而灰色則處于白色和黑色之間,它具有平凡、沉默的特征,很多時候在店鋪裝修中作為調節畫面色彩的一種顏色,可以給顧客帶來安全感和親切感。如圖2-3所示,為服裝店鋪裝修中設計的商品詳情頁面。

圖2-3 商品詳情頁面
2.有彩色系
彩色是指紅、橙、黃、綠、青、藍、紫等顏色,不同明度和純度的紅橙黃綠青藍紫色調都屬于有彩色系。有彩色是由光的波長和振幅決定的,波長決定色相,振幅決定色調。如圖2-4所示,為使用有彩色系進行配色的網店裝修圖片。

圖2-4 使用有彩色系進行配色的網店裝修圖片
專家指點
在圖像的制作過程中,根據有彩色的特性,可以通過調整其色相、明度以及純度之間的對比關系,或通過各色彩間面積調和,可以搭配出色彩斑斕、變化無窮的網店裝修畫面效果。
2.1.2 顏色的三種屬性
現在讓我們更進一步地研究色彩是怎樣表達的。如圖2-5所示,是兩個紅色圓圈。下面通過對比來分析色彩的3種基本屬性。

圖2-5 兩個紅色圓圈
● 色相:它們都是紅色的。
● 明度:左邊的顏色明顯要比右邊的更亮一些。
● 純度:左邊的純度更高,右邊的顯得灰暗一些。
這就是為什么這兩個紅色圓圈顏色一開始看上去好像差不多,但仔細一看就不同了。因此我們說,色彩可以通過色相、明度和純度3種屬性綜合表達。
1.色相
蘋果是紅色的,檸檬是黃色的,天空是藍色的。當我們考察不同色彩的時候,時常用色相來表示,如圖2-6所示。我們用色相這一術語將色彩區分為紅色、黃色或藍色等類別。

圖2-6 色相條與色相漸變條
專家指點
色相是色彩的最大特征。所謂色相,是指能夠比較確切地表示某種顏色色別的名稱,也是各種顏色直接的區別,同樣也是不同波長的色光被感覺的結果。
色相是由色彩的波長決定的,以紅、橙、黃、綠、青、藍、紫代表不同特性的色彩相貌,構成了色彩體系中的最基本色相。色相一般由純色表示。
雖然紅色和黃色是完全不同的兩種色相,但我們可以混合它們來得到橙色。混合黃色和綠色可以得到黃綠色或青豆色,而綠色和藍色混合則產生藍綠色。因此,色相是互相關聯的,我們把這些色相排列成圈,這個圈就是“色環”,如圖2-7所示。

圖2-7 色環
專家指點
色環其實就是在彩色光譜中所見的長條形的色彩序列,只是將首尾連接在一起,使紅色連接到另一端的紫色,色環通常包括12種不同的顏色。
暖色:暖色由紅色調構成,如紅色、橙色和黃色。這種顏色選擇給人以溫暖、舒適、有活力的感覺。這些顏色產生的視覺效果使其更貼近觀眾,并在頁面上更顯突出。
寒色(也稱冷色):冷色來自藍色調,如藍色、青色和綠色。這些顏色使配色方案顯得穩定和清爽。它們看起來還有遠離觀眾的效果,所以適于做頁面背景。
Lab顏色空間模型是當前最通用的用于表達物體色彩的量度系統,它是由國際照明委員會(CIE)在1976年統一制定的。在Lab顏色空間里,明度標示為L,色相和彩度分別用a和b表示。數值越大,色彩越亮越純;相反,數值越接近零值,則色彩越晦暗。如圖2-8所示,為Lab顏色空間的平面圖像。

圖2-8 Lab顏色空間的平面圖像
專家指點
Lab色彩模型由明度(L)和有關色彩的a、b三個要素組成。
L表示明度(Luminosity), L的值域由0~100, L=50時,就相當于50%的黑。
a表示從洋紅色至綠色的范圍,b表示從黃色至藍色的范圍。a和b的值域都是由+127至-128,其中+127 a就是紅色,漸漸過渡到-128 a的時候就變成綠色;同樣原理,+127 b是黃色,-128 b是藍色。
色更偏紅,綠色更偏青,黃色略帶紅,藍色有點偏青色)。所有的顏色就以這3個值交互變化所組成的。例如,一塊色彩的Lab值是:L=100、a=30、b=0,這塊色彩就是粉紅色。(注:此模式中的a軸、b軸顏色與RGB不同,洋紅
在進行網店裝修的配色中,選擇不同的色相,會對畫面整體的情感、氛圍、風格等產生影響。如圖2-9所示,為兩種不同色相搭配下的店鋪裝修效果。

圖2-9不同色相搭配下的店鋪裝修效果
2.明度
有些顏色顯得明亮,而有些卻顯得晦暗。這就是為什么亮度是色彩分類的一個重要屬性的原因。例如,檸檬的黃色就比葡萄柚的黃色顯得更明亮一些。那如果將檸檬的黃色與一杯紅酒的紅色相比呢?顯然,檸檬的黃色更明亮。可見,明度可以用于對比色相不同的色彩,如圖2-10所示。

圖2-10 明度
在網店裝修的配色過程中,明度也是決定文字可讀性和修飾素材實用性的重要元素。在設計畫面整體印象不發生變動的前提下,維持色相、純度不變,通過加大明度差距的方法可以增添畫面的張弛感,如圖2-11所示。

圖2-11 色彩的明暗程度會隨著光的明暗程度變化而變化
專家指點
明度是眼睛對光源和物體表面的明暗程度的感覺,主要是由光線強弱決定的一種視覺經驗。簡單來說,明度可以簡單理解為顏色的亮度,不同的顏色具有不同的明度。任何色彩都存在明暗變化。其中黃色明度最高,紫色明度最低,綠、紅、藍、橙的明度相近,為中間明度。另外,在同一色相的明度中還存在深淺的變化。例如,綠色中由淺到深有粉綠、淡綠、翠綠等明度變化。
同時,在網店裝修的配色中,明度也是色彩的精髓,色彩的明度差異比色相的差別更容易讓人將主體對象從背景中區分出來。圖像與背景的明度越接近,辨別圖像就會變得更困難。如圖2-12所示,為同一圖像在不同明度背景上的識別效果,

圖2-12 同一圖像在不同明度背景上的識別效果
3.純度
純度用來表現色彩的鮮艷和深淺。色彩的純度變化,可以產生豐富的強弱不同的色相,而且使色彩產生韻味與美感。
純度是深色、淺色等色彩鮮艷度的判斷標準。純度最高的色彩是原色,隨著純度的降低,就會變化為暗淡的、沒有色相的色彩。純度降到最低就會失去色相,變為無彩色。
如圖2-13所示,用色相相同的檸檬和卡其布做比較,很難用明度來解釋這兩種顏色的不同,而純度這一概念則可以很好地解釋為什么我們看到的檸檬與卡其布的顏色如此不同。因此,除了色相和明度,我們研究色彩時應該加上它的第三種屬性:純度。

圖2-13 檸檬與卡其布的顏色
純度通常是指色彩的鮮艷度。從科學的角度看,一種顏色的鮮艷度取決于這一色相發射光的單一程度。人眼能辨別的有單色光特征的色,都具有一定的鮮艷度。不同的色相不僅明度不同,純度也不相同。
純度是說明色質的名稱,也稱飽和度或彩度、鮮度。色彩的純度強弱,是指色相感覺明確或含糊、鮮艷或混濁的程度,如圖2-14所示。高純度色相加白或黑,可以提高或減弱其明度,但都會降低它們的純度。如果加入中性灰色,也會降低色相純度。

圖2-14 純度表
以紅色為例,向純紅色中加入一點白色,純度下降而明度上升,變為淡紅色。繼續加入白色的量,顏色會越來越淡,純度下降,而明度持續上升。加入黑色或灰色,則相應的純度和明度同時下降。同一色相的色彩,不摻雜白色或者黑色,則被稱為純色。在純色中加入不同明度的無彩色,會出現不同的純度,如圖2-15所示。

圖2-15 不同純度的紅色
色彩的純度決定了色彩的鮮艷純度。純度越高的色彩,其圖像的效果給人的感覺越艷麗,視覺沖擊力和刺激力就越強;相反,色彩的純度越低,畫面的灰暗程度就越明顯,其產生的畫面效果就越柔和,甚至是平淡。
因此,在網店裝修的配色過程中,要把握好色彩的純度運用,才能營造出不同的視覺畫面,讓色彩的視覺效果與店鋪的風格一致。如圖2-16所示,為低純度和高純度配色商品擺放效果。

圖2-16 不同純度對比配色商品擺放
2.1.3 色調奠定主旋律
在大自然中,我們經常見到這樣一種現象:不同顏色的物體或被籠罩在一片金色的陽光之中,或被籠罩在一片輕紗薄霧似的、淡藍色的月色之中;或被秋天迷人的金黃色所籠罩;或被統一在冬季銀白色的世界之中。這種在不同顏色的物體上,籠罩著某一種色彩,使不同顏色的物體都帶有同一色彩傾向,這樣的色彩現象就是色調。
色調是指網店頁面中畫面色彩的總體傾向,是大方向的色彩效果。在網店裝修的過程中,往往會使用多種顏色來表現形式多樣的畫面效果,但總體都會持有一種傾向,是偏黃或偏綠,是偏冷或偏暖等。這種顏色上的傾向就是畫面給人的總體印象,被稱為色調,如圖2-17所示。

圖2-17 不同色調的店鋪裝修效果
色調是色彩運用中的主旋律,是構成網店裝修畫面的整體色彩傾向,也可以稱為“色彩的基調”。畫面中的色調不僅僅是指單一的色彩效果,還是色彩與色彩直接相互關系中所體現的總體特征,是色彩組合的多樣、統一中呈現出的色彩傾向。
1.色調色相的傾向
色相是決定色調最基本的因素,對色調起著重要的作用。色調的變化主要取決于畫面中設計元素本身色相的變化。例如,某個網店呈現為紅色調、綠色調或黃色調等,其指的就是注冊畫面設計元素的固有色相,就是這些占據畫面主導地位的顏色決定了畫面的色調傾向,如圖2-18所示。抱枕網店裝修畫面中使用了大面積的綠色調。綠色作為一種中立顏色,代表生命、生機,有自然氣息,符合該商品的主題特征。

圖2-18 色調色相的傾向

圖2-18 色調色相的傾向(續)
2.色調明度的傾向
當構成畫面的基本色調確定之后,接下來的色彩明度變化也會對畫面造成極大的影響。畫面明亮或者暗淡,其實就是明度的變化賦予畫面的不同明暗傾向。因此,在對一個網店裝修的畫面進行構思設計時,采用不同的明度的色彩能夠創造出豐富的色調變化,如圖2-19所示。

圖2-19色調明度的傾向
專家指點
在店鋪的裝修畫面中使用大面積的低明度色彩時,濃重、渾厚的色彩會給人深沉、凝重的感覺,并表現出具有深遠寓意的畫面效果。
3.色調純度的傾向
在色彩的三大基本屬性中,純度同樣是決定色調不可或缺的因素。不同純度的色彩所賦予的畫面感覺也不同。我們通常所指的畫面鮮艷度或昏暗均是由色彩的純度所決定的。
在網店裝修中,色調純度的傾向,一般會根據商品具體的色彩來確認。不過,就色彩的純度傾向而言,高純度色調和低純度色調都能賦予畫面極大的反差,給顧客帶來不同的視覺印象,如圖2-20所示。

圖2-20 色調純度的傾向
- AI繪畫教程:Midjourney使用方法與技巧從入門到精通
- 四時風月繪:國風水墨CG插畫繪畫技法
- VSTO 3.0 for Office 2007 Programming
- MATLAB 2015從入門到精通
- Building Websites with Joomla! 1.5
- AutoCAD入門教程全掌握
- OpenCart 1.4 Template Design Cookbook
- 深入淺出WebAssembly
- PHPList 2 E/mail Campaign Manager
- After Effects CS6影視后期合成案例教程(微課版)
- Adobe Captivate 7 for Mobile Learning
- SPSS統計分析從入門到精通
- 設計+制作+印刷+商業模版Photoshop+InDesign實例教程
- AutoCAD 2011繪圖基礎
- Liferay Portal 5.2 Systems Development