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

Photoshop
Photoshop 调出人物照片梦幻的橙色调
Photoshop 一个立体的五角星快速制作方法
photoshop 合成梦幻的雪山一角
Photoshop 调出风景照片强对比的蓝黄色
photoshop 自定义图案给多斑的人物磨皮
photoshop 利用图层样式制作简单的玉环
photoshop 鼠绘梦幻的仙界奇观
photoshop 磨皮美白教程 晶莹剔透肤色照片
Photoshop文字动画 简单的倒计时
关于Fireworks 和Photoshop两者之间比较(图片优化的比较)
Photoshop 快速打造另类的暖色照片
Photoshop 打造熊熊燃烧的烈焰人物
Photoshop 残缺的水晶字效果
Photoshop 超可爱的爱心小灰兔
PhotoShop 给人物调出淡黄质感肤色
photoshop 让宝宝模糊照片变清晰教程
PhotoShop 为美女染出绚丽长发效果
Photoshop 几步制作美丽的雪景
PhotoShop 神奇的天空光线照射下来特效
PhotoShop 鼠绘漂亮的国外金发美女

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-27   浏览: 216 ::
收藏到网摘: 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风格网站导航_软晨学习网