如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

之前我們更新過如何做投影的文章：《投影一直做不好？看這篇文章就搞定！》，主要針對的是投影的原理進(jìn)行講解，包括如何用圖層樣式去做投影，怎樣用工具繪制投影，這些都是我們了解投影的一個基礎(chǔ)。教程發(fā)布之后，很多同學(xué)留言，表示沒看夠，希望針對其他投影形式再進(jìn)行更深入的講解，那這次我們就來滿足大家要求。其實(shí)投影的設(shè)計不難，只要符合畫面的光影邏輯，然后加上制作投影的方法，基本就能搞定很多基礎(chǔ)的投影形式，話不多說，我們開始今天的教程。

其實(shí)投影在設(shè)計中的應(yīng)用是非常廣泛的，比如這些海報，都運(yùn)用了投影的形式。

什么情況用投影

在平面設(shè)計中，除了合成設(shè)計之外，我們在什么情況下會選擇用投影？

1. 增加識別性

比如，在顏色比較混亂的背景上添加文字，或者添加圖片，為了區(qū)分他們之間的主次關(guān)系，我們會添加一個投影。

2. 增加空間感和層次感

這兩個畫面，通過投影與主體的位置關(guān)系，產(chǎn)生較強(qiáng)的空間感和層次感。

3. 提升畫面格調(diào)

反應(yīng)產(chǎn)品質(zhì)感的投影形式，會提升畫面的格調(diào)，這類比較多的是化妝品與品。

4. 增加形式感

如果你的畫面缺少創(chuàng)意性，不妨試試這類投影形式，通常來說它們都是用投影作為畫面中的主體，以此來傳遞出很強(qiáng)的形式感與故事性。

5. UI設(shè)計

UI 設(shè)計中使用投影。

投影的類型

1. 常規(guī)投影

常規(guī)型投影包含了普通投影，弧形投影，接觸投影，彌散投影。

普通投影

普通投影就是我們最常見的一個投影形式，它可以用圖層樣式來設(shè)置，它的特點(diǎn)就是在圖像的四周都會有點(diǎn)陰影的感覺，讓畫面與背景形成前后景的關(guān)系，就像這里的案例。

弧形投影

弧形投影，它的投影是在物體的一側(cè)，像翹起的邊緣。

接觸投影

接觸投影，是物體立面與底面的關(guān)系，會有一種三維立體的感覺。

彌散投影

彌散投影，與普通投影的區(qū)別在于，它更有深度，也是現(xiàn)如今比較流行的投影形式。

2. 長投影

長投影主要分兩種，一種是色塊投影，一種是在色塊的基礎(chǔ)上的漸變投影。

比較常用在圖標(biāo)的設(shè)計，還有海報的設(shè)計。

3. 倒影

倒影，這類型陰影應(yīng)該是比較難處理的了，想必大家在做設(shè)計的時候，大多數(shù)情況會規(guī)避倒影這種形式，除非是拍好的照片自帶倒影，不然很少有同學(xué)愿意觸碰這塊。因?yàn)樗容^考驗(yàn)大家對圖形的認(rèn)知能力，以及對透視基礎(chǔ)的掌握，之前我們有講過一篇關(guān)于素描知識的文章，在里面介紹過關(guān)于物體的基本結(jié)構(gòu)，我們所看到的任何一個物體都有一個結(jié)構(gòu)或者形狀，比如立方體、圓柱體、圓錐體、球體。任何一個物體都可以視為這四種幾何形狀中的一種或幾種的組合。那在倒影當(dāng)中，這些基本形狀同樣適用。

首先來看二維的倒影，二維的倒影比較簡單了，也都很好做，復(fù)制一個下來，加個蒙版做漸變處理就可以了。

三維物體，最基本的就是這幾個形狀，或者幾種形狀的組合，掌握幾種形狀的倒影，就能應(yīng)付大部分倒影的形式。

立方體為基礎(chǔ)型的倒影。

圓柱體為基礎(chǔ)型。

圓錐體為基礎(chǔ)型。

球體為基礎(chǔ)型。

組合型。

4. 懸空投影

懸空投影，這類投影給人很強(qiáng)的空間感，并且大多數(shù)情況，投影都會成為畫面中的主角。

分為三種類型，二維的懸空投影，2.5D 的懸空投影，三維懸空投影。

二維的懸空投影

先來看看二維懸空投影，是二維的平面懸空，添加一個彌散投影。

2.5D的懸空投影

2.5D 沒有消失點(diǎn)，但是會有立體感，在下方添加一個投影，就會有懸空的感覺。

三維懸空投影

三維懸空投影能有很多創(chuàng)意形式。

5. 創(chuàng)意投影

創(chuàng)意投影，它不會根據(jù)物體本身的形態(tài)去表現(xiàn)，而是根據(jù)文案和設(shè)計構(gòu)思而產(chǎn)生的很有創(chuàng)意的投影形式，這個主要靠大家發(fā)散思維的聯(lián)想了。

最常見的就是電影海報中的投影表現(xiàn)。

6. 場景合成投影

一種情況是接近真實(shí)的投影，和實(shí)際照片是一樣的道理，一種情況是類似于創(chuàng)意投影，合成的投影算是這幾種投影當(dāng)中最難的。

合成中的投影要自己創(chuàng)造一個光源，也就是想象出一個光源，根據(jù)光源關(guān)系，繪制出投影效果。

投影在這里都是很真實(shí)的表現(xiàn)。

合成也可以做創(chuàng)意投影，這三張公益海報的主角是動物的影子，但是形成影子的是前面的物體，這是很有創(chuàng)意的表現(xiàn)方式。

制作投影的方法

制作投影的方法比較多，比如說利用圖層樣式，用矢量圖形做投影，高斯模糊設(shè)置投影，手繪投影等，每一種方法都適用不同的投影類型，我們想更有效率的完成工作，就要對這些技法有個較深的了解。下面我就帶大家來了解下每種方法。

1. 圖層樣式

第一個，也是最簡單的，用 ps 當(dāng)中的圖層樣式來做。

模式一般我們就選擇默認(rèn)正片疊底，這是在正片疊底文章中講到過，后面的顏色，如果是主體與背景顏色差異比較大的時候，我們可以選擇環(huán)境色；如果差異不大，我們可以選擇主體的相近的顏色，很少有選擇純黑色的投影。

不透明度就是陰影的透明程度，也是很好理解。下面角度，是光線照射的方向。全局光，選擇之后，畫面中其他元素添加投影，就會默認(rèn)為一個光源，這樣畫面中投影會更和諧。

距離，物體和投影之間的距離，數(shù)值越大越遠(yuǎn)。擴(kuò)展，就是陰影面積的大小。大小，就是陰影的虛化程度。

等高線，可能很多同學(xué)不太理解，其實(shí)很簡單的，我們來看下，縱向，越向上，越實(shí)，越向下越虛化。橫向，最右側(cè)是投影的中心位置，越向左，離中心越遠(yuǎn)。根據(jù)畫面中的等高線，我們來分析下。

這樣就好理解了，我們看畫面中藍(lán)色圓點(diǎn)的位置，代表中心位置很實(shí)，黃色圓點(diǎn)的位置代表遠(yuǎn)離中心的位置很虛化，最后就得出右側(cè)的投影。

那如果說，我想讓投影的周圍都變得很實(shí)，該怎么調(diào)整？

就是把虛的那個點(diǎn)向上調(diào)整，這樣，就代表外圍投影變得相對較實(shí)，我們會得到這樣一個投影。

如果我想，投影靠近外圍的位置，變得比較實(shí)，靠近中心的位置，變得比較虛，就可以這樣調(diào)整。

得到的投影是這樣的，我們看到中間白色的區(qū)域，就是虛化之后的效果，接近了透明。這個搞懂了，利用圖層樣式做投影也就基本沒什么問題了。

ps 還自帶了這么多等高線的樣式，大家可以去實(shí)驗(yàn)一下。

那什么類型投影，比較適合用圖層樣式來做？

普通的投影和彌散投影。

畫面中人物的投影設(shè)置。

2. 矢量圖形做投影

畫一個矢量圖形，之后選擇實(shí)時形狀屬性，然后點(diǎn)擊蒙版，通過調(diào)整羽化值，來調(diào)整投影的虛化程度，用這個方法會比較直觀的觀察到，而且因?yàn)槭鞘噶繄D形，所以還很方便我們隨時調(diào)整它的形狀。

高斯模糊和矢量圖形做投影，所適用的投影類型是一樣的，同樣適用于普通投影，弧形投影，接觸投影，彌散投影。

還有懸空投影，它和矢量圖形投影的區(qū)別就是，矢量圖形更方便改顏色和形狀，還有虛化程度。

在主體下方加一個小面積的虛化陰影，就會有懸空的感覺。

3. 高斯模糊做投影

添加高斯模糊之前，一定要記得給圖層轉(zhuǎn)換為智能對象，因?yàn)楦咚鼓：龑D層是有不可逆的破壞性的，所以添加智能對象之后會很方便我們隨時去調(diào)整它的顏色和模糊程度，動感模糊同理。

高斯模糊做投影，適用的投影類型。

4. 手繪投影

最后一個，用鋼筆工具或者畫筆工具來繪制投影，這個是比較難的，在投影那篇文章中，我們已經(jīng)講過在一個場景中，怎樣分析投影的位置，大小，形狀，方向，以及如何用鋼筆工具去繪制投影，這里我們就不再重復(fù)了，如果有不懂的同學(xué)，回看之前的文章《投影一直做不好？看這篇文章就搞定！》

那我們來看一下，手繪投影適合什么類型的設(shè)計。

第一種就是合成設(shè)計，這個要考慮光源的位置，投影的透視，投影的顏色等，一般會采用畫筆和鋼筆工具的結(jié)合。

創(chuàng)意的投影同樣適合，因?yàn)樗秃铣赏队盎疽粯樱徊贿^不會根據(jù)對象的實(shí)際特征去繪制。

倒影適合用鋼筆工具和畫筆工具來制作，這里就涉及到了透視，我們能看到物體在基面上的倒影，實(shí)際上是物體在基面上的投影的倒立映像。

在平時的工作生活中，我們要學(xué)會觀察，比如積水的路面，反射建筑的倒影是什么樣子的，鏡子里的自己，或者可以多看看攝影照片，慢慢養(yǎng)成習(xí)慣，提高對倒影的敏感度。

倒影的做法

做倒影最重要就是兩個字──拆分，我們給這個立方體做倒影，首先要思考的是，它的倒影是由哪幾個面產(chǎn)生的，找到物體與承影面接觸的線，然后把這兩個面提取出來，沿著這個線把所在的面拆分出來。

然后向下鏡像，根據(jù)實(shí)際情況再翻轉(zhuǎn)，要注意，倒影的透視和原本物體的透視要一致，也就是平行原本對象的邊線。

然后給倒影添加一個蒙版，做一個漸變，就可以了。

用剛才的方法給魔方做一個倒影

同樣把與底邊接觸的面裁剪出來，可以看到透視關(guān)系還是不一樣的，我們應(yīng)該讓倒影的面和上面的魔方透視一致。

用調(diào)整大小里的斜切，調(diào)整倒影的透視。

添加蒙版，然后在與地面接觸的位置添加一個閉塞陰影就可以了。

再做一個復(fù)雜點(diǎn)的，給包做倒影。

同樣，找到底面接觸面，然后把相應(yīng)的面裁切出來。這里注意的是，每個面要單獨(dú)拆分，這樣才方便為每個面設(shè)置倒影。

把所有拆分的面復(fù)制一個出來上下鏡像。

調(diào)整透視，就用調(diào)整大小工具，斜切，合并倒影的圖層。

用蒙版漸變，別忘了閉塞陰影。

倒影規(guī)律及特點(diǎn)：

投影在不同材質(zhì)上的表現(xiàn)

好了，前面介紹了每一種投影形式，以及適合的場景。那接下來，我們來看看在同一光源的前提下，不同承影面，也就是投影在不同的材質(zhì)上是如何表現(xiàn)的吧。

1. 布面

布面材質(zhì)是軟性材質(zhì)，在光源下會吸收光的反射，所以投影的邊緣會相對模糊，不會過于鋒利。

案例演示

我們來看下在布面材質(zhì)上的投影的做法，首先在物品與布面底部繪制一個閉塞陰影：

然后新建圖層，根據(jù)光源繪制出陰影的長度與形狀：

給長投影做高斯模糊，然后用蒙版把邊緣處理得柔和一些：

統(tǒng)一光影，把產(chǎn)品修飾一下：

整體調(diào)整下色調(diào)，就可以了：

2. 鏡面

鏡面是光滑的，所以光照射之后，會形成和物體一樣的影像，也就是倒影。

設(shè)計之前，先參考下帶有鏡面倒影的照片。

案例演示

第一步，閉塞陰影：

第二步，拆分圖像，拿到下方，調(diào)整透視，這是之前我們講過步驟，這里就不重復(fù)了。

調(diào)整產(chǎn)品的光影與色調(diào)：

加點(diǎn)小裝飾，烘托氛圍：

最后是整體調(diào)整下色調(diào)和明暗：

3. 水面

水面和鏡面類似，但是水面會存在水波紋，所以在做投影時候要注意投影的形態(tài)要與水波紋一致。

參考一些帶有水面倒影的照片。

案例演示

依然先畫閉塞陰影：

繪制出整個投影形態(tài)：

高斯模糊處理，因?yàn)槭撬妫躁幱昂偷褂耙泊妫?

下面就是倒影了，方法步驟同樣。

那么問題來了，是怎么做到彎曲的效果的？其實(shí)就是用 PS 當(dāng)中的置換來做，這是置換的參數(shù)與水面素材。

關(guān)于置換的教程我們也發(fā)布過，《平面高手課堂！如何用扭曲工具快速強(qiáng)化作品設(shè)計感？》

最后統(tǒng)一色調(diào)和光影就完成了。

4. 底地板

地板有的會打一層蠟，這個時候，就會存在一些倒影，所以在這樣的地板上倒影和投影是并存的。

先看一下在不同地板上的投影樣貌。

案例演示

這個我們選擇大理石材質(zhì)，首先閉塞陰影：

繪制投影的形態(tài)：

給投影高斯模糊，添加蒙版做漸變：

然后，按照光影和環(huán)境色，處理產(chǎn)品的明暗和色調(diào)：

5. 漸變色/純色

這也是我們設(shè)計中遇到比較多的情況，在純色或漸變色的背景中，為了讓畫面具有空間感，我們經(jīng)常會給物體加投影，這個投影可以是常規(guī)投影，也可以是倒影。

案例演示

閉塞陰影：

根據(jù)光源繪制投影：

高斯模糊，然后添加蒙版做漸變：

修飾產(chǎn)品的色調(diào)和光影：

統(tǒng)一光影色調(diào)：

教程到這里就結(jié)束啦，估計有的同學(xué)會納悶，為什么我們沒有細(xì)講怎樣根據(jù)光源繪制投影？因?yàn)樵谥巴队拔恼轮幸呀?jīng)手把手給大家演示過了，沒看過的同學(xué)趕緊去補(bǔ)課，可閱讀《投影一直做不好？看這篇文章就搞定！》

總結(jié)下今天的內(nèi)容，第一，投影在畫面中作用。第二，我們給投影形式做了分類，有常規(guī)型，長投影，倒影，懸空投影，合成投影。然后是制作投影的方法，著重介紹了倒影該怎樣做，最后是投影在不同材質(zhì)上的表現(xiàn)。通過關(guān)于投影的這兩篇教程，相信大家已經(jīng)能掌握一些原理和技巧了，其實(shí)最快速學(xué)習(xí)投影的方法，就是要學(xué)會觀察生活中的事物。

藍(lán)藍(lán)設(shè)計( www.skdbbs.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。