| 加入收藏

红色商品网站创意导航设计教程

2009-09-20 10:30来源:未知 浏览:[]
所属专题: 网站导航条设计制作  

这一个红色商品类网站的创意导航设计的教程,发给大家一起学习。注:学习本教程请用PSCS2。

网站导航设计效果图:

商品创意导航的最终设计效果图

1.用photoshop新建一文档,宽度自己可以选择,我设为500*110大小。建立一个和画布一样大小的图层,用纯色填充背景

红色画布

2.用photoshop的矩形工具绘制一个矩形

绘制一个矩形

3.选择上面的添加形状按钮,用椭圆形工具建立一个椭圆形.

添加形状按钮

添加导航按钮

4.用矩形工具建立一个垂直的比较窄的矩形

矩形工具使用

5.按Ctrl+J 和Ctrl+T键向又移动几个像素.重复按Ctrl+J 和 Ctrl+T键得到如图所示的图形.(注:这里按Ctrl+J的意思是复制图层,这里的Ctrl+T只是代替了移动键“V”键)

红色窗帘效果

6.选择并合并这些窄的图层.命名为“line”把图层样式改为overlay.中文意思“叠加”

按Ctrl+T.又击选择歪曲(英文为warp).右击选择弓形设置如图所示的参数

导航按钮1

复制图层,按Press Ctrl+T.右击选择垂直翻转,变成如图所示的形状

导航按钮的底色

按上面的方法做你需要的按钮

导航栏轮廓完成

把要链接的名字打在按钮上

右击文本层,选择弓行文本,设置如下图所示参数:

调色

加上导航文字

用同样的方法在其他的按钮上写上相应的文字,调节网页导航栏文本的弯曲度和按纽的弯曲度相同

有创意的弧形弯曲

 

7.Ctrl+单击 

选区

8.把该图层把透明度调为20%

调整透明度

9.用自定义图形 画一个方框.

注:如果你的自定义图形中没有这个图形,可以通过以下方法加入。

图形工具的使用

在槽部和顶部插入我们要的文字或图片

插入我们要的文字或图

还是选用自定义图形建立一个大的正方框旋转45°

自定义图形

把图层模式改为overlay降低透明度为30.

降低透明度

把图层复制两次,如图把图层按比例缩小

插入一幅漂亮的图片或者是公司的产品

一幅漂亮的图片

在右侧底部插入公司的logo和主打商品

插入公司的logo

这样,一个具有创意的商品导航就完成了。

 



Copyright 2008 逆云网 | 粤ICP备08131116号 |关于我们 | 联系我们 |