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