Web 2.0風画像の作り方 -sitepoint

sitepointで紹介されているPixelMillのデザイナー：Corrieの、Photoshopで作るWeb 2.0風画像のチュートリアルの紹介です。
※画像は、Photoshopでなくても作成できます。

Creating Web 2.0 Effects With Photoshop, Part 1

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

• シンプルなグラデーション
• グラデーションの背景
• ストライプの背景
• 微妙に透明なレイヤー
• 鏡面効果のテキスト
• ガラスのようなオブジェクト

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

シンプルなグラデーションの作り方

1. ベースとなる色を選択。
2. [ツールパレット]から[長方形ツール]を使用して、長方形を描画。
3. [レイヤー効果] - [グラデーションオーバーレイ]を選択して、適用。
4. [グラデーションオーバーレイ]の設定。
   [描画モード]: 乗算
   [不透明度]: 40%

グラデーションの背景の作り方

1. ベースとなる色を選択。
2. [ツールパレット]から[グラデーションツール]を選択。
3. 使用するグラデーションは、「描画色から透明色に」。
4. [グラデーション]ツールを使用して、グラデーションを描画。
   [Shiftキー]を押しながら使用すると、真っ直ぐにできます。

ストライプの背景の作り方

1. [ツールパレット]から[鉛筆ツール]を選択。
2. サイズ4×4の新規ファイルを作成。
3. [鉛筆ツール]で、斜めに線を描画。
4. 作成したファイルは、[編集] - [パターンを定義]で、パターンファイルに登録。
5. 「シンプルなグラデーション」と同様の手順で作成し、[レイヤー効果] - [パターンオーバーレイ]を適用。
6. [パターンオーバーレイ]の設定。
   [描画モード]: 乗算
   [不透明度]: 30%

微妙に透明なレイヤーの作り方

1. [ツールパレット]の[選択ツール]で透明にしたい箇所を選択。
2. [レイヤーパレット]の[不透明度]で、好みの透明度を選択し適用。

鏡面効果のテキストの作り方

1. テキストを描画。
2. テキストのレイヤーをコピー。
3. [編集] - [自由変形(Ctrl+T)]で、テキストを逆さまに。
   変形する際は、上部の真ん中のハンドルを使用。
4. 「コピーした逆さまのテキストのレイヤー」を[レイヤーパレット] - [不透明度]で、透明度を60%に。
5. 「コピーした逆さまのテキストのレイヤー」を選択状態にしたまま、[レイヤーパレット]の下部にある[マスクを追加]を選択。
6. [ツールパレット]から[グラデーション]を選択し、描画色を「黒」に指定。
7. [Shift]キーを押しながら、テキストの下から上へ、グラデーションを適用。

ガラスのようなオブジェクトの作り方

1. [長方形ツール]を使用して、好みの色で作成したグラデーションを適用した長方形を描画。
2. ハイライト用の長方形を描画。
   描画色は白。グラデーションの適用は無し。
3. ハイライト用の長方形に、[レイヤーマスク]を適用し、不透明度を74%に下げる。

Post on:2007年12月30日