优艾设计网

Photoshop教程:设计光感纤维网页导航按钮

作者:佚名   出处:UCD博客

我个人非常喜欢这种风格,在此和大家分享这篇教程!

Photoshop教程:设计光感纤维网页导航按钮

下面是制作一张粗略的背景,为了体现质感,如果你不喜欢可以跳过,或者随你喜欢更换一个!

 

Photoshop教程:设计光感纤维网页导航按钮

 

打开photoshop,新建一个400X400的文件,或者大一点也ok!找到下图两个颜色作为梯度背景色!

Photoshop教程:设计光感纤维网页导航按钮

如下添加杂色数值不用很高0.5就好!

 

Photoshop教程:设计光感纤维网页导航按钮

 

 添加一些纹理,或者用笔刷,图层20%的透明就好!

Photoshop教程:设计光感纤维网页导航按钮

 

然后如下图用纹理笔刷(复古笔刷,随机网状笔刷)添加一些效果!

 

 

Photoshop教程:设计光感纤维网页导航按钮

 

然后如下找一张图片叠加上去

 

Photoshop教程:设计光感纤维网页导航按钮

OK!这一步完成了!

下面开始按钮制作!

用圆角路径工具勾出下面的形状!

 

Photoshop教程:设计光感纤维网页导航按钮

复制几个

Photoshop教程:设计光感纤维网页导航按钮

 

Ctrl+图层渐入选取,选择>修改>收缩2个像素

 

Photoshop教程:设计光感纤维网页导航按钮

双击图层>渐变添加>添加如下颜色的渐变

Photoshop教程:设计光感纤维网页导航按钮

用路径工具勾出下面的形状

Photoshop教程:设计光感纤维网页导航按钮

 

删除选取能容

 

Photoshop教程:设计光感纤维网页导航按钮

 

 对图层添加蒙版用黑到白的渐变拉出下面的效果

Photoshop教程:设计光感纤维网页导航按钮

反向建出图层样式

Photoshop教程:设计光感纤维网页导航按钮

一样拉出形状

Photoshop教程:设计光感纤维网页导航按钮

删除能容,然后加蒙版拉渐变

Photoshop教程:设计光感纤维网页导航按钮

 最后添加 文字 是不是很简单!

 

Photoshop教程:设计光感纤维网页导航按钮

 

 

最后添加一层上面加一点光影渐变,减低透明度!

 

Photoshop教程:设计光感纤维网页导航按钮

[完成]

是不是很简单!

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜