网页教学网
 当前位置: 网页教学网 >> 网页制作 >> 图象相关技术 >> Photoshop轻松制作Apple网站导航条按钮
[ HTML ] [ FW ] [ DW ] [ FP ] [ JS ] [ XML ] [ CSS ] [ 图象 ] [ FLASH ] [ .NET ] [ ASP ] [ JSP ] [ PHP ] [ 数据 ] [ 系统 ] [ 安全 ] [ 素材 ] [ 建站 ] [ 主机 ] [ 入门 ] [ 技巧 ]

Photoshop轻松制作Apple网站导航条按钮

http://www.webjx.com  更新日期:2007-09-04 23:10  出处:网页教学网  作者:闪电儿

Photoshop教程,利用Photoshop模拟制作Apple.Com苹果网站的网站导航条按钮。最终大家可以去http://www.apple.com网站对比下效果。

1.新建立一个500*50px的文档,然后选择矩形选框工具,设置模式为固定大小宽为 480px 高为 35px 绘制一个矩形选区。

Photoshop轻松制作Apple网站导航条按钮

2.现在,执行“选择” -> “修改” -> “平滑”在出现的对话框中设置为33px,创建一新图层,把选区填充为任意颜色。

Photoshop轻松制作Apple网站导航条按钮

3.设置该图层的图层样式:渐变叠加,#949494 - #d2d2d2进行渐变。

Photoshop轻松制作Apple网站导航条按钮

投影: #b1b1b1。

Photoshop轻松制作Apple网站导航条按钮

4.填写一些字符,这里使用英文字符Segoe UI字体,颜色#383838,大小为14pt。

Photoshop轻松制作Apple网站导航条按钮

5.为文字添加投影样式。

Photoshop轻松制作Apple网站导航条按钮

6.现在效果如下。

Photoshop轻松制作Apple网站导航条按钮

7.现在我们在文字之间添加分隔线。创建新图层,使用铅笔工具,绘制两条线,使两条线分开1px,颜色设置为白色。最后改变图层模式为柔光,不透明度降低到20%。

Photoshop轻松制作Apple网站导航条按钮


8.创建一新图层,绘制一条1px线,颜色为#808080,把它放到上面两条线的中间,图层模式不变,把不透明度降低到35%,效果如下。

Photoshop轻松制作Apple网站导航条按钮


9.依次复制上面两个图层,把这种效果添加到其他的导航文字中间,效果如下。

Photoshop轻松制作Apple网站导航条按钮


10.现在,我们来简单制作翻滚效果。在一个文字的区域设置选区,效果如下图。

Photoshop轻松制作Apple网站导航条按钮

11.创建新图层,填充选区为任意颜色,然后添加图层样式,渐变叠加: #666666 - #a1a1a1。

Photoshop轻松制作Apple网站导航条按钮


12.把字体的颜色改变为白色,并且添加投影效果: #454545。

Photoshop轻松制作Apple网站导航条按钮

13.最终效果如下。

Photoshop轻松制作Apple网站导航条按钮

关键词:Photoshop教程,按钮
推荐给好友】【关闭】【收藏本文
最新五条评论
查看全部评论
评论总数 0
您的评论
用户名: 新注册) 密 码: 匿名:
·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为