PhotoshopでWeb2.0なロゴマークを作る方法

記事内にプロモーションを含む場合があります。

web20logops00.png
Photoshopで、Web2.0系サイトでよくあるギザギザしたロゴマークを制作する方法がWeb 2.0 Badge Photoshop Tutorialに載っていたので作ってみたところ、簡単だったので日本語で分かり易く解説します。

目次

1.多角形ツールでマークを作る

web20logops01.png
新規ファイルを開いて、ツールバーから「多角形ツール」を選択。

web20logops02.png
多角形オプションで星形を選択。
辺の数はお好みで。

web20logops04.png
こんな感じになります。

2.枠と影を付ける

web20logops05.png
レイヤー > レイヤーのスタイル > レイヤー効果を選択

web20logops06.png
境界線をチェック、カラーは#ffffff、サイズは5pxとか

web20logops07.png
ドロップシャドウをチェック、画像を参考に設定。

web20logops08.png
枠と影がつきました。

3.グラデーションの設定

web20logops09.png
ツールバーから「グラデーションツール」を選択。
円形グラデーションにチェックして、グラデーションエディタを出す。

web20logops10.webp
白から透明になるように設定します。

4.グラデーションをつける

web20logops11.webp
選択範囲 > 色域指定からウインドウを出して

web20logops12.webp
画像のようにしてOK。
ギザギザマークに選択範囲がつきます。

web20logops13.webp
選択範囲 > 選択範囲を変更 > 縮小
これで、選択範囲を3pxほど小さくします。

web20logops14.webp
レイヤー > 下のレイヤーと結合
これでグラデーションツールが使えるようになりました。

web20logops15.webp
グラデーションツールを外側から内側へ何度か繰り返して、いい感じに立体感を出します。

web20logops16.webp
こんな感じ。

5. 文字を入れる

web20logops17.webp
そのままフォントで文字を入れた状態。
このままでもいいですが、斜めにしたりしたい。

web20logops18.webp
編集 > 変形 > 回転

web20logops19.webp
これで斜めになりました。

web20logops20.webp
完成です。
ドロップシャドウや枠をつけたらなかなかいい感じに。