ぽちのパチ釣り日記

今日は、「ＧＩＭＰ２（画像処理）」の簡単ボタン作成講座！を学びました。（画像処理）はホームページを装飾するのにかかせない。ツールの一つです。ホームページはブログ（日記）などとは違い、視覚にアピールポイントを多く求められます。

ブログは考え方としては、基本的に日記なので、視覚的に見せるより文章で表現することが大切です。なので文章力を多く求められるので画像等をあまり使わないで勝負したほうがいいように思います。

ポチも極力、画像などは控えるように意識してブログを楽しんでいます。ブログを始めて、約３か月になります。約１ヶ月前に、ランキングサイトの「ブログ村」というところに登録させていただきました。これも、ブログを楽しむためには「欠かせないツールの一つです」

というのは、ランキングサイトに登録していると「自分の書いているブログ」のアクセス状況がリアルタイムで分かるので「それを見るだけでも楽しい気分になれます」だって、自分の書いた記事を誰かが、見てくれているわけですよ。すごく、嬉しいことですよね。

２日前に、１日のアクセスポイントが５００ＰＶを突破しました。「ありがとうございます」これも皆さんの応援のおかげです。ほんとうに感謝しています。まだまだ若輩ものですが、これからも応援、よろしくお願いします。

ポチのスタイルは、１日１記事を続けていくこと、本当は１日に何回もブログを更新していったほうがいいように思えますが、ポチ的には１日の総集編をブログ（日記）にしたほうが「内容ある記事にまとめることができると考えています」

今日は学校で、画像処理について学びました。画像処理はホームページを作成するには欠かせない要素に一つです。これを使いこなせるかどうかが「プロと素人の分かれ道」になると言っても過言ではないと思っています。

ポチはこの先、Ｗｅｂ業界で生きていこうと考えているので「絶対に習得しておきたいツールです」やっぱ、新しい業界に「殴りこみ？をかける」のですから戦いに必要なアイテムは多く持っていたほうが有利です。そんでバトル開始です。

バトルに参加することもできないようでは話になりませんので「今日の授業は前から楽しみにしていました」今日の教材は、ボタンを簡単に画像に変えてしまうという「裏ワザ的な」ものです。これを知っているとお得です（笑）

説明しようかいな？どうしょうかいな？

一連の流れは、こんな感じです。今回は、ＧＩＭＰ２という、無料で画像編集ができるありがたい無料ソフトを使って加工しました。こらから、ホームページとうを作成しようという方は参考にしてみてください。ものすご、簡単に加工できますよ。


メニューボタンの作り方

１　GIMP2を起動します。

２　【ファイル】→【新しい画像】 から 幅が180px、高さ 40px の画像を作成します。

３　作成した画像が白でない場合は、メニュー部分の背景色である 白(#FFFFFF) で塗りつぶします。 　（色を選択する画面ではHTML表記が可能なのでそこに ffffffと入れて Enter を押すとその色が選択された状態になります。）

４　次に新しいレイヤーを追加します。レイヤーの名前は「立体」にしておきます。（レイヤーの追加は 【レイヤー】→【レイヤーを追加】から行います。）

５　【選択】→【すべて選択】をクリックした後、もう一度【選択】から【選択範囲の縮小】で値を 1 に設定し、OKを押します。その後【ツールボックス】から 　【矩形選択】を選択し、すべて選択で選択されている画像（動いている点線の中）をクリックします。

６　ツールボックスの下に【矩形選択】のオプションが出ているので、そこから【角を丸める】にチェックを入れます（チェックボックスの上から3番目）。半径を入力できるバーが出てくるので値を 6 に設定します。すると選択範囲の角が丸くなります。

７　その選択範囲の中を #999999 の色で塗りつぶします。

８　この選択範囲は後で使うので【選択】→【チャンネルに保存】をクリックします。レイヤーの画面からチャンネルの画面に変わっているので、 部分の一番左をクリックしレイヤー画面に戻しておきます。

９　まず、【選択】→【選択を解除】から選択を解除しておきます。次に、「立体」レイヤーを選択しているのを確認し、【フィルタ】→【マップ】→【バンプマップ】をクリック、バンプマップの選択リストが「名称未設定-00/立体-000」のようになっているのを確認し（なっていなければ選択リストから選択）、OKをクリックしてください。すると、塗りつぶした「立体」レイヤーがちょっと立体的に見えるようになったと思います。

１０　新規レイヤーを「色」という名前で作成します。

１１　の左から2番目をクリックしチャンネル画面にします。「選択マスク コピー」という名前のものがあるので、それを右クリックから【チャンネルを選択範囲に】をクリックします。すると、前回保存した選択範囲がもう一度選択された状態になります。

１２　レイヤー画面に戻り、「色」レイヤーをクリックし、【選択】→【選択範囲を縮小】から値を 1 にして OK を押します。これで選択範囲が 1 小さくなります。

１３　【ツールボックス】から【ブレンド】 を選択し、描画色を #DDDDDD に、背景色を #FFFFFF に、グラデーションは「描画色から背景色(RGB)」を選択、モードは「標準」、形状は「線形」に設定し、選択範囲の下から上にブレンドします。

１４　これで通常のメニューボタンの画像は完成です。「menu」という名前で xcf ファイル、jpg ファイルの両方で保存します。保存場所は「自分フォルダ内」の「image」の中にします。

１５　次に a:hover のときの画像を作成します。今回は単純にマウスをのせたら暗くなるようにマウスオーバー時用の画像を作成します。

１６　「色」レイヤーをコピー（レイヤー画面の下部分、 のボタン）します。「色 コピー」というレイヤーが出来るので、それをクリックして選択し、【色】→【着色】から「彩度」の値を 0 、「輝度」の値を -15 に設定し OK を押します。

１７　出来あがった画像を「menu_hover.jpg」という名前で保存します。jpg で保存した後、「menu.xcf」ファイルに上書きで保存しておきます。

１８　「css」の中の「mystyle.css」のメニュー部分を書き換えます。（終わりです）


Memo

白(#FFF)、黒(#000) の単色画像でなければ【色】→【着色】で簡単に色を変えることが出来ます。「色相」は色を変えるもの(詳しくはWiki参照）、「彩度」は色の鮮やかさ(0にするとモノクロ加工と同じようになります)、「輝度」は明るさみたいなもの( 0 にすると黒、100 にすると白になります)。


こんな感じです。参考にしてみてください。ちなみにポチの通っている学校は博多駅近くにある「ＩＴスキルアップ福岡」です。ここの先生は、ものすごく教え方がうまいので「ポチみたいな素人？」でも、どんどん！技を習得していきます。これから、Ｗｅｂ関係の仕事を考えている方々は、この学校を活用されることをオススメします。

明日は、何を学べるか楽しみですぅ・・・