視覺設計 ? 有經驗的設計師,如何做真實的產品倒影?

有經驗的設計師,如何做真實的產品倒影?

發表于: 視覺設計. 評論
Sponsor

電商設計有三大痛:畫光、畫影、修產品。而在倒影這一塊,很多朋友還是一頭霧水,要么簡單的復制翻轉向下拖,要么照著抖音里的操縱變形生搬硬套,但效果往往不像視頻里盡善盡美,被甲方調侃不專業。

下面用實際案例給大家演示倒影到底應該如何繪制。上主菜前,前戲肯定要做足,我們先要搞清楚:

為什么你長得這么好看,但做出來的海報怎么就這么丑?

除了創意偏差,質感不夠是很多電商海報的共同痛點。創意不夠可以靠找參考,但質感不夠怎么辦?除了學會光效的繪制,你還得學會影子的表達。

影子不僅在突顯產品質感和增加畫面細節上能起到很大作用;

有經驗的設計師,如何做真實的產品倒影?

在合成融圖時,也能讓兩個毫無相關的素材顯得更加融洽。

有經驗的設計師,如何做真實的產品倒影?

我們先做個熱身運動,從最簡單的圓柱產品開始。

有經驗的設計師,如何做真實的產品倒影?

這個夠簡單吧,結構規則,倒影范圍小,接觸面不是玻璃這樣的介質。只要你不是這么做的:

有經驗的設計師,如何做真實的產品倒影?

或者直接做到轉折面上的:

有經驗的設計師,如何做真實的產品倒影?

那基本上都能做得八九不離十,操縱變形、局部翻轉、透視扭曲各種方法都可以很輕松做出這類規則幾何的透視效果。

有經驗的設計師,如何做真實的產品倒影?

唯一需要注意的就是美感問題,很多地方會說影子要用正片疊底,要用柔光或者要用疊加模式,并將其奉為圣經,遇到倒影就直接套公式使用。

有經驗的設計師,如何做真實的產品倒影?

其實我們做倒影的時候是沒有固定模式的,也不一定要和真實的一模一樣。

因為真實的不代表好看的。C4D渲出來的夠真實吧?但它有時候渲出來的還就是沒有PS藝術加工過的好看。

所以呢,我們要考慮的是,在盡可能真實的前提下,怎么去把倒影做好看。通過分析場景光源,產品調性等因素,結合所有問題想出一個綜合的解決方法才是我們作為視覺設計師的職責。

有經驗的設計師,如何做真實的產品倒影?

比如這張圖里,產品是白色的。白色的物品在大理石這樣的材質上,它會發亮。所以說我們在圖層模式選擇上會選擇一個發亮的模式,比如濾色模式。

有經驗的設計師,如何做真實的產品倒影?

然后根據接觸材質,適當做一個模糊效果,再略微調整不透明度即可。

有經驗的設計師,如何做真實的產品倒影?

前戲做足了,接下來就是上主菜的時間了。

有經驗的設計師,如何做真實的產品倒影?

如何做出成角透視下不規則圖形的倒影?

有經驗的設計師,如何做真實的產品倒影?

話不多說,淦就完事了!

有經驗的設計師,如何做真實的產品倒影?

成角透視下,單純復制翻轉已經很難做出倒影效果了,所以在這里,向大家介紹第一個方法:

手搓大法!

我們先從墻面的倒影開始,我們先用鋼筆工具勾出墻體倒影外形,由于倒影是1比1還原鏡面上面的物體,所以要注意倒影長度應和物體高度保持一致。

有經驗的設計師,如何做真實的產品倒影?

另外,倒影不是純色填充,是一個由淺到深的狀態,在相交面上是存在一定的閉塞陰影,所以適當調節畫筆參數:

有經驗的設計師,如何做真實的產品倒影?

然后用畫筆擦出輕微的漸變感。

有經驗的設計師,如何做真實的產品倒影?

接下來,用鋼筆工具將側面的陰影輪廓勾出來,用同樣的方法做出它的倒影,?但要注意面與面的區分。

有經驗的設計師,如何做真實的產品倒影?

最后,畫出縫隙細節,添加蒙版做出漸變效果即可。

有經驗的設計師,如何做真實的產品倒影?

同理,我們再將木質桌板的倒影繪制出來~

有經驗的設計師,如何做真實的產品倒影?

這時候會產生一個問題,桌板倒影和墻面倒影會產生重合,顯得特別臟

有經驗的設計師,如何做真實的產品倒影?

根據上方搭建邏輯,木板倒影是會遮擋住墻面倒影的,所以我們將墻面這部分倒影剪掉

有經驗的設計師,如何做真實的產品倒影?

這些倒影的繪制邏輯get后,我們來挑戰一下不規則圖形的倒影繪制。

有經驗的設計師,如何做真實的產品倒影?

像這種真實產品,用手搓倒影可以嗎?當然可以,但對于手法生疏的朋友可能有些苛刻了,所以給大家介紹倒影制作的第二種方法:

?局部拼接法。

面對這樣有弧度和紋路的物品,直接復制翻轉是不現實了,我們只能耐心地一層一層來做。

有經驗的設計師,如何做真實的產品倒影?

首先,對于底部突出的棱角,我們先復制一層,向下移幾個像素,還原倒影的棱角,再用蒙版擦掉不需要的部分。

有經驗的設計師,如何做真實的產品倒影?

接下來呢,再復制一層,將原先的紋路刪除,垂直翻轉,大概對好整體位置。

有經驗的設計師,如何做真實的產品倒影?

但是,由于上一步刪掉了原有紋路,導致倒影丟失了細節。

有經驗的設計師,如何做真實的產品倒影?

所以我們再復制一層,只取紋路部分,向下平移到適當的位置。

有經驗的設計師,如何做真實的產品倒影?

再用蒙版擦除不必要的部分

有經驗的設計師,如何做真實的產品倒影?

在這里,有同學好奇,為什么鏡面倒影的紋路和實際物品的紋路是相同弧度的。難道不該是這樣的?

有經驗的設計師,如何做真實的產品倒影?

這位同學物理學得不錯,平面鏡成像中像到平面鏡的距離等于物到平面鏡的距離。但要注意的是,這里是一個三維的立體面,不再是二維的平面。

有經驗的設計師,如何做真實的產品倒影?

比如最低點到地面的距離是18厘米,那么鏡像點地面的距離也是18厘米。

有經驗的設計師,如何做真實的產品倒影?

那么為什么兩邊都是向上翹呢,你看,因為是處在一個三維面上,地面不是一條直線,所以兩邊到地面的距離其實是這一段:

有經驗的設計師,如何做真實的產品倒影?

所以說,鏡面的鏡像到地面距離也該如此:

有經驗的設計師,如何做真實的產品倒影?

上面的靈魂手繪示意圖你看懂了嗎

有經驗的設計師,如何做真實的產品倒影?

好,我們繼續往下做。

再復制一個,適當放大,保證倒影和物體的高度保持一致。

有經驗的設計師,如何做真實的產品倒影?

用仿制圖章工具,將下部開口處的弧度還原~

有經驗的設計師,如何做真實的產品倒影?

再復制一層,取開口邊緣,擦去不需要的部分。

有經驗的設計師,如何做真實的產品倒影?

最后復制一層,保留葉子,移到合適位置,配合蒙版適當做出漸變效果即可。

有經驗的設計師,如何做真實的產品倒影?

不過,對于這個場景,畢竟平面不是鏡子,不會反射出太多清晰的倒影,尤其在木紋材質的平面上,幾乎反射不出什么細節,最終效果其實是這樣。

有經驗的設計師,如何做真實的產品倒影?

但畢竟是為了教學,所以即使最終效果模糊掉了細節,但我們要理解的是倒影的制作邏輯,以防哪天遇到什么變態的甲方讓你把產品放到鏡子上。

有經驗的設計師,如何做真實的產品倒影?

好,我們把視線再移到旁邊的牛皮紙袋子上。

有經驗的設計師,如何做真實的產品倒影?

這時候我們就要引出倒影制作的第三個方法:

面塊拆分法。

這個方法可以很好鍛煉我們的空間思維,復制一層,垂直翻轉移動到合適的位置。

有經驗的設計師,如何做真實的產品倒影?

用套索或鋼筆工具拆分出牛皮紙袋的每一個面:

有經驗的設計師,如何做真實的產品倒影?

ctrl+T調出自由變換,按住ctrl用鼠標左鍵將模擬倒影的邊緣與物體貼齊。

有經驗的設計師,如何做真實的產品倒影?

同樣的方法,對另一面做同樣的處理。

有經驗的設計師,如何做真實的產品倒影?

當然,因為木紋材質的反射原因,最終成品依然看不到太多細節,但大多數不規則物品都可以用這種拆分的方法制作倒影。

有經驗的設計師,如何做真實的產品倒影?

雖然倒影的細節被模糊掉了,但你會發現,有了倒影后,整個畫面的細節更豐富了。

有經驗的設計師,如何做真實的產品倒影?

我們再來看整體,是否感覺這一片光禿禿的面板非常單調?如果加一些瓶瓶罐罐又會產生細節過剩的麻煩,怎么辦?很簡單,我們加倒影。

有經驗的設計師,如何做真實的產品倒影?

用上述方法,將遠景的倒影和玻璃等倒影都進行一個補充和強化,最終效果如下:

有經驗的設計師,如何做真實的產品倒影?

是不是很簡單,只要梳理好物體結構,倒影制作就是這么輕松~

有經驗的設計師,如何做真實的產品倒影?

那么課后作業來了,這個倒影如何制作?

有經驗的設計師,如何做真實的產品倒影?

感謝閱讀!

來源:杰視幫 ID:jacksean003

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:為設計新人提供的設計交流群,請加入UI設計交流群,分享經驗、接單、求職、聊設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。

{ 發表評論 }