网页导航的质感运用技巧

2016-02-17 03:57 4 1 收藏

今天图老师小编要向大家分享个网页导航的质感运用技巧教程，过程简单易学，相信聪明的你一定能轻松get！

【 tulaoshi.com - 平面设计】

一直都有朋友在问质感方面的问题,很多朋友也一直希望记忆能做一期质感方面的教程,但是由于一直很忙,所以到今天才简单为大家带来一期质感方面的教程!

首先来看一个标准的导航质感如何展现吧!

导航在网站设计中占有举足轻重的地位，导航是整个站点中(特别是门户站)视觉的焦点和中心，其影响力仅次于Banner!导航的成败直接影响了整个站点的表现，不管是企业站，还是Flash站点，都不应该轻视导航的设计!

在这里我就大概讲一下质感类导航的制作方式!

我个人总是把导航的质感分为好几层，例如高光，泛光，点光，投影等，也就是基本一个实物应该具备的一些效果，把他们综合到界面上，就可以比较好的展现出界面的质感，详细请看下图!

网页导航的质感运用技巧,PS教程,图老师教程网

上图中所举例就是我常用来体现导航质感的方式了，当然方法很多，实现效果也可以千变万化，如何去实现更好的效果。咱这里就不多罗嗦了，呵呵!

然后我在举一个带有复杂质感导航的实现方式，例如下面的玻璃质感导航是如何实现的!

玻璃是一种带有复杂高光反射的材料，所以要用更多的光去体现他的质感，我简单举例了一个制作，大家可以看下图我是怎么去实现玻璃效果的!

网页导航的质感运用技巧,PS教程,图老师教程网

其实大家应该可以从我这两个例子里看出来，打底的无非就是一个渐变色图层，其他效果都是靠不断的新建图层来实现的。而且质感的体现总是会在一定的高光，暗光，投影里形成!所以我个人总结的是多参照实物。多参考别人的设计，把自己学到的多换方式运用，这样就可以制作出非常多质感丰富且漂亮的导航了!

下面为大家带来一些实例!

导航上的质感应用

网页导航的质感运用技巧,PS教程,图老师教程网

背景上的质感应用

网页导航的质感运用技巧,PS教程,图老师教程网

按钮或鼠标交互效果上的质感应用

网页导航的质感运用技巧,PS教程,图老师教程网

进入论坛参与讨论和交作业

来源:http://www.tulaoshi.com/n/20160217/1578270.html

看过《网页导航的质感运用技巧》的人还看了以下文章更多>>

网页导航栏设计模式

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式，可以用来作为为网站创建有效地信息架构的基础。这篇指南涵盖了流行的站点导航设计模式。对于每一种网站导航栏设计模式，我们将讨论它的一般特征，它的缺点，以及什么时候使用它最好。顶部水平栏导航顶部水平栏导航是当前两种最流行地网站导航菜单...

Photoshop制作金属质感导航栏

标签： PS PS基础

详细解析网页导航设计原理

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

著名的格林童话故事里面汉赛尔和格莱特知道后母想要在深林里面丢掉他们的计划，将面包屑撒在来时的路上，虽然当月亮升起时，面包屑被鸟吃掉了，但是现在的互联网设计师们从这个故事中找到了灵感，设计出不会被鸟吃掉的固定面包屑。图1:互联网上各种各样的面包屑汉赛尔和格莱特为了在森林中找到回家的路，撒下了面包屑，这是一种导航方式...

PS一个有质感的导航按钮

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

本TuLaoShi.com教程很简单,后面有附样式下载! 制作过程如图(图片过大,请点击打开): 样式下载地址:http://www.poluoluo.com/sucai/psys/Index.html

Photoshop制作非常简洁的灰色质感导航栏

标签： PS PS基础 PS效果

本教程介绍较为简洁的按钮制作方法。制作过程比较简单：先用选区工具做出按钮的形状，然后填充想要的颜色。然后设置图层样式做出按钮的质感。最后加上文字和小装饰即可。最终效果 1、新建一个500 * 400像素的文档，背景填充颜色：#1b1b1b。 2、新建一个图层，选择矩形选框工具，拉一个288 * 50像素的矩形选区，填充颜色：##5...

查看更多精彩>>