Windows Phoneアプリのアイコンを作るのに、VS2012ImageLibraryをいじって手を抜こうとしていたのだが、余計に面倒なことになってきたので、久しぶりにExpression Designを触った。某人からも「手ごろなお絵かきツールない？」と言われていたので、ここは一つチュートリアルを作らねばならないなと。
で、今日のお題はコレ→
分かってしまえば、「３分」で作れます。特にBlendを良く触る人は、「２分」で行けます。
用意するもの：
Microsoft Expression Design 4
3でも2でもあまり違いはありません。1は不明。Designはプロダクトから外れてしまったのですが、幸いなことに正式版が無償で公開されています！！
Microsoft Expression Design 4 (English)
このページは英語版ですが、下のほうに日本語版へのリンクがあるので、そこからダウンロードして下さい。すばらしい！
では、Designを起動します。
Designのファイルメニューの新規作成で、ドキュメントを作成します。
この新規作成ダイアログは、ドキュメントのサイズを指定できるようになっています。上の例では1024px×1024pxとしましたが、Designは「ベクター」ベースです。つまり、このサイズはあくまで指標であって、出力時にはスケーラブルに変更する事が出来ます。つまり、Designはペイント系ではなく、Illustratorのようなドロー系です。
ちなみに、Blend同様、数値入力ボックスの上でマウスをドラッグすると、手打ちしなくても値を上下出来ます。クリックすれば手打ちできます。これ良く考えてあるよね。但し、マウスボタンの調子が悪いと発狂するので、新調しましょう。
とりあえず、何も描かれていない状態です。
分かりにくいのですが、左下に「44%」と表示されています。これはキャンバスの拡大率です。もし、四角形がウインドウに収まっていないのであれば、ここを変更して丁度収まるようにして下さい。
（数値入力ボックスはドラッグできるんですよー？覚えてますか？）
まず、画角一杯の四角形を描きます。左のツールバーから、四角いアイコンをクリックし、出てきたサブメニューから「四角形」を選択します。
その後、キャンバスの左上隅から、右下隅までドラッグします。
キャンバスと同じ大きさなので分かりにくいですが、赤線の四角形が出来ました（赤線はこの図形が選択されていることを示します）。
やってみればわかりますが、キャンバスの四隅にはマウスポインタが「スナッピング」されるので、四隅の選択は非常に簡単です。ぎりぎりを狙って四苦八苦しなくても済みます。
ここで、右側のプロパティの「外観」に表示されている、色パレット（なんか綺麗にグラデーションしている面）で適当な色をクリックして選んでみて下さい。現在選択されているオブジェクト（つまり、今描いた四角形）の色が変わります。
もう色々触ってみたくなったカモ？ｗ まぁ、ちょっと我慢して続きを。今回作るアイコンの背景はグラデーションさせたいので、実際にやってみます。ちょっと小さいのですが、基本パレット内のグラデーションパレット（左右に白黒グラデーションしているパレット）を選択します。
すると、色パレットの下にグラデーションバーが表示されます。ここも見た目と裏腹に非常に高機能なのですが、今回は簡単に２色のグラデーションをちゃっちゃと設定します。グラデーションバーの左側の下に、小さい四角のセレクタがあります。例では黒色ですね。これをクリックします。
すると、色パレットは、グラデーションバーのクリックした個所の色を指定出来るようになります。そこで、青っぽい色を選択します。この例のように、青が選択できない、青じゃない色しか出ていない場合は、すぐ右側にある虹色の縦のバーから青色付近をクリックすれば、選択できるようになります。
グラデーションバーの色の変化と同じように、四角形のグラデーションも変化したと思います。今度は右側の四角のセレクタ（白色）をクリックして、同様にちょっと濃さの違う青色を選択します。
背景完成！と行きたいところですが、グラデーションの方向が違いますね。色パレット右下の、トランスフォームアイコン（形が良く分からないので、スクリーンショットを参考に）をクリックし、回転角度をいじってください。
ここでは90°にしてみました。
（数値入力ボックスはドラッグできるんですよー！？覚えてますか！？）
これで、当初のもくろみ通りの背景が完成。次はルーペを作ります。ルーペの肝は何といってもレンズの部分でしょう。中抜きの円をどうやって描くかです。心配無用、超簡単。
ツールバーから、楕円を選択します。
そして、円を描くのですが、まずは中抜きの円の外形の大きさにします。四角形と同じようにドラッグで描けますが、そのままでは文字通り「楕円」になってしまいます。ここでは真円にしたいので、シフトキーを押しながらドラッグして下さい。XY軸が1:1の真円として描画されます。
もし、円までグラデーションになってしまったら、円を描いた時点で（つまり円が選択されている状態で）、右側の色パレットの基本パレットから白色を選択します。
そして、もう一つ円を描いてしまいましょう。コピペ（Ctrl-C、Ctrl-V）でも良いですし、新たに円を描いても良いです。
円の四隅に小さい四角があります。名称が良く分かりませんが、一般的には「アンカー」でしょう。このアンカーをドラッグして、中抜き円の内径に近づけます（シフトキーと併用ですよ！1:1になります）。
図形などのオブジェクトを操作する（移動や変形など）場合は、左側ツールバーの一番上の矢印アイコンを選択しておくと、やりやすくなります。
さらに円自体をドラッグして、最初の円と同心円付近に持ってきます。
ありがちなのは、外形が大きい円の「下」に小さい円がもぐりこんでしまって操作出来ないと言う場合です。WordとかExcelで図形を描画した事があるなら分かると思いますが、同じように修正できます。
円を右クリックして「整列」「背面移動」で、図形の順序を変更して下さい。
さて、準備が出来たら、大小２つの円を同時に選択します。シフトキーを押しながら、二つの図形をクリックします。両方とも赤線で囲われるはずです。
そして、「オブジェクト」メニューの「パス演算」、「背面マイナス前面」を選択します。
何が起こったか分かりますか？WPFで言うなら、GeometryCombineMode.Excludeですよー？ 内径の大きさとして準備した図形で「引き算」を行ったわけです。これでルーペは出来たも同然。
ちなみに、このパス演算を使用すれば、三日月とか、どこかにありそうなマークとか、簡単に作れますね！
今回の場合、背景がグラデーションではなく単色であれば、内側の円の色を背景と同じにするだけでも行けますが、パス演算は強力なので、紹介しました。
後はルーペの柄の部分です。もう大体の操作方法は分かったと思いますが、一応やっておきます。まず、四角形ツールで長方形を描きます。
次にこの長方形を斜めに傾けます。長方形が選択されている状態で、下段中央付近に「回転角度」という数値入力ボックスがあります。これが正に選択しているオブジェクトの角度を表します。
例では（ドラッグして設定したので）45.1°になっていますが、手打ちすれば45°になりますよ。もうそろそろOK？
で、長方形の幅とか端処理をいじって、それらしくします。四角形の四隅を丸くするには、右のプロパティから「四角形の編集」「角の半径」という数値入力ボックスをいじります。ドラッグでぐわっと変えて、見ながら調節すれば良いでしょう。
おぉ、完成だ！ ….って、なんか変？
良く見ると、柄の長方形に縁取りが。
これは、オブジェクトの「ストローク」というやつです。図形を描くと、「ストローク（縁取り）」と「内面の塗りつぶし」の２つの属性が必要になります。今まで描いてきた四角形と円は、どちらも内面の塗りつぶし色だけを指定したため、縁取りがデフォルトのままになっているのです。
対処としては２通り考えられます。縁取りを塗りつぶしと同色にするか、縁取りを消すか、です。単純色なら同色でも問題ありませんが、今回のようにグラデーションを適用したり、テクスチャハッチングとかすると、模様が合わなくなって目立ってしまう可能性もあります。まぁ、そんな事に悩む頃には、どうすれば良いかも分かるでしょう。今は深入りせず、縁取りを消してしまいましょう。
図形を選択して、色パレットのタブを「ストローク」に変えます。
そして、基本色パレットから「なし」をクリックして、ストロークを無しにします。
これでOK。色パレット下のコンボボックスに「ストロークなし」と表示されていますね？ ここをいじるとストロークの色だけじゃなく、模様とかテクスチャとか。まぁ、後で遊んでみて下さい。
ちなみに、塗りつぶしの色を「なし」にも出来ますよ。ストロークにのみ色を指定すれば、塗りつぶさない図形とか、簡単ですね？
さあ、完成です (^o^)/~~
WPFやっている人なら、ここまでの時点で「こりゃまんまWPFじゃないか」と思うかもしれません。たぶんそうです。というか、このDesignをWPFで実装しない理由はないでしょう。
さて、最後にこれをPNGで出力します。ファイルメニューの「エクスポート」で、フォーマットをPNG、画像サイズを256×256にして、パスやファイル名を指定してエクスポート。最初に書いたように、Designはベクターベース（WPFなら当たり前）なので、指定したサイズで綺麗に拡大・縮小されますよ。
ちなみに、PNGにすればベクターデータはすべて失われてしまいます。ちゃんとDesignのフォーマットでも保存しておきましょう（拡張子はdesign）。エクスポートではなく、普通に名前を付けて保存でOKです。
そして、PNGなら当然、透明色も反映されますよ。半透明や複雑な中抜き形状の図形を、アルファチャネルありで出力できます。図形や文字のアンチエイリアスも反映されます。
DesignとPaint.NETがあれば、とりあえずお絵かきに困ることはないと思いますよ。
ここら頑張ってみますわｗ
お金を出して依頼しても高いし、作り直しとか考えると自分でした方がいい、でも慣れてないし。。
触りはシンプル、なのにとても奥が深いです。WPFの設計思想がそのまま反映されたようなツールです。すぐ習得できてバリバリ使えるのがミソ (^^)/
この例では、ストロークの縁を削除する方法が、もう一つあります。ストロークを生かしたいのなら、この方法がベストです。勝利のカギは「パス演算」だ！
うん、素晴らしい♪キジの脳みその私でも、良く分かりました。まずは1個作ってみる。→やった！となる。詳しく知りたくなったら、マニュアルを読みゃー良いじゃん、ってとこですわな。数値入力ボックスのドラッグの話などはkekyoさんの丁寧さが伺えますねー。引き続き、“キジ”グラマー向けの講座、お願いします！