创建你自己的Vista风格的”Chrome”样式的按钮

在这篇博客里面我将提供一种方式创建你自己的”Chrome”样式的按钮模板,以后只要通过Expression Design简单的修改就可以反复的使用了.这篇文章是面向完全的新手的,所以就算你从来没有使用过Expression Design,通过这篇文章你也可以熟悉以下Design的操作了.下图是完成手的预览图.

让我们开始吧…

在面板上画一个150*50px的矩形,如图

当然你可以轻易的使用行为栏(Action Bar)改变矩形的长宽.

如果注意到最终效果图,你会发现我们得到的是圆角.所以我们得想办法使刚才的矩形成圆角的.选择刚才的矩形,通过属性面板修改圆角半径为10px.

一旦你做了改变,你的矩形将会变成弯曲的觉

现在我们添加渐变效果到按钮上.为了简化操作,我们使用缺省效果去使按钮变成银色.

应用简便后,按钮将会变成如下的效果

正如你所看到的,在我们让它变得好看之前我们还有很多工作要做!首先,我们要去掉按钮的笔触,通过点击笔触选项来设置.

设置无笔触将去掉黑色轮廓,看到如下的效果

去除笔触后,让我将注意力放在填充上.注意到按钮上的渐变效果是从左到右的,我们想将其改为从上到下.使用渐变旋转角度工具,改变旋转角度为270度或者-90度,如下图

修改渐变旋转角度后,按钮将会变成如下图一样

现在我们得到一个光滑的渐变,让我们进入下一步.光亮!(the shine!)或者我们可以叫”亮层”(the light layer).但我更喜欢称之为”高光”(the Bling!)

复制按钮对象到剪贴板,点击”编辑”->”复制到顶层”,将另一个复制对象放在顶层.让后我们做一些修改使之变成我们想要的效果.选择新按钮对象按如下做:

1.       通过行为栏调整新对象为146*25px.第二个按钮对象将位于第一个上侧的居中位置.

2.       修改圆角半径为8px,使之有一个更小的角.

3.       向上移动上层的对象,使其距离下层的对象的上侧4px,通过放大图像将使你更容易完成这些.

4.       改变简便旋转角度为90度.

5.       回到属性面板,更待黑色渐变停点为白色,这样我们将得到两侧都是白色渐变效果.

此时,你的按钮将会有些不一样了:

仍然在刚才的渐变停点上,改变停点(Stop)Alpha为0%.

大功告成!你的按钮已经完成就是这样了: