|
【知乎用户的回答(64票)】: 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 怎么来理解这个 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 ====================== 【Haiyuk的回答(2票)】: 是不是觉得有点类似？上图是网上的一个壁纸，但是我觉得原理是相同的，也就是建模，渲染。 其实软件也很简单，用sketchup+vray能满足建模与渲染的要求。但是光调试，环境阻光的调试都很重要。 作为建筑系的实习生，BIG的分析图很多都是这个风格，但是可能领域不同，风格效果会有差异，这也是我一直做分析图模仿的效果。 更新： 更新两张分析图效果吧，这是大三做的，和题主提供的图标比起来肯定比较简陋，但是我觉得，如果模型精度，渲染调试更到位了，应该能达到题主提供图标的效果的。 有点跑题了，可折叠。 【LinkzeroTsang的回答(1票)】: 谢邀。 我猜应该是使用 3D 软件建模，而后渲染，再进行后期而得的。至于建模工具和渲染器的选择，就非常多种多样了。看了一下 Webshocker 的其他作品和主页，应该可以确定他们是比较喜欢使用 3D 渲染的。 使用 Sketch、AI 等矢量绘图软件或是 Photoshop 直接绘制也是可能做到这样的效果的。但对于光影和质感的掌控要求比较高了，而且消耗的时间、精力应该较多。 【李书航的回答(1票)】: 建议你看一下这个教程，里面指出了按照照片或者实物临摹拟物图标时候需要注意的一些问题：光源的统一是最重要的，否则会看起来和实际不像。 如何在细节上体现的“像”是实物是拟物的最大难点。参考： 恐怖谷理论是一个关于人类对机器人和非人类物体的感觉的假设，它在1970年被提出。当机器人与人类相像超过一定程度的时候，他们的反应便会突然变得极之反感。哪怕她与人类有一点点的差别，都会显得非常显眼刺目，让整个机器人显得非常僵硬恐怖，让人有面对行尸走肉的感觉。 所以“像”是拟物设计，特别是凭空设计时候的不懈追求，拟物设计的总体难度要大于更加抽象的设计。 【铲屎的回答(1票)】: 我居然被邀请了@_@。 以前做过一些拟物的UI其实这些拟物设计，分层去理解，设计时理解本身物品的光源，在过程中细化，没那么复杂的。 如下面这个教程，各种使用的技巧、方法都讲得比较细，可以借鉴学习下。 1.虚虚实实–投影的诡变人生 2.形状工具组合秘技 3.再次变换命令的逆袭 4.叛逆的渐变工具 5.图层的好基友–蒙版 【林昌猫的回答(1票)】: Photoshop制作3D效果超详细教程最棒UI-UI设计师互动交流分享平台 PS 的3D功能可以实现。 【知乎用户的回答(0票)】: 首先你要理解这个物体本身的一些情况，比如材质，光影等基础的情况， 然后用ai这个软件可以做出这样的效果，至于逼真到什么程度就看你的理解程度和细心的程度了。 【头像秀的回答(0票)】: 这个属于三维设计图 可用玛雅或3D maxZ制作，先建模、贴图、渲染、再美工的效果 【洪涵滴滴的回答(0票)】: 1.是用3D软件制作的，可能还会用PS等软件后期一下，大家都有谈到。（未钻研3D，就不献丑了） 2.PS也可以实现这种画面效果，比较考验美术基础和技法。 3.其实最重要的一点是：前期的创意和草图，以及对颜色的把控和造型设计！ 大师的这几枚icon确实很细腻，很精美，让人忍不住垂涎大师的制作手法，但请大家不要忽略最初却最重要的一步——创意。 共勉。 【kayki的回答(0票)】: 谢邀 可以采用建模、渲染等再进行PS前面已经说过了、考验深厚美术基本功 【邵华的回答(0票)】: 利用三维建模渲染后在ps里处理修饰细节 【蛋卷的回答(0票)】: 这个用3D建模后在渲染，然后在PS里做细节上的调整。。。 【kerrylu的回答(0票)】: 谢谢邀请！（我竟然被邀请了@_@） 以我个人的学识，还是偏向使用Photoshop，分图层制作。 整体步骤： 从最底层（此图标无透明层，因此图中最底层即最外围）开始做，分析光的来向，处理描边色、填充色、阴影、质感等。 依次向上面的层画即可。 质感的处理： 比如，磨砂质感，可以画一个填充了颜色的图形，滤镜中找到[添加杂色]，然后[锐化]两三次，接着做一点的模糊，然后将其叠在需要铺质感的范围上，改为“正片叠底”即可。 这个图标应该是没有磨砂质感的，因此可以不做。但写实图表中经常要用到磨砂质感，遂将个人习惯的做法分享与众。 谢谢！（写得不好请多指教！） 【邓宪韦的回答(0票)】: 泻药。方圆是比较完美的事物（至少我这么认为）。创意来源于生活。单凭在电脑前绞尽脑汁想象是不可能的。忍不住再说一句，真的太好看了，看的我小心肝都是颤的，这几张图水准的太高了，把拟物化做的这么好。 【祝福的回答(0票)】: 这个图标并不是很复杂，细节处理到位，PS也可以处理出来的~http://www.jutro.cn 【一鸣的回答(0票)】: 莫名的被邀请了…为了效率就用3D工具实现吧;-) 【石川的回答(0票)】: 谢邀。 这种并不十分复杂的图标如果制作经验丰富并且操作熟练的话并不需要建模就可完成。 比如这个： 以及这个： 诸如此类。 绘制拟物图标其实是一个从绘画提炼到设计的过程，所以仍然需要对实物的观察作为绘制光影的基础，如果没有实物可以参照，则可以通过建模渲染来实现。然后当你积累了一定的经验，就可以凭想象来绘制了。 祝早日炼成大触。 原文地址:知乎 |
|
|
