2レイヤーで作るアクアアイコン

2008年6月17日 23:58

ピクチャ 0.png

今回はアクアアイコンに挑戦、デザイナーの皆さんがよく使うPhotoshopをわずか2レイヤーで、立体感があり、ツヤめいているような、そんなボタン、アイコンを目指します。

ポイントは「レイヤー効果」のグラデーションと光彩(内側)だと思ってます。

では、こんなギザギザな形はPhotoshopよりIllustratorの方が得意ですね、Illustratorでスターツールをうまく使いましょう、第一半径50px、第二半径45pxで、点の数は30。
このままでもいいけど、ちょっと柔らかくしたいので、角を取りましょう。
「フィルタ」から「スタイライズ」内の「角を丸くする」で5px。

ピクチャ 1.png

Photoshopにコピー、その時にシェイプレイヤー形式でペーストしましょうか。

ピクチャ 2.png

では、コツは「レイヤー効果」をうまく使う事です、やってみましょう!

レイヤー効果、グラデーションで描画モードをスクリーンに、角度は下から上に、-90度としましょう。こんな感じ。

ピクチャ 3.png

そのままだと、まだ平面的ですね、そこで「光彩(内側)」をかけていきましょう、シェイプレイヤーにて設定した描画色と同系色、もしくはちょっと濃いくらいの色にしましょう、サイズは24pxにしました。

ピクチャ 4.png

さてさて、何となく、「ふわっ」とした質感が出てきましたね、あとちょっとだけ足していきましょう。
自作したパターンで、斜線を入れたパターンです。

ピクチャ 5.png

一応ここまで、「下地」を作っといて、2レイヤー目に移ります、今のレイヤーの選択範囲を選択して、(レイヤーパレットのサムネイルを「コマンド+クリック」または「Ctrl+クリック(Windows)」するとOK)新規レイヤーを作成して、今の選択範囲より2ピクセル小さくして、白黒のグラデーションを塗ります。

ピクチャ 6.png

ピクチャ 7.png

さて、ここはちょっと慣れがいるかもしれないけど、ちょっとしたカーブでカットしていくため、「楕円形選択ツール」を使ってカットしていこう。楕円形部分を「deleteキー」で消去。

ピクチャ 9.png

そのまま、「2つ目のレイヤー」の「描画モード」を「スクリーン」にすると・・・

ピクチャ 10.png

僕的には、ちょっと「惜しい」です。ナノで、若干レイヤーマスクとグラデーションを使って、「柔らかい演出」を表現します。
白と黒のグラデーションでうっすらと「2番目のレイヤー」をなじませていきます、不透明度を使っても可です。

ピクチャ 12.png

ここからは感覚の勝負なので、パラメータ値にとらわれず、自分の目を肥やすという意味で、微調整してみてください、理屈より感覚というデザイナーの方はぜひ、試行錯誤して下さい、きっとうまくなります。

ピクチャ 11.png

デザインに困った時リスト

siteInformation

info@akibahideki.com

カテゴリ
Author
秋葉秀樹

秋葉秀樹(アキバヒデキ)

DTP上がりのデザイナー
ノンプログラマー!
フリーランスのデザイナー。
IllustratorやPhotoshopを初代バージョンから使っているという事がウリ。
クリエイター育成機関などでお世話になり、先生として講義をしていたりします。