用photoshop制作专业导航按钮,主要应用了图层样式、渐变和矩形工具 。让我们一起来看看这个教程吧
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/16421161L-0.jpg)
文章插图
Step 1
我们将首先在Photoshop创建一个新文档 。让我们有1024 ? 768px
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/1642116313-1.jpg)
文章插图
Step 2
为了填补你的背景,选择渐变工具(G)的渐变编辑器打开了,并输入您的颜色值按下面的图像
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/164211I07-2.jpg)
文章插图
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/1642113638-3.jpg)
文章插图
Step 3
让我们创造了我们的按钮的机构 。使用圆角矩形工具(U),现在只是创造了约320 ?95px,对5px半径和填充任何颜色(它的矩形,因为我们将添加一个渐变叠加) 。
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/164211H52-4.png)
文章插图
我们将加强它如何给予它一些图层样式外观 。首先,套用阴影 。
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/1642113121-5.png)
文章插图
【用photoshop制作网页顶部导航按钮】
内发光效果…
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/1642111036-6.png)
文章插图
斜面和浮雕…
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/1642113331-7.png)
文章插图
最后,一个渐变叠加
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/1642114C0-8.png)
文章插图
Step 4
现在,让我们继续创造箭头机构 。我们将首先创建一个约60 ? 55px的矩形使用矩形工具(U) 。
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/1642114X0-9.jpg)
文章插图
继续下去,并给它一些图层样式 。下面的图片以供参考使用
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/164211L48-10.jpg)
文章插图
为了确保它的垂直和对齐,选择这两个层次,其中包含按钮和箭头机构(概括地讲,我们只有两个层迄今)和对齐单击控制条垂直中心
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/1642115200-11.jpg)
文章插图
创建一个小的矩形,如在下面的图片1() 。然后转到“编辑>变换>斜交>V:30
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/16421163V-12.jpg)
文章插图
给它同样的图层样式
![用photoshop制作网页顶部导航按钮](http://img.readke.com/230601/164211F52-13.jpg)
文章插图
以上就是用photoshop制作网页顶部导航按钮,希望大家喜欢,请继续关注我们 。
推荐阅读
- 南昌市图书馆开放时间
- 医保卡自费什么意思 医保卡自费解释
- 日月沧桑尽变换是什么歌
- 哺乳期乳头上有白点怎么回事
- 为什么刚洗完澡不能敷面膜
- 泰拉瑞亚射钉枪有什么效果
- Win10更换固态硬盘经常假死怎么办?
- 华晨宇一届的快男有谁
- 远程桌面连接出现了内部错误解决方法