搜索
免费下载
设计灵感
设计规范
👑
充值会员
流体渐变
渐变配色
色彩搭配
注册
登录
首页
探索
素材分类
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
关注
本帖最后由 关关 于 2018-8-11 16:22 编辑
在很多设计作品中,我们不难发现对于材质的运用是十分广泛的,合理的运用材质可以很大程度的提升作品的质感、细节感!但是相反,如果使用不得当它也可以毁掉一个原本不错的作品,很多人对于材质的理解存在着一定局限性,那么本期内容:设计中材质有哪些运用形式?应该如何合理的运用材质?
161133i77mhbmayhh49om4.png
(5.08 KB, 下载次数: 0, 售价: 4 U点)
很多人对于材质并不陌生,但是每次使用后最终结果总是差强人意,这里首先要说的就是材质运用的几个常见误区:误区一:材质种类用的越多越好,这是很多人容易走进的一个误区,材质的运用要结合画面整体,运用材质的目的是提升设计作品的出彩度,而非刻意使用,过多不同形式的材质会使得画面杂乱!误区二:不了解材质所传递的信息,其实不同形态的材质所传递的信息是不同的,有些材质也会存在一定的使用局限性!误区三:一味地追求材质表现,而忽略了主体,材质在很多时候只是辅助画面,提升整体细节感的一种手法,不能因为过度强调材质而抢了主体!那么应该如何合理的运用材质呢?
161133pcrzjvv7vvv3r5ug.png
(4.79 KB, 下载次数: 0, 售价: 3 U点)
在日常工作中,背景添加材质、肌理的手法是很常用的,但是表现手法上也是有所不同的,表现形式一:将材质、肌理作为背景形象的一部分,也就是将材质做的足够明显,这么做的目的是丰富画面视觉层次变化,增强画面整体对比,比如我们常见的:
161544skvf9qfu3kwy1ukk.jpg
(151.68 KB, 下载次数: 0, 售价: 6 U点)
161133jvd6p0t0u2d6qt0z.jpg
(210.1 KB, 下载次数: 0, 售价: 3 U点)
161133bgo3jl1l9e64438b.jpg
(259.64 KB, 下载次数: 0, 售价: 4 U点)
161133nhpnp2fd8x8hthdd.jpg
(204.83 KB, 下载次数: 0, 售价: 4 U点)
161133v7kc2uql17rrtur7.jpg
(736.59 KB, 下载次数: 0, 售价: 1 U点)
通过对比不难发现有无材质对于整体的影响,同样的构图,没有材质变化的画面给人一种很单薄、视觉形象不够鲜明的感觉,但是通过添加材质、肌理,画面整体的丰富度大大提升,背景画面的变化增强,通过材质的变化,也使得主体的视觉形象也更加鲜明;将材质作为背景的组成部分,一定要切记时刻围绕主体展开,主体的位置是不可撼动的!表现形式二:将材质、肌理作为画面视觉中相对较弱的表现形式,也就是做的不明显,缩小看几乎没有,正常看的情况下又有一定的变化,这种表现形式目的在于增加画面细节感,使得画面不会因为缺少变化而略显单调,比如:
161133x4bvzb8ss84m5ppk.jpg
(285.11 KB, 下载次数: 0, 售价: 3 U点)
161133zw1ezonxqz1gq4q6.jpg
(244.63 KB, 下载次数: 0, 售价: 1 U点)
这种表现手法放小了看对于画面的影响并不大,但是如果1:1正常比例看,有材质的画面会给人一种细节感丰富、画面充满不同层次的变化感受,这样带给作品更多的可塑性,使得画面给人的视觉感受更深刻,同时也起到了一定的丰富画面的作用!
161133p22gfh254666wx5g.png
(4.86 KB, 下载次数: 0, 售价: 6 U点)
对于在文字中叠加材质在一些作品中是很常见的,同样的文字,给与不同的材质也会呈现出不同的视觉感受,更多的目的是提升文字与整体形象的契合度,增强整体视觉冲击力,比如:
161133yllgsjilnkhhirnn.jpg
(415.3 KB, 下载次数: 0, 售价: 3 U点)
161133eutrh4aabxh64tk4.jpg
(234.65 KB, 下载次数: 0, 售价: 3 U点)
161133xugm6a3it48d8t31.jpg
(169.8 KB, 下载次数: 0, 售价: 4 U点)
材质在很大程度上可以提升文字的立体形象,使得文字在整体的视觉形象更加鲜明,但是对于材质的运用也要做到有所选择,每种材质所传递的视觉信息都有所不同,要让材质与文案、主题相契合才能将材质的效果发挥的淋淋尽致,这一点很重要,比如:
161133rqfopvvq4ox9zzzx.jpg
(171.58 KB, 下载次数: 0, 售价: 3 U点)
这里只考虑材质对文字的影响,首先我们解读文字“第一战场”,让我们首先联想到的就是破损、狼藉、金属等等,那么在给这一文字添加材质时我们就要结合主题;上面两种的材质分别是木纹和大理石,给人的感觉是太过干净、简约,与战场主题不相符,所以说材质使用不得当,而后面两个的材质分别是破损的石灰墙以及金属,就能在很大程度上加强“战场”这一主题的视觉形象,在视觉上属于强调的作用!
161133k5781n5m0wyezvsv.png
(4.51 KB, 下载次数: 0, 售价: 3 U点)
材质的选择和使用也是有一定技巧可言的,这里首先要说下:当我们想要使用材质时,应该如何选择呢?一、结合整体风格选择,比如画面整体偏简约、干净的感觉,我们就可以尝试:大理石、木纹、石灰墙、花纹、木纹等等;再比如想要炫酷效果,那么我们就可以尝试:金属、破损墙壁、石头等等,也就是说尽可能让材质本身的风格偏向画面整体风格,这样可以让材质更加融合画面,不会给人一种很突兀、刻意的感觉!二、结合产品选择,一切的手法、技巧都是要服务于产品、主体的,结合产品选择材质也是很常用的;比如一些化妆品海报,我们可能用到的材质会有:水、植物、大理石、木纹或者产品本身所固有的材质等等,目的是凸显产品的美观、功效,让用户能够在背景及产品之间产生共鸣、联想,这样也能起到对产品的强调辅助作用!关于使用:通常找到合适的材质后,通常会锐化一下,目的是增强材质的质感,然后会用不同的图层模式去试,(一般情况下会用“正片叠底、滤色、叠加、柔光的模式”)以便找到最佳的使用形式;当然如果只用材质的纹理感觉,不用材质本身颜色的话,也可以去色后再去选择图层模式!
161907mjbpwq2r4it0t9cr.png
(3.83 KB, 下载次数: 0, 售价: 2 U点)
结合本期内容,做了一个简单的化妆品的海报,充分利用材质的不同表现形式,用分析的角度去观察,第一步,通过运用C4D软件,做一个简易场景:
161133k2x82tjtl7ncyzv6.jpg
(35.14 KB, 下载次数: 0, 售价: 4 U点)
简易场景搭建完成,因为只是黑白稿的场景,那么接下来就要通过分析产品确定材质的选择:
161133ykh37b3k787zb366.jpg
(69.72 KB, 下载次数: 0, 售价: 4 U点)
产品的感觉是干净、简约的,那么就围绕这个整体感觉,展开材质的贴合及制作,这里我选择纹理相对不复杂的大理石为主要材质,结合用到木纹、金属作为丰富画面的材质:
161133x3kn43wbupqrbnt3.jpg
(90.53 KB, 下载次数: 0, 售价: 2 U点)
这样一个画面给人的感觉是轻飘飘的,因为没有影子,没有将画面做出光感的效果,而且整体缺少色感,这里我选择把原本无色的材质换成有色材质,目的是增加画面整体色感,其次将投影、倒影做好,光源定在左侧,最终呈现的效果:
161133oinzf2qgfpnf2nfq.jpg
(137.44 KB, 下载次数: 0, 售价: 2 U点)
最终的呈现几乎是用不同材质做出来的一个场景,虽然这里用到了很多不同颜色的材质,但是最终用到的材质属性只有三种:大理石、木纹 、金属,而且依旧贯彻干净、简约的视觉感受,将同种材质的不同形态运用在一起会给人视觉联系的作用,不会给人一种杂乱的感觉!
材质对画面是辅助、丰富、增加细节感的作用,合理的运用材质可以提升设计作品的视觉层次、增强画面质感!但是不管是哪种形式的材质,都要做到切合主题,要让设计的每个元素做到有理有据,切记不要因为材质的过于凸显而抢了主体!最后希望大家注意防暑,有点热啊~~
转载地址:美工美邦
UI教程作品
其他设计规范
最新素材
其他设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
Load More
最新素材
收藏
像素图标
收藏
原型demo
收藏
APP设计
收藏
原型demo
收藏
面性图标
收藏
线性图标
收藏
线性图标
收藏
多色图标
Load More