WPF学习笔记-用Expression Design制作矢量图然后导出为XAML

第一次用Windows live writer写东西,感觉不错,哈哈~~

1.在白纸上完全凭感觉,想象来画图难度很大,尤其是象我这样毫无美术基础,毫无艺术细胞的人而言。因此可以找个参照物,比如一张数码照片,对着这个图片描,可以大体上把物体的轮廓描出来。

2.Ctrl+C然后Ctrl+V,在Expression Design中添加一张位图,注意,此时Design会自动新建一个图层(layer),双击修改图层名为MousePhoto:

3.单击Layer面板右下角的New layer按钮,添加新图层MousePath,并将这个新图层移到MousePhoto层的下面:

 

4.单击MousePhoto层的锁按钮,锁定此层,防止图片移动。

5.在工具条中选择B-Spline工具:

6.开始描鼠标图片的外轮廓,沿着外轮廓放置几个锚固点。如果要作一条闭合曲线,可以将鼠标指针指向起始点,此时曲线会自动闭合,然后单击即可:

7.上面的几个点只是粗略的定位,现在可以精确的调整每个点位置,或添加/删除锚固点。

在工具箱中选择Direct Select工具,调整各个锚固点的位置,使闭合缺陷尽量与鼠标图片的外轮廓重合:

经验:平滑的曲线可以近似的看做一系列相切的圆弧连接而成。因此这些锚固点最好是放置在每段圆弧的切点和中间点处。

8.再次选择B-Spline工具,画鼠标滑轮处的缝隙。这几条缝隙中间有尖角,可以在添加尖角处锚固点之前按下alt键的方法来画尖角

外轮廓加一条缝隙完成后的样子:

9.重复以上动作,完成鼠标其余部分的描绘:

10.这个“素描”看起来似乎比较单调乏味,没有多少立体感,现在给她添加点颜色。在工具条中选择Selection工具:

然后选中外侧轮廓,在Appearance面板中选择Fill,设置两个Stop的颜色,

然后选择Gradient Transform工具,调整颜色梯度的渐变方向:

这样,我的鼠标就看起来稍微好些了:

上面的这个东东灰不溜秋的,还是很别扭。如果象实物一样是彩色的,就好看多了。不过这应该是属于美工(Designer)的任务了。

11.接下来将我的作品导出为XAML,以供Blend使用。

12.选中所画的鼠标,然后选择:File->Export…,弹出Export对话框:

配置Export Properties,然后点Export All按钮。

13.打开Expression Blend,选择Add existing items,将Design中导出的Mouse.xaml文件添加到项目中。打开这个文件,就可以看到我的鼠标了:

14.选中Mouse.xaml中的鼠标,然后Ctrl+C,打开上篇文章中的自定义按钮所在文件window1.xaml,Ctrl+V将其粘贴到Grid中,然后在window1.xaml中选中鼠标图案,将其拖到圆形自定义按钮中:

按住alt键,然后放开鼠标,即可将鼠标图片设置为圆形自定义按钮的Content:

 

时间: 2024-10-17 15:12:27

WPF学习笔记-用Expression Design制作矢量图然后导出为XAML的相关文章

WPF学习笔记-用Expression Blend制作自定义按钮

1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点击此按钮,选择Edit control parts(template)>Edit a copy... 3.在弹出的Create style resource对话框中,修改新按钮样式的名称 4.在左侧的Object and timeline面板中选中ContentPresenter元素,按Ctrl+X将此标记临时保存到内存中 5.选中Chrome,按Delete键删除 6.选中Template,在

quick-cocos2d-x学习笔记【6】——制作自定义效果按钮菜单

前面提到的是基本的菜单使用,还是很容易的,不过我们在商业产品中,经常看到的按钮都是非常好看,不光光是图片做得精美,而且动画效果也很棒.Candy Crash都玩过吧,看它们那个按钮,真的像果冻一样,效果确实很赞,所以我们也来做个,当然不是它那个效果,而且点击之后有一个抖动的效果.像这样, 好了,开始做个吧,我这个也是搬了一下coinflip中的按钮代码,算是学习一下. 创建一个views文件夹,里面创建一个MyButton.lua文件,这个就是我们的自定义按钮类了.实现的原理比较简单,在ui.n

WPF学习笔记4——Layout之2

下面简单介绍常见的面板. 一.Grid 1.Grid关于调整行列距离有三种方法:绝对大小,自动大小,比例大小.如下: <ColumnDefinition Width="100"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition Width="*"></Co

WPF学习笔记2&mdash;&mdash;XAML之2

三.事件处理程序与代码隐藏 例如,为一个Page添加一个Button控件,并为该Button添加事件名称Button_Click: <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ExampleNamespace.ExampleP

WPF学习笔记系列之一 (布局详情)

布局:StackPanel  栈布局:控件不会拐弯且多出的不再显示.DockPanel   停靠布局 吸在上边下边或左右.WrapPanel    环绕布局   一行控件会拐弯Canvas  进行基于坐标的布局 Grid中若不指定Grid.Row属性及Grid.Column则默认为:0行,0列.RowDefinitions ColumnDefinitions ShowGridLines=true <ColumnDefinition Width="100"></Colu

【WPF学习笔记】之 System.Exception 对象名 &#39;XXXX&#39; 无效。

我在运行vs时候发现项目报错,如下图: 报Exception错误,对象名"XXXXXX"无效. 经过调查得知,因为连接数据库的库名写错了,如下: 对应正确数据库的库名: 把库名改正确,问题就解决了. [WPF学习笔记]之 System.Exception 对象名 'XXXX' 无效.

Nodejs学习笔记(三)——一张图看懂Nodejs建站

前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试Nodejs>之后,代码编写环境就从Sublime转战到Eclipse下,感觉顺手多了.于是就跟着Scott老师学起了Nodejs建站的课程(推荐大家点进去看看),踏上了未爬先走的路子. 作为一个白里透白的小白来说,今天主要记录下如何用Nodejs搭建一个小小的网站,以及自己对于这种Nodejs建站的运

WPF学习笔记(XAML)

引言 这是我来院子里第一次写文章,由于工作一年半做了一些项目,但是真的感觉会的东西太少,而且基础笔记差,最近想学习一些东西,多写些文章,激励自己坚持学习下去. 由于准备用WPF做一个项目,驱动要先学习一下XAML的知识,XAML同时可以应用于WEB应用,移动应用的开发,所以有学习的价值. 概要. 下面开始进入主题,来写一下这几天XAML学习的东西. 概要 XAML(Extensible Application Markup Language),可拓展应用程序标记语言,是一种声明式语言,目的使UI

中标麒麟学习笔记3:试验制作wireshark二进制安装包

Wireshark是个优秀的网络包嗅探工具,对于学习理解网络知识有很大的帮助.中标麒麟桌面版本没有集成这一软件,所以想自己试着安装并学习一下如何制作RPM包. 学习了<fedora官网RPM包制作指南>后,觉得事情比较简单,主要就是编辑一个SPEC配置文件嘛,加上configure.make.make  install等指令,修改修改描述说明什么的就完活了.于是想先找个wireshark源码包,再找一个现成的SPEC文件,比如fedora21的SRPM包中就有,然后稍作修改就可以用rpmbui