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

 

フォトショップ講座

STEP 1.
「ファイル」メニューの「新規」をクリック。
「ファイル」メニューの「新規」をクリック。

STEP 2.
例では 800x600 カラー:RGB で作成。
例では 800x600 カラー:RGB で作成。

STEP 3.
元になる画像を作成する為、「カスタムシェイプツール」を選択。
元になる画像を作成する為、「カスタムシェイプツール」を選択。

-

STEP 4.
シェイプを増やすため、図のように「すべて」を選択し、置き換えする。
シェイプを増やすため、図のように「すべて」を選択し、置き換えする。

STEP 5.
例では「太陰大極図」のシェイプを選択した。
例では「太陰大極図」のシェイプを選択した。

STEP 6.
シェイプを描く。
シェイプを描く。

-

STEP 7.
色を変更する為、「レイヤーサムネイル」をダブルクリック。
色を変更する為、「レイヤーサムネイル」をダブルクリック。

STEP 8.
ディープトーンの色に変更する。
ディープトーンの色に変更する。

STEP 9.
レイヤーを右クリックして「レイヤーをラスタライズ」する。
レイヤーを右クリックして「レイヤーをラスタライズ」する。

-

STEP 10.
「塗りつぶしツール」を選択。
「塗りつぶしツール」を選択。

STEP 11.
塗りつぶしの色を選択。(選択する色は補色が好ましい)。
塗りつぶしの色を選択。(選択する色は補色が好ましい)。

STEP 12.
透明部分を塗りつぶす。
透明部分を塗りつぶす。

-

STEP 13.
完成。
完成。

-

準備ができたら、WEB2.0風のアイコンを作成する

 
-
-