国潮UI设计速成技巧，轻松绘制国潮风 | PS教程

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

教程或许会迟到，但永远不会缺席。

今年的618页面，大家有没有发现，越来越多的商家开始做国潮了。

作为一种更具中国传统内涵的风格，国潮风的表现不止与主屏KV中，更多还隐藏在详情页的细节设计上。

随便找一张国潮风格的详情页，你会发现从UI和边框设计上，都透露着满满的国风。

这种镶边和传统符合也逐渐成为古风国潮的一种趋势，有越来越多的品牌商家开始青睐这种设计形式。

很多同学也在私下问过我们，像这样的金属镶边效果是不是必须要优秀的手绘基础或者C4D建模技术才能实现？

有没有一种手残也能学会，纯靠PS的方法呢？

为此，我们专门胁迫吴老师苦心专研，找到一种有脚手就行的PS金属边制作技巧，包你一学就会。

甚至连手绘板都用不到。

想学吗？那我们就正式开始今天的撸管。

打开PS，拖入一个我们的半成品稿子。

我们效仿花西子的设计风格，给产品后方做一个苏州园林轩窗式的装饰背景。

首先，先用钢笔工具勾出元素轮廓，设定好宽度，描边路径。

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

为了模拟出金属的光泽反光，我们将高光的模式改为滤色，颜色选择一个明度更高的亮色。

同时，将阴影的模式改为正片叠底，并赋予一个更深的色彩。

颜色设置好后，我们会发现默认的参数让这个管道的外轮廓显得非常锋利，缺少圆形管道的自然过渡感。

首先，我们把深度参数改成100%；

接下来，我们点击下方的光泽等高线，在展开栏中选择第二排的第三个选项。

调整它的数值大小，让金属边的管道质感呈现出来。

再调整下方阴影的角度和高度，这里没有固定的数值参考，大家调整的时候绝对怎么好看怎么来即可。

你看，一个金属镶边样式的元素符号就完成了。

一层做好了，想要实现花西子那样精致且复杂的层次感也就不难了，复制几层，等比缩小排列即可。

接下来，整体编组，新建一根曲线，对它进行整体的明暗调节和色彩调节。

怎么样，是不是有手就行？

在这里需要说明的是，在商业实战中，为了产品的精致度和清晰度，顶级的详情页在主图中遇到这样的效果制作时，通常会选择用C4D先进行建模和渲染，再放到PS中进一步处理后期。

什么？那我看了半天白看了？

当然不是，主图为了精致度会专门运用C4D+PS的方式精雕细琢，但在详情页中一些细小的UI设计时，由于对细节的要求没有主图那么高，同时涉及到一个批量的制作，我们往往可以通过上面这种方法进行快速处理，告别加班。

比如这张详情页中的功能UI，我们就可以用上述这张方法两分钟搞定。

首先，还是先对照他的形状用钢笔工具勾出外形。

我们在网上找一些晕染纹理，叠入底层图片中。

新建曲线提亮，利用反向蒙版配合画笔，模仿参考图的高光区域画出高光。

新建曲线整体压暗，同样的方式，画出右下方的阴影区。

再模仿参考图的设计，新建图层，用圆形选区框选下半区域，ctrl+I反向，填充一个白色，再降低白色的不透明度，模拟出玻璃罩的半透明质感。

如果要临摹到位，我们可以新建一个色相/饱和度调整层，将底面的色彩向参考图靠近。

底面处理好后，我们来试试用上述的方法做它的金属镶边质感。

为了更好地观察细节，我们复制一层拿到一旁进行调试。

打开图层样式，像上文的方法一样，调整它的深度、大小、光泽等高线和高光阴影的颜色。

参数调整好后点击确定，完成我们金属管的基本绘制。

然后，就是这个方法最便利的地方了，我们只需要按住Alt，用鼠标左键将调整好的图层样式参数复制到其他轮廓图层上，金属的制作就批量完成了。

如果要调整金属管的颜色和亮度，我们可以将金属管整体编组，通过色彩平衡和曲线做一个综合性调整。

如果中间要做个相同质感的ICON，我们同样可以用这样的方法。

比如加一个JSBOOM的J，将图层样式的参数复制上去。

不过，由于形态的改变，对应的参数也需要做一些调整。

同样，对ICON进行色彩和亮度的调整，使其和金属边的色彩保持一致即可。

你看，从无到有的三分钟国潮速成技巧，简单吧？

这种技巧在商业设计中可以帮助我们批量处理大量的同类ICON，节约下来的时间无论是看部剧、开把排位还是来看节我们的公开课，都是极好的。

这个小技巧都学会了吗？

作者 | 杰视帮
来源 | 杰视帮 (id:jacksean003)