Web2.0風のギザギザロゴを作るPhotoshopチュートリアル

Web2.0風のギザギザロゴ

今年(2007年)に流行ったデザインの1つであるギザギザロゴを作るためのPhotoshopチュートリアルです。

以下、スクリーンショット付きの手順。使用したPhotoshopのバージョンはCS2。

詳細手順

1.適当なサイズで新規作成。大きいほどやりやすいです。
適当なサイズで新規作成

2.多角形ツールを選択します。
多角形ツールを選択

3.オプションをクリックして以下のように設定。角数は任意。
このように設定

4.カラーピッカーの前面の色を適当な色に設定(色は任意)。ここでは「0dbfec」にしています。
ここでは「#0dbfec」に色を設定

5.多角形ツールでギザギザな形を描きます。
ギザギザな形

6.描いた図形にレイヤー効果を設定します。レイヤーパレットの「シェイプ1」レイヤーを右クリック→レイヤー効果。
描いた図形にレイヤー効果を設定

7.ドロップシャドウを以下のように設定。
ドロップシャドウの設定

8.境界線を以下のように設定。
境界線の設定

枠と影がうっすらとつきます。
枠と影がうっすらとつく

9.グラデーションツールを選択し、「描画色から透明に」のタイプにします。描画色は白(ffffff)にしておきます。(この設定はあとで使います。)
描画色から透明に

10.メニューの「選択範囲」→「色域指定」を選択。
「選択範囲」→「色域指定」

11.以下のように設定します。ギザギザの枠部分が選択状態になります。(ちなみにこの色域指定ですが、白部分が選択範囲部分になります。黒と白の部分は黒の部分をクリックすると黒と白の範囲を反転させることができます。)
白の部分が選択範囲になる

12.メニューの「選択範囲」→「選択範囲を変更」→「縮小」を選択。
 「選択範囲」→「選択範囲を変更」→「縮小」

13.以下のように設定。だいたい3~5くらいが無難。
3くらいがよい

ギザギザの枠から若干内側に選択範囲が狭まります。(下画像)
選択範囲が狭くなる

14.メニューの「レイヤー」→「下のレイヤーと結合」を選択。これでグラデーションをかけられるようになります。
下のレイヤーと結合

15.選択状態のまま、グラデーションツールを使って、左上から中心部分あたりに向かってグラデーションを1~3回程度かけます。立体感を出すためなので、うまく調節してください。左上から中心付近に向かってグラデーション 

グラデーションをかけるとこのようになります。(下画像)
ちょっと立体的になる

ここまででギザギザロゴの部分は完成です。あとは適当に文字等を入力します。

16.適当にテキストを入力。ここでは「Impact」フォントを使用しています。
テキストを入力

17.このままだといまいちなので、適当にレイヤー効果をかけます。今回かけたレイヤー効果は以下のような感じです。
テキストにドロップシャドウを設定

テキストに境界線を設定

18.あとはメニューの「編集」→「変形」→「回転」でテキストを斜めにすれば完成。
適当に回転させて完成

別の色で適当に作ったもの

sample01sample02
sample03sample04

その他のPhotoshopチュートリアル

▼スポンサードリンク

Posted at 2007年12月29日 | 記事URL | Photoshop | Trackback(0) | Comment(0) | Top↑
1つ後の記事:【今更】UXGA液晶ディスプレイ『CLM20D1SB』について【感想】
1つ前の記事:初音ミクと鏡音リンのカラーパレットを用いたミニ名刺














管理者にだけ表示を許可する

トラックバックURL
→http://smallwebmemo.blog113.fc2.com/tb.php/182-26733bcf
この記事にトラックバックする(FC2ブログユーザー)
Home