当前位置: 首页 >文章 > 那些价值上万的详情页UI原来是这么做出来的!【杰视帮】
收藏
分享

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

举报杰克老师杰克老师发布于 2021-06-252860阅读27点赞4评论
作为一种更具中国传统内涵的风格,国潮风的表现不止与主屏KV中,更多还隐藏在详情页的细节设计上...

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

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

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

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

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

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

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

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

甚至连手绘板都用不到。

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

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


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

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


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


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


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


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


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


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


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


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


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


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


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


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

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

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

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

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


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


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


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


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


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


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


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

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


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


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


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


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


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

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


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


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


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

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


这个小技巧都学会了吗?

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




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

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


4条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,637人)

电商海报设计训练营
距离开班仅剩9天66人已报名
【5月】零基础手绘插画训练营
距离开班仅剩9天54人已报名
【5月】零基础动态表情包创作训练营
距离开班仅剩26天15人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了27,078
并提交了210份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证