皆さんご存知ですか？
今のデザイントレンドは「今風にダサい！」です。
ダサいっていうと印象がアレかもしれないですが、もうちょい言い方をかえると「昔なつかしい」とかそんな郷愁を誘うかんじです。ほら、服の流行とかでも80年代に流行ったアレがなんちゃらかんちゃらみたいなのあるじゃないですか。アレと同じです。
この「今風にダサい」を最初に取り入れたのは、IT業界のファッションリーダーAppleさんのiThunes10.0のアイコン。
これがリリースされたとき、一部デザイナーの中では「Appleどうしたんだ」とざわついたものですが、いやまさかこれが流行の先駆けだったとは。さすがですAppleさん。
最近リリースされたAdobeさんのCS6のアイコンも総じて「今風にダサい」感じがあふれていてステキですね。
さて、ではそんな今風にダサいかんじの自分アイコンを作ってみましょう。
まずは普通にダサくていいのよ
実はこの今風にダサい感じを作るのはそんな難しいことじゃありません。
だって「ダサい」要素にプラスで「今風」くっつければいいんですよ。
まぁAppleさんやAdobeさんは「今風」に「ダサい」をプラスするという高等技術を使われているのですが、そんな小難しいことしたくないので逆で攻めたいと思います。
「俺センスないから…」なんて嘆いている人はむしろ今こそ花開かせるチャンスといっても過言ではありません。
というわけでせっかくなので、今風にダサいアイコンを作ってみましょう。
まずはダサいものをなんとなく用意します。
落書きで適当に描いたりしたもので十分です。
むしろ元がダサければダサいほど最高によくなります。
これは私がペンでノートに描いたものです。ダサいですねー。
これに今風要素を足してみましょう。
「今風」要素ってどうプラスするのか
ダサいの用意するのは簡単だけど、今風がわけわかめだよって方も多いと思います。
でも今風なんてコツさえつかめば後のせサクサクです。
まず先ほど描いた落書きを元に、Illustratorで線を起こしてみました。
これだけでもなんかちょっと今風に近づきます。ベジェ線使うと本当ラクですね。
これをもうちょっとPhotoshopで今風に近づけたいと思います。
今風要素その1.グラデーション
グラデーションといってもただのグラデーションではありません。
ポイントは、
- あるのかないのかわかんないくらいのグラデーション
- 全面にかけないグラデーション
もうパッキリハッキリすぐに見てわかるくらいのグラデーションかけると、ただ普通にダサくなってしまうので「これグラデーションかかって…る？」くらいの色味でかけてあげるといい感じです。
※ちなみにiThunesアイコンとかは元がイイので、グラデーションを濃いめにかけることがダサい感演出してます。
そしてさらに要素全体にかけてグラデーションするのではなく、割合65%くらいだといい感じになります。
今風要素その2.光と影
光と影がおりなす神秘的ななんちゃらかんちゃら。
これはグラデーションよりも更に簡単で、応用性がパないです。
要素に対して
- 下側に白いフチをつける
- 上側に黒いフチをつける
こんだけ。マジ簡単。やばいね。
これはレイヤースタイルの「ドロップシャドウ」で作ってます。
気をつけるところとしては、背景色と要素の色味でフチのつけ加減をかえること。
この文字の場合、白いフチは、色#FFFFFF、角度90°、不透明度50％、距離1px。
黒いフチは、色#000000、角度-90°、不透明度50％、距離1px。
不透明度とか色とかを適当にかえるといい感じになるますよ。
今風要素その3.立体感
さてこれで最後です。立体感。存在感が大事。
立体感をだすのもわりと簡単です。
要素に対して
- 上側に白をいれる
- 下側に黒を入れる
- ほんのり角丸にする
これは最初作るときが面倒なんですけど、1回作っちゃえばコピペできるので最初だけがんばってみてください。
レイヤースタイルの「シャドウ（内側）」で作ってます。
白いのは、色#FFFFFF、角度90°、不透明度20％、距離4px。
黒いのは、色#000000、角度-90°、不透明度15％、距離9px。
こちらは色と不透明度の他に、距離も適当にいじって調整してあげるといいかもしれません。
そんなこんなで完成
そうしてできたのがこちら。
全部入りすぎるとゴチャゴチャしてアイコンのくせに見にくいという現象が発生するので、今回今風要素を取り入れたのはグラデーションと角丸の部分。
ダサいっていうのは「ゆるさ」みたいなところが大事なので、とりあえず全部いれてみて、ちょっとごちゃごちゃしちゃったかなーって時は、要素をマイナスしてみてください。引き際を心得るのはデザインでも大事なことです。
でもなんだかよくわかんないからPSDほしいという方がいるのかどうかは定かではないのですが、とりあえず自分が見本で作ったPSD置いておくので勝手にみてください。
使いたい効果のレイヤーの上で右クリック→「レイヤースタイルをコピー」して、好きなレイヤーの上で右クリック「レイヤースタイルをペースト」すればラクラクです。
