img  

WEB素材&デザイン

RDF RSS XML
 
NAVI: トップ > 無料でWEB素材を作成する(PictBear編) > ボタンの表示色変更

ボタンの表示色変更

さて、次はボタンの表示色の変更です。
これはちょっと厄介かもしれません。

というのも、単色で作られたボタンなら単純に「塗りつぶし」で色を塗りなおしたり、「色の置換」を使えば簡単に変更できます。
ところがグラデーションを使ったようなボタンの場合は、複数の色を使っているため、そういうわけに行きません。

次のようなボタンの表示色を変更する方法を説明します。
画像

もちろん、このようなボタンもグラデーションがありますから単純な塗りつぶしではうまくいきません。

ためしにやってみましょうか?
画像

ほらね。(笑)
ま、これはこれで使えそうな素材ではありますが..(^^♪

今までに解説した方法も使用しますから、以前の操作はしっかり覚えておいてくださいね。
では、説明していきます。

ボタン色の変更

まず、「レイヤー」からボタンのレイヤー「レイヤー1」をクリックします。
画像

そして、「描画メニュー」の「自動選択」をクリックしボタンの外側の白い部分をクリックします。
画像

それから、コマンドメニューの「選択範囲(S)」−「選択範囲の反転(I)」をクリックします。
画像

次にコマンドメニューの「フィルタ(T)」−「3: カラー」−「3: グレイスケール」をクリックします。
画像は次のようになります。
画像

この状態で「レイヤー」から「新規レイヤー」をクリックして新しいレイヤーを1つ作成します。
画像

そして、そのまま「レイヤー」の「背面に移動」をクリックします。
画像

すると、「レイヤー3」が「レイヤー2」の下に移動します。
画像

このままの状態で、パレットから塗りつぶしたい色を選んだ後、コマンドメニューの「編集(E)」−「塗りつぶし(F)」をクリックします。

※この時、「描画ツールバー」の「塗りつぶし」を使用して塗りつぶしても問題ありません。

すると、次のような表示になります。
画像

次に「レイヤー」の今塗りつぶしたレイヤー「レイヤー3」をダブルクリックします。
画像

すると次のような画面が表示されます。
画像

「モード」を「スクリーン」に変更して「OK」ボタンを押します。
すると出来上がりです。
画像

後は、このままの状態でパレットから色を選択し、「スクリーン3」を塗りつぶすだけでさまざまな色のボタンが簡単に作成できます。
画像

また、前述の「ボタンの文字色変更」と組み合わせるとバリエーション豊かなボタンが簡単に作れます。
画像

※重ね塗りする時の注意点
文字色が白のままだときれいに重ね塗りができない場合があります。
その場合は、文字全体を範囲選択し、コマンドメニューの「フィルタ(F)」−「3: カラー」−「0: 階調の反転」 で、白文字から黒文字に変更し、レイヤーのモードを「乗算」か「スクリーン」を選ぶとうまくいきます。

Copyright (c) 2000-2011, all Rights Reserved atompro.net
update:2011/03/02