设计思路教程!设计师必学的7种投影技法解析

时间:2021-05-21
类别:其他教程
水平:进阶
观众:1.7w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

教程作者:黑狮力(授权转载)

交作业:#优设每日作业#

关于教程

设计思路教程!设计师必学的7种投影技法解析

现今投影化的UI作品流行热度极高,很多人也逐渐去尝试投影类型的风格,把投影运用在界面、图标、展示页面等等里面。在此写这篇文章,献给想要学习或正在学习投影的观众老爷们,投影讲解的主要方向偏向于UI设计这一块,并将更多细节化的知识点逐一解释。

这次要讲的投影类型一共分为7种,分别为:①普通投影;②等高线投影;③矢量投影(羽化);④图层模糊投影;⑤多层投影;⑥移轴模糊投影;⑦人工投影。那么直插主题,先说一下普通投影

教程内容

① 普通投影

1.1 普通投影调整参数区域

设计思路教程!设计师必学的7种投影技法解析

1.2 范例展示

设计思路教程!设计师必学的7种投影技法解析

1.3 注意事项

  1. 投影的混合模式选择在没有特定情况下最好用正片叠底,看起来更柔和,更容易融入到背景。
  2. 在投影的角度调整中,最好勾去全局光,否则在调整其他内容时会出现错误。
  3. 扩展会根据不同的内容少加一点百分比的扩展,建议多少加一点效果更佳。
  4. 在同色背景上添加投影,尽量选择其背景色作为参考然后把吸取颜色的饱和度调高明度调低作为其投影,在UI设计中运用色彩调整时个人建议用HSB来调整,不太建议用RGB,看个人的调色习惯,在调投影时则只需把S (饱和度)拉高、B (明度)拉低则可,十分方便。
  5. 在投影色彩调整过重或者过轻时,只要色相不存在问题,也可以用投影的透明度来进行调整投影的颜色。

② 等高线投影

2.1 等高线投影调整规则

设计思路教程!设计师必学的7种投影技法解析

从上图我们可以发现投影从形状的边缘开始扩散,我们的投影角度为90°,所以由实到虚的向下扩散直至消失。途中除了向下的那一面有投影外,其他三面也都被延伸出来,若我并不想他们这样延伸出来,我们就要对等高线进行处理。

处理后

设计思路教程!设计师必学的7种投影技法解析

从上图我们可以发现当我们在等高线中把内实部分弱化,把外虚部分拉长投影就进行了收缩,并且用曲线柔和的方式来处理,投影看起来更加精致。

2.2 等高线虚实运用案例

设计思路教程!设计师必学的7种投影技法解析

2.3 注意事项

在拉普通的虚化投影中,拉曲线的实与虚部分尽量不要靠边、要留距离,不然投影做出来会很生硬。

若花大量时间做好的等高线,最好把他保存,下次再用则很方便,不用再次去调。

在等高线中,能添加一个点解决的,绝不要添加两个点,要使其柔和过度。

③ 矢量投影

3.1 矢量投影制作步骤

设计思路教程!设计师必学的7种投影技法解析

3.2 矢量投影优势

  1. 调节投影时,可以自由添加减少锚点来换取不同的形状投影。
  2. 当羽化像素过多或者过少时可以直接在属性面板上修改,方便快捷。
  3. 修改颜色很十分方便,可以直接在填充里面做各种渐变。

④ 图层模糊投影

4.1 图层模糊投影制作步骤

设计思路教程!设计师必学的7种投影技法解析

4.2 图层模糊投影优势

  1. 投影的颜色是图片模糊的颜色得来,看起来更精致,层次感更强。
  2. 当羽化像素过多或者过少时可以直接在智能滤镜面板上修改,方便快捷。
  3. 可以在模糊投影在做透视、扭曲、斜切等变形,投影变化更直接更丰富。

⑤ 多层投影

首先,说一下什么叫做多层投影,多层投影就是运用多个投影-起来制作合成为一个投影,多层投影层次感更丰富,所展现效果也是单层投影所不能达到的。

那么我主要把多层投影分为两大类:

  1. 相同投影模式进行多层操作
  2. 不同投影模式进行多层操作

5.1 相同投影模式进行多层操作

例如同样的图层模糊投影运用两次

设计思路教程!设计师必学的7种投影技法解析

5.2 不同投影模式进行多层操作

例如图层模糊投影与等高线投影一起运用

设计思路教程!设计师必学的7种投影技法解析

⑥ 移轴模糊投影

移轴模糊投影是现在很少人拿来用的,因为一般移轴模糊多用于图片的处理,但本人十分喜欢用它,所以在这里给大家做一个移轴模糊投影的分享。

设计思路教程!设计师必学的7种投影技法解析

通过边缘的两条虚线为移轴模糊过度的起始点,通过调整移轴范围调整模糊的起始点;在移轴控制中心的控制点,拖拽该点可以调整移轴效果在图层上的位置以及移轴形成模糊的强弱程度。

  • 模糊:控制图像中移轴模糊两条虚线外的模糊程度,数值越大越模糊。
  • 扭曲度:调整图像中移轴模糊两条虚线外的模糊图像扭曲度,数值越大越扭曲。
  • 对称扭曲:勾选对称扭曲,调整扭曲度时虚线外两边同时调整扭曲度,不勾选只调整一边。

调节实线与虚线的位置来进行图层的模糊起始点与终点,若想让模糊变更大或更小,则可调整模糊的参数(像素)与扭曲度。

注:移轴模糊一般要与其他模糊混合运用才能体现出更佳的效果。

⑦ 手动投影

手动投影也是不规则投影,手动投影可以用画笔、钢笔工具转选区、颜色加深减淡等方法来实现。主要运用在效果的调整上,个人有种强迫症,老觉得调完后的投影有些欠缺,所以都会手动调调投影,这里也给大家分享下经验,因为方式太多所以说集中最常见的手动投影的方式(注:此举例都是根据有规则投影的情况下进行)。

  • 方式一:运用工具画笔一-在投影 上方建图层用画笔涂抹(注:画笔一定要用软画笔,不然调出来过度不均匀,建议多建立几层)
  • 方式二:在规则投影下运用加深减淡工具(注:若是用普通投影,可以把内容复制一层,在下方的图层填充为0%,然后运用投影,把其投影栅格化后就可以对其加深减淡了,这样可以在不伤害图片的情况下进行)
  • 方式三:运用图层蒙版一在建 立好的投影中运用图层蒙版,在图层蒙版里用画笔工具调整投影。
  • 方式四:运用选区+色相/饱和度( ctrl+u)调整局部颜色一在 要想调整的阴影图层上用钢笔勾好轮廓-转为选区-羽化半径-调整色相(若有需要点取着色)进行细节颜色的调整。

注:手动投影不太建议新手去尝试手动投影,效果可能会适得其反,所以也不举例详情说明。

以上是我对投影的一些理解和总结,喜欢的可以点赞哦~

设计思路教程!设计师必学的7种投影技法解析

想要来「优优自学团」和500位小伙伴一起交流学习进步吗?
添加管理员微信:uisdc2 备注「优优自学团」(无备注不通过哦)

学完这篇教程的人还在学…

97 收藏 180

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 4

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片