Moz - 絵入りボタンを作る

　簡単なベタ塗りのボタンの作り方が分かったところで、次に、ボタンに絵を入れてみます。絵といっても風景画とか漫画とかそういう絵ではなくて、簡単なシンボル・・・つまりアイコンですね・・・を入れてみることにします。現在、Shooting Start Squareでは以下のようなボタンがあります（そして、思いっきり使いまわしています）。

こういうボタンを作ってみることにします。以下、とりあえず再現フィルム（笑）なので、実際にこのサイトで使っているボタンと同じデータが出来上がるとは限りません。あらかじめご承知おきください。

　まず手始めに、

を作ってみましょうか。こういうボタンを作る時は、最初にドロー系ツールで大き目に描いておいて、ペイント系ツールに持ってきて縮小するのがおきらくです。ドロー系ツールならば、気に入ったバランスになるまで何度でも描き直しができます。そして、ペイント系ツールで縮小した時に勝手にアンチエイリアス（ななめ線のギザギザを目立たなくする処理）がかかって、きれいなボタンになります。じゃ、早速ひとつ描いてみましょう。

　この程度の大きさのボタンの場合、Windows Drawだとだいたい2cm角くらいで描くとちょうどいいようです。後でペイント系ツールに持っていって出来上がりのサイズを調整しますので、大き目に描いておくといいでしょう。簡単な形状の場合、ドロー上で色を付け、影まで付けてしまって構いません。影とハイライトは図形をちょっとずらして、淡い色と濃い色を付けておきます。今回は出来上がりサイズを24X24ピクセルにするつもりなので、2cmの約1/24（1ピクセル分）ということで、1mmだけずらしてみます。また、アイコンの部分は引っ込んでいるように見せるため、左上にずらしたものを濃色に、右下にずらしたものを淡色にします。

　念のために言っておきますと、各図形は「線なし」に変更されています。あと、オブジェクトの重なり具合に注意してください。後から描いた、あるいはペーストした図形が上に来るので、そのままだと影とハイライトが上になってしまいます。本体を選んで右クリック→「一番上へ移動」を行うか、メニューから「描画」を選び、適当に調整してください。上から本体、ハイライト、影、バックの順にします。

　これを全選択して「編集」「コピー」して、PhotoMagicへ「編集」「新イメージとして張り付け」します。すると、ドローデータがビットマップデータに変換されて編集できるようになるでしょう。これを縮小します。出来上がりサイズを24ピクセルにしたいので、「イメージ」「サイズ変更」で、スマートサイズを使用して24X24ピクセルにします。

　もうこれでほとんど出来上がりですが、周囲の影とハイライトがないので、ボタンを作るの要領で周囲に影とハイライトを付けます。

　さて、次にちょっと複雑な

を描いてみる事にします。ドロー系で描いてペイント系で縮小という手順は同じですが、今度はドロー上では白黒にして、色や影はペイント系で付けてみる事にします。出来上がりの大きさは先ほどと同じ24X24ピクセルとして、ドロー上では2cm角で画いてみます。

　ちょっとややこしそうですが、実はそうでもないです。まず最初に三角形を描いてしまいます。次に、大きな丸（この時点では真円）を描きます。初めから位置を合わせようとすると面倒なので、左端と右端だけを合わせます。すると、上端・下端が合わないので、上下に移動して下端を合わせます。次に、右に縦に並んでいる円を上の方から三つ描きます。一番下の小円と、さっき描いた真円の中央線が合ってないとおかしなことになるので、中央が合うように大円の方を上下方向に1mmだけ縮めてしまいます。

　あとは真ん中にくり抜くように位置している中円を描き、三角形と大円をつなぐ「首」の役割をしている四角形を描いておしまいです。ちなみに、この絵はグリッドを1mm単位にして描いています。先ほど大円を縦方向に1mm縮小したため、首の距離は1.5mmになっています。これだとグリッドに合わせて描けないので、適当な寸法に描いて、右クリック→プロパティの「全般」で、「縦横比維持」のチェックをはずし、Yサイズを0.05cmだけサクっと調整してしまいます。これでおしまい。

　次に、これを塗りつぶします。今回は影と色はペイント系の方で付ける予定なので、その鋳型として使うために、必要なところを黒で塗りつぶします。不要なところは白ですね。すると、大円の不要部分が黒く残ってしまいますが、これは長方形を一つ重ねて白く塗って対処してしまいます。本格的にはツール・切断やツール・クローズ連結あたりを使って形を整えるのですが、どうせ最後はビットマップになってしまうので、これでよしとしましょう。

　これを、例によって全選択・コピーして、PhotoMagicへ持っていきます。これを原図にするので、この絵は非可逆な編集をしてはいけません。他の絵はすべてこの絵から派生させます。貼り付けたらとりあえず76X76ピクセルになったので、最終的には約1/3にする事になります。これも頭に入れて作業をします。

　まず、さくっと影を作ってしまいましょう。影は出来上がりサイズで1ピクセルちょっとという事にして、4ピクセル分にしてみます。先ほどの図形をまずコピーして、新イメージ貼り付けしておきます。光が左上から当たっていると仮定すると、影は右下に伸びますから、1ピクセルずつずらしながら、さらに3回、この新規イメージの上に貼り付けます。貼り付ける時に「減色混合」で貼り付けてください。どんどん影の面積が広がっていきます。

　ここで、PhotoMagic6の人は一度ベースに結合し、この絵を白黒反転してもう一度元の絵を貼り付けます。ここでも「減色混合」を選べば、影が出来上がるはずです。混合方法で何を選べば分からなくなったら適当に選んでいればそのうち正しい結果が得られます（笑）。このままだと白黒反対ですけど、反転すればすぐ直りますね。

　まあ、これで影はほとんどおっけーなのですが、正確には「影は開口部からはみ出さない」という条件があります。元絵の黒い部分は低い場所で、白い部分は高い場所になります。高い場所で光が遮られて低い場所が暗くなるのが影ですから、高い場所、つまり白い部分に影がはみ出しているのはおかしいのです。今回は影が出来上がりで1ピクセルなのでさほど気にならないと思いますが、一応直しておきましょう。元絵を重ねて明色混合すれば、影が出てきてはいけない部分は真っ白になりますね。

　次にハイライトを作っておきます。ハイライトは出来上がり1ピクセル分という事で、3ピクセル幅にしておきます。元絵をコピーし、新規イメージを作っておいて、右下にずらしながら減色混合で3枚貼り付け、PhotoMagic6の場合はベースに結合しておきます。白黒を反転させ、そこに元絵を減色混合で貼り付ければおしまい。

　これを、色をつけながら組み合わせていきます。色の付け方ですが、基本的には色を付けたいところを白にして、「増加」モードで塗ります。二色に塗り分けたい部分は白黒反転したものを二色目で「増加」モードで塗り、二枚の絵を加色混合すれば所望のものが得られます。多少面倒ですが、この方法だとアンチエイリアスのかかった絵でもきれいに塗り分ける事ができる、という利点があります。まあ、今回の場合は最後に縮小する予定なので、アンチエイリアスもなにもないんですが。

　というわけで、まず、元絵をコピーして新規イメージを作り、、白い分部＝藤色の部分を「増加」モードで塗りつぶします。次に、元絵をもう一度コピーして新規イメージを作り、白黒を反転してから「増加」モードで藍色の部分を塗りつぶします。両者を加色混合することで、塗り分けられた絵ができあがります。

　加色混合でハイライトを、減食混合で影を貼り付けて、透明度を調整し、縮小してちょいとアンシャープマスクをかけます。後は、今までと同じように、周囲の影をハイライトを付けてできあがり。

　まあ、最近のフォトレタッチソフトの場合、与えられた素材をボタンにする機能は大抵ついていると思いますし、エンボス効果を使っても比較的簡単にそれなりのものができるのですが、それでは思い通りにならない時などに、これらの方法が役に立つ事でしょう。

本館入口 / 百舌鳥のおきらくお絵描き / 絵入りボタンを作る

ご意見・ご要望の送り先はあかもず仮店舗の末尾をご覧ください。

		とりあえずコピー・新イメージ貼り付けして、白で塗りつぶす
		この白べたをコピー・新イメージ貼り付けして、反転・左上にずらして貼り付け（＋ベース結合）・反転で影の部分ができる
		同様に、反転・右下にずらして張り付け（＋ベース結合）でハイライトができる。
		影を減色混合・透明度30%で、ハイライトを加色混合・透明度30%で貼り付け（＋ベース結合）してできあがり

		影とハイライトを重ねる。透明度はどちらも50%にしてみた。
		24X24ピクセルに縮小。
		アンシャープマスクを適用。輪郭がきりっとしたのが分かる。
		枠の影とハイライトを付けて終了。

		新イメージ貼り付け直後。まだくっきりはっきりという感じ。
		縮小後。あら不思議、凹凸があるように見える。
		ちょっとアンシャープマスクをかけてみた。


塗りつぶしたところ。すべてのオブジェクトは線なしに変更されている。先ほどの図に比べて、長方形のオブジェクトが一つ加えられている。	加えた長方形のオブジェクトが分かるように灰色で色を付けてみた。外枠も極細線にしてある。オブジェクト間の上下関係にも注意。

		これが元絵になる。この絵は編集してはいけない。作業する時はこの絵を一度コピーし、新イメージ貼り付けしてから行う。
		影を作成してみた。

		出来上がった影
		分かりやすいように標準モード透明度66%で重ねてみた。三角形の左下の濃い灰色の部分が影が出てきてはいけない部分。


藤色部分だけ塗ったもの	藍色部分だけ塗ったもの	両者を加色混合したもの