看腻了方方正正的页面吗?现在各种各样interface风格的页面越来越多,其实做这种页面一般都是先完成平面效果的设计,然后再切割完成,所以平面效果的体现就显得尤为重要了。
下面我们就举一个实例来具体讲解,教程比较长,主要运用的就是层的特效(style),只要有耐心就能做出精彩的效果。
最终效果如下图:

1.新建一文件-600x500pixels,白色背景。新建一层(起名叫Interfacebody),选择圆形选取工具画出一圆形,填充黑色.。依照图一,在刚刚的黑圆中再画一相似的小圆,按下Delete键。(我用了大圆50%大小的小圆形删除)
duplicate(复制)Interfacebody层,回到Interfacebodycopy图层,一会儿我们要用它.Interfacebody我们暂时不用,可以先关闭它,防止干扰我们的视线。

2. 用圆形选取工具画出如图二的椭圆选择区域。从顶部开始,每隔40pixels按下键盘上的Delete键一次如图二,取消选定。

3. Ctrl+单击选中Interfacebodycopy层.
切换置Channels(面板)
点击保存选择区域按钮
.取消选定.
执行Filter-Blur-GaussianBlur(滤镜–模糊–高斯模糊)-4pixels.
接着执行Image-Adjust–Levels(图像–调整–色阶)–将左右两个小箭头向中心拖动,直到图像的边缘非常干净为止.以下是我的具体设置。(通道可以起名为Interface).


4. 回到层面板,新建一层叫Interface。Select-LoadSelection(选择–读取选择区域),在对话框中选择我们刚刚新建的Interfacebody通道。
在选择区域中可以随意填充颜色,我选择灰色,添加特效时颜色就会改变了。

5. 现在开始表现特效。其实就是Photoshop 6.0/7.0中的layerstyles(层特效)功能。见下图,另外我还加上了softdropshadow(柔和的阴影特效)。

6. 现在让我们回到最初的Interfacebody层。Ctrl+单击该层,执行Select-Modify–Contract(选择–修改–收缩),5pixels,OK。
接着Ctrl+Shift+Ito反转选择区域,按Delete删除。

7. 再次Ctrl+单击该层,Select-Modify-Contract(选择–修改–收缩),3pixels,OK。
按下Delete键将Interfacebody层的中心部分删除.我也为这一层添加了dropshadow(阴影)特效。如图七.

基本的界面我们已经做好了,但是它看起来并不怎么惹人喜爱。让我们为它加入些细节吧!