最得当零基本计划师的渐变色自学指南教程

一向学不会渐变色的同窗有福了，这篇是我见过最得当零基本也是最适用的渐变色教程，从最简朴的灰阶渐变到晋级的相同色/比拟色渐变，解说很是具体并且普通易懂，还插播了大量渐变能力和实例教程(怎样拉渐变才不脏/用渐变绘制锤子时钟图标等等)，本心保举。

讲在前面 → 这篇文章并不是一篇教您怎样行使器材的文章，也就是说我不会汇报您Sketch3/ Photoshop/illustrator这些器材应该要怎样行使。但这篇文章内的典型皆是行使Sketch3 or Photoshop所建造完成，若有必要任何的典型图/制品图接待寄信留言跟我索取。

踏入新创科技业以来，老是闻声很多计划师/工程师伴侣们在诉苦计划师与工程师之间的相助有何等的…不融洽(糟糕)，要码是计划师经常诉苦工程师没有美感，不重视计划细节，或是连Guideline都不读完就来跟我讲该奈何计划( → 凶猛提议iOS/Android 工程师不管将来是否会打仗接口计划都花些时刻把iOS的Human Interface Guideline跟Material Design Guideline给看完，这是根基啊!!根基啊!!在线已经有满坑满谷的翻译文章啰，以是别再拿看不懂英文当捏词啰);另一方面就是工程师也经常会诉苦计划师老是把写动画看成小画家，把写措施当成写国字(Framer会红的缘故起因?!)或是老是有着过于天马行空的计划设法。

很荣幸的是这个状况险些未曾产生在小弟迄今的事变履历傍边，首要是由于一路事变的先进们就是一群神级的工程师或是神级的工程师+计划师，纵然是门生时期相助的计划师们也都是相等优越的搭档。但思量到80%..90%的工程师们城市有过这么一段与计划格斗的酸楚史，在这边但愿能藉由陆续串的基本观念，以及小弟一般事变运用到的常识来辅佐宽大的非计划师职场搭档来多相识一些计划的眉眉角角。

虽然，(计划师+工程师联机)与PM的战役又是其它一个故事了。

小弟我既不是本科系(计划相干)身世，也不是资工相干身世，但有幸接管几位锋利先进(Hammer，Sophy，Fran)的指导，今朝是一位对计划与行使者体验具有相等激情亲切，但却是个计划做欠好，照相拍欠好的iOS工程师。由于不具本科系配景这样的先个性上风(劣势)?!太晦涩的理论就…期许各规模的先进们在阅读之余能给以一些指教啰。这边起首针对渐层的主题写了一篇(上)，来聊聊经常行使的渐层范例，该怎样快速有用的运用这些渐层范例，以及分享一些在线计划师们优越的作品。

在统统开始之前，起首保举一个网站uiGradient，无聊没事的时辰可以上去晃晃找点渐层配色的灵感。

这系列文章首要会先容四个主题：

色彩学

相同色渐层(Linear Gradient)

比拟色渐层(Linear Gradient)

金属色渐层

色彩学

底下这就是传说中的伊登色相环，The end。

蛤?为什么没有先容一下色彩学，由于…着实在这里还不必要太相识啊，好麻那我们轻微来说一下什么是色相环好了：

基本的十二色环由瑞士计划师约翰·伊登所提出，其布局为：

等边三角形内的三原色─红、黄、蓝作为第一次色，将三原色两两相加可调出橙、绿、紫等级二次色，假如再将这六种颜色中两相邻的颜色等量互调，获得该两色的中间色(第三次色)，便发生了十二色色环。

是不是已经看不下去了?这种太理论的对象对付非专业的我们轻微有些太迢遥啰，虽然并不是嗣魅这些计划的理论不重要，只是对付刚入门的搭档们我们可以稍稍缓一些，在成立了相干基本之后我们再来更进一步聊聊这些色彩学应用的理论。这篇文章所应用到的渐层运用要领着实只要简朴领略一下伊登色相环，临近色，比拟色以及色相明度彩度等等的基本观念就够啰。

相同色渐层

灰阶渐层：起首我们先从配色的基本的开始，白 → 灰的渐层可以说是大天然中光影变革最根基的一种范例，这样子的渐层搭配也是最发早先学者拿来练坚守的喔(再运用白 → 灰的渐层时并不必要思量到检测器上各渐层区段的差别，这些差别只要一用欠好就很轻易导致颜色灰阶过高(脏掉)或是饱和度(彩度)不匀称的题目)。以下图典型而言，左侧上浅下灰的渐层，在搭配内光晕后可以或许等闲的让图形浮凸于纸面;右侧上灰下浅搭的渐层，则可以搭配内阴影来泛起凹陷于纸面的结果。

上浅下深(左)上深下浅(右)

上面两种是根基中的根基，假如想要做出中间凹陷，可是凹陷的部门是浮凸出来的感受，除了上灰下浅的根基能力之外还要轻微运用一点放射状渐层来别离调解上部以及底部的光影，下一篇会提到更多这样的见识喔。

是不是有一种凸出来的感受呢?

虽然，上图几个树模的三维结果着实还不足完备，但以此刻Flat Design流行的状况，对付光于影的变革有一些基本的相识对付媚谄团队中的计划师妹妹必定是相等有辅佐的(笑)。有了根基的视觉雏形，我们可以再进一步的举办渐层(渐层角度，渐层区段，表里光晕)的微调，同时思量到光影的变革以及阴影的角度位置，就可以等闲的作出如下图典型的结果啰!(下图除了白 → 浅灰的渐层之外，为了做出凹陷的平面，同时也运用了浅黑 → 深黑的渐层变革)

Designed by by Paco for Smartisan

那么毕竟该怎样建造一个简朴的灰阶渐层呢?着实做起来就跟下面这张图一样轻易 →

首要的调解就只在检色器的最最最最最左侧上下移动即可，假如但愿带点淡淡的光华可以往右边轻微移动一点点，这样的结果偶然辰会运用在物体自己是白色但周围是有色配景时，物体由于配景发生的反光影响到白色物品的外貌光华。假如但愿整体给行使者的印象是清新干净的，渐层中搭配的灰色就不该该太重，如表示图从白色往下调解一点点即可，如果选用深灰色来做搭配，发生的则是另一种沈稳的结果。

该怎样简质朴作上面的时钟icon呢?

Step 1. 绘制一个上浅下深(颜色临近)的圆角矩形作为icon配景(光源在上)。

Step 2. 为图形加上内阴影(底部)与外阴影来凸显出立体感。

Step 3. 绘制中间的钟面部门，运用浅黑 → 深黑的渐层来建造凹陷的平面，同时搭配椭圆外形+高斯恍惚来建造简朴的光影结果以进一步模仿圆弧凸面的结果。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!