2019-1-24 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
平時(shí)設(shè)計(jì)工作中，關(guān)于投影，簡(jiǎn)單一點(diǎn)的就是一個(gè)圖片中的主體摳下來(lái)放到畫面中，這個(gè)時(shí)候就要設(shè)置一個(gè)投影，讓主體在畫面中更和諧。難一點(diǎn)的就是在合成設(shè)計(jì)里，涉及到每個(gè)物體的投影形狀、顏色、透視等等，根據(jù)分析畫出投影，這期教程就給大家普及一下投影的相關(guān)知識(shí)，以及如何去做投影。
陰影是什么呢？陰影是光帶給這個(gè)世界的禮物。
還是正經(jīng)解釋一下什么是陰影？
在客觀世界中，光線總是從光源沿著直線方向發(fā)散。
在光線的照射下，受光部分稱為亮面，僅次于亮面的受光是灰面，而光線無(wú)法照射到的部分，稱為暗面；由于被受光面遮擋，物體所在環(huán)境中出現(xiàn)的陰暗部分稱為影，陰與影的總和就是陰影。
陰影形成的要素有哪些呢？
首先要有光源，光源就是光點(diǎn)，光點(diǎn)向下的垂線與承接面的焦點(diǎn)就是光足，陽(yáng)光的光足在地平線上，燈光的光足在照射的基面上，然后是要有物體，光點(diǎn)發(fā)出的光線，經(jīng)過(guò)物體上陰點(diǎn)，光足與物體底點(diǎn)也就是陰足連線，與光線相交的點(diǎn)就是影點(diǎn)，陰影就是陰足到影點(diǎn)的部分。
畫陰影時(shí)，一般是先定光點(diǎn)和光足，然后是陰點(diǎn)陰足，光點(diǎn)連接陰點(diǎn)，光足連接陰足，這樣陰影自然就畫出來(lái)了。
用這張照片來(lái)做個(gè)簡(jiǎn)單說(shuō)明：
光源的位置，就是太陽(yáng)，向下垂線交于海平線于一點(diǎn)，這個(gè)就是光足。
然后，定出一些椅子上的陰點(diǎn)和陰足。
光點(diǎn)連接陰點(diǎn)，光足連接陰足，這樣就能畫出陰影的大致形狀了。
光源總體上可以分為兩大類，一類是自然光，比如：太陽(yáng)光、月光。一類是人造光，比如：燈光、燭光。
自然光有兩個(gè)特點(diǎn)：光線平行；隨著時(shí)間的變化而變化，不會(huì)為?的意志所轉(zhuǎn)移。
光線平行
因?yàn)樘?yáng)、月亮這樣的發(fā)光體離我們太過(guò)遙遠(yuǎn)，所以可以把它發(fā)散的光線視為平行的。
再來(lái)說(shuō)下這張圖片，同樣是自然光，為什么它的光線不是平行的？
這是因?yàn)橥敢暤默F(xiàn)象，就像這個(gè)地板，不也是平行的嗎？但是因?yàn)橥敢暤年P(guān)系，它們會(huì)相交于一點(diǎn)，光線也是同樣道理，因?yàn)槲覀円赃@個(gè)角度觀察，所以光線會(huì)出現(xiàn)透視現(xiàn)象。
也就是說(shuō)，當(dāng)我們從側(cè)面觀察的話，就很明顯看到光線是平行的。
隨著時(shí)間的變化而變化，不會(huì)為人的意志所轉(zhuǎn)移
日升日落，陰晴圓缺，都是自然的規(guī)律，不會(huì)為我們的意志所改變。
人造光有兩個(gè)特點(diǎn)：光線不平行，呈放射狀；根據(jù)需要變換位置。
光線不平行，呈放射狀
用這張圖片來(lái)舉例，畫面中光源是路燈，物體是消防栓，我們對(duì)它進(jìn)行一個(gè)簡(jiǎn)單的分析：
它的光點(diǎn)是路燈，向下的垂線，到地面上的光足，然后是消防栓，光點(diǎn)連接陰點(diǎn)，光足連接陰足，畫出陰影，可以看出，因?yàn)榕c光源距離近，所以光線是不平行的，呈現(xiàn)一種放射狀，并且影子也會(huì)呈現(xiàn)放射狀。
根據(jù)需要變換位置
為了呈現(xiàn)想要的視覺(jué)效果，可以隨意移動(dòng)光源的位置，甚至調(diào)整它的顏色、明暗等，可以人為改變。
燈光屬于電光源，它可以是單一光源或者組合光源，常見(jiàn)的像這樣的白熾燈，還有日光燈等等。
當(dāng)各個(gè)方向都有光源的時(shí)候，投影就會(huì)消失。在醫(yī)學(xué)上，用的無(wú)影燈就是根據(jù)這個(gè)原理制成的，因?yàn)獒t(yī)生做手術(shù)的時(shí)候，手和器械都有可能對(duì)手術(shù)部位造成干擾的陰影，所以無(wú)影燈就能盡量消除陰影。
我們模擬一個(gè)太陽(yáng)移動(dòng)的軌跡，當(dāng)太陽(yáng)位置比較低的時(shí)候，光線與地面的夾角就會(huì)比較小，影子會(huì)很長(zhǎng)；升高一些，夾角就稍微大了些，影子縮短了點(diǎn)；再升高一些，夾角更大，影子很短了。然后當(dāng)太陽(yáng)在物體正上方的時(shí)候，與地面的夾角接近90度，影子基本就是一個(gè)點(diǎn)。那另一邊，基本就是相同的情況，所以，光源離照射物體越高、越遠(yuǎn)、光線角度越大，陰影越短。
我們?cè)偻ㄟ^(guò)幾張圖片來(lái)進(jìn)一步了解陰影規(guī)律及特點(diǎn)。
我們看到人物的影子非常的長(zhǎng)，光線與地面夾角比較小，說(shuō)明它的光源在一個(gè)比較低的位置上。
這個(gè)正俯視的圖片，影子也很長(zhǎng)，說(shuō)明它的光源也在一個(gè)較低的位置。
影子的長(zhǎng)度也不算短，但是看光線與它的夾角比較大，證明它的光源在相對(duì)比較高的位置上。
這張照片比較明顯了，影子比較短，接近中午的陽(yáng)光。
△ 接近中午的陽(yáng)光
我們之前在透視的那篇教程里說(shuō)過(guò)，物體的透視線，最終都會(huì)消失在視平線上，所以，當(dāng)畫面中先有一條視平線，我們同樣可以畫出一個(gè)立方體。
當(dāng)物體有一個(gè)陰影，我們可以通過(guò)影點(diǎn)與陰點(diǎn)和陰足的連線，找到光點(diǎn)和光足。這樣也就找到光源的位置。
這張圖片，我們就可以通過(guò)倒推的方式找到光點(diǎn)，如果畫面中再放入其他物體，就可以用光點(diǎn)和光足對(duì)其連線，從而做出投影。
正常情況下，物體在光源下的投影，如果在其中出現(xiàn)一個(gè)臺(tái)階會(huì)怎樣？
影子就會(huì)隨著階梯的形狀而產(chǎn)生變化，也就是說(shuō)陰影投在不同的承影面上，會(huì)隨著受影面的變化而變化。
這兩張圖片就明顯看出陰影根據(jù)地面起伏的形狀而變化。
第一個(gè)是接觸陰影，是物體與物體之間接觸所產(chǎn)生的陰影，一般這種我們都可以用圖層樣式當(dāng)中的陰影來(lái)設(shè)置。
還有一種接觸陰影，是物體立面與承影面之間的投影關(guān)系。
第二種是懸空式投影，這類投影給人很強(qiáng)的空間感，并且大多數(shù)情況，投影都會(huì)成為畫面中的主角。
第三種是倒影，針對(duì)反光較強(qiáng)的面會(huì)有，比如鏡面、水面、琉璃臺(tái)面等，并且在表現(xiàn)一些高端產(chǎn)品設(shè)計(jì)時(shí)候經(jīng)常會(huì)使用到。
第四種是長(zhǎng)投影，也是這幾年扁平化流行起來(lái)，帶動(dòng)的一種投影形式。
第五種合成設(shè)計(jì)中的投影，和實(shí)際照片中的場(chǎng)景是一樣道理的，這也是所有投影當(dāng)中比較難操作的。
最后一個(gè)創(chuàng)意投影，它不會(huì)根據(jù)物體本身的形態(tài)去表現(xiàn)，而是根據(jù)文案和設(shè)計(jì)構(gòu)思而產(chǎn)生的很有創(chuàng)意的投影形式，當(dāng)然，這個(gè)主要靠大家發(fā)散思維的聯(lián)想了。
用兩個(gè)簡(jiǎn)單的小案例，來(lái)給大家講解一下如何做投影。
給下面右側(cè)的書籍做一個(gè)和左邊一樣的投影：
給圖層添加投影圖層樣式，不透明度調(diào)整到45，角度137，距離26，擴(kuò)展10，大小35。
我們把外圍一圈的投影已經(jīng)設(shè)置好，下面就再添加一個(gè)投影，也就是最貼近書籍邊緣部分。這個(gè)部分投影我們可以稱之為閉塞投影，是近光量最少的地方。
再添加一個(gè)投影，不透明度33，角度不變，距離5，擴(kuò)展10，大小10。
利用圖層樣式的投影就完成了，大家在調(diào)整的時(shí)候可以邊調(diào)整邊觀察，以達(dá)到一個(gè)自然的效果。
第二個(gè)方案，是給畫面中的立方體添加一個(gè)投影，要符合光影關(guān)系。
第一步要按照透視關(guān)系，把立方體看不到的面給畫出來(lái)。
根據(jù)之前我們學(xué)到的知識(shí)點(diǎn)和畫面中其他陰影來(lái)進(jìn)行分析：
先連接幾個(gè)人物的影點(diǎn)和陰點(diǎn)，我們知道自然光的光線是平行的，并且我們標(biāo)記出來(lái)的也確實(shí)近乎平行的光線，既然這樣，我們就不需要找到光點(diǎn)的位置。
只要復(fù)制其中一條光線到立方體上的陰點(diǎn)即可，然后我們?cè)偃フ夜庾愕奈恢谩?
為了找光足，可以先把畫面擴(kuò)展一下，然后連接影點(diǎn)和陰足，三個(gè)參照物連線的延長(zhǎng)線會(huì)相交于一點(diǎn)，這個(gè)點(diǎn)就是光足。
從光足往回連線，與陰足的延長(zhǎng)線，相交于影點(diǎn)，這里為了區(qū)分，三條線我用三個(gè)不同的顏色，然后我們把三點(diǎn)連線，就是陰影的區(qū)域了。
可以發(fā)現(xiàn)綠色和藍(lán)色是基本重合了，我們就可以忽略藍(lán)色的那條線了。
立方體陰影的范圍與形狀，然后再進(jìn)一步刻畫。
做個(gè)高斯模糊處理，數(shù)值2。
在陰影上方新建一個(gè)圖層，用鋼筆工具勾勒一個(gè)閉塞陰影，不要太大哦，填充深灰色，模式正片疊底。
做高斯模糊，數(shù)值1.4。
為了不讓影子邊緣太生硬，選擇濾鏡 – 扭曲 – 波紋 – 41%。
用吸管工具吸一下旁邊影子的顏色，填充到立方體影子。
如果影子太重，可以適當(dāng)降低不透明度，再統(tǒng)一暗部的色調(diào)，這樣陰影就做完了。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com