photoshop制作网站酷炫导航条

2016-03-17 23:44 13 1 收藏

今天图老师小编给大家展示的是photoshop制作网站酷炫导航条,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

【 tulaoshi.com - PS 】

最终效果:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

1.新建一个600*150的文件,背景填充黑色。选择“圆角矩形工具”画一个同样填充黑色的圆角矩形,

选择“添加图层样式—斜面浮雕—描边”:

得到如下效果:

2.制作高光区。新建图层,选择钢笔工具,绘出一个方框如下:

右键单击钢笔路径转换成选取并填充白色。

黑色的圆角矩形框载入选区--ctrl+左击图层,选择白色图层,反选—删除,删除多余的部分。

添加由(#4a4tulaoshia49)到(#d5d5d5)的渐变叠加:

得到如下效果:

3.输入导航文字颜色分别为:#ffffff & #d9ff3f;

4.输入“-----”旋转90°作分割线,添加白色正方形小方框;

5.软键盘输入“¬“;完成。

来源:http://www.tulaoshi.com/n/20160317/1868069.html

延伸阅读
标签: PS PS教程
本文由 中国 zixuan_gzs 编译,转载请保留此信息! 本系列教程由中国互助课堂专为PS新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋友们的光临! 本例介绍运用PS简单制作漂亮的水晶玻璃效果的网站导航条,主要通过圆角矩形工具、图层样式的设置来完成最终效果,简单易学,适合新手...
本教程来源于pscloud作者未知 (原创翻译转载请注明出处表明链接谢谢) 利用web2.0风格创建一个令人惊奇的网站导航条。 1. 创建一个新文件600 * 140px。现在选择圆角矩形工具制作一个圆角矩形如下图。 2. 应用层样式:内发光 混合模式:滤色 方法:柔和 3. 渐变叠加:颜色设置为 #5e80a3 ,#839db8 and #b8c7d6 4.描边: #5e80a3 5. ...
标签: Web开发
CSS标签重置 对于XHTML+CSS布局起着一个重要的决定性作用,它是提高页面浏览器兼容性的第一步。 那么什么是标签重置呢? 顾名思义,就是对HTML中的所有标签属性重置,因为每个浏览器都有一个自己默认的CSS文件,对HTML中的所有的标签进行定义,以便没有定义CSS的页面能够正常显示在页面,页面在加载的时候如果没有找到自带的CSS文件,浏...
标签: PS PS基础
最终效果 步骤 步骤2,创建导航背景,下面忘记写了,颜色是#5a5a5a 设置灰色块的图层样式,内阴影+渐变 设置完渐变的时候效果出来啦 好,复制背景,行距是3px 为导航条写上标题 下面设置圆圈的样式 图层样式设置完毕把图层不透明°设置为70% 加上箭头得到效果 最终效果
下图中的导航条设计步骤之前已经介绍过,设计部分请看此文。本文主要介绍如何将设计出的导航条图片转化成HTML页面,其中有一个鼠标移动到按钮上转换图片的效果,本文中全部使用HTML+CSS制作完成。 布署文件 在我们开始切割图片之前,先在本地web服务器上布署文件,创建文件夹,在新建的文件夹中新建空白HTML文件index.html,空白CSS文件st...

经验教程

265

收藏

29
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部