看一遍就能学会！大促海报的UI原来是这样做的！【杰视帮】

今天给大家分享的是能直观运用于电商设计里的一些技法。

 

接下来，就以“大促海报中，这种充满质感的首页UI是如何制作的”为方向，分享一些小技巧。

之前也分享过一些方法，不过几乎都是用手绘板随意画两笔就完成了，看完总给人一种脑子会了手不会的错觉。

 

那么今天让困叔仅用PS自带的基本图层设置，给大家解密这种充满质感的首页UI如何制作。

教程有点细，请在屋内关好门窗仔细翻阅。

 

未成年请在家长陪同下观看。

首先我们进行，一个圆角矩形的绘制。

 

我们确定好色彩，在这里，我选择了更符合我气质的少女粉。

小编插一句：传下去，困叔喜欢芭比少女粉！

 

接下来，进行立体感的塑造。

 

双击图层，打开图层样式，选择斜面浮雕。

 

在斜面浮雕里面把亮部和暗部进行调色处理，确定好立体面的角度数值，大家不用刻意记录每项参数数值，以画面内最终效果为导向。

这样，一层基础的亚克力材质底板效果就做出来了。

我们还可以在此基础上通过图层样式增加一个投影，增加画面的细节。

新建曲线，适当压暗，做出明暗过渡的感觉。

如果想进一步强化立体感，怎么办呢？

新建图层，图层模式改为柔光，强化边缘转折感。

为了增加UI细节，我们采用重复的手法，复制一个ICON，适当缩小，叠加放在上方。

多层次的效果设计不仅运用于标题特效处理，在这些细小的UI处理上适当地增加层次，可以很好地强化整个页面的立体质感。

我们继续强化UI细节。

 

既然是看完就直接学会的UI制作教程，我们就秉承着绝不用手绘板，绝不靠手绘的原则进行设计。

 

打开实战利器图层样式，勾选内阴影，混合模式选择正片叠底，我们强化UI右下方的阴影效果。

点击内阴影旁边的加号，再增加一个内阴影，调整颜色，进一步强化阴影层次。

处理受光区也是同样的手法，新建内阴影，不过混合模式改为柔光或滤色，生成按钮受光的立体感。

最后，再加一个内阴影，混合选择线性减淡，制作按钮的高光区。

再勾选投影，强化背光区细节，你看，仅靠图层样式的参数调整，就能完成一个立体感按钮90%的效果制作。

接下来，再处理一点点小细节，这次真的是一点点，比如对高光的过渡处理，以及左侧的反光反射效果制作。

由于图层样式的添加，按钮中缺失了一些少女粉的姿色。

 

做设计最不能忘的就是初心，如此符合我形象的少女粉怎么能褪色？

 

新建图层，仅对顶部受光区进行加色处理，图层模式可以选择正常或颜色模式，按个人喜好就好。

我们在里面做一个圆形的点击按钮，同样的方法，通过增加斜面浮雕进行调整处理，并在底部进行加阴影处理，做好画面的受光面。

适当调整颜色，让按钮与背景差异明显一点。

用多重内阴影的调整方法，增加按钮的高光层次感。

增加一个打勾的UI，增加购物的引导性，在图层样式中勾选内阴影。

我们对这个按钮编组，进行整体的润色处理。

还可以找一些光晕特效，用滤色模式添加到轮廓边缘，增加UI的鲜亮效果。

最后，打上文字，同时把文字在背景板上的阴影做出来，复制一层，改为正片叠底模式，调整不透明度，略微移动即可。

一个充满立体感的UI就设计完成了~

放入整个画面中来看，一个立体感的UI可以让单调的机制区显得更有层次，凸出的按钮设计也能更好地聚焦消费者的视野。

很多萌新设计师或许看不起这些细小的UI设计，但真正进入工作中后，大家应该都感受到了，优秀的首页与详情页中对功能UI的设计把控丝毫不逊色于主图的制作。

对发挥空间的限制、对质感与主图呼应的需求，这种UI设计有时候甚至比执行主图更难。

如果大家感兴趣，我们可以循序渐进，分享我们在过往项目中接触过的各种疑难杂症式的高难度UI设计。

 

从设计理念到技法执行，就看大家优先更想听哪个了~