当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > Photoshop制作光滑的蓝色精致网页导航条

Photoshop
Photoshop 简单的液化水晶字效果
Photoshop happy文字 怀旧版的2010新年贺卡
Photoshop CS4 更新补丁性能改进
Photoshop 给汽车随意换颜色的方法
Photoshop 震撼的游戏场景设计实例
Photoshop抠图实例 巧妙扣取透明图形
Photoshop合成户外体育馆羽毛球比赛图片
Photoshop 绘制透明玻璃效果的网页按钮
Photoshop 制作绿色风格半透明网页按钮
Photoshop 绿色风格的相机网页平面图
Photoshop 打造闪闪动水的双唇 磨皮
Photoshop 绚丽的电网广告文字效果
Photoshop 利用填充工具制作透明水印文字
Photoshop 打造耀眼的星光文字特效
Photoshop 调出偏暗人物照片柔美的淡红色
Photoshop 风景照片柔美的橙蓝色
Photoshop 外景人物照片柔和的暖色调
Photoshop 擦拭水雾玻璃透光的人像效果
Photoshop 可爱的紫色花纹水晶字
Photoshop 一个精致的油漆桶图标

Photoshop制作光滑的蓝色精致网页导航条


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

  ps教程简介:我们将学习制作一个光滑的ps网页导航条。

  photoshop教程最终效果图

  

photoshop教程最终效果图

 

  第一步当然是您创建一个新的文件。转到文件 >新建或者干脆按Ctrl +N.根据你自己的喜好选择你的大小,点击ok确定。

  这里我们使用的大小为 600×147 pixels。

  

photoshop教程步骤001

 

  现在考虑您想要使用的背景和挑选出的两种颜色使用在您的背景中。两种蓝色被用在这里。我们的前景颜色设置为# 10365a和背景颜色为# 2070bf 。

  然后选择渐变工具和挑选前景色和背景色、线性渐变。

  

photoshop教程渐变设置

 

  现在简单的在图层上从上到下拖动渐变。

  

photoshop教程步骤

 

  在你要放置导航链接的地方增加一个新层。

  使用一个矩形选框工具 ( ) 并选择白色填充。

  

photoshop教程步骤2

 

  将这个图层的混合模式改为柔光,并将填充降低至25 % 。

  

photoshop教程步骤演示3

  现在在链接中间添加分隔符。创建一个新层,再次使用矩形选框工具,在这一层使用一个像素。请记住我们使用的的背景颜色?我们将使用相同的,只是在相反的顺序。 所以这个时候请将您的前景设置为# 2070bf和你的背景颜色为# 10365a。然后在渐变中使用前景色到背景色下,再次选择线性渐变,从上到下拖动渐变。这将是您的分隔符。

  

photoshop教程步骤4

 

  将这个层的混合模式改为柔光使它混合的更加好。

  

photoshop教程步骤5

 

  按下Ctrl+J 复制这个图层。根据你想要的导航链接数量来决定。然后简单的移动到合适的位置。

  

photoshop教程步骤6

 

  为了给导航条增加一些细节。创建一个新层使用矩形选框工具在两个分隔符之间创建选区。然后将给选区填充颜色。第一个颜色这里使用的是#60c100.

  

photoshop教程步骤7

 

  现在在每一个分隔符空间我们必须重复此步骤。为了确保你有相同的大小,每次简单重复的这一层,并移动到下一个空间。然后按Ctrl +单击在您的图层窗口的调色板小图片的前面层。这将选择长方形的选区。然后,只需使用油漆桶工具( ) ,来填补其他颜色。这个时候所使用的颜色是# f80000 。

  

photoshop教程步骤8

 

  重复这一步,这里使用的颜色是 #feb70a。

  

photoshop教程步骤9

  这里再做一遍。最后一次我在这里用的颜色是 #d200ff. 当然如果你有更多的链接,分隔符越多你就简单的添加一些更多的颜色。

  

photoshop教程步骤10

 

  下一步是添加一个边框,这里要比我们的头部或导航条更多一些。因此,添加一个新的层,做到以下几点。

  使用矩形选区工具在头部的底部作出选区。

  用一个匹配你的背景与配色填补。

  所以一个深蓝色的被用在这里(# 03346c)。

  

photoshop教程步骤11

 

  添加一个新层,拿出铅笔工具()。设置与你一些很配其他颜色的前景色。

  我们被设置为浅蓝色(# 7dbfff)。然后得出一个像素线条的长方形正如我们创造的上一步一样。

  

photoshop教程步骤12

 

  按下Ctrl+J 复制这个图层,然后拖动它到顶部的导航条刚刚在你颜色盒子上。

  

photoshop教程步骤13

 

  下面处理文字。创建一个新层选择文字工具。挑选一个漂亮的字体和类型在你的站点标题的左边的空间键入标题。

  被称为“Century Gothic”(一种字体)用在这里,应该是一个默认字体在windowsXp里。不管用什么你想要的颜色,纯白的使用在这里。

  

photoshop教程步骤14

  然后添加一个你想要的副标题。当然是在一个新层当中,使这个字体小一些。被称为的字体 ‘Silkscreen’ (ps字体下载 )

  使用在这里。再一次,使用纯白色。

  

photoshop教程步骤15

 

  然后在一个新层上添加导航链接文字。再一次使用字体 ‘Silkscreen’ 纯白色。

  

photoshop教程步骤16

 

  最后的步骤将被添加图像代表链接。您可以自己创建他们,但也有很多网站你可以在那里下载一些好看的图片。

  这里所有的图像来自 famfam.com .使用。

  因此,首先在这里是首页图像。打开并粘贴到一个新层中。那么把它移动到位置上。

  

photoshop教程步骤17

 

  同样的方法处理搜索图标。

  

photoshop教程步骤18

 

  论坛图标

  

photoshop教程步骤19

 

  沟通图标。如果你有额外的或者其他的链接我想你会在那个网站上找到喜欢的图标。

  

photoshop教程步骤20

 

  现在你应该有一个漂亮的光滑的蓝色网页导航条。

   原文链接:http://pskungfu.info/2009/05/ps%e5%88%b6%e4%bd%9c%e7%bd%91%e9%a1%b5%e5%af%bc%e8%88%aa%e6%9d%a1/

photoshop教程最终效果图