メニューボタン素材の文字入れ加工方法
前の記事 CSS メニューを作っちゃおう7 画像の置き換え はトライしてみましたか？
まだ読まれていない方は先に CSS メニューを作っちゃおう7 をお読み下さい
文字の合成のやり方です
素材置き場：（あけおめがまだ付きっぱなしなのでうざくてすみません）
青系ボタン http://ameblo.jp/ab-test/entry-10650879996.html
緑系ボタン http://ameblo.jp/ab-test/entry-10650922058.html
桃系ボタン http://ameblo.jp/ab-test/entry-10650898070.html
こちらにありますメニューボタン用の画像・・・
ゆうこせんせい さまでもメニューボタンを配布されていますよ
【加工】ヘッドメニューボタン お持ち帰りのさいにはコメントにカキコをお願いします
画像編集ソフトをお持ちの場合はそれを使って文字を合成してください
何にもないよ～って方は・・・
以前に紹介しました pixlr
http://www.pixlr.com/editor/（日本語がおかしなところもありますが気にしないで）
普通の？メニュー画像とマウスオーバー時の画像と2つ画像を使う場合で説明します
まずは2つの画像をそれぞれ開きます ファイル→開ける
どちらでもかまいませんので片方の画像を選択して 編集→全部を選択
編集→コピー
別の方の画像を選択してから 編集→ペースト 新しいレイヤーが出来ます
最初にコピーした画像は×で消します（保存しなくてかまいません）
なぜ・・こんなことをするのかというと・・
2枚の画像の同じ位置に同じサイズの文字を置きたいからなんです・・
マウスがのった時に文字の位置がずれないようにしたいんです
そのためにレイヤーが使えるpixlrで説明しています
普段表示されているメニューの文字とマウスオーバー時の文字が違う場合は
普段は「読者登録」でマウスがのった時は「うれし～」・・こんな場合は・・
このようなことをする必要はありません
文字が違うのですから位置とかが変わっていても大丈夫なんで
それぞれの画像ごとにココから下を参考に文字を載せてください
では・・文字（メニュ項目）を入れていきます
文字ツールを選択して・・
画像の上の適当なところでクリックすると文字を入力する枠が現れます
文字位置は後で調整しますのでだいたいの位置でかまいません
文字（メニュー項目）を入れてフォント・サイズ・スタイル・文字色を決めます
文字が決まったら移動ツールを選択して文字位置を調整します
（キーボードの←↑↓↓矢印キーを使って微調整します）
次に文字レイヤーをコピーします（マウスがのったときの文字色を変えるため）
文字レイヤーの上で右クリック→レイヤーを複製
↑これで同じ位置に同じサイズで文字が入ったレイヤーが2つ出来ました
片方は最初に表示される画像用に加工してもう片方はマウスオーバー時に表示される画像用に加工します
文字レイヤーが複製されたらレイヤーの右にある□をクリックして文字レイヤーとどちらかの画像のチェックを外します
これでチェックの付いているレイヤーだけが表示されます
次に文字を装飾します
チェックの付いている文字レイヤーの上で右クリック→レイヤーをラスター化 （photoshop でしたら ラスタライズですね）
コレをすると文字が画像になります（文字ツーツで文字の変更が出来なくなります）
※ラスター化しなくてもここから先のレイヤースタイルはつかえるのですが・・・一応ラスター化のやり方として説明します
文字レイヤーが普通のレイヤーになりました・・
レイヤーの上で右クリック→レイヤースタイル
文字に影を入れたり光をつけたり・・自由に加工します
自分で気に入るまでいろいろトライください・・・
これでよければ ファイル→保存 （ファイルの形式はPNGで保存します）
※PXD形式で保存するとレイヤー含めてこの状態を保存できますので途中でやめる場合や後で修正する場合に便利です
片方の画像が完成したら次はもう片方の画像を作ります
先ほど使ったレイヤーのチェックを外して・・
別のレイヤーにチェックを入れます
文字レイヤーを選択
最初に文字レイヤーをコピーしたのでサイズや位置は同じです
なので・・ココでは文字の色を変更してマウスがのったときに文字色が変わるようにします
文字色を変更したら・・先ほどと同じように文字レイヤーの上で右クリック→レイヤーをラスター化
レイヤーの上で右クリック→レイヤースタイル・・・
先ほどと同じように文字を装飾してＯＫでしたら
ファイル→保存 先ほどとは別のファイル名をつけて下さい （ファイルの形式はPNGで保存します）
※PXD形式で保存するとレイヤー含めてこの状態を保存できますので途中でやめる場合や後で修正する場合に便利です
これで普通のメニューボタンとマウスがのった時用のメニューボタンの2つが出来ました
pixlrで文字を加工しないで別のソフトで文字だけを加工して透過PNGで保存
参考： http://ameblo.jp/exlink/entry-10504039719.html
メニューボタン画像の上に透過した文字画像を乗せてもできます
上で最初にしたように2枚開いてから文字の画像を全部を選択してコピー
それをボタン画像の上にペーストします
サイズがあっていなければ自由変形や位置を調整してボタン画像に合わせます
工夫して楽しいメニューボタンを作ってくださいな