ゴーライブな日々9回目
ボタンを作る(フォトショップエレメント篇)
個人的にはフォトショップ6を使ってますが同様のことができると詠っていますし、結果として買わされましたので使ってみます。

ボタンはこんな感じになります。
津久葉のモックアップをみての通り非常にさみしいものです。
他人のページを作るときですが、「ない情報」をいかに簡潔にまとめて「よさそう」に見せるかが鍵のような気がします
趣味のページなら、個人的な「主観」を入れまくって「星野監督ステキ☆」などということが許されますが、仕事で許されるのは客観的な「事実」だけです。
幸いにも装飾については若干の自由が利くのでここで何とかするしかありません
(*筆者は阪神ファンです)
フォトショップエレメントの画面。
フォトショップ6とフォトデラックスをミックスしたような画面です。
ぱっと見て気づくことは「ペンツール」がないことでしょう。
ファイル→新規作成でこれが出ます
フレームの左側のボタンなので、そんなにおおきな幅にはできません、120〜80pixelぐらいと短くて細いものが若いページには多いですが、字のみやすさを考えれば最低でもこれくらいの横幅が必要です。
今回、ロールオーバーは使いませんので単色です。
初めに新規レイヤーを作ります
レイヤー1ができました
なぜ背景に作業しないかというと「背景」はいろいろと保護がかかっていて後から面倒だからです。
フォトショップではレイヤーに対して作業を行うと考えてたほうがいいです。
(ダブルクリックでレイヤー0に変換してもいいですが)(^^;;;;;;


そういえば何でbだけ小文字なんでしょう?
ちなみに6.0や5LE、5.5にはない独自の表現です
の上の(ここでは青色)の部分をクリックで左のような小さな画面が出ます。
色を選びます。これは色立体を平面で表したもので、右の虹色のところで色相。左の縦軸は明度ぢ、横軸が彩度となってます。中学校美術で必ず勉強しているはずです。

ここでは薄い青色を選択しますです。このとき右側に見えるHSBとかRGbとか#の横の数値をメモしておくと後々便利になります。

コンピューター用の色名を表す数字だからです。
この数字を入れるとほかのソフトでも同じ色を出すことができます。

(私の場合は下部の#の横の数字をメモしてます。ゴーライブがこの数値で色を選択するのにしやすいから。但し、ライブモーションと併用のときはRGbの数値にしてます。ライブモーションではこれと同じ画面がでないから)
レイヤー1に色を塗りますさらにバケツツールで任意の色を塗ります。
で、塗りました。
図a
図b
をクリックで文字入力モードにします

上の方のメニューバー部分に図aのようなものが出るのでそれぞれ、目的に応じて選びます

注意点は右側(赤丸の部分)に「現在の文字色」が出てます。現時点ではボタンの字の色と同じです。

この赤丸で示した部分をクリックしてそのあと描画色を選択して色を変更します。
ここでは文字色を黒にしました。
フォントサイズ18ポイント(pt)に変更しています。(図b)のように変化しました。
「会社案内」と入力しました。

文字が選択範囲になってしまうときは図b左の水色の丸のところを切り替えてみてください
会社案内の文字レイヤーに対しレイヤースタイルを適用します。
赤丸のとこ「レイヤースタイル」をクリック
このような画面に変化します
シャドウ(内側)となっているフォームの右の下向三角(▼)をクリック
いろいろ選択肢はありますが、色のついた地に黒文字を目立たせたいので周りを明るめに縁取りたい。
意図に合うのは文字の外側に向かって光る感じなので、[光彩(外側)]を選んだ。
光彩ばかり目立っても仕方ないので、シンプルで一番弱い(細い)ものを選択した
ここでは赤丸のとこ
最初のボタンにくらべ文字が少しはっきりした
(*文字色が白など地よりも明るいときは、「影」をつけるのも効果的。目的に応じて使い分けること)
次にボタンの形にしたい
レイヤー1(ボタンにしたい部分)を選択
ボタンもいろいろですが、ここではそのまんま出っ張った感じのボタンにする。
文字レイヤーのときと同様レイヤースタイルを扱う
今回は「ベベル」を使う。
今回はシンプル2(赤丸のとこ)を使用した。
(*典型的なケース、フォトショップエレメントの場合準備されていること以外には多くを求めないほうが無難)
会社案内の部分のボタンができました。
考え方として文字のところだけが変わりあと5種類あればいいということになります
文字レイヤーを作りたいボタンの個数分だけ作ります。
ここでは全部で6個あればいいので5個複製しました。
後で混乱するので名前は変えときます。
わかりやすいようにボタンにしたい文字と同じ文字にしました。
文字の打ち換えを行う前に、作業対象文字レイヤー以外は非表示にします。
をクリックで切り替えられます。
マークがついて暗く反転しているところ(ここではトップページと書いてあるところ)が作業対象
(*レイヤーの複製で作成すると文字の頭がずれない、文字の装飾が同じように反映されるので楽です。)
をクリック、文字入力モードにし文字を打ち換えます。
残りのレイヤーに対しても同様のことを繰り返し完成。
最後に表示、非表示を切り替えながら、ボタンの個数分だけ名前を付けて、gif方式で保存すれば、ボタンは完成です。
最後に元になったファイルをフォトショップの形式で保存しときましょう。
ロールオーバーをしたいときはレイヤー1を複製して色を変更し、ボタンを各2個づつ作るだけです。
こうしとけば項目の名称が変わってもすぐに同じ様式で変更できます