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

Photoshop
Photoshop 星光装饰的紫色水晶字
Photoshop 漂亮的潮流纹理字
Photoshop 一只可爱的小蜗牛方法
Photoshop 自制飞溅的水花教程
Photoshop 一朵绚丽的蘑菇云
photoshop 鼠绘超酷的黑龙
Photoshop 美女打造水晶亮白的质感肤色
Photoshop 美女加上油嫩光滑的质感肤色
Photoshop 清爽时尚的水晶球壁纸
Photoshop 制作简单的金色质感字
photoshop 滤镜实现超酷的彩丝字效果
photoshop 鼠绘身着飘逸绿裙的美女
Photoshop 打造淡紫色人物特写照片
Photoshop 打造甜美的外景人物照片
Photoshop 给古装人物美白
Photoshop 快速打造温馨的情侣照片
Photoshop 小鸟张嘴鸣叫动画
Photoshop 一只漂亮的枯叶蝶
photoshop 把美女头像转成精细的仿手绘效果
Photoshop 调出外景人物照片明亮的暖色调

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-27   浏览: 144 ::
收藏到网摘: 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教程最终效果图