読者です 読者をやめる 読者になる 読者になる

アラタナエンジニアブログ

aratana Engineer's Blog

ひと味足りないWebデザインに1pxのこだわりを -PhotoshopでWebデザインのクオリティを1px単位でUPする方法-

デザイン Photoshop

どうも皆さんこんにちは。
リクガメ大好き、アラタナのWebデザイナー金田です。
いま飼っているリクガメがあまりにも食べっぷりが良いので、近所のスーパーでよく「小松菜(カメの主食)」を買い占めます。

近所の皆さん、需要と供給を破壊しているのは私です。ごめんなさい。
そして農家の皆さん、いつもありがとう。

さて、今日は「このブログには『デザイン』のカテゴリが無いじゃないか!」というわけで、デザインネタを一つ投げ込んでみようと思います。



ピクセル設計、ビットマップ系のリッチデザインならPhotoshop

f:id:kaneda_makoto:20150202213442j:plain

「Adobe Photoshop」 より

PhotoshopでWebサイトデザインをされる方は非常に多いのではないかと思います。
アラタナの場合、社外のデザイナーさんからカンプデータの入稿を受ける事がありますが、この際も「psdデータ」でのやり取りが基本的ですね。
静止画的なグラフィック表現をするのなら、Photoshopは非常に長けたツールだなと思います。

いま、Photoshopの最新バージョンはCC(2014)。

ずいぶん昔からWebデザインに使用されてきただけあり、Web系の画面制作を想定した機能や配慮が数多くフィードバックされています。
Webデザインは、まず最初に正確なピクセル数で「ガイド」を引く作業から入ったりしますが、それも「QuickGuide(無料)」や「GuideGuide(無料)」など、作業が捗る便利な機能拡張・プラグインが豊富です。
そういう所もPhotoshopのいいところですね。



Photoshop使ってるのに、何故かデザインにパンチが足りない・・・
さぁそんな時どうする?

f:id:kaneda_makoto:20150202221001j:plain

ガイドを引いて、図形を書いて、綺麗に並べてレイアウトする・・・。
これだけならむしろ、Illustratorベクター系のWebデザインを制作した方が効率的です。

Photoshopを使うからには、「ビットマップ系のリッチデザイン」というものにチャレンジしてみましょう。
今回はその中でも、「1pxの細かなデザイン」というものにフォーカスを当て、以下の3点でWebデザインの制作方法をご紹介します。



「レイヤー効果」で1pxのハイライトを付ける。

さて、1px単位の細かなデザインで、ボタンをリッチにしていきましょう。
「レイヤー効果」を用いて、輪郭にハイライトを入れてキリッ!と仕上げます。
四角形シェイプなどで作成したボタンのレイヤーを選択し、右クリックして「レイヤー効果」を選びます。

f:id:kaneda_makoto:20150202222825j:plain

「Adobe Photoshop」 より

1pxの輪郭を付けましょう。 周囲にハッキリとした輪郭を付けることで、ボタン自体を浮き立たせていきます。
「境界線」にチェックを入れます。

f:id:kaneda_makoto:20150203094601j:plain

「Adobe Photoshop」 より

チェックを入れたら以下のように、それぞれ設定値を入力してください。

・サイズ:1px
・位置:内側
・カラー:適当(ボタンの色より暗めの色がオススメ)


境界線のカラーは、できるだけハッキリとした色合いが良いでしょう。
ここでは、ボタン自体が#6e6e6e〜#8d8d8dなのに対し、境界線を#555555のカラーにしています。

上記の設定値をそれぞれ入れ終わったら、今度は「シャドウ(内側)」にチェックを入れます。

f:id:kaneda_makoto:20150203095501j:plain

「Adobe Photoshop」 より

以下のようにまた、設定値を入力してください。

・描画モード:通常
・カラー(※描画モードの横):白(#ffffff)
・角度:125°
・距離:3px
・サイズ:0px


どうですか?
キリッとしたハイライトが入りましたね。

f:id:kaneda_makoto:20150203100026j:plain

ハイライトの入り具合が気になる方は、シャドウ(内側)の「不透明度」の値を調整して、好みの加減にしましょう。
ここではハッキリとした1pxの光沢を入れようと思いますので、75%あたりの値にしています



デザインに「ノイズ」を入れて質感をプラス。

もうハイライト入ったし十分・・・とお思いの方は、この辺りで作業を切り上げてもOKです。
シンプルなWebサイトデザインなら、この程度の調整でもずいぶんと雰囲気が変わります。
ただ、Photoshopの良いところは「リアルなグラフィック」を作りやすい、という所なんですよね。

というわけで、さらにもうひと押し。
今度は「ノイズ」を入れることで、ボタンデザインに“質感”を入れてみたいと思います。
なお、ノイズを入れる方法は様々ありますが、ここではボタンデザインを後でパス編集しやすいよう、ノイズ部分だけ別レイヤーにしていきます。

まずはボタンと同じサイズの四角形を描きましょう。
ここでは300px × 40pxで、ボタンと同系色の四角形を作成します。

f:id:kaneda_makoto:20150203101822j:plain

レイヤーのパネルで、今しがた作成した四角形のレイヤーを選択し、メニュー「フィルター」から「ノイズ → ノイズを加える」を選びます

f:id:kaneda_makoto:20150202225306j:plain

「Adobe Photoshop」 より

この際、四角形を“シェイプ”で作成していますので、以下のようなメッセージが表示されます。

f:id:kaneda_makoto:20150203102423j:plain

「Adobe Photoshop」 より

ここは迷うこと無く「スマートオブジェクトに変換」をクリックです。
※ここで「スマートオブジェクトに変更」をしておくと、後でレイヤーパネルからノイズの加減を再調整しやすくなります

すると、以下のようなノイズ調整のウィンドウが開きます
加えるノイズ量を入力しましょう。
あまり激しいノイズを入れると、かえってリアリティが損なわれてしまいそうなので、ここでは値を3%としておきます。

f:id:kaneda_makoto:20150203103253j:plain

「Adobe Photoshop」 より

ザラザラとしたノイズが入りましたね。
今度はこれを、ボタンの上に被せます。

f:id:kaneda_makoto:20150203103741j:plain

被せたら「こだわりの3pxの角丸」が隠れてしまいました。 マスク処理をして調整しましょう。
レイヤーのパネルで、ノイズが入った四角形のレイヤーを選択し、「クリッピングマスクを作成」を選びます

f:id:kaneda_makoto:20150203104121j:plain

「Adobe Photoshop」 より

すると、角丸四角形ボタンを“型”にして、ノイズ入りの四角形が切り抜かれます。
あとはレイヤーの「不透明度」を調節して、ノイズの入り具合を調整しましょう。
お好みで結構ですが、試しに60%辺りの値にしてみるといいでしょう。

f:id:kaneda_makoto:20150203104844j:plain

「Adobe Photoshop」 より

どうでしょうか?
単純に描いただけの四角形ボタンに、荒目の紙のような柔らかい質感が加わりました。

f:id:kaneda_makoto:20150203111555j:plain

さて次は最後に、このボタンに「奥行き」を付けて、さらにクオリティを増していきます。



仕上げに一工夫した影を付けて、デザインに奥行きを出す。

とは言っても、ここで付ける影は「レイヤー効果」ではありません。
ピクセル単位で「ぼかし」を上手く調整して、見た目にもこだわりが映える影を付けましょう。

まずは円をシェイプで描きます

f:id:kaneda_makoto:20150203112959j:plain

「Adobe Photoshop」 より

円を描いたら、ボタンのデザイン・サイズに合わせて微調整です。
以下の値を入力して、ボタンに調度良い形に整えます。
ここでは300px × 40pxのボタンを作成しましたので、以下のように入力します。

・幅(W):290px
・高さ(H):5px
・塗り:黒(#000000)


f:id:kaneda_makoto:20150203113511j:plain


「Adobe Photoshop」 より

平べったい楕円状になりました。
ここでは、「ぼかし」をかけた際に少しだけサイズが膨らんでしまうため、あらかじめ幅を少しだけ小さくしています。 次にメニュー「フィルター」から「ぼかし → ぼかし(ガウス)」を選んで、ぼかしを加えます

f:id:kaneda_makoto:20150203113829j:plain

「Adobe Photoshop」 より

ここでも以下のようなメッセージが表示されますが、「スマートオブジェクトに変換」をクリックです。
※「スマートオブジェクトに変更」をしておくと、後々レイヤーパネルででぼかしの加減を再調整しやすくなります。

f:id:kaneda_makoto:20150203102423j:plain

「Adobe Photoshop」 より

このようなぼかしを加えるウィンドウが表示されます。
影用の楕円は非常に薄っぺらいのと、ある程度は影にも存在感を残しておきたいので、2px程度のぼかしを加えます。

f:id:kaneda_makoto:20150203114518j:plain

「Adobe Photoshop」 より

うっすらとぼやけた楕円になりました。
四角形ボタンのレイヤー下、かつボタンの下部に影を配置しましょう。

f:id:kaneda_makoto:20150203115045j:plain

きっちりボタン下中央に配置する場合は、以下のように整列のパネルでボタン中央に影を配置し、キーボードのカーソルキーで少しづつ、様子を見ながら影を下に向けてずらしていき微調整します。

f:id:kaneda_makoto:20150203115516j:plain

「Adobe Photoshop」 より

ボタン下に、5px程度だけ影が顔を出したらOKです。 あとはレイヤーパネルの不透明度を調整して、好みの薄さに影を調整してみてください。 ここでは不透明度を40%程度にしてますが、もう少し薄くても立体感は十分出ますね。

f:id:kaneda_makoto:20150203120213j:plain

「Adobe Photoshop」 より

これで、1pxレベルでこだわった、クオリティの高いボタンが出来ました。

f:id:kaneda_makoto:20150203120334j:plain

最初の単純な四角形ボタンから、かなりクオリティが変化しましたね。
思わずクリックしてしまいたくなるボタンの完成です。



「1pxのこだわり」を、Webサイトデザインの全体に。

今回の記事で紹介した「レイヤー効果」によるハイライト、ノイズ、シェイプ図形による影付け・・・
これら4つの作業をWebサイト全体に施せば、これまで味気なかったサイトデザインも、以下のように立体的で美しく仕上がると思います。

f:id:kaneda_makoto:20150203131043j:plain

「Webデザインに一味足りない!」と思ったら、ぜひPhotoshopでチャレンジしてみてください。
ではでは。