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