建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 图像设计 > Photoshop教程 >

用Photoshop制作网站导航

时间:2011-10-10 08:56来源: 作者: 点击:
学习如何用photoshop制作时尚耐看的网站导航条,主要用到了圆角矩形和图层样式,先看效果图。 新建文档560x300像素,背景黑色,建新层,画一白色圆角矩形。 添加图层样式。 颜色请采样我的截图,效果如下(局部) 新建图层1,调出圆角矩形选区,填充白色,把选

学习如何用photoshop制作时尚耐看的网站导航条,主要用到了圆角矩形和图层样式,先看效果图。

网站 导航 ps教程

新建文档560x300像素,背景黑色,建新层,画一白色圆角矩形。

网站 导航 ps教程

添加图层样式。

网站 导航 ps教程

网站 导航 ps教程

网站 导航 ps教程

颜色请采样我的截图,效果如下(局部)

网站 导航 ps教程

新建图层1,调出圆角矩形选区,填充白色,把选区左挪2像素。(最后的效果里我修改了一下,挪了1像素)

网站 导航 ps教程

删除,图层模式改为叠加,重复这个步骤,做出导航2端的亮边。

网站 导航 ps教程

白色文字,比如关于我们 联系方式博客等等,添加图层样式。

网站 导航 ps教程

网站 导航 ps教程

下面制作鼠标悬浮框,就是鼠标移到文字上面时,会有不同的视觉样式呈现,一般用CSS来完成,建新层,做一矩形选区,透明到黑径向渐变。

网站 导航 ps教程

图层模式柔光,不透明度90%。

网站 导航 ps教程

做如下矩形选区,填充白色。

网站 导航 ps教程

添加蒙版,黑白对称渐变,图层不透明度90%,可能会有超界的白边,用笔刷涂抹掉即可。

网站 导航 ps教程

这样,一个简单的网站导航就制作完成了,本ps教程到此结束。

网站 导航 ps教程

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片