渐变扁平插画风应用在APP闪屏、H5设计、海报、UI界面中、扁平化简单的插画风格让更多人所接受喜爰。
你可能常见的是这样的：
也可能是这样的：
1 这些简约扁平唯美的插画风如何从无到有的过程呢，除了手绘板去画，其实用Ai+PS也可以完成这样的插画风。
今天带给大家一个教程，如何用PS+A|快速实现扁平化届画风。
分享的教程页面可能会很长，为了让上大家更好的理解步骤介绍的相对比较详细，其实大致总结起来也就几个步骤快速的完成。
以下展示的这三张是为了这次教程临时做的三张图，时间比较匆忙所以细节没有照顾得到，其实可以细节做的会更好。
前期准备
以下教程讲解根据我原创渐变插画风第一幅实例为大家深度讲解一下思考设计过程。
在设计绘制届画风的时候先不要求快，首先要有一个思考，想一个题材。是想要做哪方面的届画，是蓝天、深林、沙漠等有致的脑图。
然后根据想要做的主题去找一些唯美的照片，从照片中吸取一些灵感，然后创意生新组合，者从颜色上进行变化，达到想要的效果。
以下是前准备中找到的灵感参考照片素材
了解现在流行的渐变色，多看看色彩相关的设计，从设计中提取出一些色彩褡配应在设计中。在渐变插画风中色彩表现手法各有不同，色彩冷暖对比、互补颜色对比、同等色调月度对比、反差对比、相近色系等，都是为了整个画面达到层次关系、空间感、对比强烈、画面融合。在做图的时候就要知道想要什么样颜色作为画面的主色调，什么样的方式表达。
原创第一张插画为例，在前准备主题定位、色彩了解之后整体结合元素组合创意布局，在纸上吧想要表达和照片保绘制一个草图，草图不需要造型多准确。只是能表达出来即可、给接下来工作提供了方便。
根据草图，收集一些元素图片，目的是知道海豚、殛船、阳光是什么样的。根据图片创意加工造型变化，变成自己所需要的素材。收集一些云彩、远处的山、渔夫小船、海豚、阳光等相关素材。
在元素绘制的时候没有特别的规定是PS去绘制还是Ai去绘制，两者都可以，主要还是根据自己的软件作习惯而定，最终达到目的就可以了。
至于如何画太阳、如何去画一个小船和渔夫、如何画个小山、就不做演示。议电多的是造型能力和軟件悍作能力。主要讲的是在做汶个渐变扁
平插画的一个怎样的思考和过程，如何去做页面的处理。元素如何去画还是要根据找的照片素材进行延展和一些造型上的一个参考在进行创作，然后进行Ai中绘制这样的过程。
以上准备都做完之后就需要开始进行PS实际进行操作
1在PS中CTRL+N建一个画布为750*1334，分辨率72。
2 在画布上给画面一个背景颜色，背景颜色在前构想中就要有个想法，大致要什么样的颜色。渐变色墳充整个背景，背景色彩会主导整个画面颜色方向渐变数值为#83A3EA #EBDOE2 #FEE9E0 #D3C2E3
3 确定天水地分割线，分割线会更滔晰的知道哪部分是天上的部分空间，哪些是水面的部分空间，哪些是地面的空间，CTRL+R标尺下相应位置作为标记
4绘制小山可在PS中者Ai中绘制，哪个方便就用哪个，没有特意要求，吧小山放在天水分割线处，给小山颜色#B2A2CC然后复制出一层小山作为倒影，颜色#E6D6EO
5 绘制阳光在A|中绘制了一个阳光，拖到PS中，阳光墳充颜色：#FFFFF阳光在PS中显得比较突兀，和整体不融合，这样就需要给圆做一个外发光。选中阳光层右键一混台选项一外发光，混台模式滤色、不透明度75％、素大小：27，方法柔和，颜色：#FFE7E3
6湖面处理在底色上复制一价汰阳缩小一点太阳，垂直旋转亻乍为投影。滤镜一模糊一高斯模糊，然后给投影一个透明度60％
7．湖面阳光倒影处理使阳光及湖面更真实做进一步的细化。在A|中绘制这样的形，然后拖到PS中。给形一个颜色，让形融合水面颜色值#FAF6F8
8．在A|中绘制线条形，拖到PS中，有点像水纹的感觉海面不那么平+。水纹只是价助的作用，所以不用那么突出。把水纹的颜色调整体融入一些，颜色#F8EEF1
9 湖面也处理差不多了、那么给整个画面增加一些辅助气氛、在A|中画的小船渔夫入到画面中，摆放好位首，给小船一个颜色#BBA8DA，汶样小船感觉像在空中就，紧接巷给小船一个阴影让小船有一个厚生感是在海面上就的。复制一层小船，然后旋转把小船压扁一些感觉像个倒影、给小船阴影一个颜色#DEDIF3。
10．在Ai中绘制海豚的时候要拆分分层两个部分，一个整个的海豚和海豚下半部嘴的部分、拆分的原因是在上色的时候会更方便一些。
把海豚放在相应的位置，放在太阳正上方有一些太居中，往右移动几像素从视角上来说生动了不少。然后给海豚一个渐变的色值，从左上方拉到右下方、色值为#DBDIF8#A789D3 要汪意的是#A789D3给的多一些、因为这个是主色调。然后吧海豚的第二部分嘴下半部元素组台给一个色值：#F8EIFE
这个海豚看似是完成了，其实应该在细节上在给一些环境色，选中海豚层，按住CTRL+左键单击。框选海豚然后按照箭头位首给一些渐变色，完毕之后CTRL+D取消线框，加完是不是电加的融合、更加的饱满了。
设计中的确是需要一些夸张的手氵去，但是也需要符台一些场景，所以需要给海豚加一一特效，对了就是出水时候的水滴和水花，营造一下气氛，放在最佳的位首、然后给个颜色。水花色值#F8F6F7这样才是一个完整的出水海豚。
11．岸边根据草从形态上做一些艺术处理、折叠起伏这样的岸边、画一个元素形就可以，变换一下位置折叠，接着就是给一些渐变色值#ECDCEA#C7BCE5从上往下渐变
岸边完成之后感觉空一些，增加一些元素来点缀一下，营造一些气氛。三角面分隔明显，对比也比较强犁，所选三角作为装饰。明暗之间的对比，融合主色调做一下纯度的降低。立体三角元素画一价僦可以，然后复制大小远近去做组合。
12．天空的处理，增加一些云彩，及星星点卢元素即点缀了画面，也让以上整个画面饱满和符合画面气氛。
到现在汶个步骤画面已经完成，给画面加分地方就是在来一点英文，汶个画面整体感就提升。看上就会高大上一些。放一些比较细的英文字体，比较干净不破坏整个效果。
在做的时候层整理分组也是一个优秀设计师日常设计良好习惯，更清晰的分组
有对UI感兴趣的或者想学习UI的小伙伴都可以“关注”老师 私信“学习”两字 就可以免费获取UI学习资料，跟老师一起学习哦！
网友评论