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