Appleのサイトのボタンを見た感じで作ってみるのエントリに続き、今回はアクアボタンの作り方を紹介します。
あまりよくわかってないので、いくつか探してみて、今回も見た感じで試行錯誤してできた手法となっています。ちなみにアクアボタンのリンクが紹介されている、チープ力さんのページを参考にさせていただきました。ありがとうございます。他の方のアクアボタンの作成方法を見たい方はこちらへどうぞ。
それては、アクアボタン(風)の作り方を開始しましょう。(Web用のボタンを前提にしていません(サイズ及び色数)のでご了承下さい。)
新規ファイルを作成します。記事で紹介するボタンは、400px-200pxの、解像度72で作成してあります(図1)。使用目的に応じて設定してください。
まずは背景レイヤーの上に新規レイヤーを作成し、角丸長方形ツール(U)を選択します(図2)。
次にベースとなるカラーを決めますが、アクアボタンなのでキャンディカラーが明るくて楽しそうです。ここでは甘いピンクにしてみました。色は、R255/G128/B153(ff8099)になっています(図3)。同じ色で試したい場合はこの色を作成して下さい。
色が決まりましたので、角丸長方形ツールを使用してボタンのベースを作成します(図4)。オプションの丸みは90pxになっています。お好きなボタンサイズでどうぞ。
角丸長方形が作成できました。ここではベタ塗りですが、ここをグラデーションにすることもできます(後ほど作成例を掲載します)。
後で下方向にドロップシャドウを入れますので、下部にある程度のスペースを作成しておいて下さい。
ボタンのベースが出来ましたので、この塗りつぶしたレイヤーを、「ベース」に名称変更しておきます。
前回の円形ボタンの作成手順と同様に、まずは上部のハイライトを作成します。
前回同様ベースレイヤーをCtrl+クリックし、選択範囲を読み出します(図5)。
これを利用して上部のハイライトの選択範囲を作成しますが、多少複雑ですのでよく説明をお読み下さい。
まずはツールを選択ツール(M)に変更し、選択範囲上で右クリックして「選択範囲を変形」を選びます。
続けて右クリックして、「自由な形に」を選択します。以降は目安ですが、最初にオプションメニューのH(高さ)を45%にします(図6)。
次にShift+カーソル上を押して上部に移動します。この例だと30px上に移動しました。
そして、Shift+Altキーを押しながら下部のコーナーハンドル(左右どちらか)を拡げて台形の選択範囲に変更します(図7)。そしてオプションメニューのWボックスを92%(92を入力してEnter)にします(図8)。
そのあと、再度下部のコーナーハンドルをShift+Altクリックしたまま移動して微調整します。この選択範囲が上部ハイライトになりますので、ベースの輪郭が少し残る程度の選択範囲にしてみて下さい。ここでは図のような感じで選択範囲を作成しています。
選択範囲が決まりましたら、Enterキーを押して確定します(図9)。そして、この選択範囲をアルファチャンネルに保存しておきます(選択範囲→選択範囲を保存)。これが選択範囲のベースになります。
上部ハイライトは、先ほど作成した選択範囲をそのまま利用します。
ベースレイヤーの上に新規レイヤーを作成します。そして、先ほどの選択範囲がまだ表示されていればクイックマスクモードへ、選択範囲を消した場合は保存したアルファチャンネルをCtrl+クリックして選択範囲を呼び出して下さい。
選択範囲を表示したまま、ツールボックス下部のクイックマスクモードボタンを押します(図10)。ここで選択範囲をぼかして、周囲に馴染ませるように変形します。
ガウスぼかしフィルタを選び、半径を5pxにしてOKを押します(図11)。この適用量で馴染み方が変化しますので、まずは5pxで試して、気に入らなければお好みの適用量に変更してください。
上部ハイライト用の選択範囲ができましたので、ツールボックス下部から画像描画モードに戻って下さい。
ここでベースレイヤーの上に新規レイヤーを作成し、編集→塗りつぶしを選択して、ホワイトの不透明度100%で塗りつぶします(図13)。ぼかしが入っていますので、周囲に馴染むホワイトになります(図12)。次に、このレイヤーにグラデーションレイヤーマスクを適用します。
最初にCtrl+Dボタンで選択範囲を削除してください。その後、レイヤーパレット下部のレイヤーマスク作成ボタンを押します。そしてグラデーションツール(G)を選択し、オプションバーのグラデーションサンプルボックスをクリックして、グラデーションエディタを開きます。
ここでは図のような黒から白へと変移するグラデーションを作成してください。できたらOKを押します。
次にホワイトで塗りつぶしたレイヤーのレイヤーマスクがアクティブになっているのを確認(レイヤーマスクをクリックして下さい)して、線形グラデーションを適用します。
ハイライトの下部辺りから、上部の少し手前位の位置でグラデーションを使用します。これで、上部に向かってハイライトが作られます。このハイライトの作成によって印象が異なりますので、どの位白い部分を残すかを決めてください。ちなみにグラデーションは、複数回範囲を変えて適用したりすることもできます。また、横から適用することももちろんできます。
上部のハイライトができました(図14)。このレイヤーを「上部ハイライト」に名称変更しておきます。
次は下のハイライトです。下は上よりもホワイトの適用を控える形にします。
まずは上部ハイライトの上に新規レイヤーを作成します。次に保存してあるアルファチャンネルから選択範囲を読み込みます。ここでは選択範囲→選択範囲を読み込むから保存したアルファチャンネルを選択して読み込みました(図15)。
次にこの選択範囲を変形します。ツールを選択ツールに変更し、選択範囲上で右クリックして「選択範囲を変形」を選びます。
ここでは選択範囲を単純に180度回転させるだけにしますが、その後変形を加えてもよいでしょう(図16)。下部のハイライトをどのように作成するかによって変えて下さい。
右クリックメニューから180度回転させて、Shift+下カーソルキーで下へ移動します。だいたい65px位移動しました(図17)。下部の輪郭から2px位の位置です。
以降は上ハイライトとほぼ同様の操作です。まずはクイックマスクモードで選択範囲に10pxのガウスぼかしを使用。次に、選択範囲をホワイトで塗りつぶし、選択を解除して、レイヤーマスクを作成。
そしてグラデーションツールを選択し、上から下へとグラデーションを適用します。ここではハイライトを少なめにしますので、グラデーションは下をはみ出す位置までカーソルを移動しています。
図は上記を適用した後ですが、全く同じ状態でなくても大丈夫ですので、好みにハイライトを作成して下さい(図18)。
下部ハイライトが決まったら、レイヤーの名称を「下部ハイライト」に変更します。
コンピューター的な画像なので、レイヤースタイルでベースレイヤーにシャドウを適用します。
ベースレイヤーをダブルクリックして、レイヤースタイルダイアログを表示します。
まずはドロップシャドウを適用します。各項目の適用量に関しては図をご覧下さい(図19)。ここでは黒にしていますが、描画した色を使用しても面白いでしょう。
次は光彩(内側)です。黒を使用して輪郭を締める感じに適用しています(図20)。これはカラーによって適用量を変更した方がよいでしょう。あまり適用すると汚くなります。
いろいろと試してみて最適な値を見つけて下さい。決まりましたらOKを押します。
このサイズだと多少黒が強い感じですが、ボタンで使用する際には縮小しますので、ある程度多めに適用しています(図21)。
これで完成ですが、前回行ったようにベースレイヤーから選択範囲を読み込み、上か下にずらしてから反転し、その選択範囲で調整レイヤーを適用する最終調整もできます。
Appleのサイトのボタンを見た感じで作ってみるのエントリを参考に適用してみて下さい。強くメリハリをつけたい場合によいでしょう。
これで完成です。ベースレイヤーだけが色情報を持っていますので、色を変えるのは簡単です。ベースレイヤーの作成方法と同様の手順で新しいカラーのレイヤーを作成します。後はAlt+レイヤースタイル、もしくは右クリックからレイヤースタイルのコピー→貼り付けでレイヤースタイルを適用します。これで違う色のアクアボタンを簡単に作成できます。
最終のレイヤー構成は図のようになります。上2つのトーンカーブは微調整ですのでなくても構いません。
例ではベタ塗りで作成しましたが、グラデーションを使用すると異なる仕上がりになります。ただし使用する場合はホワイトが無いグラデーションを適用した方が間違いがありません。
以上で、フォトショップで作成するアクアボタンのチュートリアルは終わりです。ボタン作成に関してはもう少し続ける予定です。アイデアがうまくいけば。