[Microsoft Expression Design] は Microsoft 社の新しいユーザーインターフェイスを提供するプラットフォーム向けの描画／デザインツールです。
http://www.microsoft.com/japan/products/expression/expression-design/default.mspx
[Expression Design] はベクター画像を描画する機能を前面に押し出して提供されています。公式サイトには機能概要や FAQ なども用意されていますが，まだまだ情報は少ないのではないでしょうか？
方や，ベクター画像に造詣が深い方だとすんなりと使える機能セットになっているんでしょうか？
今回は，４コマの色塗り程度にしかグラフィックツールを利用していない TLC が，「野生の勘で [Expression Design] を使ったらこうなった」を何回かに分けて報告しようと思います。
画像デザインにあまり慣れていない開発者視点で解説していけるといいですね。
この記事は，
Microsoft Expression Design 4.0.2712.0 に基づいて記述しています。
最初からベクター画像に手を出すとハードルが高い気がしたので，最初は TLC.com のヘッダー画像の合成をやってみます。
今まで描いてきたいくつかの画像をまとめて，TLC.com のキャラクタが散らばった画像を作成します。
仕上げに，Community Server のテーマにあるような上から下がってくるグラデーション効果を入れましょう。
こんなイメージの画像を [Expression Design] を使用して合成しいきます。
１ 新規ドキュメントを [カスタム] で作成します。
今回は横長になるようにピクセルを調整しておきます。
この辺はあとでトリムをかけるので適当なサイズでまずは始めます。
２ 合成する画像を貼り付けます。
[ペイント] などのグラフィックエディタ上でコピーしたクリップボード内の画像を貼り付けることもできます。
[エクスプローラ] から画像ファイルをドラッグアンドドロップすることでも貼り付けることができます。
ここでは，
- キャンバスにいくつかの画像をちりばめる
- 貼り付けた画像の角度を調整して模様っぽくアレンジする
といった風に作業していきます。
ヒント
[エクスプローラ] から D & D した画像のサイズ
[エクスプローラ] から直接ドラッグして画像を貼り付けると，キャンバスのサイズと画像自身のサイズとの比率にあまり関係なく引き伸ばされた状態で展開されてしまう印象があります。
貼り付けた画像のサイズ調整つまみを使用して適度な大きさに調整してあげましょう。
３ 左上の [選択内容] ツールをクリックします。
現在選択している画像の隅に四角いアイコンが表示されます。
この状態にすると，画像のサイズを調整したり，歪ませたり，回転させたりすることができます。
４ 画像を回転させます。
四隅の■アイコンの少し下あたりにポインタをもっていくと，曲った矢印のアイコンに変化します。
矢印アイコンの状態でドラッグすることで画像を回転させることができます。
ヒント
回転軸の調整
画像の回転を行う際の回転の中心は，[選択内容] ツールを使用してる状態で，画像の内部に表示されている白抜きの○アイコンです。
このアイコンもドラッグすることが可能で，回転の中心をずらすことができます。
５ 画像をちりばめる。
２～４を繰り返して，画像をちりばめます
ここまでで，既定の [Layer 1] が完成します。
レイヤーは画像を重ね合わせていくための透明なシートのようなものです。
６ レイヤーを追加します
グラデーションを作成するためのレイヤーを追加します。
右下の [レイヤ] パネルの左下，歯車のアイコンをクリックして，[新規レイヤ] をクリックします。
７ グラデーションをかける四角形を追加する
ツールバーで [四角形] を選択して，下地の画像を覆うように描画します。
追加した四角形にグラデーションをかけて，下地の画像が適度に透けるように設定していきます。
８ 四角形をグラデーションで塗りつぶす
[外観] パネル内の既定で「白地に赤い斜線」が表示されているタブをクリックします。
このタブが四角形の塗りつぶしを調整する機能です。
タブのすぐ隣に４つ並んでいる四角のうち [グラデーションの色] をクリックします。
既定では黒から白へのグラデーションが設定されているので，カラーパレットの下に表示されているバーを使って色を変更します。
今回は淡い青から白へのグラデーションを作成するので，黒い色が表示されているポインタをクリックしてから，好みの青になるようにカラーパレットをつかって調整します。
９ グラデーションを透過させます
下地の画像を透けて見せるために，四角形に透過を設定します。
[外観] パネルの中で [不透明度] を 80 位に設定して，透過させます。
10 グラデーションの方向を変更します
既定のグラデーションは左から右へかけられているので，効果を回転させて上から下へ変更します。
[外観] パネルの中で傾いた四角のアイコン [オブジェクトの塗りつぶしの移動，拡大縮小，回転，または傾斜] をクリックします。 [回転] を -90.0 に設定します。
11 グラデーションを調整します
既定のグラデーションだと少々薄い気がしたのでグラデーションを調整します。
グラデーションの色を指定しているカラーバーに表示されている色の■と [境界] を表わしているポイントをドラッグして，好みグラデーションになるように調整します。
ヒント
調整している間にグラデーション境界が増えてしまう
グラデーションのカラーバーを操作している際に，バーをクリックしてしまうと [境界] が増えてしまいます。
境界を増やしてしまうと，縞模様が均等になりづらく，見た目が乱れやすくなってしまいます。
しかも増やしてしまった境界を簡単には削除できないようなので，クリックしてしまったらすぐ Undo して [属性] をもとに戻してしまった方がよいでしょう。
グラデーションを好みの色合いに調整したら完成です。
12 画像をエクスポートする
[Expression Design] で作成する画像は，ベクター画像になります。
通常の画像として使用するためには，[エクスポート] してしまいましょう。
[ファイル] から [エクスポート] をクリックすることで画像を保存できます。
今回は [png] ファイルにエクスポートしました。
[Expression Design] は，いろいろな [モノ] をオブジェクトとして認識するので，「とりあえず配置してあとから調整する」というプラクティスが取りやすいような気がします。
ふつうのグラフィックエディタではレイヤーを何枚も何枚も重ねながらちょっとづつ処理していかなければならない作業が，とくに意識せずにできるようです。
次回からは実際にベクター画像を作成しながら，[Expression Design] の能力を引き出していきたいと思います。