如何做出精緻的投影？

12-13

如題，題主是一個工作快三年的平面設計師，投影作為一個重要的細節經常出現在設計過程中，但題主一直做得很糟糕非常羞愧。經常在behance 和dribbble看到很多精彩的投影一直很好奇是怎麼做到的，希望高手指教，謝謝！
------------------------------------------
問題補充

收到了一些回答，很驚喜各位答主都很認真，在此致以感謝！
可能是我選的圖不夠全面，目前的答案多是利用圖層樣式形成的投影，因為都是平行視角下的投影姑且稱之為「平行投影」。然而我們有時候會遇上其他視角的投影（比如合成立體畫面時），那麼這種下又該如何實現優質的投影呢，望補充。
------------------------------------------

附圖如下：

好問題，試著回答下~

一、談「影」先談「光」
有光才有影。如果理解了光與光對物體的作用，相信就會比較好理解各種陰影的形成了。因此我想先和大家聊聊光~

1. 光的基礎邏輯
當光射在一件物體上時，會產生亮面、暗面以及投影。但我們細心觀察還可發現物體會受到來自其他物體的反射光。

（光的基礎邏輯）
2. 關於光源色、固有色與環境色

光源色是指射在物體上的光的顏色；
固有色指物體本身的顏色（當然我們所看到的所謂「物體顏色」是由它反射的光決定的←好像是初中科學的內容，跪）；
環境色是一個物體受到周圍物體反射的顏色影響所引起的物體固有色的變化。

3. 光源的遊戲
當我們在做設計、繪畫、攝影等等的時候，靈活運用各種光、各種角度，就能營造出完全不同的氛圍。好的投影效果，避不開好的打光水平。
我在這隨意截取了幾個蘋果官網的產品展示效果，供大家參考。

（蘋果官網產品展示效果）

4. 物體材質

（隨手拍）
物體材質是非常重要的一個屬性，不同材質會對光產生不同的反射。
如上圖隨手拍中，我們能看出滑鼠表面是非常光滑的，因為它對光產生了較明顯的鏡面反射。而紙巾就看不到明顯的反射光線，我能推測這個物體表面是比較「粗糙不平」的。而根據物體體積、材料等屬性不同，陰影也會產生巨大差別。

在這推薦個手機遊戲 Shadowmatic，你能看到非常多的材料在光下的反射效果。當然，遊戲畫面和可玩性都做得非常出色~

（Shadowmatic 遊戲界面）

最後我想說個「禁忌」：不要用純黑色做物體投影（除非要做特殊的藝術效果）。

二、模擬真實的投影

by Ollin
https://dribbble.com/shots/2342674-Drill
作者用 3D 軟體精彩的表現了各種材質以及色彩效果。金屬的光澤、帆布的紋理、羽毛的輕盈以及細膩的光影表現，看著這樣的圖標就是種享受啊~

by Soda
https://dribbble.com/shots/1216496-Old-Stuff
雖然只是用了純白的背景，但通過圖標下的陰影我們卻能輕鬆想像出這枚圖標所在的空間關係，這也是好的投影的作用：描述空間。

by Studio–JQ
https://dribbble.com/shots/2828034--Chilled-Sunday-And-Relax
這樣的效果圖最近非常常見，厚重陰影效果，將中間的作品迅速「抬起」，我們甚至可以想像這張圖是由攝影師從上往下拍攝的：準備好背景，將光打在偏右上方，將海報墊高，嗯……大概就是這樣。

三、抽象的陰影效果

by Yoga Perdana
https://dribbble.com/shots/2090864-Polar-Bear
這是個 logo 設計。這個設計風格已經成為了這位設計師的招牌風格。使用輕微變化的色彩拉開層級關係，用形狀勾勒陰影而不是普通的軟陰影。

by zldesign
https://dribbble.com/shots/2694099-Dumbbell
這種大角度的陰影也不錯呢~誇張但是足夠吸引人。

by 不要臉の俺様（●＾3＾●）
http://hindydesign.com/
這是我自己隨意做的一個腦洞。角色的造型本身就設計得非常卡通，於是在做投影的時候想著乾脆用面來表現得了。做完感覺效果還不錯，還能突出角色，於是就這麼完成了。

四、我的幾個 PS 投影技巧，建議視情況合理疊加運用

（1. 運用好等高線）

（2. 運用固有色）

（3. 多疊幾層陰影（因為真實的陰影大多都有許多層））

（4. 運用形狀羽化（可靈活再編輯形狀））

（5. 模糊效果（記得將圖層轉為智能對象方便再編輯））
最後因為本人知識有限，無法從 3D 角度深入談光影及 3D 軟體技巧。但希望本文能對想要優化 UI 投影表現的朋友有所幫助。謝謝~

看到題主又問了立體投影，恰好也做過，拿去年做的一個產品來答吧(沒有源文件了QAQ)~
這種效果其實和題主要求的還是有區別的，但是方法是相通的。
之前水平還是有限（而且畫得不好，主要是陰影深度和模糊程度的把控上），請將就著看~

產品是拍的，但是陰影是重畫的
工具 PSCC 2015
預設主光源：頂光
預設副光源：左右30°水平

1.這種要一定的空間想像能力，所以先將對象的外輪廓在平面上的投影勾勒出來。
需要注意的是這一次有三個光源，那麼這個投影可以以光源垂直反方向分布三個按照光源主次來確定陰影濃度（截圖手抖，將就~）。

2.近實遠虛，這個就是畫的重點了，越貼近承載的平面陰影越深形狀越清晰受環境光影響越大，越遠越模糊越淺受環境光影響越小（比如你的平面是黃色，物品是紫色，那貼合的比較近的地方就有可能帶一點紫色）。
這個沒有什麼技巧了，手上功夫多一點，多練習吧。

-----------------------------------------------------以下為7月22日前答案-------------------------------------------

隨手弄了一個就直接用的 圖層樣式，
工具：PS CC 2015
最終效果：

總共用了4層投影，預設是頂光。
1.加強物體與背景對比

2.物體的厚度投影（部分1）

3.物體的厚度投影（部分2），主要是用擴展來加強物體的厚度形狀的投影。

4.物體與牆面貼合部分，顏色深但是範圍小。

5.背景什麼就略過吧....
樓上劉木友說的陰影顏色問題也是值得注意的。

其次，陰影的顏色用深顏色而不是黑色逼格更高，比如背景是淺藍，陰影就用深藍。

這只是簡單的方法，投影什麼的最好還是要自己畫，但這樣基本上也可以糊弄過去了。
祝好~

投影法較為簡單粗暴，但是投影效果較為粗糙缺乏立體感，投影顏色較難調節且單一。

較為折中的方法，僅僅適用於形狀圖層和單一顏色投影，且操作複雜程度不亞於接下來的高斯模糊。

高斯模糊能較好地應對大多數需要和場景，並能對投影進行各種細調。使用高斯模糊前記得把圖層轉換成智能對象。

下面我們通過具體的操作實例來為大家展示這些不同的效果是如何設計出來的。

首先，我們用形狀工具建立三個矩形。填充上顏色。

複製圖層，進行不同的變換。為了方便大家看出區別，我們將複製出來的圖層添加了顏色疊加。

矩形一寬度縮小，高度不變，向下位移一段距離。

矩形二寬度不變，高度不變，向下位移一段距離。

矩形三高度寬度都縮小，不位移。

進行高斯模糊。

通過不同的變換，可以設計出不同效果的彌散陰影。較為常用為矩形一所示的變換。

轉載自：超贊！一份簡單易上手的青春彌散陰影修鍊手冊

更新既然改了問題，就詳細答一下

PS的話，投影就不要用圖等樣式里的了。

題主應該是沒有太多美術基礎（其實我也沒有）。一個美術生還有李濤都告訴我，一個物體的陰影應該有三層（或更多）。所以，陰影應該是第一層特深色，低模糊值，第二層深色，高模糊值，第三層淺色，特高模糊值。

其次，陰影的顏色用深顏色而不是黑色逼格更高，比如背景是淺藍，陰影就用深藍。

下面是栗子，Paco大神的，圖侵刪

題主下午好
不請自來~ 送上一個做完的效果吧~~~~~ （含源文件）

若有人關注，我再寫下製作的過程成嗎？
——————————
希望題主可以關注一下我自己錄的一些PS課程哈~ 鏈接在簡介里
PSD下載：鏈接: http://pan.baidu.com/s/1jI76RcE 密碼: jjhw

比較簡單的就是做兩層用原形狀羽化或高斯模糊+運動模糊做一個比較軟的長投影再用圖層樣式投影拉等高線做一個近些硬些的投影同時如果是透光或者反光材質的物體還要加點反光

投影
提供兩個視角
①空間概念
距離，有限的平面內傳達畫外的空間關係。
逼格暗藏於此。
②照明概念
光影與色澤，情緒與溫度。
逼格也在於此。

最後還是想強調，逼格不在於某種軟體或某種效果，而在於視覺語言的高度提煉。

就像電影的主角再漂亮、拍攝設備再精良，後期效果再震撼，也比不過劇本的敘事和表演的真實自然的重要性。逼格也重在於此。
平面設計也是一樣，客戶的需求就是劇本的主題，你手中的字、圖、形就是演員，逼格不是他們本身高端，而是你的構思和布局（導演的審美和敘事能力）高端。

而不是拘泥於平面的思維。

首先你要裝最新的PS CC，有多層陰影疊加功能，你的截圖都很簡單就實現了

大師級的案例不需要說太多，內容和逼格都能夠感受，技術這塊主要還是要多切磋。至於裝備，一台高清激光投影機是沒跑了。鑒於我從事的是工程繪圖和案例講解，我給自己配的是這款LU9235，藍核激光技術，除了擁有過超高的亮度外，還具有許多新的特性。

RGBY色彩的雙色輪系統，增強了色彩亮度、準確度和色域空間，在提高亮度的同時，也可以還原理想的純白色，實現了色彩鮮艷的畫面。

Behance 是 2006 年創立的著名設計社區，包括設計、時尚、插圖、工業設計、建築、攝影、美術、廣告等眾多領域的創意作品和人才，樓主作為平面設計師真的可以上去多多交流。其實Behance的Discover-People下有官方推薦的設計師，你只要選自己感興趣的領域就好了。多看看大師級的作品，這個跟內容表現、技術手段、裝備配置都很有關係。

http://www.bilibili.com/video/av5131546 這是優設有一期的專講投影的錄像，因為網上寫投影的例子真的是寫爛了，瀰漫投影，斜投影啥的，真的爛了，但是這個真的是從生活細心觀察，可以從投影的角度表達更多，比如說生活中物體距離成影面的由遠到近，影子應該由虛到實(因為光源問題)，從而可以從影子的層面去表達兩個物體直接的距離，比如視頻中老師自己做的飛機起落的一個小動畫，非常細的一個部分，之前沒細看不注意還真沒發現。
直播的時候我就看了前面一部分，後面講的好像跟metrial design的一些投影設計有相似我也沒看，而且由於直播錄像，直播過程中被別人打斷的部分可以 "→"。

感謝題主和回答的各位大神，設計師初級學徒受教了。原先一直用圖層樣式和形狀工具結合做陰影，根本沒考慮過層次，有個變化就夠了（不過略有美術基礎還是能做的像那麼個樣子）