オリジナルのメニューボタンを作ろう！（半透明ボタン編）
【GIMP紹介記事】
・オリジナル画像を作成しよう！【GIMPってどんなソフトなの？】
ブログを持つなら是非ともカスタマイズして欲しいと思うところがあります。
それはメニューボタン（グローバルナビゲーション）の設置です。
どうしてそう思うのか？は
【過去記事】
を御覧くださいませ。
ということで今回はメニューボタンの作成チュートリアルをお届けしたいと思います。
作成するデザインは以前、アメブロカスタマイズをさせて頂いた
エクステリア＆ガーデニングデザイナーみきがお伝えする売上を安定させる秘訣 様の
ブログで作成した半透明のマウスオーバーのメニューボタンを１から解説していきます。
実際の完成後のメニューボタンは下記のようになります。
※メニューボタンが半透明で分かりにくいため青の背景色をつけています。
では作り方です。
まずは【ファイル】→【新しい画像】からメニューボタンのサイズを指定します。
すると下記のようなキャンバスが開きます。
次に、レイヤーパレットの中の背景レイヤーを【不透明度 40.0】に合わせます。
白背景が透明になりました。
今度はまた新たにレイヤーを作成します。
【レイヤー】→【レイヤーを追加】で新規レイヤー追加パレットが開きます。
レイヤー名を枠とつけ【レイヤー塗りつぶし方法】を白に設定します。
すると下記のように背景レイヤー（半透明）の上に白で塗りつぶされたレイヤーが出来ました。
次に、 【選択】→【すべて選択】をクリックしたら、また同じく【選択】→【選択範囲の縮小】で
下記の設定に合わせます。
そして、キーボードの【Del】をクリックし選択範囲内を削除します。
さらに残った枠をレイヤーパレットから【不透明度 60.0】に合わせ半透明にします。
これでメニューボタンの枠が出来たので今度はテキストツールで【HOME】と打ちます。
センターに配置したい場合は、下記のようにガイドを表示させます。
ガイドの表示の仕方はキャンバスの上と左のルーラー（ものさし）からそれぞれマウスを
ドラッグして任意の位置へ持ってきます。
次に、レイヤーパレットのHOMEレイヤーを右クリックし【テキストを選択範囲に】を選択します。
そして、【選択】→【選択範囲を拡大 5px】
さらに、【選択】→【境界をぼかす 5px】 に設定します。
そのままの状態で新規レイヤーを作成します。
【レイヤー】→【レイヤーを追加】でレイヤー名をHOME背景とします。
そして、【塗りつぶしツール】を使って白 #fffff で塗りつぶします。
塗りつぶしができたら、
レイヤーパレットの【HOME背景レイヤー】と【HOMEレイヤー】の順番を入れ替えます。
そうすると下記のようにHOMEの下に白背景が表示されます。
これで完成ですが、ここからメニューボタンにマウスを載せたときに透明に切り替わるように
もう１つのメニューボタンを作っていきます。
では、【画像】→【キャンバスサイズの変更】をクリックし、
幅のサイズは変えずに高さを 【50px】から 【100px】にします。
すると、もう１つ分のメニューボタンのキャンバスサイズが下に作成されます。
では、その増えたキャンバスサイズのスペースを使ってマウスカーソルを合わせたときに
透明に切り替わるメニューボタンを作成していきます。
【HOME】＆【HOME背景】＆【枠】＆【背景】レイヤー４つそれぞれをレイヤーパレットから
右クリックし上記のように【レイヤーを複製】します。
次に、複製したレイヤー４つを同時に下に移動させるためにロックをかけます。
そして【移動ツール】を使い下記のように移動させます。
そして、複製した背景レイヤーを【不透明度 20.0】に設定したら完成です。
では、保存方法です。
【ファイル】→【名前をつけて保存】をクリックし、画像に名前をつけ、保存先を選び
そして画像の保存形式を選択します。
透明処理をした画像はPNG形式でないと透明度が再現されませんのでご注意ください。
設定したら【保存】をクリックし下記の設定でエクスポートを選択します。
最後にまた【保存】を選択したら完了です☆
【関連記事】
・記事内ロールオーバーを活用しよう！ 【HTML＋CSS編集】
ピュタゴラスの復讐 ①
・数そのものを研究する算術
空間における数を研究する幾何学
時間の中の数を研究する音楽
時間と空間の中の数を研究する天文学
・単純な数の比に基づく音同士が調和することを発見したピュタゴラスは
やがてこの関係を宇宙の秩序に拡大し「天界全体、あるいは目に見える
宇宙全体が音階を成しており数なのだ。」と主張した。
