国潮UI设计速成技巧,轻松绘制国潮风 | PS教程
教程或许会迟到,但永远不会缺席。
今年的618页面,大家有没有发现,越来越多的商家开始做国潮了。
作为一种更具中国传统内涵的风格,国潮风的表现不止与主屏KV中,更多还隐藏在详情页的细节设计上。
随便找一张国潮风格的详情页,你会发现从UI和边框设计上,都透露着满满的国风。
这种镶边和传统符合也逐渐成为古风国潮的一种趋势,有越来越多的品牌商家开始青睐这种设计形式。
很多同学也在私下问过我们,像这样的金属镶边效果是不是必须要优秀的手绘基础或者C4D建模技术才能实现?
有没有一种手残也能学会,纯靠PS的方法呢?
为此,我们专门胁迫吴老师苦心专研,找到一种有脚手就行的PS金属边制作技巧,包你一学就会。
甚至连手绘板都用不到。
想学吗?那我们就正式开始今天的撸管。
打开PS,拖入一个我们的半成品稿子。
我们效仿花西子的设计风格,给产品后方做一个苏州园林轩窗式的装饰背景。
首先,先用钢笔工具勾出元素轮廓,设定好宽度,描边路径。
双击打开图层样式,勾选斜面浮雕。
为了模拟出金属的光泽反光,我们将高光的模式改为滤色,颜色选择一个明度更高的亮色。
同时,将阴影的模式改为正片叠底,并赋予一个更深的色彩。
颜色设置好后,我们会发现默认的参数让这个管道的外轮廓显得非常锋利,缺少圆形管道的自然过渡感。
首先,我们把深度参数改成100%;
接下来,我们点击下方的光泽等高线,在展开栏中选择第二排的第三个选项。
调整它的数值大小,让金属边的管道质感呈现出来。
再调整下方阴影的角度和高度,这里没有固定的数值参考,大家调整的时候绝对怎么好看怎么来即可。
你看,一个金属镶边样式的元素符号就完成了。
一层做好了,想要实现花西子那样精致且复杂的层次感也就不难了,复制几层,等比缩小排列即可。
接下来,整体编组,新建一根曲线,对它进行整体的明暗调节和色彩调节。
怎么样,是不是有手就行?
在这里需要说明的是,在商业实战中,为了产品的精致度和清晰度,顶级的详情页在主图中遇到这样的效果制作时,通常会选择用C4D先进行建模和渲染,再放到PS中进一步处理后期。
什么?那我看了半天白看了?
当然不是,主图为了精致度会专门运用C4D+PS的方式精雕细琢,但在详情页中一些细小的UI设计时,由于对细节的要求没有主图那么高,同时涉及到一个批量的制作,我们往往可以通过上面这种方法进行快速处理,告别加班。
比如这张详情页中的功能UI,我们就可以用上述这张方法两分钟搞定。
首先,还是先对照他的形状用钢笔工具勾出外形。
我们在网上找一些晕染纹理,叠入底层图片中。
新建曲线提亮,利用反向蒙版配合画笔,模仿参考图的高光区域画出高光。
新建曲线整体压暗,同样的方式,画出右下方的阴影区。
再模仿参考图的设计,新建图层,用圆形选区框选下半区域,ctrl+I反向,填充一个白色,再降低白色的不透明度,模拟出玻璃罩的半透明质感。
如果要临摹到位,我们可以新建一个色相/饱和度调整层,将底面的色彩向参考图靠近。
底面处理好后,我们来试试用上述的方法做它的金属镶边质感。
为了更好地观察细节,我们复制一层拿到一旁进行调试。
打开图层样式,像上文的方法一样,调整它的深度、大小、光泽等高线和高光阴影的颜色。
参数调整好后点击确定,完成我们金属管的基本绘制。
然后,就是这个方法最便利的地方了,我们只需要按住Alt,用鼠标左键将调整好的图层样式参数复制到其他轮廓图层上,金属的制作就批量完成了。
如果要调整金属管的颜色和亮度,我们可以将金属管整体编组,通过色彩平衡和曲线做一个综合性调整。
如果中间要做个相同质感的ICON,我们同样可以用这样的方法。
比如加一个JSBOOM的J,将图层样式的参数复制上去。
不过,由于形态的改变,对应的参数也需要做一些调整。
同样,对ICON进行色彩和亮度的调整,使其和金属边的色彩保持一致即可。
你看,从无到有的三分钟国潮速成技巧,简单吧?
这种技巧在商业设计中可以帮助我们批量处理大量的同类ICON,节约下来的时间无论是看部剧、开把排位还是来看节我们的公开课,都是极好的。
这个小技巧都学会了吗?
作者 | 杰视帮
来源 | 杰视帮 (id:jacksean003)
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。