多肉植物图标设计UI教程

UI / UI设计教程 / UI图标教程 /      

uimaker
UI设计师 / 江苏 南京

来源:uimaker.com   作者:cherish818

关键词

大家好,最近多肉植物受到了很多人的青睐,她肉肉的外形看起来很Q萌,所以,在此为大家分享一个多肉植物拟物化的UI练习.

之前看到这个图形很喜欢,就自己尝试着画了,

有很多细节的地方不够精致,

继续努力!


我们先看下最终效果




现在开始!


1、新建文档600x800px如图:


172f57ad81260000018c1b2c79e4.jpg



2.将我们在纸上绘制好的手稿植入PS


然后适当调低手绘稿的透明度,这里我调的透明度是60%,根据自己方便识别度而定.

调低透明度可以方便我们描绘,就相当于加了一层硫酸纸一样.



3,我们用钢笔工具开始描绘叶子的形态,首先绘制每片叶子的大轮廓



4.新建图层,开始上底色

线条有不对的地方可以适当调整





5.在颜色铺好以后,我们要检查一下叶子叠放的顺序对不对,通过调整图层顺序来调整叶子上下前后的顺序.


6.根据个人习惯我先给部分叶子底部深了一点颜色,好区分层次感.

颜色加深,我们可以通过工具栏里的加深减淡工具



我们选用阴影,适当调低曝光度,可以让颜色看起来没那么重.



7.调整每片叶子的立体感

首先,我们可以给它一个渐变叠加

先用钢笔工具绘制一个与外轮廓相近的线条





给它一个深色的渐变




然后利用高斯模糊工具,让深色部分看起来没那么生硬



再复制一个我们做好的深色阴影图层,调节图层大小,让阴影与边缘贴近一点



大家可以按照自己的想法调整

然后我们在叶子边缘绘制一个区域来展现叶子的厚度感






给它一个较深的颜色



同样我们给它一个高斯模糊



因为多肉植物的质感强,所以我们在给阴影,的时候最好都用高斯模糊来调整一下



现在我们要做的是给叶子一个圆润的感觉,我们先根据叶子的形状画一个弧度



给一个深色的填充,同样模糊一下



在左上角给一点亮色



在尖角部分给一个红色的透明渐变



其他叶子上色方法也是如此,大同小异

只要根据叶子的形状,方向来上色就可以了,在叶子的边缘适当的用接近白色的亮色来修饰一下,

表现出叶子的厚度和质感…..




8.上完色后记得给叶子们加点投影效果



9.绘制花盆,我们先绘制一个圆角矩形框

我的矩形框半径设置的是100





10,调整矩形的混合模式

先调整斜面浮雕




添加投影




11.复制一个矩形2,图层移至矩形1下面,将矩形2下移



12,做盆里面的效果

在矩形图层下新建图层,画矩形,填色




将我们的土壤素材放入PS中,创建剪贴蒙版




将小草的素材移入PS,创建剪贴蒙版



13.添加一个木质背景 OK!


 收藏