当前位置:首页>ps实例教程>ps网页设计>按钮图标>教程内容

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

来源:不详 作者:佚名 学习:431人次
发表于 2007-9-8 10:27 Photoshop轻松制作Apple网站导航条按钮作者:闪电儿 来源:网页教学网 PS教程论坛:http://bbs.16xx8.com

Photoshop教程,利用Photoshop模拟制作Apple.Com苹果网站的网站导航条按钮。最终大家可以去http://www.apple.com网站对比下效果。
1.新建立一个500*50px的文档,然后选择矩形选框工具,设置模式为固定大小宽为 480px 高为 35px 绘制一个矩形选区。

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

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

投影: #b1b1b1。

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

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

6.现在效果如下。

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


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


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


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

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


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

13.最终效果如下。

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!