搜索
免费下载
设计灵感
设计规范
👑
充值会员
流体渐变
渐变配色
色彩搭配
注册
登录
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
APP设计
原型demo
GUI
小程序界面
网页UI
网页设计
原型demo
软件设计
字体下载
衬线字体
非衬线字体
圆角字体
手写字体
网页字体
图标字体
书法字体
交互动效
加载loading
转场动效
ICON图标
面性图标
线性图标
拟物图标
2.5D图标
卡通图标
像素图标
按钮图标
多色图标
活动图标
插图/插画
扁平化插画
多彩渐变插画
2.5D插画
样机贴图
手机样机
名片样机
动画样机
电脑样机
笔记本样机
穿戴设备样机
UI作品样机
设计导航
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
网页UI
字体下载
交互动效
ICON图标
插图/插画
样机贴图
设计导航
设计修图,为什么如此实用?
搜UI
>
文章/作品
>
设计教程
>
设计规范
© 共享素材,请勿商用
举报
[db:内容描述]
设计
实用
如此
为什么
UI课程
发布时间:2020-05-26
关注
01f7495b9e58f0a801213deac411a9.jpg
(123.13 KB, 下载次数: 0, 售价: 2 U点)
在日常工作中,设计围绕的核心几乎都是产品,产品的美观度、精致度也间接的决定了画面给予用户的第一感受,所以产品所带来的视觉感受也是不可忽略的一个设计环节;这里就引出今天的主题:设计修图的实用性到底有多强?为什么是设计修图而不是产品精修?设计修图较于产品精修好在哪里?
010f685b9e5906a8012099c86497f6.jpg
(61.17 KB, 下载次数: 0, 售价: 6 U点)
设计修图较于产品精修还是有些许不同的,设计修图的过程相比于产品精修要简单,更节约时间成本,且更方便用于日常的设计工作中去,但是设计修图的理论同样也是建立于产品精修之上,也就是二者在理论是相通的,但是在实践中设计修图将过程简化,即:设计修图在原产品的基础之上做一些修图、美化的过程;而产品精修大多情况下是要将产品重新绘制,然后再美化的过程;目的是有利于日常工作中随时使用、覆盖面广、操作方便等等,当然设计修图是学好产品精修的前提~
012ccc5b9e5928a801213deafdac5e.jpg
(62.23 KB, 下载次数: 0, 售价: 2 U点)
产品精修一般修的是形体,校色、材质、光感、质感;而设计修图则着着重于光感、质感,富有光感是很实用的一个设计技巧,无论是合成设计、详情页设计、以及平面设计都很实用,下面我们说下光感应该如何体现,首先举个例子分析一下:
01526e5b9e593fa8012099c89ecd00.jpg
(114.41 KB, 下载次数: 0, 售价: 2 U点)
01d9065b9e5943a801213dea3ada38.jpg
(1.69 MB, 下载次数: 0, 售价: 1 U点)
01ec855b9e5943a8012099c8a42645.jpg
(122.09 KB, 下载次数: 0, 售价: 6 U点)
从左侧图到右侧,我们可以看下相比原图,修过的图有哪些提升?首先质感上有很明显的提升、以及对产品本身固有色进行校正;其次相比原图,修后的图在高光的表现上更加明显,且是通过高光、反光的相互作用进行表现;最后材质的表现更加鲜明,比如:第一张图的材质偏哑光、磨砂的材质,所以在高光的表达上相对模糊一些,而第二张图的材质为金属、不锈钢、玻璃,所以无论是高光还是反光都偏清晰、有棱角的感觉;上面案例属于产品精修的一些手法,继续引出我们的重点设计修图!
01dc695b9e596ba801213deac10d4b.jpg
(69.65 KB, 下载次数: 0, 售价: 4 U点)
前面说了精修的一些表现形式,接下来在说设计修图之前,需要首先了解一下什么是高光、反光、暗部,比如:
01ae695b9e5990a8012099c85f8083.jpg
(178.37 KB, 下载次数: 0, 售价: 3 U点)
这是一个很简单的实例图,因为形状是球体,所以高光的形态类似点状,这里图中标1的位置就是球体的高光,而标3的位置很明显是物体区域最暗的部分,所以这里是暗部,而标2位置则是在暗部中有偏亮的部分但亮度要低于1,这里是物体反光区域,也可以理解为由地面反射的光所形成的,而反光的作用就是将暗部区域变得更加通透,不会给人一种漆黑一片,毫无变化的感觉;其实设计修图很多情况下就是修明暗关系,修体积感、立体感!接下来我们做个案例,分析下设计修图最常用的处理手法:
0165025b9e59afa8012099c8f54ec9.jpg
(115.53 KB, 下载次数: 0, 售价: 3 U点)
这里我随便找了一个产品,结合产品的特点,我们首先分析一下,哪里应该是明显的亮部、高光、暗部、以及反光的区域:
01b63a5b9e59cda801213deae1fb2e.jpg
(130.77 KB, 下载次数: 0, 售价: 6 U点)
设计修图是在原产品的基础上进行的,那么首先要结合产品自身特征进行划分不同区域,标记1应该是高光位置所在处,也就是画面中最亮的部分;标记2是产品的暗部,即产品最暗的区域;标记3应该是在暗部中的反光位置,目的是增加暗部的通透性;无论是何种修图形式,只要把亮部、暗部、反光、高光充分的表达,都可以很好的提成产品本身的美感,体积感;接下来步骤分解:
012c2d5b9e59ffa801213dea307609.jpg
(118.35 KB, 下载次数: 0, 售价: 2 U点)
这一步是加强高光的表现,通过对比很明显的感觉出来中间高光区域得到很明显的提亮,继续进行:
01b00b5b9e5a1fa8012099c80fea2b.jpg
(129.97 KB, 下载次数: 0, 售价: 4 U点)
这一步是加强了1的亮度,减弱了3的亮度,而在2处是在把手过渡的地方添加了一条细小的高光:
017e3b5b9e5a3ca801213dea338c7e.jpg
(134.32 KB, 下载次数: 0, 售价: 4 U点)
同样1和3也是增强明度,而2则是在转折区增加一条高光,目的是增强产品的轮廓感,最后增强质感,添加暗部反光,简单调色:
01fc985b9e5a51a8012099c865529c.jpg
(141 KB, 下载次数: 0, 售价: 1 U点)
其实我们不妨看一下,从开始到最终究竟有哪些变化:首先是原产品固有的明暗区域都分别加强(亮的提亮、暗部加深);其次圆柱体的特征是至少有一条很明显的高光,那么我们就加强高光表现;最后在大面积暗部区域添加反光,增强其通透性,而有棱角转折区域加高光,增强轮廓感!这就是设计修图常用的手法!
01bfc35b9e5a7aa801213dea9552f9.jpg
(64.02 KB, 下载次数: 0, 售价: 3 U点)
设计修图的目的更便于工作中运用,比如:合成设计中的每个元素都要进行修图,也就是每个元素都要结合光源做好明暗关系,而上面所说到的手法是最常用的一种,就是结合产品进行修图;再如:详情页的首屏设计,也就是前面文章中提到的有光来的理论,也是通过设计修图实现的其光感的变化的,比如:
0124535b9e5a93a8012099c823ec17.jpg
(214.23 KB, 下载次数: 0, 售价: 2 U点)
01e0475b9e5a95a801213dea54ca05.jpg
(720 KB, 下载次数: 0, 售价: 4 U点)
015c885b9e5a96a8012099c8c9e094.jpg
(499.21 KB, 下载次数: 0, 售价: 2 U点)
想做有光感的海报,首先第一步是给画面定好光源,一旦确定光源位置,就要给画面中每一个元素做设计修图,明暗关系(偏向光源的是亮部、背离光源的是暗部),既然是要做明暗关系,就要把明暗关系做的有足够的识别性;然后通过添加高光、反光、转折高光等等增强画面的体积感、细节感;在做设计修图的同时也是在做合成基础练习!设计修图相比精修要简单很多,但是更适合工作中使用,在我个人看来,设计修图几乎适合于任何设计形式;看似简单,其实只要做好每个元素的设计修图,同样也可以创造出很优秀的作品!
010a7a5b9e5ab6a8012099c8251d4b.jpg
(49.23 KB, 下载次数: 0, 售价: 4 U点)
设计修图的核心就是在产品基础上加强明暗关系的对比,做好体积感,丰富产品本身细节;想做好光感、合成、精修,不如从设计修图开始,这对于接下来更深入学习会起到很好的辅助、过渡的作用,为了方便大家记忆,下面我总结了一段老张牌七言片段:
做好光感有几点
设计修图最关键
产品高光要凸显
明暗关系对比现
转折高光增细节
暗部反光是重点
质感放在最后面
你若不信练一练最后,我们可以找一些产品进行分析、练习,加深记忆,这里说道的也不过是一种可参考的处理手法,更多的还是需要大家理解、总结、应用!
0197b05b9e5b35a801213dea46f213.jpg
(20 KB, 下载次数: 0, 售价: 3 U点)
原文链接:https://mp.weixin.qq.com/s/3zd25Rma3sWlLv0aC5Jrlg
UI课程作品
设计修图,为什么如此实用?相关作品
收藏
小程序设计
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
其他设计规范
最新素材
其他设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
Load More
最新素材
收藏
像素图标
收藏
原型demo
收藏
APP设计
收藏
原型demo
收藏
面性图标
收藏
线性图标
收藏
线性图标
收藏
多色图标
Load More