第2回　デザイン・データを作成する

2007.12.11

PROJECT KySS（プロジェクト・キッス）。四国のSOHO。薬師寺国安（フリーWebプログラマ）と，薬師寺聖（デザイナ，個人事業所自営，http://www.SeinDesign.net）によるコラボレーション・ユニット。XMLに関する記事や著書多数。両名とも，Microsoft MVP for Windows Server System - XML (Oct 2003-Sep 2008) http://www.PROJECTKySS.NET

　本稿で利用するExpression Design，Expression BlendをはじめとするMicrosoft Expression Studio製品の全機能をインストール後60日間にわたって利用できる「Microsoft Expression評価版」をマイクロソフトのExpression Studioサイトからダウンロードできます。Expression Design/Expression BlendのサポートOSは，Windows Vista，Windows XPService Pack 2です。Windows XP Service Pack 2の場合はインストール前に .NETFramework 3.0をインストールしておく必要があります。Expression Blendで作成したコードを編集するには，Visual Studio 2005がインストールされている必要があります。

　今回は，Expression Designを使った，シンプルな図形作成の手順を追ってみる。ドローツールになじみのないプログラマの皆さんも，ぜひ実際に試してみてほしい。

　Expression Designをインストールできたら，さっそく起動してみよう（注1）。ここでは，特によく使う機能をピックアップして，図1のような人の形を描いてみる。Adobe Illustratorを使ったことがある人なら直感的にすぐに使えるだろうが，手順に慣れるためにも実際に操作してみてほしい（注2）。

図1●今回作成してみる簡単な絵

新規ドキュメントを作成して，作図環境を設定する

　まず，新規ファイルを作成する。メインメニューの「ファイル/新規作成」を選択し，新規ドキュメント設定ウィンドウで，任意のファイル名を付ける。ここでは「person_sample」としている。プリセットには「カスタム」を，単位には「ピクセル」を指定し，任意の作図領域のサイズ，ここでは幅100px，高さ300pxを指定している（図2）。

図2●新規ドキュメントの作成と設定

　目印になる線（ガイド）を引いておくと作図しやすいので，左側のスケール上をプレス＆ドラッグして，ガイドを画面中央部分まで引き出し，拡縮率の％横の候補ボタンをクリックして，見やすい倍率に拡大する（図3）。

図3●ガイドを引き出し，表示倍率を調整する

楕円を作図して，不要部分をカットする

　作図方法は描き手の数だけあるが，ここでは人の頭の部分から描いていく。「楕円」ツールをプレスして，サブメニューの「楕円」ツールをクリックし，ガイドを参考に，任意の位置に任意のサイズの楕円を描く（図4）。位置を調整したい場合は，キーボードの矢印キーで移動させると手っとり早い。

図4●楕円ツールで楕円を描く

　今度は上のスケール上をプレス＆ドラッグしてガイドを引き出して，カット位置を定めてから，ハサミツールを選択する（図5）。楕円とガイドの2カ所の交点を順次クリックする。楕円が2カ所でカットされる。「選択内容」ツールをクリックし，さらに画面上のスペースをクリックして作業状態を解除する。再度「選択内容」ツールをクリックしてから，楕円上のカットする部分をクリックすると，選択状態になる（図5）。ここでキーボードの[Del]キーを押すと，選択部分を削除できる。