こんにちは
よーへーです。
今回はphotoshopでボタンやフレームなどのUIデザインパーツを作る際の基本的なポイントについてお話したいと思います。
新卒採用のポートフォリオを見ていると、わりとUIデザイナー志望の人でもあまりよくない作り方をしている人がちらほらいるので、少し解説をしてみようかなと思いました。
新卒だけではなく、意外と中途採用希望の方や派遣さんのポートフォリオでもたまに見ることがあるので、もし心当たりがある人はぜひ参考にしてみてください。
UIパーツは「シェイプツール」+「レイヤースタイル」で作るべし
で、そのポイントが何かと言いますと、
基本的には「UIパーツはシェイプツール+レイヤースタイル」で作りましょう。ということです。
ゲームやWEBデザインなんかでは割と一般的なことなのですが、この作り方をせずに、全部のパーツをブラシでひとつひとつ絵を描いて作成しているポートフォリオをわりとよく見かけます。
このひとつひとつブラシで描く作り方もポイントで使うこともあるので、絶対にダメというわけではないんですが、すべてのパーツをブラシで描いて作ることは無く、様々な理由で基本的には「シェイプツール+レイヤースタイル」で作られることが多いです。
「シェイプツール」でベースを作る
ではまず、具体的にどういうことかを解説しますね。
photoshopの画面のここのツールが「シェイプツール」です。
このシェイプツールを選択した状態で、キャンバスをドラッグすると、こういった線が出て長方形が描けます。
また、この「シェイプツール」を長押しすると、中に長方形以外の形の円や星など様々な形のシェイプが選択できるので、使いたい形状を選択して同じようにドラッグしてください。
これで簡単なボタンをひとつサンプルで作ってみたいと思います。
まず通常の長方形のシェイプツールを選んで、ひとつ長方形を作ります。
そして、この右側のパネルに「属性パネル」を表示させると、ここで長方形の色々な情報を調整することができます。その中に角を丸くする枠があるので、ここで角を丸くしてみましょう
角を少し丸くするとこんな感じ、めいっぱい数値を入れると自動的にマイナスにならない範囲で角丸に調整してくれます。
これで簡単に形はできました。
「レイヤースタイル」で装飾する
次にこれに「レイヤースタイル(レイヤー効果)」をつけてみます。
レイヤースタイルはレイヤーパネルの下の方にあるこのアイコンをクリックするとレイヤースタイルパネルが出てくるので、ここで様々な効果をつけていきます。
この中には非常にたくさんの効果があって、今回はよくあるボタンを作るために必要な箇所しか説明しませんが、ぜひ色々と調べてみてください。
まず、グラデーションをかけてみましょう。
左端と右端でそれぞれグラデーションの開始・終了の色を設定します。
今回は適当にこういう色をつけてみたいと思います。
で、続いてはボタンに線をつけてみましょう。
これは境界線を選択して、その中のここで線の太さや色を選択します。
シェイプの内側、外側、中央とどこを基準に線をつけるかを選ぶ箇所があるので、今回は内側にしてみましょう。
次に境界線にもグラデーションをつけることができるので、今回はそれを選んで金属っぽい質感になるように設定してみます。
続いては、ボタンに影をつけてみましょう。
スマホのゲームだとそのUIがタップできるものなのかただの飾りなのか分からないということで影をつけているものが割と多い気がします。
影をつけるにはこのドロップシャドウを選んでください。ここの中で、影の色、影の描画モード、影の幅、影のぼかし具合なんかを設定できます。今回はこんな感じで設定してみます。
続いては、光彩です。
光彩には内側と外側があり、それぞれ表現したいものによって使いわけて使用します。今回は光彩(内側)を選んでみましょう。
ここもドロップシャドウの時と同じように、色、描画モード、幅、ぼかし具合なんかを設定できます。今回はこんな感じで設定してみます。
少し差が分かりづらいですが、ボタンのフチと内側の間に影をつけて立体感を表現しています。
はい。ざっくりこんな感じでしょうか。
プラスでもう一つ角丸のシェイプツールを作って、透明度を0、グラデーションオーバーレイを少しつけることで、つるんとした光の反射を追加してみたりします。
あとはボタンの上にテキストなんかを置いてあげるとボタンっぽくなりましたね。
他にも、角丸長方形と三角形のシェイプを組み合わせて、ドロップシャドウをつけるだけで簡単にフキダシができたりします。
なぜこのような作り方で作るのが好ましいのか？
ここで、「なんでわざわざこんなめんどくさいツールを使わなきゃいけないんだ！自分は絵を描きなれてるんだから普通に描いた方が速いよ！」っていう意見もあるかもしれませんが、ちゃんとした理由があるんです。
ゲームの画面って何十ページも何百ページも作らないといけないんですね。
また、その中に使うUIパーツもそれこそ何百〜何千個って作らないといけないケースもあると思います。
となると、もちろん1人ですべての画面・すべてのUIパーツを作っていては時間がかかりすぎてしまうので、基本的にゲーム開発は何人かでチームを組んで開発します。
また、UIのパーツは同じ機能のものは画面が変わっても基本的には同じデザインのものを使います。でないと、どれがボタンかどれがリストかが分からなくなってしまうからです。
それらのことから、UIのパーツを色んな人が色んな画面で使い回すことになります。
その際に使う画面や要素に応じて、少し大きさを大きくしたり小さくしたり、色を変えたりすることがたくさん発生してくるのですが、そのときにひとつひとつブラシで描いたパーツだったらどうなるでしょうか？
ひとつひとつ大きさや色を変えたい場合に、またひとつひとつ書き直さないといけなくなりますよね？
それを何百個、何千個と作り直していては、いつになってもゲームが完成しません。
それがシェイプでUIパーツを作成しておくと、
大きさを変えたくなったときにでも、簡単に変えられたり、
色を変えたくなったときにも、簡単に変えることができます。
こういう風に、どんな人でもどんな画面でも使い回せて簡単に調整ができるようにシェイプで作っておくことはとても大事なわけです。
もちろんピンポイントで、この画面のこの場所でしか使わないとか、シェイプツールとレイヤースタイルでは表現できないここ一番のこだわりの素材みたいなものは、ブラシで書き起こしたりすることもあるので、使い分けが大事という話になります。
ただ、UIデザインの多くのパーツがシェイプツールで作られているので、ポートフォリオの作品のUIパーツが全部手書きで作っていますといった人は、今回の作り方を参考にしてみてください。
レイヤースタイルもその掛け合わせ方で、様々な表現ができますので、色々と作り方を調べてみるといいと思います。
実際の現場での仕事ではこの作り方が主流なので、もしこれからポートフォリオの作品を作る方がいればここを意識して作ってみてほしいです。
おしまい
