3日目の講義ではちょっとしたボタンを制作したのですが、テキストに載っていたボタンがちょっとおかしな感じだったので、反射光に関して簡単に説明してから、反射光を取り入れたボタンを制作しました。
ちょっとおかしな HOME ボタン
Photoshop のテキストの最後にボタンの作り方が載っていたのですが、なんだかちょっとおかしいですね…なぜおかしいのでしょうか。
電球マークは光源、オレンジの矢印は光線を表すものとします。
おそらく、著者の方はボタンには上から光があたっているものと考えて、このようなボタンにしたのではないでしょうか。
あるいは、単に Photoshop のデフォルトのグラデーションが白から黒なので、このようにしたのかもしれません。
しかし、このような光の当たり方は、現実世界ではありえません。
（たとえ太陽光などの入らない密室でも、壁や床に光が反射する場合があるため）
もっと身近な例で考えよう
ちょっと話が難しくなってきたので、身近な例で考えてみましょう。
この教室で、「蛍光灯などの照明を全てオフにして、窓から差し込む光のみがある」という場合を考えてみましょう。
ここで、教室の中央に立っている青い女性が窓の方を見たとして、壁や窓の明るさはどのようになっているでしょうか。
先ほどのボタンの例だと、光が直接当たっていない場所は明るさ 0% でしたが、ちょっと想像してみてください。太陽の光が当たっていないからといって、壁が真っ黒になるほど暗いということはありえないですよね。
実際には、壁にもそれなりに明るさがあるはずです。
ちょっと適当ですみませんが、実際にはこういう風に、光が直接当たっていない壁にもある程度の明るさがあるはずです。
それはなぜかというと、床や壁に太陽の光が反射しているからですね。
「光を反射する」というと、鏡や水面のようなものを思い浮かべるかもしれませんが、現実には壁、床、机、服、その他さまざまなものが光を複雑に反射しています。
つまり、「光源上からだけ当たるのではない」ということです。
リアリティのあるボタンを描くために
Some rights reserved by daz smith
例えば、デッサンの入門書を読むと、大抵の本は最初にりんごを描くことを薦めています。
そして、リアリティのあるりんごを描くために、反射光を描くことを薦めています。
このりんごも、よく見るとテーブルの反射光が右下に入っていますね。
今日の課題
ikesai.com や S5-Style など色々なサイトを見て、反射光を取り入れたグラデーションが使われていないか探してみましょう。
そして、反射光を取り入れたボタンを作ってみましょう。
反射光を取り入れたボタンの作り方
講義では、ここで Photoshop を使って反射光を取り入れたボタンを制作しました。
いつもはブログには具体的な制作方法までは書いていないのですが、ここで終わるのも投げやりな感じがするので具体的な制作方法を書いておきます。
もし Photoshop をお持ちでない方は、30日間機能制限なしで使える Photoshop の体験版 をダウンロードして制作してみてください。
なお、ここからの説明には、Mac 版の Photoshop CS5 のキャプチャで行なっていますが、ショートカットキーは講義ベースのため Windows のショートカットキーで書かれています…ややこしくてすみませんが、Mac の方は Ctrl を command に読み替えていただけると幸いです。
今回作成するボタンは、9search というフリー素材検索サイトに掲載されていた 光沢のあるオレンジのナビゲーション を参考に制作しました。
下準備
Photoshop を起動し、キーボードの Ctrl+N（新規ファイルの作成）を押します。
Ctrl+Nとは、Windows ではキーボード左下の方にある「Ctrl」キーを押しながら「N」キーを押すこと、Mac では左下と右下にある「command」キーを押しながら「N」キーを押すことを指します。
幅と高さに半角で「300」と入力し、カラーモード「RGB」カンバスカラー「白」を選び Enter キーを押します。
画面右側にある「レイヤー」パレット内の「背景」部分をダブルクリックします。
（もし、レイヤーパレットが表示されていない場合は F7 キーを押してください）
「描画色」をクリックします。
（Photoshop は、初期状態では縦長のツールバーは左端にあると思いますがあまり気にしないでください…右側の方がマウス移動が少なくて済むので、私は右側にしています）
カラーコード#「333333」を入力し、Enter キーを押します。
①「塗りつぶしツール（バケツのようなアイコン）」をクリックしてください。
ここに、塗りつぶしツールがない場合は、「グラデーションツール」をマウスクリックで長押しすると塗りつぶしツールが出てくるはずです。
②カンバス上でクリックすると、濃いグレーに塗りつぶされます。
①「長方形選択ツール」をクリックします。
②画面上のオプションバーにある「スタイル」の横のドロップダウンリストをクリックし、「固定」を選びます。
③今回は 幅100px 高さ40px のボタンを制作しますので、幅に「100px」高さに「40px」と入力します。
そして、カンバスの中心よりやや左上のあたりでクリックします。
④カンバスの周りに定規が表示されていない場合は Ctrl+R キーを押して表示させます。
定規の上でドラッグ開始し、下にドラッグすると水色の「ガイド」とよばれる線が出てきます。それをそのまま選択範囲の端に2本ドラッグします。
⑤同様に、左の定規から選択範囲の端にも2本ドラッグします。
①ツールバーの「長方形ツール」をクリックして長押しし、
②「角丸長方形ツール」をクリックします。
③描画色をクリックし、カラーコード#「ffffff」を入力し Enter キーを押します。
①3つボタンが並んでいるうちの1番左（シェイプレイヤー）をクリックし
②丸みを「4px」に指定し
③選択範囲の左上から右下に向けてドラッグします。
レイヤーパレット内の「シェイプ1」の右側あたりをダブルクリックします。
①グラデーションオーバーレイ（チェックボックスではなく文字の上）をクリックします。（もし、ドロップシャドウや境界線など余計な項目にチェックが入っていた場合は外します）
②グラデーションの色の上の部分をクリックします。
①右下のカラー分岐点をクリックします。
②カラーをクリックします。
カーコード#「fee36e」と入力し、Enter キーを押します。
青い矢印のあたり（グラデーションのすぐ下の何もない箇所）をクリックします。
すると、赤い丸で囲まれたような、黒い印（カラー分岐点）ができたはずです。
もしできない場合はもう1度クリックしてください。
もし、余計な黒い印（カラー分岐点）ができた場合は、それを下にドラッグすると消えます。
黒い印（カラー分岐点）ができたら、カラーをクリックし、カーコード#「f48712」と入力し、Enter キーを押します。
青い矢印のあたり（グラデーションのすぐ下の何もない箇所）をクリックします。
黒い印（カラー分岐点）ができたら、カラーをクリックします。
カラーコード#「e27500」と入力し、Enter キーを押します。
一番左下の黒い印（カラー分岐点）をクリックし、カラーをクリックします。
カラーコード#「e67801」と入力し、Enter キーを押します。
こんな感じになったでしょうか。
もし色がおかしいなどという場合は、この項目を見直してみてください。
位置に「50」と入力します。
同様に、右から3番目のカラー分岐点をクリックします。
位置に「49」と入力します。
こんなグラデーションになったでしょうか。
次に、「ドロップシャドウ」の文字の上をクリックし、図のように設定します。
不透明度: 40
角度: 90
「包括光源を使用」のチェックを外す
距離: 1
スプレッド: 0
サイズ: 1
次に「光彩（内側）」の文字の上をクリックし、図のように設定します。
不透明度: 29
チョーク: 100
サイズ: 1
Enter キーを押すと、このようになったはずです。
ここで、Ctrl+D キーを押し、メニューの「表示＞表示・非表示＞ガイド」をクリックします。
するとこのようになるはずです。
テキストツールをクリックし、オプションバーで
Arial
Regular
18px
シャープ
白（#ffffff）
にします。
ボタンの外をクリックし、Home と入力し、 Ctrl+Enter キーを押して確定します。
移動ツールで、文字をボタンの上に移動します。
①テキストツールをクリックします。
②文字の上でダブルクリックします。
③テキストカラーを#「632e02」に設定します。
レイヤーパレットで Home レイヤーの右あたりをダブルクリックします。
「ドロップシャドウ」文字の部分をクリックし、図のように設定します。
描画モード: 通常
カラー#: fbf398
不透明度: 38
角度: 90
「包括光源を使用」のチェックを外す
距離: 1
スプレッド: 1
サイズ: 0
Enter キーを押します。
①移動ツールをクリックします。
②Ctrlキーを押しながら、「Home」レイヤーと「シェイプ1」レイヤーをクリックして選択状態にします。
③垂直方向中央揃え、水平方向中央揃えをクリックします。
これで完成です。
Ctrl+S キーで保存したあと、グラデーションの色を変更して、違う色のボタンを作ることにチャレンジしてみましょう。
ドロップシャドウなどの値を調節して、どのような変化が起きるか見てみましょう。
そして、これを15分以内に作れるよう挑戦してみましょう。
追記
ボタンのグラデーションを考える上で、こちらの記事も参考になると思います。
細部にこだわったUIエレメントをPhotoshopで作成するポイント | コリス
