服務電話(huà)

028-85283257

13540034978

13540034978 / 028-85283257

461544981@qq.com

contact
成都市武侯區(qū)航空路6号豐德國際廣場(chǎng)B1座12A樓02号
聯系我們
成都網站建設公司!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

先聲明(míng)本文的(de)内容量很大(dà),是對(duì)光(guāng)影(yǐng)知識的(de)一次系統梳理(lǐ)和(hé)總結,相信讀完會有所收獲,當然有些内容還(hái)不夠深入,還(hái)要繼續深究和(hé)學習(xí)

構圖、色彩和(hé)光(guāng)影(yǐng)屬于設計中非常重要的(de)3塊體系,但構圖和(hé)色彩大(dà)多(duō)是偏感性的(de)主觀理(lǐ)解,而光(guāng)影(yǐng)則是理(lǐ)性的(de)客觀判斷。因爲這(zhè)是自然界中真實存在的(de)物(wù)理(lǐ)現象,因此大(dà)部分(fēn)時(shí)候畫(huà)面的(de)「添加光(guāng)影(yǐng)」都是在還(hái)原真實,所以本文的(de)很多(duō)知識都偏理(lǐ)論和(hé)科普,但理(lǐ)性認知無疑是打牢光(guāng)影(yǐng)基礎的(de)第一步。

如果說「構圖」和(hé)「色彩」是視覺設計的(de)基礎,那光(guāng)影(yǐng)便是「錦上添花」,當各種視覺元素組合完成後,隻有「光(guāng)影(yǐng)統一」,才能讓所有元素真實的(de)融在一起,最終形成真實立體、有層次的(de)畫(huà)面,而「光(guāng)影(yǐng)統一」便是這(zhè)篇文章(zhāng)的(de)核心原則。

光(guāng)源類型

其實我們看到的(de)萬物(wù)色彩,都是物(wù)體表面的(de)反射光(guāng),是「光(guāng)」創造了(le)色彩,同時(shí)也(yě)創造了(le)「影(yǐng)」,隻有經過光(guāng)照(zhào)才會出現明(míng)暗,才有所謂的(de)「光(guāng)影(yǐng)」,所以我們先來(lái)說說一切的(de)源頭——光(guāng)。

發光(guāng)的(de)地方就是「光(guāng)源」,當我們對(duì)畫(huà)面「添加光(guāng)影(yǐng)」時(shí),一定要先留意光(guāng)源在哪,像我每次畫(huà)設計草(cǎo)圖時(shí),就會先把主光(guāng)源的(de)位置确定并标示出來(lái),隻有清楚位置,「光(guāng)影(yǐng)統一」才有了(le)依據。

那常用(yòng)的(de)光(guāng)源類型都有哪些呢(ne)?其實就2大(dà)類:照(zhào)射光(guāng)和(hé)環境光(guāng)。2類光(guāng)源往往同時(shí)存在,相互影(yǐng)響,塑造場(chǎng)景時(shí)必須同時(shí)考慮。

1. 照(zhào)射光(guāng)

照(zhào)射光(guāng)就是畫(huà)面中的(de)主要照(zhào)明(míng)光(guāng),這(zhè)是影(yǐng)響整體光(guāng)影(yǐng)的(de)核心光(guāng)源,根據光(guāng)線照(zhào)射路徑的(de)不同,又分(fēn)成直射光(guāng)、散射光(guāng)和(hé)折射光(guāng)。

直射光(guāng)

直接照(zhào)射的(de)光(guāng)源就是直射光(guāng),光(guāng)線路徑呈方向明(míng)确的(de)兩點一線,整體集中、聚焦。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

直射光(guāng)能在物(wù)體表面形成強烈的(de)明(míng)暗對(duì)比,并且過渡偏硬,形成清晰的(de)輪廓邊緣,最常見的(de)直射光(guāng)就是晴天陽光(guāng),它屬于自然光(guāng)。如下(xià)圖所示,陽光(guāng)直射形成的(de)明(míng)暗強對(duì)比能呈現人(rén)物(wù)及建築的(de)輪廓,突顯立體感。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

和(hé)自然光(guāng)相對(duì)應的(de)是人(rén)造光(guāng),在人(rén)造光(guāng)中,例如攝影(yǐng)棚裏常用(yòng)的(de)閃光(guāng)燈和(hé)常亮燈(不帶柔光(guāng)罩)都算(suàn)直射光(guāng),照(zhào)射效果和(hé)晴天陽光(guāng)類似,仔細觀察投影(yǐng),邊緣都很生硬、清晰。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

散射光(guāng)

當光(guāng)束穿過某一介質(雲層、柔光(guāng)布等),被其表面分(fēn)散傳播的(de)光(guāng)便是散射光(guāng),散射光(guāng)的(de)光(guāng)線路徑呈多(duō)方向發散狀,整體分(fēn)散、無明(míng)确方向。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

自然光(guāng)中,陰天、雨(yǔ)天、霧天的(de)光(guāng)照(zhào)都屬于散射光(guāng),當陽光(guāng)穿過大(dà)氣時(shí),大(dà)氣層能讓光(guāng)線朝不同方向發散,發散後的(de)光(guāng)線柔和(hé),在物(wù)體上形成的(de)明(míng)暗對(duì)比較弱,過渡也(yě)柔和(hé)。如下(xià)圖所示,不管人(rén)物(wù)還(hái)是景物(wù),都無明(míng)顯的(de)陰影(yǐng)輪廓,整體層次豐富而細膩,影(yǐng)調柔和(hé),特别是暗部的(de)細節都能保留完好。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

而人(rén)造光(guāng)中,如果給閃光(guāng)燈和(hé)常亮燈裝上柔光(guāng)罩,這(zhè)時(shí)發出的(de)光(guāng)就會變成散射光(guāng)。例如下(xià)圖中,人(rén)物(wù)和(hé)産品都顯的(de)特别柔和(hé)、舒服。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

折射光(guāng)

當光(guāng)束從一個(gè)介質射入另一介質時(shí),傳播方向發生偏折的(de)光(guāng)就是折射光(guāng)。常見介質有水(shuǐ)、玻璃等,它們的(de)折射角度也(yě)各不相同。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

日常生活中,像泳池裏的(de)水(shuǐ)波光(guāng)影(yǐng)、玻璃杯投射的(de)光(guāng)線圖案都是與折射相關的(de)自然現象。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

而我們在設計Banner時(shí),若将這(zhè)些折射效果表現出來(lái),就會給畫(huà)面增添很多(duō)細節,同時(shí)也(yě)會增加真實感,像水(shuǐ)波光(guāng)影(yǐng)在電商中用(yòng)的(de)就很多(duō)。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

2. 環境光(guāng)

很多(duō)新手在做(zuò)設計時(shí),往往隻注意照(zhào)射光(guāng)(主光(guāng)源)對(duì)物(wù)體的(de)影(yǐng)響,而忽略環境光(guāng),導緻畫(huà)面總是不夠真實。簡單來(lái)說,畫(huà)面中除了(le)主光(guāng)源外的(de)所有光(guāng)線都算(suàn)環境光(guāng),環境光(guāng)的(de)亮度一般很低,且沒有明(míng)确方向性,常見的(de)環境光(guāng)有2種:散射光(guāng)和(hé)反射光(guāng)。

散射光(guāng)

和(hé)照(zhào)射光(guāng)一樣,環境光(guāng)中也(yě)有散射光(guāng),但它們的(de)不同在于:

  • 照(zhào)射光(guāng)中的(de)散射光(guāng)雖然光(guāng)線柔和(hé),但屬強光(guāng),能讓物(wù)體産生明(míng)暗反差;

  • 而環境光(guāng)中的(de)散射光(guāng)屬弱光(guāng),往往隻在主光(guāng)源照(zhào)不到的(de)地方(物(wù)體的(de)暗面)才會看到影(yǐng)響。

像自然界中的(de)夕陽西下(xià),當紅色的(de)太陽光(guāng)(照(zhào)射光(guāng))減弱時(shí),建築的(de)暗部便會顯現藍色的(de)天空光(guāng)(環境光(guāng)),這(zhè)時(shí)紅光(guāng)和(hé)藍光(guāng)會形成鮮明(míng)對(duì)比,極具沖擊和(hé)美(měi)感,這(zhè)樣的(de)畫(huà)面在攝影(yǐng)及設計中都非常常見,也(yě)是攝影(yǐng)界公認的(de)「黃(huáng)金一小時(shí)」,這(zhè)時(shí)的(de)天空光(guāng)就屬于環境光(guāng)中的(de)散射光(guāng)。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

生活中還(hái)有一個(gè)常見現象也(yě)能看到散射光(guāng)影(yǐng)響,當你走在戶外,觀察自己的(de)影(yǐng)子,特别當影(yǐng)子較長(cháng)時(shí)(清晨或傍晚),這(zhè)時(shí)離自己越遠(yuǎn)的(de)區(qū)域顔色越淺,這(zhè)是因爲越遠(yuǎn)的(de)影(yǐng)子所處區(qū)域就越開闊,受周圍散射光(guāng)的(de)影(yǐng)響就越明(míng)顯,因而顔色更淺。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

反射光(guāng)

環境光(guāng)中還(hái)有非常重要的(de)一類是反射光(guāng),當光(guāng)束射到介質表面時(shí),有部分(fēn)自介面射回的(de)光(guāng)就是反射光(guāng)。可(kě)以毫不誇張的(de)講,世界萬物(wù)之所以出現明(míng)暗就是因爲反射光(guāng)的(de)存在。反射光(guāng)一般有2種情形:鏡面反射和(hé)漫反射。

鏡面反射。當反射面非常光(guāng)滑,這(zhè)時(shí)平行射入的(de)光(guāng)線仍會向一個(gè)方向平行的(de)反射出來(lái),效果如同鏡子一樣,雖然這(zhè)樣物(wù)體本身的(de)明(míng)暗就會非常微弱,但人(rén)們透過反射面能看到周圍的(de)環境信息,這(zhè)就是鏡面反射光(guāng)。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

日常生活中像平靜水(shuǐ)面、鏡子、抛光(guāng)金屬等都會有鏡面反射光(guāng),例如我們在刻畫(huà)金屬材質的(de)元素時(shí),常常會在表面加些近乎白色的(de)高(gāo)光(guāng),這(zhè)就是由于鏡面反射而進入眼中的(de)刺目強光(guāng)。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

另外晴空萬裏時(shí),海面也(yě)常出現「波光(guāng)粼粼」的(de)閃光(guāng),同樣也(yě)是陽光(guāng)射入水(shuǐ)面的(de)鏡面反射光(guāng)。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

漫反射光(guāng)。當反射面凹凸不平時(shí),這(zhè)時(shí)平行射入的(de)光(guāng)線就會向各個(gè)方向反射出去,這(zhè)便是漫反射光(guāng)(以下(xià)簡稱「漫射光(guāng)」)。需要說明(míng)這(zhè)裏的(de)凹凸不平也(yě)包括微觀結構,例如有些牆壁看著(zhe)光(guāng)滑,但仔細看表面也(yě)有粗糙顆粒,這(zhè)時(shí)反射出來(lái)的(de)光(guāng)線也(yě)是各個(gè)方向的(de)漫射光(guāng)。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

漫反射在這(zhè)個(gè)世界裏無處不在,它是我們對(duì)物(wù)體形态及色彩産生明(míng)确認知的(de)基礎。

因爲有漫反射的(de)存在,物(wù)體才會有清晰的(de)明(míng)暗關系,我們才能看清這(zhè)個(gè)世界,它賦予了(le)物(wù)體縱深感和(hé)體積感,不管是産品還(hái)是環境皆是如此。

這(zhè)裏列舉一個(gè)設計中常用(yòng)的(de)漫反射現象,我們将一個(gè)白色茶杯放入一個(gè)綠色盒中,打上一束光(guāng),這(zhè)時(shí)茶杯整體都帶有綠色調,這(zhè)是因爲盒子表面産生了(le)大(dà)量綠色的(de)漫射光(guāng),這(zhè)些光(guāng)束射在茶杯上,進而發生偏色現象,如下(xià)圖所示。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

可(kě)見環境色對(duì)物(wù)體的(de)視覺影(yǐng)響還(hái)是相當明(míng)顯。再如下(xià)圖中,當模特處于一個(gè)紅色空間時(shí),受到環境中紅色漫射光(guāng)的(de)影(yǐng)響,模特也(yě)明(míng)顯偏向紅色,這(zhè)時(shí)我們就說環境光(guāng)影(yǐng)響了(le)這(zhè)位模特的(de)「色彩平衡」,關于「色彩平衡」在後面還(hái)會細講。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

當然現實是複雜(zá)的(de),其實還(hái)有大(dà)量物(wù)體會同時(shí)存在鏡面反射光(guāng)和(hé)漫射光(guāng),誰的(de)強度大(dà)誰就更突出,例如起風時(shí)的(de)水(shuǐ)面,就不全是鏡面反射,還(hái)有漫反射,這(zhè)裏就不再深究。

小結

以上提到的(de)「照(zhào)射光(guāng)」和(hé)「環境光(guāng)」便是設計中常用(yòng)的(de)2大(dà)光(guāng)源類型,這(zhè)2類往往是同時(shí)存在,一般照(zhào)射光(guāng)會直接影(yǐng)響物(wù)體的(de)明(míng)暗結構,而環境光(guāng)則影(yǐng)響物(wù)體的(de)色彩平衡及反光(guāng)。

隻有把這(zhè)些光(guāng)影(yǐng)都表現清楚,畫(huà)面才更有代入感。其中對(duì)于照(zhào)射光(guāng)的(de)理(lǐ)解,絕不僅僅是考慮直射或散射這(zhè)麽簡單,還(hái)需分(fēn)析照(zhào)射方向、照(zhào)射角度、照(zhào)射形狀、光(guāng)源距離、光(guāng)源強度、光(guāng)源軟硬、光(guāng)源大(dà)小、光(guāng)源顔色等因素,待會會針對(duì)這(zhè)些因素展開講解。

物(wù)體明(míng)暗

前面介紹了(le)光(guāng)源類型,主要讓大(dà)家對(duì)「光(guāng)」有個(gè)整體認知,内容偏科普,屬于「光(guāng)影(yǐng)」的(de)理(lǐ)論基礎,現在開始講「影(yǐng)」,這(zhè)塊内容更偏實戰運用(yòng),教大(dà)家如何在設計中準确表達光(guāng)影(yǐng)。本文的(de)「影(yǐng)」涵蓋兩塊内容:物(wù)體的(de)明(míng)暗和(hé)投影(yǐng),其中物(wù)體是泛指,包含電商常用(yòng)的(de)兩大(dà)元素:人(rén)物(wù)和(hé)産品。

先說物(wù)體明(míng)暗,當光(guāng)源發出的(de)光(guāng)線射向物(wù)體時(shí),由于光(guāng)反射,物(wù)體會有對(duì)應的(de)明(míng)暗變化(huà),記得(de)在高(gāo)中學習(xí)素描時(shí),老師就曾提過光(guāng)影(yǐng)的(de)「五大(dà)調」,這(zhè)正是人(rén)們對(duì)物(wù)體明(míng)暗關系的(de)理(lǐ)論化(huà)總結。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

但現實世界卻要複雜(zá)的(de)多(duō),因爲物(wù)體光(guāng)影(yǐng)還(hái)與材質密切相關,不同材質的(de)明(míng)暗關系截然不同,所以決不能撇開材質談明(míng)暗,而設計中常用(yòng)材質有三大(dà)類:漫反射材質、鏡面反射材質和(hé)透明(míng)/半透明(míng)材質。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

不管現實世界還(hái)是電商視覺,漫反射材質都是最常見的(de)材質,因爲這(zhè)類材質的(de)光(guāng)影(yǐng)最有規律也(yě)最有代表性,明(míng)暗關系也(yě)簡單很多(duō),剛剛說的(de)「素描五大(dà)調」就是針對(duì)漫反射材質,那我們就從這(zhè)類材質入手,詳細講講漫反射的(de)光(guāng)影(yǐng)到底如何呈現。

1. 明(míng)暗原則

「漫反射材質」是指表面産生漫反射光(guāng)的(de)材質,日常生活中,漫反射材質(以下(xià)簡稱「漫射材質」)的(de)物(wù)體占據大(dà)多(duō)數,像棉布、啞光(guāng)紙、啞光(guāng)塑料甚至人(rén)類肌膚等等都屬于漫射材質。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

而我們在刻畫(huà)漫射材質的(de)物(wù)體明(míng)暗時(shí),需遵循3點原則:近亮遠(yuǎn)暗、先整體再局部以及細節刻畫(huà)。

近亮遠(yuǎn)暗

對(duì)于漫射材質,首先一個(gè)大(dà)原則就是「近亮遠(yuǎn)暗」:

以畫(huà)面的(de)主光(guāng)源(照(zhào)射光(guāng))爲圓心,物(wù)體距離光(guāng)源越近會越亮,越遠(yuǎn)則越暗。

對(duì)單個(gè)物(wù)體來(lái)說,距離近的(de)就是亮面(受光(guāng)面),而距離遠(yuǎn)的(de)是暗面(背光(guāng)面),如下(xià)圖所示。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

在很多(duō)攝影(yǐng)或設計作品中,能看到不管人(rén)物(wù)還(hái)是産品,都會遵循這(zhè)一原則:距離主光(guāng)源越遠(yuǎn)則越暗。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

先整體再局部

在「近亮遠(yuǎn)暗」的(de)大(dà)原則下(xià),先确定物(wù)體的(de)整體光(guāng)影(yǐng),表現三大(dà)面(亮面、灰面、暗面),其本質就是在固有色(物(wù)體在白色光(guāng)下(xià)所呈現的(de)色彩)的(de)基礎上進行深淺色調的(de)變化(huà)。

然後再添加物(wù)體的(de)局部光(guāng)影(yǐng),這(zhè)個(gè)局部主要針對(duì)有塊面的(de)物(wù)體(立方體),「局部光(guāng)影(yǐng)」意味著(zhe)亮面和(hé)灰面也(yě)要分(fēn)别遵循「近亮遠(yuǎn)暗」原則(由于暗面是背光(guāng),不受主光(guāng)源影(yǐng)響,所以不在遵循範圍内),這(zhè)樣光(guāng)影(yǐng)才會更有層次。而沒有明(míng)顯塊面的(de)曲面物(wù)體(球體)則把握好整體光(guāng)影(yǐng)即可(kě),或許聽(tīng)著(zhe)有些複雜(zá),下(xià)面通(tōng)過圖例強化(huà)理(lǐ)解。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

細節刻畫(huà)

最後是刻畫(huà)光(guāng)影(yǐng)細節,這(zhè)裏列出2個(gè)常見細節,這(zhè)些細節雖不影(yǐng)響整體明(míng)暗,但會讓物(wù)體光(guāng)影(yǐng)更加細膩和(hé)真實,屬于「加分(fēn)項」。

物(wù)體表面最亮的(de)地方就是高(gāo)光(guāng),高(gāo)光(guāng)其實不是光(guāng),而是直接反射主光(guāng)源的(de)地方,如果要給漫射材質的(de)球體添加高(gāo)光(guāng),那在亮面添加一個(gè)羽化(huà)的(de)圓斑即可(kě)。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

往往越光(guāng)滑的(de)物(wù)體高(gāo)光(guāng)就越清晰。但對(duì)漫射材質而言,高(gāo)光(guāng)不會很清晰,不過模糊程度要看物(wù)體的(de)固有色以及粗糙度,粗糙度越大(dà)的(de)物(wù)體高(gāo)光(guāng)越模糊。另外高(gāo)光(guāng)的(de)外形還(hái)和(hé)物(wù)體的(de)本身結構有關。

萬字幹貨!幫你深度掌握設計中的(de)「光(guāng)影(yǐng)」知識點

在表現高(gāo)光(guāng)時(shí),還(hái)有一塊高(gāo)光(guāng)區(qū)也(yě)經常被刻畫(huà)出來(lái),那就是塊面物(wù)體的(de)「倒角高(gāo)光(guāng)」。

「倒角」其實是個(gè)工業設計術語,三維設計也(yě)常提到,一般塊面物(wù)體的(de)棱角通(tōng)常會做(zuò)些圓滑過渡,這(zhè)種過渡結構就是倒角,有了(le)倒角,轉折才不會「鋒利」,這(zhè)時(shí)若有光(guāng)線照(zhào)射到表面,倒角處便會形成高(gāo)光(guāng)線。

Source
成都愛(ài)誠科技
date
2020-09-30 15:43:56
share
真心愛(ài)爾·誠意服務

多(duō)一份了(le)解,多(duō)一個(gè)選擇

即可(kě)開啓一站式服務體驗
預約面談可(kě)撥打 135-4003-4978 / 028-85283257
取消咨詢 立即咨詢