日志
用一篇干货帮你彻底全面掌握「投影」知识点！
2019-08-08 09:08
之前我们更新过如何做投影的文章：《投影一直做不好？看这篇文章就搞定！》，主要针对的是投影的原理进行讲解，包括如何用图层样式去做投影，怎样用工具绘制投影，这些都是我们了解投影的一个基础。教程发布之后，很多同学留言，表示没看够，希望针对其他投影形式再进行更深入的讲解，那这次我们就来满足大家要求。其实投影的设计不难，只要符合画面的光影逻辑，然后加上制作投影的方法，基本就能搞定很多基础的投影形式，话不多说，我们开始今天的教程。
其实投影在设计中的应用是非常广泛的，比如这些海报，都运用了投影的形式。  什么情况用投影 在平面设计中，除了合成设计之外，我们在什么情况下会选择用投影？ 1. 增加识别性  比如，在颜色比较混乱的背景上添加文字，或者添加图片，为了区分他们之间的主次关系，我们会添加一个投影。 2. 增加空间感和层次感  这两个画面，通过投影与主体的位置关系，产生较强的空间感和层次感。 3. 提升画面格调  反应产品质感的投影形式，会提升画面的格调，这类比较多的是化妆品与奢侈品。 4. 增加形式感  如果你的画面缺少创意性，不妨试试这类投影形式，通常来说它们都是用投影作为画面中的主体，以此来传递出很强的形式感与故事性。 5. UI设计 UI 设计中使用投影。  投影的类型 1. 常规投影  常规型投影包含了普通投影，弧形投影，接触投影，弥散投影。 普通投影   普通投影就是我们最常见的一个投影形式，它可以用图层样式来设置，它的特点就是在图像的四周都会有点阴影的感觉，让画面与背景形成前后景的关系，就像这里的案例。 弧形投影   弧形投影，它的投影是在物体的一侧，像翘起的边缘。 接触投影   接触投影，是物体立面与底面的关系，会有一种三维立体的感觉。 弥散投影   弥散投影，与普通投影的区别在于，它更有深度，也是现如今比较流行的投影形式。 2. 长投影  长投影主要分两种，一种是色块投影，一种是在色块的基础上的渐变投影。  比较常用在图标的设计，还有海报的设计。 3. 倒影 倒影，这类型阴影应该是比较难处理的了，想必大家在做设计的时候，大多数情况会规避倒影这种形式，除非是拍好的照片自带倒影，不然很少有同学愿意触碰这块。因为它比较考验大家对图形的认知能力，以及对透视基础的掌握，之前我们有讲过一篇关于素描知识的文章，在里面介绍过关于物体的基本结构，我们所看到的任何一个物体都有一个结构或者形状，比如立方体、圆柱体、圆锥体、球体。任何一个物体都可以视为这四种几何形状中的一种或几种的组合。那在倒影当中，这些基本形状同样适用。  首先来看二维的倒影，二维的倒影比较简单了，也都很好做，复制一个下来，加个蒙版做渐变处理就可以了。  三维物体，最基本的就是这几个形状，或者几种形状的组合，掌握几种形状的倒影，就能应付大部分倒影的形式。  立方体为基础型的倒影。  圆柱体为基础型。  圆锥体为基础型。  球体为基础型。  组合型。 4. 悬空投影 悬空投影，这类投影给人很强的空间感，并且大多数情况，投影都会成为画面中的主角。  分为三种类型，二维的悬空投影，2.5D 的悬空投影，三维悬空投影。 二维的悬空投影   先来看看二维悬空投影，是二维的平面悬空，添加一个弥散投影。 2.5D的悬空投影   2.5D 没有消失点，但是会有立体感，在下方添加一个投影，就会有悬空的感觉。 三维悬空投影   三维悬空投影能有很多创意形式。 5. 创意投影  创意投影，它不会根据物体本身的形态去表现，而是根据文案和设计构思而产生的很有创意的投影形式，这个主要靠大家发散思维的联想了。   最常见的就是电影海报中的投影表现。 6. 场景合成投影  一种情况是接近真实的投影，和实际照片是一样的道理，一种情况是类似于创意投影，合成的投影算是这几种投影当中最难的。  合成中的投影要自己创造一个光源，也就是想象出一个光源，根据光源关系，绘制出投影效果。  投影在这里都是很真实的表现。  合成也可以做创意投影，这三张公益海报的主角是动物的影子，但是形成影子的是前面的物体，这是很有创意的表现方式。 制作投影的方法 制作投影的方法比较多，比如说利用图层样式，用矢量图形做投影，高斯模糊设置投影，手绘投影等，每一种方法都适用不同的投影类型，我们想更有效率的完成工作，就要对这些技法有个较深的了解。下面我就带大家来了解下每种方法。 1. 图层样式 第一个，也是最简单的，用 ps 当中的图层样式来做。    模式一般我们就选择默认正片叠底，这是在正片叠底文章中讲到过，后面的颜色，如果是主体与背景颜色差异比较大的时候，我们可以选择环境色；如果差异不大，我们可以选择主体的相近的颜色，很少有选择纯黑色的投影。   不透明度就是阴影的透明程度，也是很好理解。下面角度，是光线照射的方向。全局光，选择之后，画面中其他元素添加投影，就会默认为一个光源，这样画面中投影会更和谐。   距离，物体和投影之间的距离，数值越大越远。扩展，就是阴影面积的大小。大小，就是阴影的虚化程度。   等高线，可能很多同学不太理解，其实很简单的，我们来看下，纵向，越向上，越实，越向下越虚化。横向，最右侧是投影的中心位置，越向左，离中心越远。根据画面中的等高线，我们来分析下。   这样就好理解了，我们看画面中蓝色圆点的位置，代表中心位置很实，黄色圆点的位置代表远离中心的位置很虚化，最后就得出右侧的投影。 那如果说，我想让投影的周围都变得很实，该怎么调整？  就是把虚的那个点向上调整，这样，就代表外围投影变得相对较实，我们会得到这样一个投影。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-52.jpeg[/img] 如果我想，投影靠近外围的位置，变得比较实，靠近中心的位置，变得比较虚，就可以这样调整。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-53.jpeg[/img] [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-54.jpeg[/img] 得到的投影是这样的，我们看到中间白色的区域，就是虚化之后的效果，接近了透明。这个搞懂了，利用图层样式做投影也就基本没什么问题了。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-55.jpeg[/img] ps 还自带了这么多等高线的样式，大家可以去实验一下。 那什么类型投影，比较适合用图层样式来做？ [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-15.jpg[/img] 普通的投影和弥散投影。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-bc-20190726-11.jpg[/img] [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-56.jpeg[/img] 画面中人物的投影设置。 2. 矢量图形做投影 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-57.jpeg[/img] 画一个矢量图形，之后选择实时形状属性，然后点击蒙版，通过调整羽化值，来调整投影的虚化程度，用这个方法会比较直观的观察到，而且因为是矢量图形，所以还很方便我们随时调整它的形状。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-58.jpeg[/img] 高斯模糊和矢量图形做投影，所适用的投影类型是一样的，同样适用于普通投影，弧形投影，接触投影，弥散投影。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-59.jpeg[/img] 还有悬空投影，它和矢量图形投影的区别就是，矢量图形更方便改颜色和形状，还有虚化程度。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-60.jpeg[/img] 在主体下方加一个小面积的虚化阴影，就会有悬空的感觉。 3. 高斯模糊做投影 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-61.jpeg[/img] 添加高斯模糊之前，一定要记得给图层转换为智能对象，因为高斯模糊对图层是有不可逆的破坏性的，所以添加智能对象之后会很方便我们随时去调整它的颜色和模糊程度，动感模糊同理。 高斯模糊做投影，适用的投影类型。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-62.jpeg[/img] [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-63.jpeg[/img] 4. 手绘投影 最后一个，用钢笔工具或者画笔工具来绘制投影，这个是比较难的，在投影那篇文章中，我们已经讲过在一个场景中，怎样分析投影的位置，大小，形状，方向，以及如何用钢笔工具去绘制投影，这里我们就不再重复了，如果有不懂的同学，回看之前的文章《投影一直做不好？看这篇文章就搞定！》 那我们来看一下，手绘投影适合什么类型的设计。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-64.jpeg[/img] 第一种就是合成设计，这个要考虑光源的位置，投影的透视，投影的颜色等，一般会采用画笔和钢笔工具的结合。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-17.jpg[/img] 创意的投影同样适合，因为它和合成投影基本一样，只不过不会根据对象的实际特征去绘制。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-25.jpeg[/img] 倒影适合用钢笔工具和画笔工具来制作，这里就涉及到了透视，我们能看到物体在基面上的倒影，实际上是物体在基面上的投影的倒立映像。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-66.jpeg[/img] 在平时的工作生活中，我们要学会观察，比如积水的路面，反射建筑的倒影是什么样子的，镜子里的自己，或者可以多看看摄影照片，慢慢养成习惯，提高对倒影的敏感度。 倒影的做法 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-107.gif[/img] 做倒影最重要就是两个字──拆分，我们给这个立方体做倒影，首先要思考的是，它的倒影是由哪几个面产生的，找到物体与承影面接触的线，然后把这两个面提取出来，沿着这个线把所在的面拆分出来。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-19.jpg[/img] 然后向下镜像，根据实际情况再翻转，要注意，倒影的透视和原本物体的透视要一致，也就是平行原本对象的边线。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-21.jpg[/img] 然后给倒影添加一个蒙版，做一个渐变，就可以了。 用刚才的方法给魔方做一个倒影 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-67.jpeg[/img] [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-1.gif[/img] 同样把与底边接触的面裁剪出来，可以看到透视关系还是不一样的，我们应该让倒影的面和上面的魔方透视一致。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-68.jpeg[/img] 用调整大小里的斜切，调整倒影的透视。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-69.jpeg[/img] 添加蒙版，然后在与地面接触的位置添加一个闭塞阴影就可以了。 再做一个复杂点的，给包做倒影。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-70.jpeg[/img] [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-71.jpeg[/img] 同样，找到底面接触面，然后把相应的面裁切出来。这里注意的是，每个面要单独拆分，这样才方便为每个面设置倒影。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-72.jpeg[/img] 把所有拆分的面复制一个出来上下镜像。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-73.jpeg[/img] 调整透视，就用调整大小工具，斜切，合并倒影的图层。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-74.jpeg[/img] 用蒙版渐变，别忘了闭塞阴影。 倒影规律及特点： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-75.jpeg[/img] 投影在不同材质上的表现 好了，前面介绍了每一种投影形式，以及适合的场景。那接下来，我们来看看在同一光源的前提下，不同承影面，也就是投影在不同的材质上是如何表现的吧。 1. 布面 布面材质是软性材质，在光源下会吸收光的反射，所以投影的边缘会相对模糊，不会过于锋利。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-76.jpeg[/img] 案例演示 我们来看下在布面材质上的投影的做法，首先在物品与布面底部绘制一个闭塞阴影： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-77.jpeg[/img] 然后新建图层，根据光源绘制出阴影的长度与形状： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-78.jpeg[/img] 给长投影做高斯模糊，然后用蒙版把边缘处理得柔和一些： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-79.jpeg[/img] 统一光影，把产品修饰一下： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-80.jpeg[/img] 整体调整下色调，就可以了： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-81.jpeg[/img] 2. 镜面 镜面是光滑的，所以光照射之后，会形成和物体一样的影像，也就是倒影。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-82.jpeg[/img] 设计之前，先参考下带有镜面倒影的照片。 案例演示 第一步，闭塞阴影： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-83.jpeg[/img] 第二步，拆分图像，拿到下方，调整透视，这是之前我们讲过步骤，这里就不重复了。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-84.jpeg[/img] 调整产品的光影与色调： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-85.jpeg[/img] 加点小装饰，烘托氛围： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-86.jpeg[/img] 最后是整体调整下色调和明暗： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-87.jpeg[/img] 3. 水面 水面和镜面类似，但是水面会存在水波纹，所以在做投影时候要注意投影的形态要与水波纹一致。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-88.jpeg[/img] 参考一些带有水面倒影的照片。 案例演示 依然先画闭塞阴影： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-89.jpeg[/img] 绘制出整个投影形态： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-90.jpeg[/img] 高斯模糊处理，因为是水面，所以阴影和倒影要共存： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-91.jpeg[/img] 下面就是倒影了，方法步骤同样。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-92.jpeg[/img] 那么问题来了，是怎么做到弯曲的效果的？其实就是用 PS 当中的置换来做，这是置换的参数与水面素材。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-93.jpeg[/img] 关于置换的教程我们也发布过，《平面高手课堂！如何用扭曲工具快速强化作品设计感？》 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-94.jpeg[/img] 最后统一色调和光影就完成了。 4. 底地板 地板有的会打一层蜡，这个时候，就会存在一些倒影，所以在这样的地板上倒影和投影是并存的。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-95.jpeg[/img] 先看一下在不同地板上的投影样貌。 案例演示 这个我们选择大理石材质，首先闭塞阴影： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-96.jpeg[/img] 绘制投影的形态： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-97.jpeg[/img] 给投影高斯模糊，添加蒙版做渐变： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-98.jpeg[/img] [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-99.jpeg[/img] 然后，按照光影和环境色，处理产品的明暗和色调： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-100.jpeg[/img] 5. 渐变色/纯色 这也是我们设计中遇到比较多的情况，在纯色或渐变色的背景中，为了让画面具有空间感，我们经常会给物体加投影，这个投影可以是常规投影，也可以是倒影。 [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-101.jpeg[/img] 案例演示 闭塞阴影： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-102.jpeg[/img] 根据光源绘制投影： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-103.jpeg[/img] 高斯模糊，然后添加蒙版做渐变： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-104.jpeg[/img] 修饰产品的色调和光影： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-105.jpeg[/img] 统一光影色调： [img]https://image.uisdc.com/wp-content/uploads/2019/07/uisdc-ty-20190726-106.jpeg[/img] 教程到这里就结束啦，估计有的同学会纳闷，为什么我们没有细讲怎样根据光源绘制投影？因为在之前投影文章中已经手把手给大家演示过了，没看过的同学赶紧去补课，可阅读《投影一直做不好？看这篇文章就搞定！》 总结下今天的内容，第一，投影在画面中作用。第二，我们给投影形式做了分类，有常规型，长投影，倒影，悬空投影，合成投影。然后是制作投影的方法，着重介绍了倒影该怎样做，最后是投影在不同材质上的表现。通过关于投影的这两篇教程，相信大家已经能掌握一些原理和技巧了，其实最快速学习投影的方法，就是要学会观察生活中的事物。 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。 阅读全文 |
下一篇： 让用户多走一步，让产品前进一大步