如何製作出 Webshocker 那樣風格獨特的寫實應用圖標？

11-30

讓人舔了又舔，舔出哈喇：

Source: Dribbble - Webshocker

2014.08.16 已完結

抽空用 C4D 做了一下，水平跟 Webshocker 大師差了地球好幾圈，只能模仿個大概了，等啥時候有時間再仔細調試吧。

先佔個坑，晚上再來說這種東西的製作思路吧。

=================

晚上到了。

其實如果說「如何從零開始做出這麼一個圖標」也沒啥好扯的，無非就是「設計並實現」。這裡的「（視覺）設計」看的是美術功底和藝術修養；「實現」則看對材質、布光、渲染等等的掌握程度，籠統地說就是對 Cinema 4D 、Maya、3Ds Max 這類軟體的掌握程度。

至於這個題目「如何製作出 Webshocker 那樣風格獨特的寫實應用圖標？」，肯定不是問怎麼建的模，怎麼畫的貼圖，調過什麼參數，最後怎麼渲染輸出，而是——根據我的理解——「如何從圖 A 變成圖 B（大師原圖）的？」。

所以我也就不放什麼製作流程了，只針對原圖中的效果扯一扯基本的實現方法和原理。

以下是正題，如有錯誤還望各位看官批評指正。

既然是分析一個成品圖，那我們就從流程上倒過來看，用「渲染 - 光源 - 材質」的順序來分析。

==========================

一、渲染

乍一看大師的原圖，滿屏幕跑光，閃瞎狗眼，那這些效果是怎麼渲染出來的呢（在調好了材質的情況下）？

對比上圖的 A 與 B，明顯覺得 B 要更真實，這種感覺是怎麼來的？光影！

先說「影」，圖 B 的投影比圖 A 的投影好在哪？離物體越近，影子顏色越深！這不是簡單的陰影能夠做到的效果，而是用到了一個叫「AO」的東西。

1、AO（Ambient Occlusion，環境光遮蔽，環境光吸收）

具體定義點鏈接吧
Wiki：Ambient occlusion
百度：Ambient Occlusion_百度百科

怎麼來理解這個 AO 呢？
說白了就是「越角落的區域越暗，越開闊的區域越亮」。

光線射入一個「角落」會有兩種情況，如下圖所示（作圖不嚴謹，示意）。一種情況（左、中）經過幾次反射後逃離這個角落；另一種情況（右）是經過許多許多次反射後在角落裡越陷越深，被「遮蔽」，或者說「吸收」。

假設有一束光射向這個角落，一部分光像左圖那樣，經過一兩次反射之後，很快被反射出去；一部分光經過了更多次反射之後，進入角落更深的地方，但隨後也反射出去；還有一部分光進過無數次反射最終被吸收。像這樣，在較開闊的區域，或者說角落靠外部分很快被反射出去的是大部分光，所以這個區域比較亮；在角落稍微靠里一些的區域經過幾次反射後才被反射出去的相對較少的一部分光，所以這個區域相對暗一些；而在角落更深的地方，只有極少數的光才能進入到該區域，所以這個區域就會非常暗。

在 3D 軟體中，AO 表現的效果如下圖。

這就是 AO。

----------

說完「影」再說「光」，大師圖中流光溢彩的感覺是哪來的呢？我們先看原圖中這麼幾個部分：

看出來了么？物體本身的顏色（以及物體的反光、高光）會對環境產生影響。想搞出這個效果，需要用到的就是「GI」。

2、GI（Global Illumination，全局照明）

具體定義點鏈接
Wiki：Global illumination
百度：全局光照_百度百科

這又是個什麼東西呢？簡單來說就是由物體的反射、折射、焦散等產生的間接照明。

我直接從 3D 軟體中模擬一下吧，看下圖。

區別很明顯吧，開啟 GI 後，光線打到白色地面上，會再次反射到紅色方塊上，因此，方塊上原本處於背光面的區域也會受地面反光影響而被照亮。同樣，球體附近的地面也會受到紅色方塊的反光影響而被紅光照亮。

在 3D 軟體中，我們可以控制「光線反彈次數」以及「光線反彈強度」。

在上圖中，我把「光線反彈次數」設為 1 次，也就是說光線打到地面上，經過第一次反射後照亮了方塊背光面，光線反射就停止了。但是按理說，紅色方塊背光面被照亮後，附近的地面也應該受到方塊的影響而被紅光照亮。沒錯，這就是第 2 次反彈。
把反彈次數設為 2 次後，就得到了下圖中的效果。

理論上，反彈次數可以是無窮，但是每增加一次反彈，渲染的速度就會慢很多，所以這個值要根據具體場景來謹慎設置。

至於「光線反彈強度」，分為「首次反彈強度」和「二次反彈強度」。在上面的圖中，為了加強照明效果，我把強度提高了不少。

以上就是 GI。

----------

在渲染中想要「真實」，最基本的就是以上這兩個效果。

==========================

二、光源

布光很重要，是一門大學問，針對不同物體、不同材質以及不同的表現需求都要用不同的方法來設置光源，但是最基本的原則就是分清楚光源的主次關係。

我在這隻分析一下原圖中的布光吧，只能說個大概，還需要仔細調整。

1、主光源

通過投影的方向和最強高光的位置不難看出主光源肯定在圖片右上角的位置，然後再根據投影與物體的距離可以大致判斷出主光源的高度。

2、輔助光源

圖標的左上側有一個相對比較弱的偏黃色高光，這是輔助光源之一。主光源投影所具有的偏暖色調也是因為這個光源的存在。同時，從圖標下方偏冷色調的投影也可以看出，這個光源的光照強度和投影強度相對較弱。

觀察指針的投影可以看到，再指針下方不遠的位置有一個輪廓比較清晰的投影，這顯然不是主光源或者上述輔光造成的。而且觀察秒針軸心部分也會發現在上方有一個面積較大強度較弱的高光，同樣，圖標主體上方的反光與高光也說明在圖標上方較高的位置存在至少一個輔助光。

3、天光

為了讓投影不會以純黑的狀態表現，同時獲得更寫實的效果，一個天光是必不可少的。

----------

以上只是說明了這些光源的存在，有了這些光源，想要獲得圖中的效果還是需要進行反覆調試。

==========================

三、材質

材質的水也很深，包括顏色、自發光、透明、反射、凹凸、法線、高光、置換等等。（當然在這並沒有用到很多）

我就根據這個圖標中紅色錶殼部分所表現出的特徵簡單說一下吧，但是由於我自己也沒吃透大師這個材質所以只能大概扯一扯，以免產生誤導。
為了看著方便再貼一下原圖。

1、顏色

這個不用多說，固有色大概就是個（HSB）0、80、80的樣子。

2、高光

右上方飄出來的高光告訴我高光很強很集中，但是秒針頂端處的一個細節（下圖）說明，這飄白的高光似乎也有一部分反射的原因。

3、反射

反射部分根據下面兩處細節來看，不是很強，可能需要加一個菲涅爾。

------------

就我看來這個材質大概也就這樣，具體數值跟著感覺走吧。

======================

就說這麼多吧，燈光、材質雖然著筆不多，但學問都在這裡面，得靠自己摸索。

今天又照著第二個圖標做了一下，做到這個樣子其實很快，但是仔細看來還是有太多細節不到位。

======================

The END

======================

謝邀。

我猜應該是使用 3D 軟體建模，而後渲染，再進行後期而得的。至於建模工具和渲染器的選擇，就非常多種多樣了。看了一下 Webshocker 的其他作品和主頁，應該可以確定他們是比較喜歡使用 3D 渲染的。

使用 Sketch、AI 等矢量繪圖軟體或是 Photoshop 直接繪製也是可能做到這樣的效果的。但對於光影和質感的掌控要求比較高了，而且消耗的時間、精力應該較多。

試著做了一下，用 3D 還是比較輕鬆加愉快能做出來的。沒有做 post-processing。

幾個要點：

保持網格的整潔和良好的拓撲結構，儘可能多的使用四邊形（quads）；
為硬邊緣添加倒角；
使用細分修改器令模型表面更平滑；
錶殼使用漫反射和高光的混合材質；
燈光使用一個較亮、較小的 key light 和一個較暗、較大的 fill light 足矣（參見上面的圖，用兩個平面配合自發光材質來實現燈光效果）；

先去吃個飯～

我居然被邀請了@_@。

以前做過一些擬物的UI其實這些擬物設計，分層去理解，設計時理解本身物品的光源，在過程中細化，沒那麼複雜的。
如下面這個教程，各種使用的技巧、方法都講得比較細，可以借鑒學習下。

鼠繪收音機UI設計教程

1.虛虛實實–投影的詭變人生
2.形狀工具組合秘技
3.再次變換命令的逆襲
4.叛逆的漸變工具
5.圖層的好基友–蒙版

Sina Visitor System

建議你看一下這個教程，裡面指出了按照照片或者實物臨摹擬物圖標時候需要注意的一些問題：光源的統一是最重要的，否則會看起來和實際不像。

如何在細節上體現的「像」是實物是擬物的最大難點。參考：

恐怖谷理論是一個關於人類對機器人和非人類物體的感覺的假設，它在1970年被提出。當機器人與人類相像超過一定程度的時候，他們的反應便會突然變得極之反感。哪怕她與人類有一點點的差別，都會顯得非常顯眼刺目，讓整個機器人顯得非常僵硬恐怖，讓人有面對行屍走肉的感覺。

所以「像」是擬物設計，特別是憑空設計時候的不懈追求，擬物設計的總體難度要大於更加抽象的設計。

不邀自來~
和原圖有差距~
犀牛建模+keyshot渲染
模型比較簡單~
後期應該用PS再處理~

是不是覺得有點類似？上圖是網上的一個壁紙，但是我覺得原理是相同的，也就是建模，渲染。

其實軟體也很簡單，用sketchup+vray能滿足建模與渲染的要求。但是光調試，環境阻光的調試都很重要。

作為建築系的實習生，BIG的分析圖很多都是這個風格，但是可能領域不同，風格效果會有差異，這也是我一直做分析圖模仿的效果。

更新：
更新兩張分析圖效果吧，這是大三做的，和題主提供的圖標比起來肯定比較簡陋，但是我覺得，如果模型精度，渲染調試更到位了，應該能達到題主提供圖標的效果的。

有點跑題了，可摺疊。

Photoshop製作3D效果超詳細教程最棒UI-UI設計師互動交流分享平台
PS 的3D功能可以實現。

莫名的被邀請了…為了效率就用3D工具實現吧;-)

這個圖標並不是很複雜，細節處理到位，PS也可以處理出來的~http://www.jutro.cn

這個用3D建模後在渲染，然後在PS里做細節上的調整。。。

利用三維建模渲染後在ps里處理修飾細節

謝邀

可以採用建模、渲染等再進行PS前面已經說過了、考驗深厚美術基本功

首先你要理解這個物體本身的一些情況，比如材質，光影等基礎的情況，
然後用ai這個軟體可以做出這樣的效果，至於逼真到什麼程度就看你的理解程度和細心的程度了。

我也來一波！！！

現在大部分UI設計、圖標的製作、都在ps上製作。無非是先做形，然後疊加各種光、影、浮雕、厚度。

瀉藥。方圓是比較完美的事物（至少我這麼認為）。創意來源於生活。單憑在電腦前絞盡腦汁想像是不可能的。忍不住再說一句，真的太好看了，看的我小心肝都是顫的，這幾張圖水準的太高了，把擬物化做的這麼好。

這個屬於三維設計圖
可用瑪雅或3D maxZ製作，先建模、貼圖、渲染、再美工的效果

PS大神何在 C4D做這個殺雞用牛刀啊

看了下答案好像沒有人從建模的角度來說說這個具體如何做佔個坑先

說用3d做的都是生手，用平面軟體設計更簡單
以上說話比較偏急，請原諒。說是平面軟體製作的原因有以下幾個
1. 沒有環境光
2. 每個圖標圖形十分標準，沒有一定的透視變形
3. 3D軟體比較貴，國外使用盜版少

如果我用3D做的話，會用UG +Showcase，可以很快輸出，比平面的更快

謝邀。

這種並不十分複雜的圖標如果製作經驗豐富並且操作熟練的話並不需要建模就可完成。
比如這個：
wifi插座擬物icon教程
以及這個：
UI教程-寫實鬧鐘ICON|GUI|原創/自譯教程
諸如此類。
繪製擬物圖標其實是一個從繪畫提煉到設計的過程，所以仍然需要對實物的觀察作為繪製光影的基礎，如果沒有實物可以參照，則可以通過建模渲染來實現。然後當你積累了一定的經驗，就可以憑想像來繪製了。

祝早日煉成大觸。