当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > PS入门:制作web2.0风格网站导航

Photoshop
Photoshop 偏暗的人像快速磨皮及润色
photoshop 外景人物的简单磨皮及嫩肤方法
Photoshop 巧妙的消除背景突出主体
Photoshop 制作经典的合成文字效果
Photoshop 一块光滑的褐色鹅卵石
Photoshop 粉红色的古典美女签名制作教程
Photoshop 调出外景人物图片梦幻的青色调
Photoshop 外景照片调色并加上暗角
Photoshop 快速美化人物脸部
Photoshop 绚丽的街舞动作
Photoshop 可爱的卡通雪人
Photoshop 简单的蓝色水晶按钮
photoshop 合成冲出画面的恐龙
Photoshop 偏色的古装人物转手绘效果处理方法
用photoshop给美女加上淡淡的彩妆的方法
用photoshop 合成子弹穿透物体的瞬间
Photoshop下利用滤镜制作漂亮的高光漩涡
Photoshop 精修陈年老照片
photoshop 鼠绘受伤的卡通酷哥
Photoshop 打造一把锋利的青铜剑

Photoshop 中的 PS入门:制作web2.0风格网站导航


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-27   浏览: 240 ::
收藏到网摘: n/a

  利用web2.0风格创建一个令人惊奇的网站导航条。

PS入门:制作web2.0风格网站导航_软晨学习网

  1. 创建一个新文件600 * 140px。现在选择圆角矩形工具制作一个圆角矩形如下图。

PS入门:制作web2.0风格网站导航_软晨学习网

  2. 应用层样式:内发光 混合模式:滤色 方法:柔和

PS入门:制作web2.0风格网站导航_软晨学习网

  3. 渐变叠加:颜色设置为 #5e80a3 ,#839db8 and #b8c7d6

PS入门:制作web2.0风格网站导航_软晨学习网

  4.描边: #5e80a3

PS入门:制作web2.0风格网站导航_软晨学习网

  5. 这就是它应该呈现的样子。

PS入门:制作web2.0风格网站导航_软晨学习网

  6. 现在书写链接使用 Segoe 14 pt #ffffff

PS入门:制作web2.0风格网站导航_软晨学习网

  7. 给字体链接应用层效果:描边 #53769a

PS入门:制作web2.0风格网站导航_软晨学习网

  8.创建一个新层。选择矩形选框工具,绘制1px宽度的线条并使用# ffffffs填充

PS入门:制作web2.0风格网站导航_软晨学习网

  9. 复制这个层接着在每个链接之间添加每个线条。现在选择矩形选框工具选取线条底部的区域覆盖到所有的线条,然后使用选择- >修改- >羽化和应用5px半径。按下Del然后采取相同的方法处理上方的线条。

PS入门:制作web2.0风格网站导航_软晨学习网

  10. 将线条图层的混合模式改为柔光

PS入门:制作web2.0风格网站导航_软晨学习网

  11. 使用矩形选框工具选取你链接的内部区域 (在两个线条之间)然后填充任何你想要的颜色。

PS入门:制作web2.0风格网站导航_软晨学习网

  12.现在给这个层应用混合模式渐变叠加使用颜色: #567595, #728fae #b3c3d3

PS入门:制作web2.0风格网站导航_软晨学习网

  13. 这就是它应该呈现的样子。

PS入门:制作web2.0风格网站导航_软晨学习网

  14. 现在使用矩形选框工具2px的半径绘制一个小矩形使用#ffffff填充。

141

  15. 应用如下的层效果到形状图层: 内发光(混合模式:叠加)

PS入门:制作web2.0风格网站导航_软晨学习网

  16. 渐变叠加: #e6e6e6 和 #ffffff

PS入门:制作web2.0风格网站导航_软晨学习网

  17. 描边: #5e80a3

PS入门:制作web2.0风格网站导航_软晨学习网

  18. 这就是它应该呈现的样子。

PS入门:制作web2.0风格网站导航_软晨学习网

  19. 在形状内输入“search”使用Segoe字体 大小为 12pt 颜色#7b7b7b

PS入门:制作web2.0风格网站导航_软晨学习网

  20. 从 f3 Silk Icons(Silk Icons是一组免费的图标译者注)中添加一个放大镜这样你的导航条就完成了。这就是最后呈现的效果正常状态下和鼠标滑过时。

PS入门:制作web2.0风格网站导航_软晨学习网