查查 发表于 2007-5-6 09:42:00

网页设计实例：女性购物网站导航条制作

<P>这一个商品类网站的教程，发给大家一起学习。注：学习本教程请用PSCS2。</P>
<P>效果图：</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112122762.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112122762.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>1.新建一文档，宽度自己可以选择，我设为500*110大小。建立一个和画布一样大小的图层，用纯色填充背景</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112122738.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112122738.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>2.用矩形工具绘制一个矩形</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112122144.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112122144.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>3.选择上面的添加形状按钮，用椭圆形工具建立一个椭圆形．</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112122164.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112122164.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112122501.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112122501.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>4.用矩形工具建立一个垂直的比较窄的矩形</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112122790.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112122790.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>5.按Ctrl+J 和Ctrl+T键向又移动几个像素．重复按Ctrl+J 和 Ctrl+T键得到如图所示的图形．（注：这里按Ctrl+J的意思是复制图层，这里的Ctrl+T只是代替了移动键“V”键）</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123656.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123656.jpg" onload=resizepic(this) align=absMiddle border=0></A><BR></P>
<P>6.选择并合并这些窄的图层．命名为“line”把图层样式改为overlay.中文意思“叠加”</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123440.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123440.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>7.Ctrl+单击　</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123647.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123647.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>8.把该图层把透明度调为２０％</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123190.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123190.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>9.用自定义图形 画一个方框.</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123529.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123529.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>注：如果你的自定义图形中没有这个图形，可以通过以下方法加入。</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123800.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123800.jpg" onload=resizepic(this) align=absMiddle border=0></A><BR></P>
<P>按Ctrl+T.又击选择歪曲（英文为warp）.右击选择弓形设置如图所示的参数</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123761.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123761.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123812.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123812.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>复制图层,按Press Ctrl+T.右击选择垂直翻转,变成如图所示的形状</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123634.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112123634.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>按上面的方法做你需要的按钮</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124507.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124507.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>把要链接的名字打在按钮上</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124691.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124691.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>右击文本层，选择弓行文本,设置如下图所示参数：</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124598.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124598.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124858.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124858.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>用同样的方法在其他的按钮上写上相应的文字,调节文本的弯曲度和按纽的弯曲度相同</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124534.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124534.jpg" onload=resizepic(this) align=absMiddle border=0></A><BR></P>
<P>在槽部和顶部插入我们要的文字或图片</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124531.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124531.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>还是选用自定义图形建立一个大的正方框旋转45°</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124833.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124833.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>把图层模式改为overlay降低透明度为30.</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124337.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124337.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>把图层复制两次,如图把图层按比例缩小</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124736.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112124736.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>插入一幅漂亮的图片或者是公司的产品</P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112125623.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112125623.jpg" onload=resizepic(this) align=absMiddle border=0></A></P>
<P>在右侧底部插入公司的logo </P>
<P align=center><A href="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112125625.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="CURSOR: hand" alt=按此在新窗口浏览图片 src="http://www.cgfancy.com/Article/UploadFiles/200611/20061103112125625.jpg" onload=resizepic(this) align=absMiddle border=0></A></P><BR><script language="JavaScript" src="http://www.16xx8.com/bbs/10.js"></script><BR>

天际 发表于 2007-8-23 11:17:45

不错，很不错，谢谢楼主的分享！！！
页: [1]
查看完整版本: 网页设计实例：女性购物网站导航条制作