 |
ボタンの作成 |
 |
|
ウェブページには、さまざまな画像が使われます。デジカメなどで撮影した写真画像のほかに、画像製作用のソフトウェアでイラスト画像を作成し、ウェブに掲載することもあります。またウェブページを制御するためのボタンやアイコン類も、ぜひ必要です。 画像処理入門講座の今回は、そのようなボタン画像やアイコン類画像の作成の方法について解説します。 |
|
自分でウェブ用の画像を作成する勉強をはじめるのに、最適のテーマです。 まず、画像処理ソフトPaintShop Proを起動し、の画面上部の「ファイル」メニュータブから、「新規作成」を選択してください（Photoshopなど、他の画像処理ソフトでも同様です）。 |
|
「イメージのサイズ」は、ここでは小型のボタンをつくることにして、幅は５０ピクセル、高さは２０ピクセルとします。 「キャンバスの色」は、ボタンの色ですが、ここではデフォルト設定の「描画色」としておきます。 以上、設定したら、「OK」ボタンをクリックしてください。 |
|
ここで、改めて描画色を設定し、このボタンの色を薄青に変更してみましょう。 それには、左図の 画面で、左端の列にあるツールボックスから、スポイドマークのツールをクリックしてください。すると、マウスポイントにスポイドマークが付きますが、その状態で画面右端の列にある描画色の部分をクリックしてください。 |
|
すると、左図のように、描画色の選択の画面となります。まず、カラーリングの部分で青と緑の中間の部分をクリックし、次にそのカラーリングの中央にある正方形の部分で、明るさを選択します。 選択の結果は、カラーリングの下の枠内に表示されます。選択する色のデータ（HTMLコード）がわかっている場合は、それを枠内の色のデータの欄に書き込んで、設定することもできます。 選択が終了したら、「OK」ボタンをクリックしてください。 |
|
上記のようにして描画色が選択されたら、今度はその描画色を使って先に作成された長方形ボタンを塗りなおします。 左図の画面で、左端の列にあるツールボックスから、バケツからインクをこぼすマークのツール（塗りつぶしツール）をクリックしてください。すると、マウスポイントにバケツのマークが付きますが、その状態で先に作成した長方形ボタンをクリックしてください。 |
|
|
|
文字ツールを選択してから、先に作成したボタンの上をクリックすると、下図の文字入力の設定画面が現れます。 |
|
「文字飾り」では、右側の色選択枠をクリックして、ボタンの上に記入する文字列の色を選択します。ここでは、ボタンの色が薄青ですので、字の色は黄色にします。 これらの設定が終了したら、テキスト入力枠にボタンの上に記入する文字列を入力します。ここでは、「戻る」と入力しました。 |
 |
|
|
影をつけるには、「カラー」メニューで「増色」→「True Color 24ビット」が選択されているのを確認したうえで、「イメージ」メニュー→「特殊効果」→「影を加える」を選択します。影の色や、影のぼかし具合などを設定できます。 |
|
|
|
最も簡単なボタンですが、見栄えもまずまずで、十分実用に耐えると思います。これを手始めに、画像処理の技術を習得して、カッコよいウェブを作成してください。 |
|
|