Expression Design 图标设计


这同样是一篇适用于入门的简明设计教程,以RSS图标为设计对象。使用Expression Design2与Expression Blend3工具创建。
首先看一下最终的静态完成效果。下图为单一图标,组图点击这里查看Design源文件,动态效果点击这里查看
Silverlight rss图标
接下来打开Expression Design,在画布上绘制一个矩形并调节适当的圆角半径。

snap2
在矩形的上面,绘制三个圆形并嵌套。
圆形嵌套
使用剪刀工具,截取圆形的部分轮廓笔刷。剪刀的使用请参见这里。并使用钢笔工具,调整到适合的形态。
silverlight rss雏形
在右侧属性栏,调整圆形的填充为空。
Expression Design填充
调整笔刷样式。这里选择是丙烯笔刷->平滑干画笔。你可以选择你喜欢的样式。
Expression Design笔刷样式
目前达到的效果。
snap71
为了增强体感。在顶层增加一个圆形,并调整透明度。
Expression Design 圆形 透明度
完成效果。
Silverlight rss图标
接下来用文件->导出(Ctrl+E)为XAML Silverlight画布。并导入到Expression Blend的Silverlight项目中。
在Expression Blend画布中,创建一个Button控件。
button控件
创建Button样式模板。
blend样式模板
复制之前导入的图标XAML并替换Button默认样式,在XAML视窗模式下编辑。
blend vsm
可视化模式中效果如下。
可视化模式 rss
使用VSM给按钮增加鼠标移过效果。VSM更多详细资料参见这里
vsm blend
时间轴
演示地址

11 thoughts on “Expression Design 图标设计”

  1. 啊,我用一个笔刷加了个棱台效果好像有点样了。
    不过方框的左上角好像是接边的地方,笔刷就边尖了 =_=

      1. @小气的神, 啊多谢啦,这下我明白了。我刚接触这个,以前没什么基础,软件上就会点很简单的photoshop,慢慢学。 >_<

Leave a Reply

Your email address will not be published. Required fields are marked *