如何做出精致的家用投影？_ZNDS问答

都陋了

如题，题主是一台工作快三年的平面设计师，家用投影作为一台重要的细节经常出目前设计过程中，但题主一直做得很糟糕非常羞愧。经常在behance 和dribbble看到很多精彩的家用投影一直很好奇是如何做到的，希望高手指教，谢谢！
------------------------------------------
问题补充

收到了一些回答，很惊喜各位答主都很认真，在此致以感谢！
可能是我选的图不够全面，目前的答案多是利用图层样式形成的家用投影，因为都是平行视角下的家用投影姑且称之为“平行家用投影”。然而我们有时候会遇上其他视角的家用投影（比如合成立体画面时），那么这种下又该如何实现优质的家用投影呢，望补充。
------------------------------------------

附图如下：

题主下午好
不请自来~ 送上一个做完的效果吧~~~~~ （含源文件）

若有人关注，我再写下制作的过程成吗？

——————————
希望题主可以关注一下我自己录的一些PS课程哈~ 链接在简介里
PSD下载：链接:
http://pan.baidu.com/s/1jI76RcE 密码: jjhw

好问题，试着回答下~

一、谈「影」先谈「光」
有光才有影。如果理解了光与光对物体的作用，相信就会比较好理解各种阴影的形成了。因此我想先和大家聊聊光~

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大神的，图侵删

		自动登录	找回密码
密码			立即注册

如何做出精致的家用投影？

相关问题更多>

最新回答