Microsoft Expressionでも良いじゃない？

Siverlight2 beta2 がリリースされ、機能もツール群もだんだん揃ってきたようですので、そろそろ触ってみたいと思います。

まずは開発環境の準備です。必要なものはすべてフリーで入手可能です。
(インストールは1),2),3)次の順で行って下さいね。)

1)Visual Studio 2008 Professional Edition(試用版)
http://msdn.microsoft.com/ja-jp/evalcenter/bb655861.aspx

2)Visual Studio 2008 用 Microsoft Silverlight Tools Beta 2
http://www.microsoft.com/downloads/details.aspx?FamilyID=50a9ec01-267b-4521-b7d7-c0dba8866434&DisplayLang=ja

3)Expression Blend 2.5 プレビュー 日本語版
http://www.microsoft.com/downloads/details.aspx?displaylang=ja&FamilyID=32a3e916-e681-4955-bc9f-cfba49273c7c

注意したいのは．．．
【続きを読む】

早速SP1をインストールしたいと思いますが、まずは変更内容の確認を。

SP1で更新される内容
http://support.microsoft.com/kb/942686/en-us
http://support.microsoft.com/kb/942685/en-us

(機械翻訳で読みにくいですが、一応日本語はこちら。)
http://support.microsoft.com/kb/942686/ja
http://support.microsoft.com/kb/942685/ja

ポイントをまとめると...
【続きを読む】

マイクロソフトのサイトにExpression Designの日本語紹介ページが出来ていました。
http://www.microsoft.com/japan/products/expression/expression-design/default.mspx

評価版もちゃんと日本語がありますので、まだお試しでない方は是非。
．．．とサイトを見ていると、Service Pack1が公開になっています。

【続きを読む】

王冠っぽい凹凸のあるWeb Badge作成の続きです。元の星型を縮小して作った小さい星型の図形を使って、光と影をつくります。

小さい星型を2つに切ります。作成した図形を切り分けるには[ハサミ]ツールを使用します。図形を選択した状態で、左のバーのはさみの絵をクリックして下さい。


図形の頂点(パスといいます)、図形の左下辺りにある頂点の一つをクリックし、今度は図形の右上辺りにある頂点の一つをクリックします。2つの頂点とも、星の尖ったところでなく、凹んだところ(?)を選んだほうが、きれいに出来ますよ。
2つの頂点をクリックし終わると、図形2つの頂点を結んだ線が入ります。これで図形が切り分けできました。
【続きを読む】

今回は応用編です。
ガラスのような光沢のある、滑らかなテクスチャのWeb Badgeを作成しましたが、今度は王冠っぽい凹凸のあるWeb Badgeを作成してみます。
出来上がりはこんな感じです。


星型の描き方は同じです。色はピンク〜パープルのグラデーションにしてみました。カラーパレットの右端の2色を使っています。一応、ピンクはRGB(255,0,100)　#FF0064、パープルはRGB(200,15,169)　#C80FA0、です。
【続きを読む】

星型の図形を作成し、グラデーションで色付けし、
光沢と影をつけて、いよいよバッジに文字を載せれば完成です。

文字を書いて(描いて?)いきます。左ツールバーから[テキスト]("T"となっているボタン)を選択します。


文字のプロパティを設定してしまいましょう。最後には白い文字にしますが、書いているときに分からなくなってしまうので、取りあえず黒にします。塗りつぶしを黒、ストロークはなしにします。
テキストは[▼テキスト]のところから設定できます。お好きな文字種(ここでは"メイリオ")・大きさにして下さい。書いたあとでも変更できます。
【続きを読む】

仕上げの続きです。
図形の後ろに陰をつけて、少し浮き上がっているように見えるようにします。
前回描いた星型の図形を選択して、コピーします。コピーはツールバーの[編集]-[コピー]でも良いですし、Office等と同じく、Ctrl+Cでもコピーできます。
(※前回作成した光沢は図から省いています)
【続きを読む】

前回までで、星形の図形を描いてグラデーションをつけるところまでを行いました。ここから、やや立体的に見えるように手を加えていきますよ。

いよいよ"Web2.0っぽい"ガラスの光沢をつけていきます。
光沢というのは光が反射して白っぽくなっているということなので、半透明の図形を重ねて表現します。
ここではこんな扇形の図形を使っています。
【続きを読む】

前回は多角形ツールを使って星型を描きました。これから色をつけてゆきます。

図形の線、塗りつぶしなどのプロパティは、右パネルの[プロパティ]で設定します。
図形を選択した状態にして下さい。星を描いてから何も操作してなければ、選択された状態になっている筈です。
(選択している図形は赤い線と点で表示されます。選択が外れてしまった場合は、左端の黒い矢印を選択してから図形をクリックします)

図形を構成している線は"ストローク"と呼ばれます。ストロークはこちらのタブをクリックして設定します。
色は白(カラーパレットから選択できます)、線の太さは0ptにしておきましょう。
【続きを読む】

「Web2.0っぽい」とでも表現すれば良いのでしょうか、最近のWebサイトで良く見かけるのが、ガラスの質感のような透明感・硬質感のあるパーツたち。簡単にブラウザ上で作成できるジェネレーターツールもあったりしますが、そんなに難しくなく自分で作れるんですよ。

今回はExpression Designで　Web2.0　Badge、星形POPのようなマークを作成してみたいと思います。出来上がりイメージはこんな感じ。
【続きを読む】