Photoshop精细制作Vista风格网站导航条
作者：闪电儿 来源：网页教学网 <FONT size=1>PS教程论坛:http://bbs.16xx8.com</FONT><BR><DIV class=NewsContent id=NewsContentLabel></DIV>
<P>利用Photoshop制作Vista风格网站导航条，效果还算可以。</P>
<P>新建立文件500px * 50px，制作480px * 30px的一个选区。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/2007830816425.jpg" onload="return imgzoom(this,550);"></P>
<P>执行“选择”-> “修改” -> “平滑”，设置半径为 2px。效果如下。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/2007830816241.jpg" onload="return imgzoom(this,550);"></P>
<P>创建一个新图层，填充选择为任何颜色。</P>
<P>应用图层样式。渐变颜色为 #313332 到 #46474a</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/2007830816831.jpg" onload="return imgzoom(this,550);"></P>
<P>描边颜色为 #676767。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/2007830816177.jpg" onload="return imgzoom(this,550);"></P>
<P>选择上面的部分。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/2007830817709.jpg" onload="return imgzoom(this,550);"></P>
<P>新建立一图层，从上到下用白色到透明进行渐变填充。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/2007830817437.jpg" onload="return imgzoom(this,550);"></P>
<P>图层模式改为线性减淡，不透明度35%。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/2007830817445.jpg" onload="return imgzoom(this,550);"></P>
<P>效果如下。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/2007830817178.jpg" onload="return imgzoom(this,550);"></P>
<P>再建新图层，使用单行选框工具在上部选择1px区域。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308112553.jpg" onload="return imgzoom(this,550);"></P>
<P>填充为白色。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308112761.jpg" onload="return imgzoom(this,550);"></P>
<P>按Ctrl单击最下面的图层</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308112431.jpg" onload="return imgzoom(this,550);"></P>
<P>执行“选择” -> “反选”，按Del。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308112872.jpg" onload="return imgzoom(this,550);"></P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308113352.jpg" onload="return imgzoom(this,550);"></P>
<P>改变图层混合模式为柔光，不透明度为60%。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308113520.jpg" onload="return imgzoom(this,550);"></P>
<P>下面添加一些字符。创建一 130px * 24px 选区，然后“选择” -> “修改” -> “平滑”，设置半径为2px。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308113513.jpg" onload="return imgzoom(this,550);"></P>
<P>建立新图层，任意颜色填充选区，添加图层样式，渐变设置 #000000 到 #2f3233。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308113651.jpg" onload="return imgzoom(this,550);"></P>
<P>描边设置 #0f1011 到 #575858。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308113427.jpg" onload="return imgzoom(this,550);"></P>
<P>创建新层，然后按Ctrl单击图层，执行“编辑” -> “描边”设置如下。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308113731.jpg" onload="return imgzoom(this,550);"></P>
<P>图层不透明度设置为15%。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308113377.jpg" onload="return imgzoom(this,550);"></P>
<P>选择一半创建新图层填充颜色，然后从上到下应用白色到透明的渐变效果。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308114248.jpg" onload="return imgzoom(this,550);"></P>
<P>不透明度设置为80%。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308114362.jpg" onload="return imgzoom(this,550);"></P>
<P>添加字符，字体为Verdana 字号11pt，白色。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308114947.jpg" onload="return imgzoom(this,550);"></P>
<P>我们在文字中间添加分隔线．创建新层，使用单列选框工具选择区域，填充颜色为#1a1b1c，向右移动选区1px再次填充为#5d5f60再向右移动1px填充为#232526</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308114790.jpg" onload="return imgzoom(this,550);"></P>
<P>用20px柔笔刷擦除上下的部分，图层不透明度设置为50%</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308114442.jpg" onload="return imgzoom(this,550);"></P>
<P>复制该图层移动到下一个位置．</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308114650.jpg" onload="return imgzoom(this,550);"></P>
<P>最终效果如下。</P>
<P align=center><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); alt=Photoshop精细绘制Vista风格网站导航条 src="http://photo.16xx8.com/photo/wwwroot/article/UploadPic/2007-8/20078308115290.jpg" onload="return imgzoom(this,550);"></P><script language="JavaScript" src="http://www.16xx8.com/bbs/10.js"></script>
页:
[1]