本文作者:三岁教程网

Photoshop制作3D立体质感网页按钮

三岁教程网 2022-11-07 00:00:00 90 抢沙发

PS里新建一个文件


    
     Photoshop制作3D立体质感网页按钮

使用圆角矩形工具,在顶部设置圆角矩形颜色


    
     Photoshop制作3D立体质感网页按钮

在顶部设置它的参数颜色为红色


    
     Photoshop制作3D立体质感网页按钮

颜色为#D32424的圆角矩形制作完成


    
     Photoshop制作3D立体质感网页按钮

将前面的圆角矩形图层复制一次,在复制出的图层上按鼠标右键,选择栅格化图层,同样将另一个图层进行栅格化处理


    
     Photoshop制作3D立体质感网页按钮

将上面的圆角矩形命名为Button Top,下面的图层命名为Button Base,选中底部图层,按ctrl+u设置色相/饱和度参数


    
     Photoshop制作3D立体质感网页按钮

将两个图层的位置进行调整,下面的图层向下移动10像素(按shift+下键)


    
     Photoshop制作3D立体质感网页按钮

先按住ctrl点选上面的图层,使其整个处于选中状态,随后按选择、修改、收缩,设置缩小1px


    
     Photoshop制作3D立体质感网页按钮

用工具栏的加深工具,设置参数


    
     Photoshop制作3D立体质感网页按钮

在选中的图层上按住shift从左向右进行涂抹


    
     Photoshop制作3D立体质感网页按钮

为上面的图层添加设置图层样式


    
     Photoshop制作3D立体质感网页按钮

再为下面的图层添加设置的图层样式


    
     Photoshop制作3D立体质感网页按钮


    
     Photoshop制作3D立体质感网页按钮

首先使用设置的笔刷


    
     Photoshop制作3D立体质感网页按钮

前景色与背景色分别为白色与黑色,然后路径下载使用钢笔工具


    
     Photoshop制作3D立体质感网页按钮

新建立图层,用钢笔工具绘制两个点


    
     Photoshop制作3D立体质感网页按钮

再在钢笔路径上按鼠标右键选择描边路径,随后选择画笔并勾选模拟压力


    
     Photoshop制作3D立体质感网页按钮

在路径上按鼠标右键,选择删除路径


    
     Photoshop制作3D立体质感网页按钮

选中减淡工具,使用高光参数


    
     Photoshop制作3D立体质感网页按钮

随后按钮的上部图层上点大约两次


    
     Photoshop制作3D立体质感网页按钮

使用加深工具进行设置


    
     Photoshop制作3D立体质感网页按钮

在下部按钮图层的两边制作量条加深的线条


    
     Photoshop制作3D立体质感网页按钮


    
     Photoshop制作3D立体质感网页按钮

最后再添加上光感与文字


    
     Photoshop制作3D立体质感网页按钮

文章版权及转载声明

作者:三岁教程网本文地址:http://ssjcw.com/?id=61541发布于 2022-11-07 00:00:00
文章转载或复制请以超链接形式并注明出处三岁教程网

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,90人围观)参与讨论

还没有评论,来说两句吧...