那些价值上万的详情页UI原来是这么做出来的!【杰视帮】

杰克老师
2021-06-25
  • UI
原创 3144人阅读

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

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

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

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

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

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

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

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

甚至连手绘板都用不到。

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

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


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

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


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


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


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


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


首先,我们把深度参数改成100%;


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


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


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


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


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


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


怎么样,是不是有手就行?

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

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

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

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


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


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


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


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


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


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


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

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


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


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


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


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


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

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


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


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


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

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


这个小技巧都学会了吗?

类似的小技巧还有什么想学的,赶紧在下方留言,甭管什么难题,我们都让吴·爱吃小朋友·老师给安排上




本文原创,未经作者允许不可转载!

更多内容,欢迎关注作者微信公众号:杰视帮!


虎课APP