优艾设计网

Photoshop网页设计实例:多彩导航条制作

PS网页设计实例:多彩导航条制作

创建新画布。

Photoshop网页设计实例:多彩导航条制作

建立4条垂直参考线,将画布等分为五份。

Photoshop网页设计实例:多彩导航条制作

在画布下方添加一条水平参考线。

首先绘制第一个按钮,选择矩形工具并选择形状图层模式。

Photoshop网页设计实例:多彩导航条制作

在水平参考线和垂直参考线之间绘制如下红色矩形。

Photoshop网页设计实例:多彩导航条制作

为按钮添加渐变效果。在距离按钮边缘5个像素的位置添加垂直参考线。

Photoshop网页设计实例:多彩导航条制作

Photoshop网页设计实例:多彩导航条制作

设置前景色为红色,背景色为白色。

Photoshop网页设计实例:多彩导航条制作

选择渐变工具。

Photoshop网页设计实例:多彩导航条制作

按如下方式设置渐变条。

Photoshop网页设计实例:多彩导航条制作

创建新的图层,利用矩形选框工具创建如下选区。

Photoshop网页设计实例:多彩导航条制作

渐变填充,并将图层不透明度设为“50%”。

Photoshop网页设计实例:多彩导航条制作

效果如下:

Photoshop网页设计实例:多彩导航条制作

添加新参考线。

Photoshop网页设计实例:多彩导航条制作

Photoshop网页设计实例:多彩导航条制作

利用钢笔工具按下图所示连接三个点。

Photoshop网页设计实例:多彩导航条制作

制作三角形。

Photoshop网页设计实例:多彩导航条制作

采用相同的方法完成其他颜色按钮的制作。

彩色导航条就制作完成了。

Photoshop网页设计实例:多彩导航条制作

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜