PS制作简洁漂亮的网站导航条方法步骤

导航栏是网页设计的核心,今天让我们学习如何制作简洁而漂亮的网页导航条的制作方法。效果图如下:

操作方法

  • 01

    新建一个520×300的白色背景图

  • 02

    改变背景颜色为黑色,在“视图”新建水平参考线输入:120px,再新建一个水平参考线:160px

  • 03

    按住CTRL+SHIFT+N新图层,命名为navigation_back;前景色设为# cccccc的浅灰色;再“用矩形工具”选水平参考线之间的选区后效果如下:

  • 04

    设置图层的混合选项:投影(角度:90、距离:2、大小:1像素);内发光(颜色:白色(#FFFFFF))、大小:2 px ;渐变叠加(样式:线性、颜色1:#cccccc、颜色2:#FFFFFF)

  • 05

    按住CTRL+SHIFT+N新建图层,命名为shine

  • 06

    选中上半部分,并用白色填充,设置图层“混合模式”为柔光,设置“不透明度”为75%

  • 07

    添加导航文字:宋体 14 pt,复制每个频道图层,向下移动1px设置嵌入效果

  • 08

    新建一个分组,命名为“分隔条”,新建按CTRL+SHIT+N新建一个图层;选择“圆角矩形”工具,在圆角矩形的固定属性设置:宽度:1px 高度:30px ;放大图像至 800%;在主页和学历间画“线“;添加”渐变叠加的效果”(颜色1:#cccccc ,颜色2:#cccccc),然后复制分隔条的图层到其它栏目之间就完成了导航条的制作了。

(0)

相关推荐

  • 使用div+css编写的简洁漂亮的顶部导航代码

    使用div+css编写的简洁漂亮的顶部导航代码 步骤/方法 01 首先建立一个css样式表文件,命名为:common.css,在其中添加以下CSS代码. #info{border:1px solid ...

  • 使用ps制作梦幻少女粉色系边框的方法

    使用ps制作梦幻少女粉色系边框的方法,这里,让小编给大家介绍一下吧. 操作方法 01 在桌面上点击ps软件的图标,打开ps软件. 02 打开一张少女的图片作为素材. 03 使用选区工具框选一个长方形选 ...

  • 如何使用PS制作简洁文字排版

    PS是十分强大的平面制作软件,那么你知道如何制作简洁的文字排版效果么?下面我们通过以下图文步骤,快速学习制作的方法吧. 一.新建画布并创建文本 01 文件>新建,创建一个新的画布. 02 尺寸设 ...

  • 如何使用PS制作简洁的文字框

    PS是强大的平面设计软件,那么你知道如何快速制作简洁的文字框么?下面我们通过以下步骤,快速的学习制作的技巧吧! 一.创建文档并绘制选区 01 通过执行命令:"Ctrl+N"快捷键, ...

  • 如何使用PS制作简洁的图文排版

    PS是平面制作软件,那么你知道如何快速的制作简洁的图文排版么?下面我们跟着以下图文步骤教程,学习下制作的方法. 一.置入新图片 01 打开PS软件,通过"Ctrl+N"快捷方式,创 ...

  • 如何在Word中编写和插入导航条 Word中编写和插入导航条方法

    当我们使用word办公的时候,需要在word中编写和插入导航条,极好的满足用户体验度. 但是有很多朋友问我怎么在word中编写和插入导航条,下面小编抽点时间给大家做个整理.具体方法和步骤如下所示: 1 ...

  • 美图淘淘制作底片风格网店图片的方法步骤

    想让自己网店中的商品更吸引顾客的眼球,就得对商品图片进行个性化处理,美图淘淘是一款优秀的网店图片处理工具,利用内置的丰富素材可以制作出专业级特效网店图片,下面我们就用美图淘淘(下载地址:http:// ...

  • 如何使用PS制作简洁标题框

    PS是非常强大的平面制作软件,你知道如何通过它来制作简单又美观的标题框吗?下面我们通过以下图文步骤,学习制作的方法吧. 一.新建文档并绘制标题框选区 01 打开PS软件主界面,我们为其创建新的画布,尺 ...

  • 怎样用photoshop制作简单灰色质感的导航条

    介绍较为简洁的按钮制作方法,制作过程比较简单:先用选区工具做出按钮的形状:然后填充想要的颜色,再设置图层样式做出按钮的质感:最后加上文字和小装饰即可 步骤/方法 01 新建一个500 * 400像素的 ...