photoshop制作出时尚耐看的深蓝色网站导航效果
先看效果图<p></p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="225" alt="网站 导航 ps教程" width="520" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025745.jpg" /></p>
<p style="TEXT-INDENT: 2em">新建文档560x300像素，背景黑色，建新层，画一白色圆角矩形。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="220" alt="网站 导航 ps教程" width="450" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025746.jpg" /></p>
<p style="TEXT-INDENT: 2em">添加图层样式。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="263" alt="网站 导航 ps教程" width="271" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025747.jpg" /></p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="284" alt="网站 导航 ps教程" width="254" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025748.jpg" /> </p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="229" alt="网站 导航 ps教程" width="331" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025749.jpg" /></p>
<p style="TEXT-INDENT: 2em">颜色请采样我的截图，效果如下(局部)</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="226" alt="网站 导航 ps教程" width="480" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025750.jpg" /></p>
<p style="TEXT-INDENT: 2em">新建图层1，调出圆角矩形选区，填充白色，把选区左挪2像素。(最后的效果里我修改了一下，挪了1像素)</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="274" alt="网站 导航 ps教程" width="339" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025751.jpg" /></p>
<p style="TEXT-INDENT: 2em">删除，图层模式改为叠加，重复这个步骤，做出导航2端的亮边。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="176" alt="网站 导航 ps教程" width="480" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025752.jpg" /> </p>
<p style="TEXT-INDENT: 2em">输入一些白色文字，比如关于我们 联系方式博客等等，添加图层样式。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="203" alt="网站 导航 ps教程" width="263" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025753.jpg" /></p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="327" alt="网站 导航 ps教程" width="332" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025754.jpg" /></p>
<p style="TEXT-INDENT: 2em">下面制作鼠标悬浮框，就是鼠标移到文字上面时，会有不同的视觉样式呈现，一般用CSS来完成，建新层，做一矩形选区，透明到黑径向渐变。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="231" alt="网站 导航 ps教程" width="366" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025755.jpg" /></p>
<p style="TEXT-INDENT: 2em">图层模式柔光，不透明度90%。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="294" alt="网站 导航 ps教程" width="429" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025756.jpg" /> </p>
<p style="TEXT-INDENT: 2em">建新层，做如下矩形选区，填充白色。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="262" alt="网站 导航 ps教程" width="395" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025757.jpg" /></p>
<p style="TEXT-INDENT: 2em">添加蒙版，黑白对称渐变，图层不透明度90%，可能会有超界的白边，用笔刷涂抹掉即可。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="362" alt="网站 导航 ps教程" width="371" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025758.jpg" /></p>
<p style="TEXT-INDENT: 2em">这样，一个简单的网站导航就制作完成了，本<strong>ps教程</strong>到此结束。</p>
<p style="TEXT-INDENT: 2em" align="center"><img style="CURSOR: pointer" onclick="ImageOpen(this)" height="225" alt="网站 导航 ps教程" width="520" onload="ImageZoom(this,560,700)" src="https://img.jbzj.com/file_images/photoshop/201108/2011081011025745.jpg" /></p>
頁:
[1]