《写真資料-012》ボタンを作ってみよう！

ステップ_1.
画面左上が新規画面を開いたところで、レイヤーパレットを見るとブルーにマークされ、中に｢背景｣の文字が見えます。
｢背景｣ (白無地) 画面を、ボタンを作り込むために｢レイヤー｣に変換します。

ステップ_2.
｢背景｣レイヤーにカーソルを持って行くとカーソルが、手の形に変わりますのでダブルクリックします。(｢赤い矢印｣の部分です)
するとサンプル画像の右下に見える｢新規レイヤー｣という画面が出てきて、この中でレイヤーに名前を付けて｢OK｣ボタンを押すと
背景がレイヤーに変わります。(ここでは｢レイヤー0｣そのままにしました。また、レイヤーの透明度を決めたりといった調整も出来る)

白地の背景画像がレイヤー状態に変わり、いろいろなフィルター操作・エフェクト処理が出来るようになりました。

ステップ_3.
では、このレイヤーに特殊効果を掛けるボタンをPhotoshop Elementｓ画面上のメニューバーの｢ウィンドウ｣から｢レイヤースタイル｣を選択します。
｢レイヤースタイル」パネルから、ガラスボタンを選択、中から｢ガラス(青)｣を選んで白い部分にドラッグします。

ステップ_4.
ドラッグされた白地の画面にご覧のような模様が出来ました。
このままでは中央に文字を載せにくいので、下の見本の様にするために、調整パネルを上のメニューバーのレイヤーから
レイヤースタイル／｢スタイル設定｣を呼び出します。

ステップ_5.
レイヤースタイルの調整をする｢スタイル設定｣画面で｢光彩(内側)サイズとベベルサイズ｣のスライダーをそれぞれ少しずつ動かして見本の様になるように調整します。光彩のスライダーを動かすと中の模様が変化します。ベベルサイズのスライダーを変化させるとコーナーの角度と幅が変化します。

ステップ_6.
どうですか、これで中央部分が平らな感じになって文字も載せやすくなったデスね。
ここで先週まで説明してきたテキストツールを持って、・・・画面左の細長いツールボックス右側にある｢T｣マークをクリックカーソルを画面の文字を入れる位置に持って行き入力すれば、ご覧の通りです。

今回は白地にしましたが、色を付けることも出来ます。前回を参考にやってみてください。

ステップ7.
この後は、ファイルをどのように使うかによりますが、保存をします。
エレメンツには、｢WEB用に保存｣と言う保存ボタンがあります。すると、
下のように2分割の保存設定画面になり、どのような形式のファイルにするかが選択できます。

と言った具合ですが、なれればこの一連の作業は5分もあれば出来ます。

さぁ!　皆様独自のオリジナルボタン。だけでなく画面の大きさを変えれば、バナーにも出来ます。
レッツトライ!　お手元のマシンでおためしください。　(↓下は、おまけです)

《閉じる》　