「ディスパッチベース」のロゴ画像

WEB2.0風のアイコンを作成する

フォトショップの技

既にアイコンの元画像があることを前提に進めます。
元画像がない方はWEB2.0風アイコンの元画像を作成するをご覧下さい。

STEP 1.
操作画面の画像
レイヤーをダブルクリックして「レイヤースタイル」ウィンドウを出す。

STEP 2.
操作画面の画像
「グラデーションオーバーレイ」の「描画モード」を「乗算」にする。

STEP 3.
操作画面の画像
「グラデーション」のバーをダブルクリックする。

-

STEP 4.
操作画面の画像
「プリセット」で「描画色から透明に」を選択。

STEP 5.
操作画面の画像
グラデーションバーの左端「カラー分岐点」をクリック。

STEP 6.
操作画面の画像
「終了点」の「カラー」をダブルクリック。

-

STEP 7.
操作画面の画像
ブライトトーンの色を選択。

STEP 8.
操作画面の画像
「OK」を押して「グラデーションエディタ」を閉じる。

STEP 9.
操作画面の画像
「不透明度」を80%程度に設定。他の値は見栄えよく適当に設定する。

-

STEP 10.
操作画面の画像
「シャドウ(内側)」の「描画モード」を「通常」に変更。

STEP 11.
操作画面の画像
「不透明度」 75%程度、「角度」は -90 に設定して「OK」をクリック。

STEP 12.
操作画面の画像
背景レイヤーをクリック。

-

STEP 13.
操作画面の画像
新規レイヤーを作成。

STEP 14.
操作画面の画像
1番上のレイヤー(制作中の画像レイヤー)を選択。

STEP 15.
操作画面の画像
ファイルメニュー「レイヤー」から「下のレイヤーと結合」を選択。

-

STEP 16.
操作画面の画像
結合されたレイヤーをダブルクリック。

STEP 17.
操作画面の画像
「ドロップシャドウ」の角度は 120°。不透明度やサイズは見栄えよく設定して「OK」をクリック。

STEP 18.
操作画面の画像
完成。

-

更にツヤツヤ感を出したい方はWEB2.0風のアイコンに光沢を加えるをご覧下さい。

▲ページ先頭に戻る

Photoshop

比較的簡単にWEB2.0アイコンを作成する方法。慣れれば2分程度で作成することが可能です。

この方法を用いると、上記のアイコンは5分で作成できます。

WEB2.0アイコンって?

簡単に言うと、ツヤツヤとした感じのアイコンのことです。例を挙げれば、Windows XPと、Windows Vistaのロゴで、Vista側がWEB2.0アイコンと呼べるでしょう。

アイコンが2.0っておかしくない?

まさしくWEB2.0とはサービス提供の仕方や新しいWEBのあり方を総称するものですので、筆者も戸惑いを感じました。

しかし最近はWEB2.0アイコンというと、「ツヤツヤとした感じのアイコンね」と認知されてきているようなので、当サイトでも「WEB2.0アイコン」と呼ぶことにしました。

記事公開日: