UI设计技术

• 两像素分割 
  
• 像素阴影 
  
• 像素倒角 
  
• 阴影加高光 
  
• windows Vista效果

 

1.两像素分割

两像素分割技术在UI设计和网页布局运用非常广泛，一些典型的例子如Windows Media Player11的UI设计，网站Pixel2Life.com, and 2Advanced.net等，这是一种比较细微的视觉效果。可能不会引起注意，但是如果运用恰当，它的效果真的非常不错。

来看一个简单的例子，下图是一个网站的导航栏，我们将在上面运用这个简单实用的UI设计技术。

 

现在在photoshop放大（Ctrl+“+”），这样我们就可以进入像素级别的工作。新建一个图层，选择铅笔工具，选择白色的前景色，按住Shift键，这样你就可以在菜单和logo之间画一条1个像素的直线。

 

用同样的方法，在白线的上方，绘制一条黑线。

 

 

已经完成了，就是这么简单，通常我会根据自己的需要用Photoshop调节它们的透明度，使它们和周围的颜色融合。参照下图，对比一下，使用这个UI技术后，是不是有不一样的感觉。

 

2.像素阴影

这个UI技术实现起来更加简单，通常当文字或者logo放在轻柔明亮的背景时，我会用到像素阴影的技术，而且由于只有1个像素的阴影，设计上不会给人过度使用的感觉。

看下面的例子，开始我想为下图的logo和文字加一些柔软的阴影，但是感觉不够突出，所以最后使用像素阴影。

 

像素阴影的UI设计技术实现起来非常简单，就是为图像增加一个像素的硬边投影。简单来说，就是在Photoshop的图层混合选项里选择投影，并将尺寸（Size）设为0，将距离（Distance）设为1px。

3.像素倒角

现在的网页设计趋势和UI设计潮流都在避免使用倒角，但是其实如果运用恰当，效果也是不错的。看下面例子：

 

现在这个图形有一个柔和的阴影和渐变的背景，为了使它更加突出，我们来加1个像素的倒角。

在Photoshop的图层混合选项，选中斜面浮雕，将size和soften都设为0，并将方向设为90度，效果如图：

 

 

4.阴影加高光

这个UI设计技术有些类似于第一个的像素分割技术，但是又有少许的不同，它也是一种不怎么起眼，但是却效果不错的UI设计技术。

实现起来同样很简单，先看下面例子：

 

你可以看到，我为标题部分增加了一个柔和的阴影，但是仍然没有给我们一种突出的感觉，所以我会用到阴影加高光的UI设计技术。

方法很简单，同样用像素分割的方法。在标题和内容之间，增加1个像素的白线，并适当降低透明度，现在看看效果，是不是有很大不同。

 

5.Windows的Vista窗口效果

关于Vista的Aero效果，之前有一篇UI设计程序对它进行了详细的讲解，不过这里我们仍然会稍微提一下。

 

这种Aero效果的实现，结合了Photoshop图层混合选项的多种技术，如“斜面浮雕”、外发光、投影、内发光，甚至包括颜色叠加，详细请参考发布的之前的UI设计教程。

这种效果大概由三个部分组成，主窗口、内窗口以及附加部分。

 

'