迷人渐变—快速提升设计格调

小编:Instagram 换标的设计刷遍了大家的朋友圈,不管设计的好坏,却是让大家眼前一亮。在如今的UI设计行业中,风格已经快规范化了,所以聪明的、有的就开始寻找与众不同的出路了。渐变是设计师最简单的手法之一,也是移动端APP背景设计常用的设计技巧。今天由@余振华教大家如何巧妙运用渐变,迅速提升界面的格调。

我们都知道iOS7以后,界面设计已经趋于扁平化。实际界面设计中我们已经很少绘制写实图标。所以貌似现在的UI界面显得千篇一律。比较有的设计师会熟练运用插画设计还有动效设计,使自己的界面显得与众不同,然而这些技巧都是需要时间历练,短时间并不容易掌握这些知识。

有没有一种方法简单实用,迅速提升界面的格调了?

Instagram 换标的设计刷遍了大家的朋友圈,对于这个新图标褒贬不一,不管这个设计好坏与否,你不得不承认第一眼看这个彩虹色让你眼前一亮。也让我们重新认识到在UI设计中,使用得当的渐变色彩,可以使界面和图标的设计感得到迅速提升。

一、 垂直线性渐变

拉渐变是Photoshop的基础操作,那么如何运用的好看了?颜色选择才是关键

我们把一个渐变颜色拆分成A B C三个颜色,每个颜色用HSB标注颜色色值。

这是某App的一组引导画面,运用了三组渐变颜色,分别标注HSB的色值,通过这组色值的变化,分析如下。

A色 B值非常高,普遍50以上

从A色到B色,H值的变化范围为正负30到70,S值减少10,说明B颜色略变淡。

从B色到C色,H值的变化范围为正负30到40,S值增加15到50,说明C颜色开始变浓。

以上色值仅供参考,实际使用并非整数。根据以上规律去有规则的使用渐变色。

二、 垂直线性渐变 + 球形渐变

Web界面面积比较大,在大面积使用渐变的时候。如果只是使用垂直的线性渐变是略显单调的,这个时候我们需要加一个球形的渐变。

A+B+C色构成一个渐变,这时候我们再补充一个D色的球形渐变并高斯模糊。D色的圆形矢量形状要转换为智能对象,这样调节高斯模糊及大小的时候可以无损调整。如果界面上需要运用图片,我们再补充一个80%透明度的E色,叠加在去色后的图片上。这样界面会层次会更加丰富。

三、 多角度球形渐变

想让界面更加绚丽,这时候我们可以考虑多组球形渐变搭配使用。例如最新改版的instagram就是一组线性渐变,加两组球形渐变组成。球形渐变也是由多组颜色构成。

四、 色块渐变

渐变的颜色不只可以运用在一个色块上,还可以运用在一组色块上。设计师运用一组近似性色彩,将每个菜单项清晰区分开,让界面平衡在一个频率上,这样的画面更有节奏感和舒适性。

如何选择色块的颜色了?一样运用HSB,逐级加H色值,H色值越大,S相应的色值也要逐渐变小。至于希望你的界面整体颜色跨度大还是小,取决你逐级H色值加的多少。

相信通过我的HSB调色分析,你可以熟练运用颜色创造各种高大上的渐变。如果有不明白的吗,也与我互动进行讨论。

欣赏案例

最后给大家看一下相关精彩案例,可临摹学习。

欢迎作者「聊设计」的公众号以及新书:《术与道-移动应用设计必修课》

此文已经过作者授权转载!

站酷

作者:余振华老师

Photoshop
(0)

相关推荐

  • 策略性配色法则 | 如何通过配色提升设计品质?

    为什么你的配色总是看起来不舒服?如何才能让配色更高级?很多人在设计完成后,总是对配色不满意,却又无从下手.如何分析设计中的配色问题?如何通过系统的方法,提升配色能力?配色并没有所谓的固定方程式,生搬硬 ...

  • 干货集锦——20个最佳Bootstrap着陆页模板,快速网页设计不是事儿

    着陆页是网站上的一个至关重要的页面,一个好的着陆页,可以引导访客在登陆你的网站时进行一系列操作,进而达成注册,购买或者其他转化.因此,设计师们都必须精心设计着陆页,因为只有精心设计的页面才可以增加转化 ...

  • 爽赞传奇霸业平民玩家怎么样快速提升战斗力

    <传奇霸业>是一款传奇类题材的ARPG网页游戏.游戏秉承传奇经典设置,力求带给玩家原汁原味的传奇体验.游戏当中的人物.怪物均采用全新设计的高品质模型,动作更为自然,形象精致生动:游戏场景精 ...

  • 怎样快速提升自己的PPT制作技巧

    制作PPT是办公室职员的基本技能之一,用途十分广泛,可以用于做自我介绍.产品介绍.年终总结等等.使用PPT是非常简单的,但是要制作非常精美的PPT并不容易.小编今天就教大家如何快速提升自己的PPT制作 ...

  • 常用快速原型设计工具大比拼.原型设计工具哪个好用

    原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导至该产品的可用 ...

  • Win7虚拟内存设置技巧 快速提升其读写速度

    为了解决这个问题,WINDOWS运用了虚拟内存技术,即拿出一部分硬盘空间来充当内存使用,这部分空间即称为虚拟内存,虚拟内存在硬盘上的存在形式就是PAGEFILE.SYS这个页面文件。 虚拟内存只是真实 ...

  • 拍照秘法美图看看一键揭秘 快速提升摄影技术

    五一小长假春花烂漫,北京车展美女如云,想必各位摄影爱好者一定拍了不少美图佳作吧。在赞叹别人作品的同时,大家肯定也想了解这些大作的拍摄技巧。很简单,用美图看看浏览原始数码照片(带有图片信息的图片),什么 ...

  • 何快速提升公众号和文章排名?

    品途导读: 搜狗微信搜索平台究竟能给网友带来哪些方便?搜狗微信搜索的排名规则是什么?如何快速提升微信公众号和推送文章的排名?搜狗微信搜索还有哪些缺陷需要完善?此文笔者通过实践后为你一一解析. 搜狗微信 ...

  • 9个快速提升PPT制作能力的技巧

    为了让大家能快速提高PPT制作的水准,保住饭碗和获得升职加薪,出任CEO,迎娶白富美,走向人生巅峰,小编特别咨询PPT大拿,制作了9个快速提升PPT制作能力(B格)的技巧,记得收藏哦!