ネットでお得

旅行・ホテル
出張・チケット

ボタンの作成

【楽天トラベル】

ウェブページには、さまざまな画像が使われます。デジタルカメラなどで撮影した写真画像のほかに、画像製作用のソフトウェアでイラスト画像を作成し、ウェブに掲載することもあります。またウェブページを制御するためのボタンやアイコン類も、ぜひ必要です。 今回は、そのようなボタン画像やアイコン類画像の作成の方法について解説します。

長方形のボタン 　まず、最も簡単な例として、長方形のボタンを作成して見ましょう。このようなボタンは、他のページや、別のサイトにリンクを張るときに、よく使われます。また、画面の飾りに使われることもあります。 これは、自分でウェブ用の画像を作成する勉強をはじめるのに最適のテーマです。 まず、画像処理ソフト PaintShop Pro を起動し、の画面上部の「ファイル」メニュータブから、「新規作成」を選択してください（ Photoshop など、他の画像処理ソフトでも同様です）。

新規作成の設定 　すると、左図のように、「新規作成」の設定画面が現れます。 「イメージのサイズ」は、ここでは小型のボタンをつくることにして、幅は５０ピクセル、高さは２０ピクセルとします。 「キャンバスの色」は、ボタンの色ですが、ここではデフォルト設定の「描画色」としておきます。 以上、設定したら、「OK」ボタンをクリックしてください。

とりあえず作成 　すると、左図のように緑色の長方形のボタンがとりあえず作成されました。 これは、今回は描画色を特に設定しなかったので、前に設定した描画色が使われ、それが緑色だったためです。 ここで描画色を設定し、ボタンの色を薄青に変更しましょう。それには、左図の 画面で左端の列にあるツールボックスからスポイドマークのツールをクリックしてください。 すると、マウスポイントにスポイドマークが付きますが、その状態で画面右端の列にある描画色の部分をクリックしてください。

描画色の選択 　すると、左図のように、描画色の選択の画面となります。まず、カラーリングの部分で青と緑の中間の部分をクリックし、次にそのカラーリングの中央にある正方形の部分で、明るさを選択します。 選択の結果は、カラーリングの下の枠内に表示されます。選択する色のデータ（HTMLコード）がわかっている場合は、それを枠内の色のデータの欄に書き込んで、設定することもできます。 選択が終了したら、「OK」ボタンをクリックしてください。

塗りつぶしツール 　上記のようにして描画色が選択されたら、今度はその描画色を使って先に作成された長方形ボタンを塗りなおします。 左図の画面で、左端の列にあるツールボックスの中で、バケツからインクをこぼすマークのツール（塗りつぶしツール）をクリックして選択してください。 すると、マウスポイントにバケツのマークが付きますが、その状態で先に作成した長方形ボタンをクリックしてください。

ボタンの色の変更 　すると、長方形ボタンの領域が、先に選択した薄青の描画色で塗りつぶされ、ボタンの色が変更されました。

文字ツール 　次に、このように作成したボタンの上に、文字列を記入しましょう。 それには、左端の列にあるツールボックスから、"A"のマークのツール（文字ツール）を選択してください。 文字ツールを選択してから、先に作成したボタンの上をマウスでクリックすると、下図の文字入力の設定画面が現れます。

文字入力の設定 　日本語のウェブページでは、「書体の種類」は「日本語」とします。 フォントのサイズは、このような小さいボタンの場合は、10から11の間で選択します。 「文字飾り」では、右側の色選択枠をクリックして、ボタンの上に表示したい文字列の色を選択します。 ここでは、ボタンの色が薄青なので、字の色は目立つように黄色を選択します。

これらの設定が終了したら、テキスト入力枠にボタンの上に表示する文字列を入力します。ここでは、「戻る」と入力しました。

ボタンの文字列 　すると、ボタンの上に「戻る」という文字列が記入されました。文字列の位置は、マウスでも調節できますが、微調が難しいので、「表示」メニューでボタンを大きく表示しておいてから、キーボードの"Ctrl"キーを押しながら矢印キーで調整するのがよいでしょう。

影つけの設定 　ボタンの文字列の作成は、基本的にこれで終了ですが、ボタンの上に置いた文字列に影をつけると、文字列の認識性が向上し、見栄えもよくなります。 文字列に影をつけるには、「カラー」メニューで「増色」→「True Color 24ビット」が選択されているのを確認したうえで、「イメージ」メニュー→「特殊効果」→「影を加える」を選択します。影の色や、影のぼかし具合などを設定できます。

文字列に影をつける 　文字列に影をつけると、文字列の部分が左図のように浮き出して、かなりはっきりと認識されるようになりました。

ウェブで表示する 　以上のようにしてできあがったボタンをウェブで表示すると、左図のようになりました。 最も簡単なボタンですが、見栄えもまずまずで、十分実用に耐えると思います。これを手始めに、画像処理の技術を習得して、カッコよいウェブを作成してください。