用photoshop制作网页顶部导航按钮

用photoshop制作专业导航按钮,主要应用了图层样式、渐变和矩形工具 。让我们一起来看看这个教程吧

用photoshop制作网页顶部导航按钮

文章插图


Step 1
我们将首先在Photoshop创建一个新文档 。让我们有1024 ? 768px

用photoshop制作网页顶部导航按钮

文章插图


Step 2
为了填补你的背景,选择渐变工具(G)的渐变编辑器打开了,并输入您的颜色值按下面的图像

用photoshop制作网页顶部导航按钮

文章插图



用photoshop制作网页顶部导航按钮

文章插图


Step 3
让我们创造了我们的按钮的机构 。使用圆角矩形工具(U),现在只是创造了约320 ?95px,对5px半径和填充任何颜色(它的矩形,因为我们将添加一个渐变叠加) 。

用photoshop制作网页顶部导航按钮

文章插图



我们将加强它如何给予它一些图层样式外观 。首先,套用阴影 。

用photoshop制作网页顶部导航按钮

文章插图
【用photoshop制作网页顶部导航按钮】

内发光效果…

用photoshop制作网页顶部导航按钮

文章插图


斜面和浮雕…

用photoshop制作网页顶部导航按钮

文章插图


最后,一个渐变叠加

用photoshop制作网页顶部导航按钮

文章插图


Step 4
现在,让我们继续创造箭头机构 。我们将首先创建一个约60 ? 55px的矩形使用矩形工具(U) 。

用photoshop制作网页顶部导航按钮

文章插图



继续下去,并给它一些图层样式 。下面的图片以供参考使用

用photoshop制作网页顶部导航按钮

文章插图


为了确保它的垂直和对齐,选择这两个层次,其中包含按钮和箭头机构(概括地讲,我们只有两个层迄今)和对齐单击控制条垂直中心

用photoshop制作网页顶部导航按钮

文章插图


创建一个小的矩形,如在下面的图片1() 。然后转到“编辑>变换>斜交>V:30

用photoshop制作网页顶部导航按钮

文章插图


给它同样的图层样式

用photoshop制作网页顶部导航按钮

文章插图


以上就是用photoshop制作网页顶部导航按钮,希望大家喜欢,请继续关注我们 。

    推荐阅读