你现在的位置: 网站首页 > 资讯中心 > 正文

如何用photoshop制作网页简单的导航条

文章来源: www.andasen.net 编辑:网站管理员 发布日期: 2012-11-16 9:40:01 浏览次数:
更多

网页的导航是标志(logo)外,人们第一眼印象中占比重颇为重要的设计,合理的设计会给网站增加不少印象分,同时,也令访客记住网站。下面,给大家来介绍网页导航的设计,以及下拉框的设计,此部分讲解的是PS部分。

1、 打开PS软件,新建一个宽1280px,高200px的的文档;
新建图层
2、 建立参考线,固定网页的显示宽度为:980px,顶部留空50px,导航的高度为:40px;
参考线建立
3、 时此,宽980,高40的导航线框已建立好,这是第一步哦;
4、 接着新建一个图层,选择圆角矩形工具,圆角半径为4,在线框内画一个路径,然后按ctrl+shift+enter,填充蓝色:#1d49b7;

5、 双击图层,设置图层属性,下图所示

6、 接着,按住ctrl点击图层,新建一个图层,回到顶部菜单:选择-修改-收缩选区-1个像素;

收缩选区
7、 选择工具-填充-图案
图案填充背景
8、 填充后,再缩小一个像素,按“Delete”删除选区内的图像;
缩小选区
删除选区内的部分
9、 按ctrl+d取消选择,设置此图层的不透明度为50%;再回到色块图层中,“滤镜-杂色-添加杂色1个”,将图层转换为智能滤镜;

10、 再次双击图层来修改属性;
外发光设置
设置投影
11、 这里取消参考线,查看效果;
导航条效果
12、 在边框图层上新建一个图层;选择工具栏中的矩形工具,设置尺寸为:1*30,在导航条的色块中新建矩形选择框;
设置矩形选框大小
13、 填写蓝色,再新建一个图层,填充灰色;

填充蓝色

14、 合并两个小线条图层;选择椭圆矩形工具,羽化为5,删除刚才合并了的图层;调节不透明度50%,得如下图;
隔线效果
15、 填写上文字,以及这条小隔线,一个导航的设计图出炉了。
导航条设计


下一篇: 用photoshop给产品图片加上水印 (2012-11-5)


业务联系

梁先生 Victor Leong

8:30-17:30(周一至周六)

0750-678 2240

(推销和广告电话请勿打扰)

日志分类