Web 2.0風画像の作り方：Part 2 -sitepoint

以前、紹介したsitepointで紹介されているPixelMillのデザイナー：Corrieの、Photoshopで作るWeb 2.0風画像のチュートリアルのPart 2です。

Creating Web 2.0 Effects With Photoshop, Part 2

Part 1では、「シンプルなグラデーション」「グラデーションの背景」「ストライプの背景」「微妙に透明なレイヤー」「鏡面効果のテキスト」「ガラスのようなオブジェクト」を紹介しています。
Web 2.0風画像の作り方 -sitepoint

Part 2でエントリーされているチュートリアルは、３つです。

• アイコンの使い方
• 画像を矩形以外にレイアウト
• スターバースト(爆発した星形)の作成方法

各チュートリアルの手順は、下記の通りです。

アイコンの使い方

1. アイコンは、フリーやシェア、自作のものを使用。
2. １つ目の方法は、アイコンに鏡面効果を与える。
   参考：鏡面効果のテキストの作り方
3. ２つ目の方法は、アイコンに影を付ける。
   [レイヤースタイル]で[ドロップシャドウ]を適用。
4. アイコンを配置する場所は、グリッドに沿わないようにレイアウトするのがポイント。

画像を矩形以外にレイアウト

1. [ツールパレット]から[角丸長方形ツール]を使用して、角丸長方形を描画。
2. 角丸長方形に、[レイヤースタイル]で[ドロップシャドウを適用。
3. 角丸長方形の上に新規レイヤーを作成し、画像をペースト。
4. クリッピングマスクで、画像を角丸長方形の中に配置。
   クリッピングマスクは、レイヤーパレットで２つのレイヤーの間を[Altキー]押しながら(カーソルが変化します)、クリックします。

スターバースト(爆発した星形)の作成方法

1. スターバーストの作成。
   [ツールパレット]から[カスタムシェイプツール]を選択し、「スターバースト」を選択。
   ※CS2のデフォルトだと37番目。
2. オリジナルのスターバーストを作成。
   [ツールパレット]から[カスタムシェイプツール]を選択し、「多角形」を選択。
   「多角形オプション」を下記のように設定。
   星形：チェック
   辺のくぼみ：10%
   角数：30
3. スターバーストにも、グラデーションやドロップシャドウを適用しても効果的。
   参考：シンプルなグラデーションの作り方

Post on:2008年1月10日