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

Photoshop

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

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

-

WEB2.0アイコンって?

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

-

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

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

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

-


オススメサイト

飛鳥スタジオグラフィックス
プロが教えるデジタルカメラの撮影&レタッチテクニック。
配色のコツ
色彩調和・配色技法を詳しく掲載。
色彩の知識
純色、清色、中間色、ヒュー・トーン・システム、補色など。
ページ更新日:2007/02/24

 

フォトショップ講座

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

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

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

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

-

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

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

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

-

STEP 7.
ブライトトーンの色を選択。
ブライトトーンの色を選択。

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

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

-

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

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

STEP 12.
背景レイヤーをクリック。
背景レイヤーをクリック。

-

STEP 13.
新規レイヤーを作成。
新規レイヤーを作成。

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

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

-

STEP 16.
結合されたレイヤーをダブルクリック。
結合されたレイヤーをダブルクリック。

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

STEP 18.
完成。
完成。

-

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

 
-
-