用PS制作web2.0的徽章，这比我们之前介绍过的感觉更立体也更美观，这类徽章与标志你能经常在电子商务网站中看到，主要起到醒目与牵引浏览者视线的作用。

用Photoshop制作web2.0的徽章，这比我们之前介绍过的感觉更立体也更美观，这类徽章与标志你能经常在电子商务网站中看到，主要起到醒目与牵引浏览者视线的作用，喜欢这种效果图的朋友可以一起来学习了。

1. 在PS里新建文件

这里我使用 400 x 400 大小，背景为条纹蓝色

2. 制作徽章形状

使用PS里的多边形工具

在PS顶部设置如下，边数为30

颜色为#4fb2ea，完成后如下图：

3. 制作效果

我们要为徽章形状添加如下图层样式：外发光，内发光，渐变效果

完成后如图，你可以自己设置参数来实现类似效果!

4. 创建边框高光

点选形状图层，使其显示选中状态

将选框收缩2px，选择修改收缩 新建立图层，在新图层上将选框填充为白色，随后保持选框选中状态，想下和右各移动1px选框，按delete删除多余的白色部分，完成后效果类似下图 之后调整图层混合模式为正片叠底，不透明

将选框收缩2px，选择>修改>收缩

新建立图层，在新图层上将选框填充为白色，随后保持选框选中状态，想下和右各移动1px选框，按delete删除多余的白色部分，完成后效果类似下图

之后调整图层混合模式为正片叠底，不透明设置为70%

再次按ctrl点选徽章形状，产生选框，缩小2px,之后新建图层(新图层位置因该在最上面)，从左上角到右下角填充渐变色

使用多边形选框工具，选中一半白色形状，将它删除，如下图

调整剩下的图层混合模式为柔光或正片叠底，并将不透明度调整为30%~70%左右

5. 最后部分

添加文字，你可以先制作一个蓝色的文字，随后变形调整它的角度如下图，再复制文字，将其颜色设置为白色，与蓝色的底部移动1px位置，看上去有立体感就行

进入论坛参与讨论：http://www.missyuan.com/viewthread.php?tid=427320

温馨提示：

文章标题：Photoshop制作立体美观的网页徽章

文章链接：https://www.4tu.cn/photoshop/31289.html

更新时间：2024年08月24日

文章版权声明

1、本网站名称：思图创意
2、本站永久网址：https://www.4tu.cn
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报

---

本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。