從動漫色彩設計看網頁配色的運用

2115

Preview Summary

website Reviews : 29 5.0

雖然現在有些配色輔助工具的線上服務可以參考如何網頁配色,正因為每種配色盤看起來都很精彩,以致心猿意馬難以抉擇。本篇則是跳脫美式的網頁配色,而採取日式細膩的網頁配色範例當作主要介紹。藉由動漫的色彩設計一窺網頁配色的技巧。

覺得網站配色難以決定嗎?「色票十八招」誠心送給你 ! 

雖然現在有些配色輔助工具的線上服務可以參考如何網頁配色,正因為每種配色盤看起來都很精彩,以致心猿意馬難以抉擇。曾有網友問過我如何決定配色?通常我只會用到很少的顏色佈置網站;印象中沒有難以抉擇的問題。在選色時習慣使用圓形色盤,隨著當時心情點選色相、彩度、明度,有點像是面對標靶射飛鏢的感覺;點中了就選那個顏色。

網頁配色的參考來源

在另一篇  馬卡龍色系的網頁配色 當中提到:生活中的許多產品透過富有美感與設計才能的專家經手創造,我們可以揀選適合自己網站的設計元素當成參考。不過該篇的馬卡龍色彩適合小比例的網頁物件,大塊面的主頁色彩使用上則需要更謹慎些。

例如馬卡龍這種彩度較飽和的配色,大塊面運用對於部落格容易視覺疲乏,適合特殊用途的網頁、公司形象頁。例如波蘭設計室 Joy Intermedia 所設計的 Christmas Heroes 網頁,所採取的配色屬於這類特殊網頁。我將其中三個頁面截圖如下:

色彩豐富 構圖簡潔

目前的色彩趨勢以灰色調(濁色調)為混色的主軸。明度或彩度的減降營造出一種陳舊的復古感,像是祖母時代的雜誌與服裝廣告,混雜著油墨的不純粹色澤。抑或經歷風化歲月般的廣告看板,重現於網頁配色當中﹍這種歐美復古風格也逐漸影響到東方。

動畫色彩指定師

雖然網頁設計的趨勢大多從歐美主導,但如果談到動畫色彩設計卻有從亞洲流向西方的趨勢,或許因為日本對於動畫的積極發展有關。本篇則是跳脫美式的配色風格,而採取日式的細膩配色當作主要介紹。

動漫當中有幾位用色洗練的色彩設計師。當中偏向灰彩配色的設計師 – 西香代子,其用色與近期的網頁配色流行較相近,所以本篇以她的色彩設計作品「神様はじめました – 元氣少女緣結神」當作介紹與範例。

關於 西香代子

西香代子的作品,例如「超時空要塞」、「琉璃艦隊」、「白熊咖啡廳」等擔任色彩設計師。如果對於動漫比較沒有接觸的網友,「名偵探柯南 劇場版」應該有印象。西香代子則是因為用色細膩被指定為電影版的首席色指定。 請見個人介紹

 

如何解析動漫配色

這部動漫由於配色相當適合網頁配色,所以將它的一些鏡幕截取當成範本。動漫配色只需要從它的 PV 或 OP 解析即可,你也能選擇「順眼」的動漫當成個人的配色事典。但漫畫封面或海報就不建議當成參考,因為封面會使用更複雜高超的配色技巧,不適合運用到網頁中。接著請先觀看 PV 影片,接收影片所傳達的色彩訊息。

網頁配色十八招

網頁中通常會使用到幾種主色,以下有十八組配色讓網友參考。如果你喜歡典雅又安全的用色,這些組合不會讓你失望。點擊圖面選取色碼。

如何運用配色

先選定一個主色,它負責最大面積的色盤,其餘兩色運用於 Header 或 Footer 位置;或是按鈕、分隔線、標題底色等物件。其比例可以按 6 : 3 : 1 的面積比,大膽一點的技法是 1 : 1 : 1 的橫式分割,很適合手機版。

運用時不僅是使用在底色,一張色相一致的照片可替代成一種顏色使用,滿幅的大圖當成底圖亦頗有趣味。我將另一個 Blogger 行動版修改三種配色,範例如下:

網頁配色範例
29
· · ·