今回はをご紹介します。
ぽこっと埋め込まれたような感じのアイコンですね。平面のアイコンに比べ、滑らかな質感がありスマートな印象を受けます。シックなサイトや機能的なデザインのサイトに合いそうですね。
作り方は簡単で、イラストレーターからwebアイコンのシンボルを抽出してPhotoshopを使って加工します。
まずはイラストレーターからwebアイコンを抽出します。
イラストレーターを開き、[ウィンドウ→シンボル→右上の▼をクリック→シンボルライブラリを開く→webアイコン]で[webアイコン]ダイアログを開きます。
適当なアイコンを選びアートボード上にドラッグ＆ドロップします。
同様にほかのアイコンもドラッグ＆ドロップし、きれいに並べます。
並べたアイコンはコピーしておきます。
続いて、Photoshopを開きます。
[レイヤー→新規塗りつぶしレイヤー→べた塗り]で色を#e9e9e9（グレー）に設定します。
イラストレーターでコピーしたwebアイコンをペーストします。
ペースト形式はピクセルに設定しておいて下さい。
続けてアイコンの色をグレーに変えます。
アイコンのレイヤーを選択し、[レイヤー→レイヤースタイル→カラーオーバーレイ]をクリック。
上図のようにカラーを#bebebeに設定します。これでアイコンのカラーが#bebebe（グレー）になりました。まだOKはクリックしないで下さい。
いよいよアイコンに凹凸感を演出します。
[レイヤースタイル]ダイアログ左の[べベルとエンボス]を選択します。
スタイルを上図のように設定します。プレビューにチェックを入れアイコンを見てみて下さい。アイコンに凹凸感が加わりました。まだOKはクリックしないで下さい。
最後に境界線でエッジ部分を少し強調します。
[レイヤースタイル]ダイアログ左の[境界線]を選択し、上図のように設定します。
境界線が追加され、アイコンのエッジ部分が少し強調されました。
以上で凹凸感のあるアイコンの作り方は終了です。
見た目以上に簡単でしたね。今回のように素材に質感をプラスするにはPhotoshopのレイヤースタイルが最適です。
レイヤースタイルによって様々な表現が可能となりますので、ぜひ一度お試し下さい。
（関連記事：イラストレータ アイコンの作り方）
（関連記事：イラストレーターで反射するアイコンの作り方）