テクスチャとグラデーションで質感のある背景を作ろう

今回は、ひさびさのPhotoshopチュートリアルです。 最近では、ベタな背景や、単純な上から下へのグラデーションだけではなく、なんだかとっても質感のある背景のウェブデザインがはやりっぽいです。 今回は、テクスチャ画像とグラデーションを組み合わせて、簡単に質感のある背景をPhotoshopで作るチュートリアルをご紹介。 とっても簡単なので、是非お試しください。

1. 新規作成

適当な大きさでファイルを新規作成してください。まず最初にカラーパレットにお好きな2色を選択します。今回は、適当に#a2bb3eと#328a26と設定してみました。

2. グラデーション

グラデーションツールの円形を選択して、斜めにグラデーションをかけてみました。

3. テクスチャ

お好きなテクスチャ画像を用意します。

4. テクスチャをドラッグ

用意したテクスチャ画像を先ほど描いたグラデーションの上にドラッグ。2つのレイヤーになります。

5. 描画モードの変更

テクスチャのレイヤーの描画モードをオーバーレイに変更します。

6. 不透明度の変更

テクスチャのレイヤーの不透明度を適当な数値に変更。

7. 完成!

簡単な作業でなかなか質感のある背景が出来そうです。

グラデーションの形状や、色見、用意するテクスチャ次第でいろいろ使えそうですね。

Create a Spectacular Grass Text Effect in Photoshop

極めれば、以下のようなとってもきれいな背景まで作れちゃいます。上に乗っかっている芝生のテキストも、とってもいい感じですね!

Create a Spectacular Grass Text Effect in Photoshop

今回は、このチュートリアルで使えそうな、テクスチャを配布されているサイトもまとめてみました。 以下のサイトから、いろいろなテクスチャ画像がダウンロード出来ます。

Free Textures from TextureKing

Free Textures from TextureKing

CG Textures

CG Textures

Texture Warehouse

Texture Warehouse

Grunge Textures

Grunge Textures

luGher Texture

luGher Texture

Amazing Textures

Amazing Textures

TextureLove

TextureLove

texturez.com

texturez.com

Urban Dirty

Urban Dirty

2Textured

2Textured

Image * After

Image * After

StockTextures.com

StockTextures.com

textures.pedramk.com

textures.pedramk.com

textures.forrest.cz

textures.forrest.cz

. … t. Ex…t.U .ra. .. …

. ... t. Ex...t.U .ra. .. ...

local.wasp.uwa.edu.au

local.wasp.uwa.edu.au

関連記事

3件のコメント

  1. ピンバック: websocial.jp
  2. ピンバック: せいけんの部屋

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です