| 这是一篇很实用的界面设计教程,使用工具PhotoShop6.0,(不好意思,用6.0习惯了,还没升级到7.0 呢,呵呵。不过,据我认为,无论你是用的6.0和7.0学习这个教程都不会有问题)由我进行翻译、整理,略有改动。
该教程原文版权归 Robouk 所有
|
|
这是一个在制作界面过程中,经常用到的一个方法。下面将用一些简单的方法,来教你如何制作一个镶嵌在界面上的按钮。
首先,贴个图来给大家介绍一下有嵌入效果和无嵌入效果的差异。

|
|
|
下面正式开始学习嵌入按钮的制作吧:
在含有你界面的那个层上建立一个新的层,设置前景色为: #C1C2C4 ,现在选择椭圆工具

现在,把这个按钮拖放到任意你想放的位置,然后我们给它添加一些铬合金的效果。
首先给这一层加上 内阴影(Inner shadow),相关参数以及设置,见下图:

接着给这一层加上 内发光(Inner Glow),相关参数以及设置,见下图:

然后给这一层加上 渐变叠加(Gradient Overlay),相关参数以及设置,见下图:

最后加一点点 描边 效果(Stroke),相关参数以及设置,见下图:

当你做完以后,记得要保存这个图层样式,以便于下次使用。
|
|
|
现在你会发现把这个按钮放在界面之上,却没有一点镶嵌在界面上的感觉,这也是为什么我要给大家翻译这篇教程的目的所在。就是要让按钮和界面融合得更加自然。
在你的层面板上,点击如图所示的这个红色标记的区域:

它将激活这个路径,现在转换到路径面板(点击如图所示带有红色标记的区域)

现在,拖动路径层到这个图标上→ ,从而复制该层。这将创建一个新的路径,我们把它取名为“路径1”。 现在选择“直接选取工具” (详细所在位置如下图)然后在文件的任意地方单击鼠标右键,选择 “自由变换路径”
按住Shift+Alt拖动选区的任意角,使它比原来的按钮稍大一些,完成后按回车。
注意:在这里,我们之所以要使用路径,就是因为这样做可以在没有任何质量损失的情况下任意调整尺寸大小。 |
|
|
按住Ctrl的同时单击“路径1”,然后回到层面板,并建立一个新层(图层2),将它拖到按钮层的下面,如图:

设置背景色为白色,并使用快捷键 Ctrl+Backspace 填充白色,现在调整图层样式>渐变叠加,相关参数如下,或者你也可以随意调整,直到你认为满意为止。

|
|
|
基本上到这里,一个镶嵌在界面上的按钮就已经做完了,但是我们还需要发挥我们的创造力和想象力,来创造更多任意形状、大小或者材质的按钮。你甚至可以把一个液晶显示器用这样的方法把它镶嵌在你的界面上,使它看上去更加的漂亮和真实。效果如左图。
看看,只是一个小小的效果,就可以让你如此轻松地创造出如此漂亮的东西,是不是很佩服自己的水平呢。呵呵。
希望你们能够喜欢我翻译的这篇教程,也希望你们在日后的设计工作中,能够摸索出更加方便、有效的方法,和我们全体ChinaUI的会员朋友们,一起共享。我们一起努力!千万不要吝啬你们的技术和时间啊! :) |
|