DesignTips > ボタン・アイコン等 > 凹凸感のあるアイコン素材の作り方

凹凸感のあるアイコン素材の作り方

凹凸感のあるアイコン素材の作り方

今回は凹凸感のあるアイコン素材の作り方をご紹介します。

ぽこっと埋め込まれたような感じのアイコンですね。平面のアイコンに比べ、滑らかな質感がありスマートな印象を受けます。シックなサイトや機能的なデザインのサイトに合いそうですね。

作り方は簡単で、イラストレーターからwebアイコンのシンボルを抽出してPhotoshopを使って加工します。

Step01 イラストレーターからwebアイコンのシンボルを抽出する

凹凸感のあるアイコン素材作成開始

まずはイラストレーターからwebアイコンを抽出します。

イラストレーターを開き、[ウィンドウ→シンボル→右上の▼をクリック→シンボルライブラリを開く→webアイコン]で[webアイコン]ダイアログを開きます。

適当なアイコンを選びアートボード上にドラッグ&ドロップします。

Step02 ほかのアイコンも抽出する

ほかのアイコン素材も抽出する

同様にほかのアイコンもドラッグ&ドロップし、きれいに並べます。

並べたアイコンはコピーしておきます。

Step03 Photoshopで背景の設定

Photoshopで背景の設定

続いて、Photoshopを開きます。

[レイヤー→新規塗りつぶしレイヤー→べた塗り]で色を#e9e9e9(グレー)に設定します。

Step04 アイコン素材をペーストする

アイコン素材をペーストする

イラストレーターでコピーしたwebアイコンをペーストします。

ペースト形式はピクセルに設定しておいて下さい。

Step05 レイヤースタイルを適用

アイコン素材にレイヤースタイルを適用

続けてアイコンの色をグレーに変えます。

アイコンのレイヤーを選択し、[レイヤー→レイヤースタイル→カラーオーバーレイ]をクリック。

上図のようにカラーを#bebebeに設定します。これでアイコンのカラーが#bebebe(グレー)になりました。まだOKはクリックしないで下さい。

Step06 べベル内側を適用

アイコンにべベル内側を適用

いよいよアイコンに凹凸感を演出します。

[レイヤースタイル]ダイアログ左の[べベルとエンボス]を選択します。

スタイルを上図のように設定します。プレビューにチェックを入れアイコンを見てみて下さい。アイコンに凹凸感が加わりました。まだOKはクリックしないで下さい。

Step07 境界線でエッジを強調

境界線でアイコンのエッジを強調

最後に境界線でエッジ部分を少し強調します。

[レイヤースタイル]ダイアログ左の[境界線]を選択し、上図のように設定します。

境界線が追加され、アイコンのエッジ部分が少し強調されました。

出来上がり!

凹凸感のあるアイコン素材の作り方(完成)

以上で凹凸感のあるアイコンの作り方は終了です。

見た目以上に簡単でしたね。今回のように素材に質感をプラスするにはPhotoshopのレイヤースタイルが最適です。

レイヤースタイルによって様々な表現が可能となりますので、ぜひ一度お試し下さい。

関連記事:イラストレータ アイコンの作り方

関連記事:イラストレーターで反射するアイコンの作り方

この投稿文は次の言語で読めます: 簡体中国語, 英語

ちょこっと凹んだ猫の足跡のデザイン(Photoshop)
Photoshopで作る凹凸ロゴとテクスチャ
Photoshopでナチュラルなwebボタンを作る方法
木彫り風エンブレムの作り方
ラベルテープ風パーツの作り方(Photoshop)
ブロンズプレート風フレームの作り方
かわいいプクプクシールの作り方(Photoshop)
Photoshopで文字を加工する方法2
写真をポラロイド風に加工する方法(Photoshop)