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

今回は、ひさびさの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

デザインblogランキング

コメント 3 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



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

  1. links for 2008-06-04 « 個人的な雑記 Says:

    […] テクスチャとグラデーションで質感のある背景を作ろう – DesignWalker (tags: webdesign) […]

  2. websocial.jp Says:

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

    簡単かつ、味のある背景が作れます。…

  3. せいけんの部屋 Says:

    [Paint.NET]「テクスチャとグラデーションで質感のある背景を作ろう」をPaint.NETでやってみた…

    テクスチャとグラデーションで質感のある背景を作ろう – DesignWalker ↑これをフリーソフトのPaint.NETでもやってみました。 (1)適当なサイズで新規作成(今回はテクスチャのサイズに合わせて2005px×3000pxにしました) (2)プライマリ色に#328a26、セカンダリ色に#a…

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ