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

WEB2.0風のアイコンに光沢を加える

フォトショップの技

WEB2.0風のアイコンを作成するのステップでアイコンが作成されていることを前提とします。

STEP 1.
操作画面の画像
「自動選択ツール」をクリック。

STEP 2.
操作画面の画像
オブジェクトの周りを選択する。

STEP 3.
操作画面の画像
メニューの「選択範囲」から「選択範囲を反転」。

-

STEP 4.
操作画面の画像
メニューの「選択範囲」→「選択範囲を変更」→「縮小」をクリック。

STEP 5.
操作画面の画像
「縮小量」を調整して「OK」をクリック。

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

-

STEP 7.
操作画面の画像
「クイックマスクモードで編集」を選択。

STEP 8.
操作画面の画像
「長方形選択ツール」をクリック。

STEP 9.
操作画面の画像
オブジェクトの下方、3/5 程度を長方形で囲む。

-

STEP 10.
操作画面の画像
「塗りつぶしツール」を選択。

STEP 11.
操作画面の画像
選択範囲を塗りつぶす。

STEP 12.
操作画面の画像
「画像描画モードで編集」をクリック。

-

STEP 13.
操作画面の画像
「グラデーションツール」を選択。

STEP 14.
操作画面の画像
グラデーションバーをクリック。

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

-

STEP 16.
操作画面の画像
選択範囲内にグラデーションを描く。

STEP 17.
操作画面の画像
「長方形選択ツール」をクリック。

STEP 18.
操作画面の画像
選択範囲の上で右クリック「選択範囲を変形」。

-

STEP 19.
操作画面の画像
選択範囲を180°回転させる。

STEP 20.
操作画面の画像
「グラデーションツール」を選択。

STEP 21.
操作画面の画像
グラデーションのタイプを「逆方向」にする。

-

STEP 22.
操作画面の画像
選択範囲内にグラデーションを描く。

STEP 23.
操作画面の画像
メニュー「選択範囲」→「選択を解除」。

STEP 24.
操作画面の画像
グラデーションレイヤーの不透明度を50%前後に設定。

-

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

-
▲ページ先頭に戻る

Photoshop

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

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

WEB2.0アイコンって?

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

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

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

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

記事公開日: