2019-7-30 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
之前我們更新過如何做投影的文章：《投影一直做不好？看這篇文章就搞定！》，主要針對(duì)的是投影的原理進(jìn)行講解，包括如何用圖層樣式去做投影，怎樣用工具繪制投影，這些都是我們了解投影的一個(gè)基礎(chǔ)。教程發(fā)布之后，很多同學(xué)留言，表示沒看夠，希望針對(duì)其他投影形式再進(jìn)行更深入的講解，那這次我們就來滿足大家要求。其實(shí)投影的設(shè)計(jì)不難，只要符合畫面的光影邏輯，然后加上制作投影的方法，基本就能搞定很多基礎(chǔ)的投影形式，話不多說，我們開始今天的教程。其實(shí)投影在設(shè)計(jì)中的應(yīng)用是非常廣泛的，比如這些海報(bào)，都運(yùn)用了投影的形式。
在平面設(shè)計(jì)中，除了合成設(shè)計(jì)之外，我們?cè)谑裁辞闆r下會(huì)選擇用投影？
1. 增加識(shí)別性
比如，在顏色比較混亂的背景上添加文字，或者添加圖片，為了區(qū)分他們之間的主次關(guān)系，我們會(huì)添加一個(gè)投影。
2. 增加空間感和層次感
這兩個(gè)畫面，通過投影與主體的位置關(guān)系，產(chǎn)生較強(qiáng)的空間感和層次感。
3. 提升畫面格調(diào)
反應(yīng)產(chǎn)品質(zhì)感的投影形式，會(huì)提升畫面的格調(diào)，這類比較多的是化妝品與品。
4. 增加形式感
如果你的畫面缺少創(chuàng)意性，不妨試試這類投影形式，通常來說它們都是用投影作為畫面中的主體，以此來傳遞出很強(qiáng)的形式感與故事性。
5. UI設(shè)計(jì)
UI 設(shè)計(jì)中使用投影。
常規(guī)型投影包含了普通投影，弧形投影，接觸投影，彌散投影。
普通投影
普通投影就是我們最常見的一個(gè)投影形式，它可以用圖層樣式來設(shè)置，它的特點(diǎn)就是在圖像的四周都會(huì)有點(diǎn)陰影的感覺，讓畫面與背景形成前后景的關(guān)系，就像這里的案例。
弧形投影
弧形投影，它的投影是在物體的一側(cè)，像翹起的邊緣。
接觸投影
接觸投影，是物體立面與底面的關(guān)系，會(huì)有一種三維立體的感覺。
彌散投影
彌散投影，與普通投影的區(qū)別在于，它更有深度，也是現(xiàn)如今比較流行的投影形式。
長(zhǎng)投影主要分兩種，一種是色塊投影，一種是在色塊的基礎(chǔ)上的漸變投影。
比較常用在圖標(biāo)的設(shè)計(jì)，還有海報(bào)的設(shè)計(jì)。
倒影，這類型陰影應(yīng)該是比較難處理的了，想必大家在做設(shè)計(jì)的時(shí)候，大多數(shù)情況會(huì)規(guī)避倒影這種形式，除非是拍好的照片自帶倒影，不然很少有同學(xué)愿意觸碰這塊。因?yàn)樗容^考驗(yàn)大家對(duì)圖形的認(rèn)知能力，以及對(duì)透視基礎(chǔ)的掌握，之前我們有講過一篇關(guān)于素描知識(shí)的文章，在里面介紹過關(guān)于物體的基本結(jié)構(gòu)，我們所看到的任何一個(gè)物體都有一個(gè)結(jié)構(gòu)或者形狀，比如立方體、圓柱體、圓錐體、球體。任何一個(gè)物體都可以視為這四種幾何形狀中的一種或幾種的組合。那在倒影當(dāng)中，這些基本形狀同樣適用。
首先來看二維的倒影，二維的倒影比較簡(jiǎn)單了，也都很好做，復(fù)制一個(gè)下來，加個(gè)蒙版做漸變處理就可以了。
三維物體，最基本的就是這幾個(gè)形狀，或者幾種形狀的組合，掌握幾種形狀的倒影，就能應(yīng)付大部分倒影的形式。
立方體為基礎(chǔ)型的倒影。
圓柱體為基礎(chǔ)型。
圓錐體為基礎(chǔ)型。
球體為基礎(chǔ)型。
組合型。
懸空投影，這類投影給人很強(qiáng)的空間感，并且大多數(shù)情況，投影都會(huì)成為畫面中的主角。
分為三種類型，二維的懸空投影，2.5D 的懸空投影，三維懸空投影。
二維的懸空投影
先來看看二維懸空投影，是二維的平面懸空，添加一個(gè)彌散投影。
2.5D的懸空投影
2.5D 沒有消失點(diǎn)，但是會(huì)有立體感，在下方添加一個(gè)投影，就會(huì)有懸空的感覺。
三維懸空投影
三維懸空投影能有很多創(chuàng)意形式。
創(chuàng)意投影，它不會(huì)根據(jù)物體本身的形態(tài)去表現(xiàn)，而是根據(jù)文案和設(shè)計(jì)構(gòu)思而產(chǎn)生的很有創(chuàng)意的投影形式，這個(gè)主要靠大家發(fā)散思維的聯(lián)想了。
最常見的就是電影海報(bào)中的投影表現(xiàn)。
一種情況是接近真實(shí)的投影，和實(shí)際照片是一樣的道理，一種情況是類似于創(chuàng)意投影，合成的投影算是這幾種投影當(dāng)中最難的。
合成中的投影要自己創(chuàng)造一個(gè)光源，也就是想象出一個(gè)光源，根據(jù)光源關(guān)系，繪制出投影效果。
投影在這里都是很真實(shí)的表現(xiàn)。
合成也可以做創(chuàng)意投影，這三張公益海報(bào)的主角是動(dòng)物的影子，但是形成影子的是前面的物體，這是很有創(chuàng)意的表現(xiàn)方式。
制作投影的方法比較多，比如說利用圖層樣式，用矢量圖形做投影，高斯模糊設(shè)置投影，手繪投影等，每一種方法都適用不同的投影類型，我們想更有效率的完成工作，就要對(duì)這些技法有個(gè)較深的了解。下面我就帶大家來了解下每種方法。
1. 圖層樣式
第一個(gè)，也是最簡(jiǎn)單的，用 ps 當(dāng)中的圖層樣式來做。
模式一般我們就選擇默認(rèn)正片疊底，這是在正片疊底文章中講到過，后面的顏色，如果是主體與背景顏色差異比較大的時(shí)候，我們可以選擇環(huán)境色；如果差異不大，我們可以選擇主體的相近的顏色，很少有選擇純黑色的投影。
不透明度就是陰影的透明程度，也是很好理解。下面角度，是光線照射的方向。全局光，選擇之后，畫面中其他元素添加投影，就會(huì)默認(rèn)為一個(gè)光源，這樣畫面中投影會(huì)更和諧。
距離，物體和投影之間的距離，數(shù)值越大越遠(yuǎn)。擴(kuò)展，就是陰影面積的大小。大小，就是陰影的虛化程度。
等高線，可能很多同學(xué)不太理解，其實(shí)很簡(jiǎn)單的，我們來看下，縱向，越向上，越實(shí)，越向下越虛化。橫向，最右側(cè)是投影的中心位置，越向左，離中心越遠(yuǎn)。根據(jù)畫面中的等高線，我們來分析下。
這樣就好理解了，我們看畫面中藍(lán)色圓點(diǎn)的位置，代表中心位置很實(shí)，黃色圓點(diǎn)的位置代表遠(yuǎn)離中心的位置很虛化，最后就得出右側(cè)的投影。
那如果說，我想讓投影的周圍都變得很實(shí)，該怎么調(diào)整？
就是把虛的那個(gè)點(diǎn)向上調(diào)整，這樣，就代表外圍投影變得相對(duì)較實(shí)，我們會(huì)得到這樣一個(gè)投影。
如果我想，投影靠近外圍的位置，變得比較實(shí)，靠近中心的位置，變得比較虛，就可以這樣調(diào)整。
得到的投影是這樣的，我們看到中間白色的區(qū)域，就是虛化之后的效果，接近了透明。這個(gè)搞懂了，利用圖層樣式做投影也就基本沒什么問題了。
ps 還自帶了這么多等高線的樣式，大家可以去實(shí)驗(yàn)一下。
那什么類型投影，比較適合用圖層樣式來做？
普通的投影和彌散投影。
畫面中人物的投影設(shè)置。
2. 矢量圖形做投影
畫一個(gè)矢量圖形，之后選擇實(shí)時(shí)形狀屬性，然后點(diǎn)擊蒙版，通過調(diào)整羽化值，來調(diào)整投影的虛化程度，用這個(gè)方法會(huì)比較直觀的觀察到，而且因?yàn)槭鞘噶繄D形，所以還很方便我們隨時(shí)調(diào)整它的形狀。
高斯模糊和矢量圖形做投影，所適用的投影類型是一樣的，同樣適用于普通投影，弧形投影，接觸投影，彌散投影。
還有懸空投影，它和矢量圖形投影的區(qū)別就是，矢量圖形更方便改顏色和形狀，還有虛化程度。
在主體下方加一個(gè)小面積的虛化陰影，就會(huì)有懸空的感覺。
3. 高斯模糊做投影
添加高斯模糊之前，一定要記得給圖層轉(zhuǎn)換為智能對(duì)象，因?yàn)楦咚鼓：龑?duì)圖層是有不可逆的破壞性的，所以添加智能對(duì)象之后會(huì)很方便我們隨時(shí)去調(diào)整它的顏色和模糊程度，動(dòng)感模糊同理。
高斯模糊做投影，適用的投影類型。
4. 手繪投影
最后一個(gè)，用鋼筆工具或者畫筆工具來繪制投影，這個(gè)是比較難的，在投影那篇文章中，我們已經(jīng)講過在一個(gè)場(chǎng)景中，怎樣分析投影的位置，大小，形狀，方向，以及如何用鋼筆工具去繪制投影，這里我們就不再重復(fù)了，如果有不懂的同學(xué)，回看之前的文章《投影一直做不好？看這篇文章就搞定！》
那我們來看一下，手繪投影適合什么類型的設(shè)計(jì)。
第一種就是合成設(shè)計(jì)，這個(gè)要考慮光源的位置，投影的透視，投影的顏色等，一般會(huì)采用畫筆和鋼筆工具的結(jié)合。
創(chuàng)意的投影同樣適合，因?yàn)樗秃铣赏队盎疽粯?，只不過不會(huì)根據(jù)對(duì)象的實(shí)際特征去繪制。
倒影適合用鋼筆工具和畫筆工具來制作，這里就涉及到了透視，我們能看到物體在基面上的倒影，實(shí)際上是物體在基面上的投影的倒立映像。
在平時(shí)的工作生活中，我們要學(xué)會(huì)觀察，比如積水的路面，反射建筑的倒影是什么樣子的，鏡子里的自己，或者可以多看看攝影照片，慢慢養(yǎng)成習(xí)慣，提高對(duì)倒影的敏感度。
做倒影最重要就是兩個(gè)字──拆分，我們給這個(gè)立方體做倒影，首先要思考的是，它的倒影是由哪幾個(gè)面產(chǎn)生的，找到物體與承影面接觸的線，然后把這兩個(gè)面提取出來，沿著這個(gè)線把所在的面拆分出來。
然后向下鏡像，根據(jù)實(shí)際情況再翻轉(zhuǎn)，要注意，倒影的透視和原本物體的透視要一致，也就是平行原本對(duì)象的邊線。
然后給倒影添加一個(gè)蒙版，做一個(gè)漸變，就可以了。
用剛才的方法給魔方做一個(gè)倒影
同樣把與底邊接觸的面裁剪出來，可以看到透視關(guān)系還是不一樣的，我們應(yīng)該讓倒影的面和上面的魔方透視一致。
用調(diào)整大小里的斜切，調(diào)整倒影的透視。
添加蒙版，然后在與地面接觸的位置添加一個(gè)閉塞陰影就可以了。
再做一個(gè)復(fù)雜點(diǎn)的，給包做倒影。
同樣，找到底面接觸面，然后把相應(yīng)的面裁切出來。這里注意的是，每個(gè)面要單獨(dú)拆分，這樣才方便為每個(gè)面設(shè)置倒影。
把所有拆分的面復(fù)制一個(gè)出來上下鏡像。
調(diào)整透視，就用調(diào)整大小工具，斜切，合并倒影的圖層。
用蒙版漸變，別忘了閉塞陰影。
倒影規(guī)律及特點(diǎn)：
好了，前面介紹了每一種投影形式，以及適合的場(chǎng)景。那接下來，我們來看看在同一光源的前提下，不同承影面，也就是投影在不同的材質(zhì)上是如何表現(xiàn)的吧。
布面材質(zhì)是軟性材質(zhì)，在光源下會(huì)吸收光的反射，所以投影的邊緣會(huì)相對(duì)模糊，不會(huì)過于鋒利。
案例演示
我們來看下在布面材質(zhì)上的投影的做法，首先在物品與布面底部繪制一個(gè)閉塞陰影：
然后新建圖層，根據(jù)光源繪制出陰影的長(zhǎng)度與形狀：
給長(zhǎng)投影做高斯模糊，然后用蒙版把邊緣處理得柔和一些：
統(tǒng)一光影，把產(chǎn)品修飾一下：
整體調(diào)整下色調(diào)，就可以了：
鏡面是光滑的，所以光照射之后，會(huì)形成和物體一樣的影像，也就是倒影。
設(shè)計(jì)之前，先參考下帶有鏡面倒影的照片。
案例演示
第一步，閉塞陰影：
第二步，拆分圖像，拿到下方，調(diào)整透視，這是之前我們講過步驟，這里就不重復(fù)了。
調(diào)整產(chǎn)品的光影與色調(diào)：
加點(diǎn)小裝飾，烘托氛圍：
最后是整體調(diào)整下色調(diào)和明暗：
水面和鏡面類似，但是水面會(huì)存在水波紋，所以在做投影時(shí)候要注意投影的形態(tài)要與水波紋一致。
參考一些帶有水面倒影的照片。
案例演示
依然先畫閉塞陰影：
繪制出整個(gè)投影形態(tài)：
高斯模糊處理，因?yàn)槭撬?，所以陰影和倒影要共存?
下面就是倒影了，方法步驟同樣。
那么問題來了，是怎么做到彎曲的效果的？其實(shí)就是用 PS 當(dāng)中的置換來做，這是置換的參數(shù)與水面素材。
關(guān)于置換的教程我們也發(fā)布過，《平面高手課堂！如何用扭曲工具快速?gòu)?qiáng)化作品設(shè)計(jì)感？》
最后統(tǒng)一色調(diào)和光影就完成了。
地板有的會(huì)打一層蠟，這個(gè)時(shí)候，就會(huì)存在一些倒影，所以在這樣的地板上倒影和投影是并存的。
先看一下在不同地板上的投影樣貌。
案例演示
這個(gè)我們選擇大理石材質(zhì)，首先閉塞陰影：
繪制投影的形態(tài)：
給投影高斯模糊，添加蒙版做漸變：
然后，按照光影和環(huán)境色，處理產(chǎn)品的明暗和色調(diào)：
5. 漸變色/純色
這也是我們?cè)O(shè)計(jì)中遇到比較多的情況，在純色或漸變色的背景中，為了讓畫面具有空間感，我們經(jīng)常會(huì)給物體加投影，這個(gè)投影可以是常規(guī)投影，也可以是倒影。
案例演示
閉塞陰影：
根據(jù)光源繪制投影：
高斯模糊，然后添加蒙版做漸變：
修飾產(chǎn)品的色調(diào)和光影：
統(tǒng)一光影色調(diào)：
教程到這里就結(jié)束啦，估計(jì)有的同學(xué)會(huì)納悶，為什么我們沒有細(xì)講怎樣根據(jù)光源繪制投影？因?yàn)樵谥巴队拔恼轮幸呀?jīng)手把手給大家演示過了，沒看過的同學(xué)趕緊去補(bǔ)課，可閱讀《投影一直做不好？看這篇文章就搞定！》
總結(jié)下今天的內(nèi)容，第一，投影在畫面中作用。第二，我們給投影形式做了分類，有常規(guī)型，長(zhǎng)投影，倒影，懸空投影，合成投影。然后是制作投影的方法，著重介紹了倒影該怎樣做，最后是投影在不同材質(zhì)上的表現(xiàn)。通過關(guān)于投影的這兩篇教程，相信大家已經(jīng)能掌握一些原理和技巧了，其實(shí)最快速學(xué)習(xí)投影的方法，就是要學(xué)會(huì)觀察生活中的事物。
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.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://www.teruid.com