[Expression Design]使い方 - エクスポート

お絵かきしたものを PNG ファイル等に出力してみましょう。

メニューから ファイル - エクスポートをクリックします。コントロールキーとEキーがショートカットです。

出力設定画面が表示されるので、サイズや形式を指定して「すべてエクスポート」ボタンをクリックします。

出力結果はこんな感じです。

 

ちなみに出力できる形式は、以下の通りです。

• XAML Silverlight 3 キャンバス
• XAML WPF ResourceDictionary
• XAML Silverlight 4 / WPFキャンバス
• SVG
• PNG
• JPEG
• TIFF
• BMP
• WDP
• PSD
• PDF

XAML は Windows のプレゼンテーションの基盤である UI 言語です。
Microsoft の意図をくみ取ると、デザイナさんには最終的に Visual Studio を使ってもらいたいのかもしれませんねぇ。

1. Photoshop ( PSD )
   ↓
2. Expression Design
   ↓
3. Expression Blend
   ↓
4. Visual Studio

[Expression Design]使い方 - エフェクト

エフェクトの見え方を一覧的にしてみました。

各エフェクトを複合的に使うことが出来るので、その効果は無限大ですかねー。

[Expression Design]使い方 - お絵描き

ポリラインを使ってお絵描きをしてみましょう。

左端のツールバーからペンのところを長押しすると出てくるドロップダウンメニューからポリラインを選択してください。

星を描いてみよう

星の角のところを適当にクリックしてつなげます。（色はプロパティタブで変更してね。変更方法は「文字の操作」を参考にしてみてください。

次に角の位置の変更を行います。
左側のツールバーの個別選択を選択します。

これで角の赤点を移動出来るようになります。ドラッグ＆ドロップです。

グリッドにあわせてうまく整形しましょう。

サイズ変更

サイズ変更を行う場合、左端のツールバーから選択内容を選択します。

サイズ変更したいオブジェクトをクリックすると８個の点が表示されます。
それをドラッグ＆ドロップでサイズが変更出来るようになります。

縦横比固定

サイズ変更を行う際に縦横の比率はそのままとしたい場合、シフトキー＋ドラッグで縦横比を維持したままサイズの変更を行えます。

回転

オブジェクトを回転させる場合は、四隅のいずれかの点のちょっと外側をドラッグすることで回転します。

斜めに傾ける

各辺の中間にある点のちょっと外側をドラッグするとオブジェクトを斜めにヒョジすることが出来ます。

アンカーポイント削除

左端ツールバーのペンを長押しすることで表示されるドロップダウンメニューから「アンカーポイントの削除」をクリックします。消去したいアンカーポイントをクリックすることでアンカーポイントを削除出来ます。

アンカーポイントをなだらかに

アンカーポイントの変換を行うことで、角張っているのを滑らかにすることが出来ます。

星は星でも光っている感じのが出来上がります。

グループ化

同じ要素を選択し、右クリック - グループ化しておくことで、纏めて移動させたい時に１つだけ移動させれば付いてくるようになったり、あとから変更する際に一気に変更することが出来るようになります。

半透明にしよう

プロパティタブの外観のところにある不透明度を調整することで、半透明にすることが出来るようになります。

グラデーション

グラデーションラベルを選択すると単色からグラデーションに変更されます。

色の変更は下図の赤四角枠をクリックして色を選択することで行えます。

グラデーションを放射状にするには右端の「放射状グラデーション」をクリックします。

グラデーションのポイントも追加出来るし、グラデーションの中点も調整出来ます。

これぐらい出来ればある程度描けますね。

[Expression Design]使い方 - 文字の操作

まずは文字を操作してみましょう。

文字入力

左端のツールバーのテキストアイコンをクリックします。

描画エリアの任意の位置をクリックし、テキストを入力します。

文字色の変更

右上のプロパティタブの外観のところで色の変更を行えます。

枠線をつける

枠線をつけたい場合は、「外観」ラベルの下にあるアイコン２つの内、右側を選択状態にし、幅を入力することで枠線をつけることが出来ます。

文字間隔の調整

文字同士の間隔の調整はプロパティタブの「テキスト」にある「トラッキング」で調整可能です。

フォントのライセンス

気をつける必要があるのはフォントの著作権です。作成したものを Web で公開する際は気をつけましょう。MSゴシック等はリコーでしたっけ。メイリオや segoe 等は Microsoft で一応 Windows で開発したもの(画像など)は配布してもよいようです。（が、ソースが見つからなかったのであくまでも自己責任でお願いします。）
ちなみに Mac なら「フォントのライセンス？開発用のマシンに入っているんだから、配布する為のフォントだぜー」っていうスタンスだそうです。

[Expression Design]使い方 - グリッドの表示

初期状態で起動すると描画するエリアは真っ白ですが、グリッド表示で縦横を揃えやすく出来ます。

右クリック - グリッドの表示 をクリック

グリッドが表示されるようになりました。

メモリのサイズを変更したい場合は、メニューの 編集 - オプション - 単位とグリッド をクリック。

グリッドとガイド のところの　グリッド サイズ で調整出来ます。

単位はピクセルですかねー。

Microsoft Expression Design 4

がいつのまにか、無償で使用出来るようになっていたようです。早く言ってよー。

Microsoft Expression Design 4

赤いボタンを押すとダウンロードが始まりますが、英語版です。
日本語版にしたければ、Details を Expand して、Jananese をクリックでOK。

これで Photoshopとかなくても、簡単な素材程度であれば自作出来ますねー。