当前位置: 主页 > Y超生活 >写给不是设计师的——渐层配色(下) >

写给不是设计师的——渐层配色(下)

浏览量:117
点赞:938
时间:2020-06-18
写给不是设计师的——渐层配色(下)

,篇教学持续更新中,欢迎有兴趣的伙伴能藉由这系列的文章学到更多的东西。除此之外对于、、篇有任何希望补充或是修改的部分也都欢迎留言/私讯喔?。

Hello,我是 Samuel,在正式文章开始之前先跟大家说声抱歉,隔了这幺久才把篇的教学分享给各位;前几篇文章完成之后因为一些因素决定暂时休息一段时间;在这些特殊原因的处理上面也因为小弟的不成熟差点导致整件事情往最糟的方向发展,很庆幸在这个阶段能得到一些贵人的相助?,同时也要再次感谢所有在这段期间给予支持,鼓励的前辈、同事以及读者伙伴们,我会继续用自己的方式来帮助对于设计、工程甚至是新创领域有兴趣的伙伴们建立更深一层的认识。

篇主要会介绍以下三个主题:

本篇教学的完成目标如下图,本文範例全数使用 Sketch3 所製作。

→ 如有需要 Sketch3 完成档案的伙伴欢迎留下您的信箱或 私讯 索取喔。

一、前言

建议没有读过 , 篇教学,但是对于渐层还有一些模糊的伙伴,可以先利用篇的教学来建立渐层应用的基本概念;理解线性渐层高彩度与低彩度的渐层运用。 篇的教学则会利用一些简单的实作练习来帮助您複习/领悟篇里面提到的基础理论,同时介绍放射状渐层的应用场景跟需要注意的一些实作细节。接下来的篇,会结合前两篇的内容做出一些更进阶的应用,希望这一系列的分享能够帮助您在製作简报、介面设计或是印刷系列的设计,再不然就是各种好像很厉害的设计上面都能够有一些帮助。

一、基础複习/练习

首先我们就先来複习篇里面所使用的基础渐层,同时进一步的搭配一些光影细节来做出一个常见的方形按钮吧。练习一里面使用的是最基本的深灰、灰、白的用色彼此搭配来複习常见的渐层应用,同样的概念其实可以轻易地套用到不同颜色的渐层上面来做出您自己的变化喔。

写给不是设计师的——渐层配色(下)
练习一、按钮

设定工作区域的背景色为浅灰色。拉出您的按钮形状后依照上亮下暗的渐层来做出基底雏形。

为基底下方加上阴影来做出基本的立体感,阴影的强度以及深度可以依照您所希望达到的立体感来进行调整,但…加太多会有点怪啊?。

利用内阴影于上方製作白色的反光边,这条反光边是由于光在照射到凸起的立体时会聚光在接触点,再自然的于接触平面上由将光源发散出去产生上亮下暗的效果。

写给不是设计师的——渐层配色(下)

加上边线来凸显按钮的边框部分,考虑到光源的关係,我们同样使用上浅下深的渐层来製作边框。

除了原本的阴影之外,在这边我希望能够进一步地凸显阴影立体的效果 → 但!!如果把阴影直接加在原本的图层上面,阴影在配合模糊的效果之后就会往四面八方发散,然后整个按钮的底部就会髒得乱七八糟,不信邪的话可以调整看看?。所以在这边我把原本的基底稍微缩小并往下方移动一点,搭配的颜色以及高斯模糊的效果,放置图层于基座图层的下方来製作阴影。

加上一个好像很厉害的勾勾。

写给不是设计师的——渐层配色(下)

还记得吗上篇教学的内容吗?只要在勾勾上侧加上一个内阴影做出凹陷的效果,再于下侧加上一个白色阴影做出底部反光。登愣!!一般状态的按钮就完成啰。

写给不是设计师的——渐层配色(下)
练习二、按下去的按钮

设定工作区域的背景为浅灰色,依照上暗下亮的渐层来做出凹陷的基底雏形。

为基底下方加上白色的阴影来做出反光的效果,阴影的强度/深度/位移同样可以依照您所希望达到的立体感来进行调整。

同样加上边线来凸显按钮的边框效果,在这边使用边线同时也可以加强一些按压的视觉感。由于光源的关係使用的是差异很少的上深下浅渐层,上方的颜色可以尽量调整到跟 Step4 加入的内阴影相同来让边线不会过于突兀。

写给不是设计师的——渐层配色(下)

做到 Step3,相信您应该会发现按压的感觉好像还不够明显?接下来的内阴影能够帮助改善这样的状况 → 在基底的上方加上较强的内阴影来凸显按钮下压的效果。

加上一个好像很厉害的勾勾,因为是凹陷平面的关係在这边选择较深的底色。

帮勾勾加上一个内阴影做出凹陷的效果,再加上一个普通的阴影做出底部反光。成就达成!!?

写给不是设计师的——渐层配色(下)

同样的原理也可以运用在圆形、长方形或是各种圆角矩形上面,就让各位自行发挥啰,附上一些不同颜色的成品给大家参考?。

写给不是设计师的——渐层配色(下)
二、角度渐层

在读完了 篇教学 中介绍的线性渐层以及 篇教学 介绍的放射状渐层之后,各位对于渐层该如何使用应该是相当有概念了吧?。那我们接下来就来看看角度渐层可以用来做些什幺吧!在过去的使用经验里面,不管是在金属旋钮、状态条、icon 设计或是神奇的立体边缘上面都有角度渐层出场的机会,运用的範围是相当广泛而且充满变化性的。那⋯⋯就让我们先从一颗 icon 开始看看;下图的 icon 是厉害的设计师 akanelee,于嫁给 RD 的 UI 设计师中介绍的一个案例,连结内也有完整的

注:从刚踏入介面设计这个领域就开始 Follow 嫁给 RD 的 UI 设计师 部落格的文章,然后每天都在持续等待新文章的发表 XD,真心推荐对于介面设计有兴趣的伙伴们花些时间阅读!!

写给不是设计师的——渐层配色(下)
icon

除此像上图的 icon 之外,角度渐层也可以被运用在製作一些介面背景或是视觉海报上面 →

写给不是设计师的——渐层配色(下)

就让我们先用上面这张案例来了解一下角度渐层是怎幺一回事吧?

角度渐层案例一、背景製作

简单来在工作区域上拉出一个圆形,利用 1/5 检色器的选色原则 选取您想要的渐层颜色,在利用角度渐层填满圆形。底下这张图应该可以很清楚的了解到角度渐层是怎幺一回事吧,简单说就是让渐层绕着您设定的图形转 xD。

写给不是设计师的——渐层配色(下)

选择您所要的萤幕大小製作矩形,并且将矩形设定为 Step1 圆形的遮罩,产生如下图的效果 →

写给不是设计师的——渐层配色(下)

适度的给予圆形图层高斯模糊,让角度渐层的连接处不会过于锐利。

最后再加上 Noise Fill 来製作一些颗粒磨砂感。

写给不是设计师的——渐层配色(下)

再依序完成 Step1-Step4 之后,成品的设定应该如下图 →

写给不是设计师的——渐层配色(下)

完成的效果如下:

写给不是设计师的——渐层配色(下)
角度渐层案例二、ICON 製作

作为一个工程师跟半个设计师,并不会因为同时有 1.5 个技能就有 1.5 倍的薪水,但我们拥有一个很大的优势 — 就是写 for 迴圈写到没感觉的时候可以去画图,画图画到灵感浩劫的时候可以再回来写 for 迴圈?。那我们就来试试看一颗小弟之前写 Code 写到没感觉,只好打开 Sketch3 做的半颗…icon?

写给不是设计师的——渐层配色(下)

上面这颗 icon 可以分成三个步骤製作,分别是基底,彩色区域跟中间的不知名平面。步骤 1 跟步骤 3 的製作其实在前面的练习跟上,中篇的教学里面都有介绍过很多次,在这边就不再复述啰!我们单纯针对步骤 2 的角度渐层做进一步的解释。

写给不是设计师的——渐层配色(下)

步骤 2 的製作其实相当容易,我们先从下图的角度渐层分配来看 →

写给不是设计师的——渐层配色(下)

在渐层轴的起点我选择了一个亮度最高,彩度又不会太低的红色来作为角度渐层的起点,亮度较高的颜色搭配浅色的背景以及基底可以让整体视觉呈现较为舒适,乾净的感觉。接下来就是一个超级简单的步骤,我们先把渐层区段每隔 20% 做一个分隔点,总共做出五个区域如下图:

写给不是设计师的——渐层配色(下)

然后开始由第二个分段点往右到第五个分段点调整颜色 →

写给不是设计师的——渐层配色(下)

调整颜色的方式也非常简单,您唯一要移动的只有色相轴,依照色相轴的顺序对应到渐层区段的顺序,您就可以轻鬆做出 icon 里面的舒适渐层啰?。

写给不是设计师的——渐层配色(下)

如同这个章节最前面所提到的,角度渐层的应用其实非常广泛,在这边先就两个常用的情况帮助各位对于角度渐层的应用能有一个初步的了解,基于这些背景知识也能让您在创作新的事物上面有更多的技巧可以使用。紧接着让我们来看看金属渐层吧!

三、金属渐层

在开始製作金属渐层之前,我们先来看一张金属材质的照片 →

写给不是设计师的——渐层配色(下)

从照片中我们可以发现,由于金属本身的光泽,还有光在金属平面上的折射、反射情形相对複杂的因素,导致金属本身的色泽变化对比强烈,光源的分布也比较没有固定的方向。但是在製作上面其实还是有一些简单的原则可以依循 。这个章节就让我们利用 UI 元件中常出现的金属旋钮以及金属按钮来做点练习。

按钮
写给不是设计师的——渐层配色(下)
章节一中练习的按钮

我们在製作一般按钮的时候,在渐层上的使用顶多运用 2–3 个渐层区段,但是!!!注意啰,刚刚有提过金属光泽的两个重点就是对比强烈跟光影没有一定性。运用这两个原则,我们开始看看要如何才能够把上面这颗普通的按钮转变成具有金属质感的按钮!注:对于金属圆形/长形/旋钮有兴趣的朋友,建议在读完本篇教学后于 Google 搜寻 Metal Web Button, Metal Button Icon, Metal Round Button 等关键字,您会看到满坑满谷的金属按钮,跟金属按钮还有…金属按钮提供您作为后续练习的依据与参考。

写给不是设计师的——渐层配色(下)

让我们沿用 练习中做出来的按钮 ,在基底上面做一些渐层的调整就可以发现感觉好像有点出来啦?。我们可以简单整理出一些小规则 → 基于原本上亮下暗的渐层中间,插入明显的亮部跟暗部渐层区段,而且彼此採交替的方式出现,就可以轻易地做出有金属光泽感的渐层。来做出髮丝纹的效果 →

写给不是设计师的——渐层配色(下)

在最后的步骤里面,我同样的加强了文字上面凹陷以及底部反射的效果来配合金属强烈对比的质感。一颗具金属质感的按钮表面就诞生啦?。

写给不是设计师的——渐层配色(下)

接下来可以试着运用同样的金属光泽渐层概念,利用边线为您的按钮加上边框。大致上的製作概念就是 Step1 — Step4 的步骤,细杰的部分还有一些像是该如何与背景融合、该如何做出金属凹陷的效果等等就留在之后的文章再跟各位分享啰。

写给不是设计师的——渐层配色(下)

注 1:同样的效果在加上颜色之后也能组合出不同的用途,像是底下的绿色进度条?!

写给不是设计师的——渐层配色(下)

注 2:同样的概念可以直接运用在不同的形状,做出不同的效果:举例来说 →下方左图我加宽了亮部的区间,调整了圆角边缘,现在看起来有种水管的感觉?;右图我增加了由上至下的渐层边线,同样调整了圆角边缘,就轻易地转变成一颗长方形的按钮啰。

写给不是设计师的——渐层配色(下)
旋钮

金属旋钮的製作稍微複杂一些,在完成接下来的案例后如果您还想要了解其它的製作案例或是手法,只需要 Google “Metal Knob UI” 就可以找到满坑满谷的案例分享,在 Freepik 上面也可以轻易下载到 PSD/AI 档案做为练习的参考,有兴趣的伙伴欢迎去看看各方大神做出来的旋钮再回来指导小弟。在这边我会带着大家来聊聊底下这颗闲暇之余练习的金属旋钮应该要如何製作?。

写给不是设计师的——渐层配色(下)

想必各位伙伴应该已经发现 →我们可以使用角度渐层来製作金属旋钮的金属光泽:

写给不是设计师的——渐层配色(下)

在製作按钮时有提到一个製作金属光泽的原则,对比强烈的亮暗部交替变化。注:如果您今天是製作有颜色的按钮,在调整亮度的同时可能也会针对彩度进行微调,欢迎阅读上、中篇的教学来更了解该如何处理这样的状况。

运用这个原则我们可以试着拉出底下的渐层变化 →

写给不是设计师的——渐层配色(下)
渐层变化轴

基本上从上图可以发现 其实就是不停的在进行亮部/暗部的切换,如果您是初学者的话,彼此之间的间距变化也建议维持在一个跟上图一样接近等距的状态,唯一要切记的点就是渐层变化轴的头尾颜色要相同,不然您会做出一个很⋯⋯神奇的效果?。

写给不是设计师的——渐层配色(下)

做到这边您可能会怀疑难道金属旋钮这样就够了吗?登愣!!!!其实光是第一个步骤的渐层,加上底部简单的阴影就可以做出下图的效果啰 →

写给不是设计师的——渐层配色(下)
Step1

如果您觉得看起来好像还不够厉害有点雷的话,可以开始尝试在亮暗部中间另外插入几个暗部做调整,基本上只要选色正确,对比强烈,您的作品应该都能够保持不错的金属光泽? 。

写给不是设计师的——渐层配色(下)

的需求效果为準)→

写给不是设计师的——渐层配色(下)

到这边我们的基底就製作完成啰。?

複製一个 Step1 製作的基底,去除原本的阴影之后把它稍微缩小;然后开心快乐的旋转,转到一个天时地利又人和的角度之后再给它加上一点细细的阴影做出下图的效果 → 虽然这个 Step2 的一切听起来都很美有道理 XD,但是有没有注意到因为底层也有金属光泽的关係,上下两层搭配起来其实相当协调,就好像有点厚度的金属旋钮!!

写给不是设计师的——渐层配色(下)

製作髮丝纹!!!因为是圆形旋钮的关係,我们这次使用很多个无填满,边线为浅灰色的圆形覆盖在原本的旋钮上方 →

写给不是设计师的——渐层配色(下)

然后同样使用高斯模糊来模拟髮丝纹的效果 →

写给不是设计师的——渐层配色(下)

到目前为止,旋钮的外型算是告一个段落啰!最后的步骤可以依照您个人的喜好决定添加与否,看是要做点刻度啦、圆的方的三角形的啦用什幺颜色只要不要太夸张其实效果都还不错!在这个 Demo 里面我们做一个绿色的旋钮指标:首先,在旋钮上方做出一个绿色的圆形。接下来利用跟製作按钮文字相同的概念,在圆形的上方利用内阴影做出凹陷的效果,在下方加上一个高光阴影做出底部反光。登愣!!如果您能做到这里就来点掌声吧???。

写给不是设计师的——渐层配色(下)

一模一样的渐层也可以用在最前面练习的按钮喔!

写给不是设计师的——渐层配色(下)

大致上金属旋钮的製作就是 Step1-Step4 的四个步骤,接下来就是各位发挥想像力,以及对于细节的要求程度来对作品进行下一步的调整跟优化。切记,篇中的每一个製作概念都可以沿用到不同的 icon、不同的介面或是任何您想得到的相关设计上面使用,千万不要被侷限在金属旋钮这样的主题?。前阵子运用这三篇提到的观念,花了点时间挤出一套没什幺实际应用价值的 Control Set 提供给各位参考。

写给不是设计师的——渐层配色(下)
四、结论

默默的从开始写文章到现在也过了约一个月的时间,真心期许各位读者在花费宝贵时间看完这一系列的文章之后也能开始运用渐层製作出不同的作品,更鼓励各位愿意把你们厉害的成品分享出来共同讨论?。小弟期待能够从你们那边学到更多的东西!!最后的最后,若是小弟的文章很幸遇的帮助您对于渐层的运用,介面的设计有了基础的认识,而您期许能够有更进一步的成长,建议您可以开始在 Pinterest、Dribbble,Behance 这些聚集了世界上顶尖设计师的平台上面找寻您命中注定的设计大神,藉由观察、分析以及临摹练习去帮助自己建立观念,以及培养工具的熟悉程度)。接下来应该还会有一些渐层应用的短篇文章来分享常常使用到的小撇步,一些简报製作的小习惯,工作过程中有任何的突发相关事件如果老闆同意的话也会跟大家分享?;然后就要 → 回到自己原本的目标,写些文章来降低工程/设计甚至与 PM 的合作困境 xDD,敬请期待啦。

上一篇: 下一篇: