Photoshop绘制灰色风格的网页导航条

2016-02-16 08:35 14 1 收藏

下面图老师小编要跟大家分享Photoshop绘制灰色风格的网页导航条，简单的过程中其实暗藏玄机，还是要细心学习，喜欢还请记得收藏哦！

【 tulaoshi.com - PS 】

最终效果

Photoshop绘制灰色风格的网页导航条,PS教程,图老师教程网

步骤

Photoshop绘制灰色风格的网页导航条,PS教程,图老师教程网

步骤2，创建导航背景，下面忘记写了，颜色是#5a5a5a

Photoshop绘制灰色风格的网页导航条,PS教程,图老师教程网

设置灰色块的图层样式，内阴影+渐变

Photoshop绘制灰色风格的网页导航条,PS教程,图老师教程网

设置完渐变的时候效果出来啦

Photoshop绘制灰色风格的网页导航条,PS教程,图老师教程网

好，复制背景，行距是3px

Photoshop绘制灰色风格的网页导航条,PS教程,图老师教程网

为导航条写上标题

Photoshop绘制灰色风格的网页导航条,PS教程,图老师教程网

下面设置圆圈的样式

Photoshop绘制灰色风格的网页导航条,PS教程,图老师教程网

图层样式设置完毕把图层不透明°设置为70%

加上箭头得到效果

Photoshop绘制灰色风格的网页导航条,PS教程,图老师教程网

最终效果

Photoshop绘制灰色风格的网页导航条,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160216/1570309.html

上一篇： Photoshop简单为MM黑白照片上色的教程
下一篇： Photoshop合成草原上美丽的场景

看过《Photoshop绘制灰色风格的网页导航条》的人还看了以下文章更多>>

coreldraw导航条设计

标签： CorelDRAW 电脑应用

预览效果本节通过两个小示例，介绍导航条按钮的制作过程，效果如图所示。导航条按钮预览效果图知识提要 ◇ 交互式阴影工具、交互式透明工具的应用 ◇ 渐变填充设置技巧制作步骤 1. 导航...

CSS网页实例：斜角滑动门导航条

标签： Web开发

斜角导航条看上去立体感比较强，但实现起来比较麻烦；这是前几天写的一个测试代码，实现时，本来想用简单的图片加负数来实现；但GIF图片对半透明的效果无法有很好的支持；所以一边写代码，一边在改图，图片改的比较乱，CSS也没有优化；但效果出来了；写出来和大家分享一下；首先说一下，要实现的目标：滑动门，要兼容每个TAB可能出现...

photoshop制作网站酷炫导航条

标签： PS PS基础 ps平面设计教程 ps去水印教程

最终效果： 1.新建一个600*150的文件，背景填充黑色。选择“圆角矩形工具”画一个同样填充黑色的圆角矩形，选择“添加图层样式—斜面浮雕—描边”：得到如下效果： 2.制作高光区。新建图层，选择钢笔工具，绘出一个方框如下：右键单击钢笔路径转换成选取并填充白色。黑色的圆角矩形框载入选区--ctrl+左击图层，选...

FLASH：韩国导航条解析

标签： flash教程

效果如下: 准备工作： 1.新建一个名为item_BG的影片剪辑~ 在item_BG中添加一个矩形块，大小大概就和按钮的大小差不多，具体自己调~ 然后将item_BG该影片剪辑的链接名称命名为'mblock' 2.新建一个名为item_EN的影片剪辑~() 在item_EN中添加一个动态文本框，将实例名称命名为'itext...

Dreamweaver教程：创建导航条