テクスチャとグラデーションで質感のある背景を作ろう
今回は、ひさびさのPhotoshopチュートリアルです。
最近では、ベタな背景や、単純な上から下へのグラデーションだけではなく、なんだかとっても質感のある背景のウェブデザインがはやりっぽいです。
今回は、テクスチャ画像とグラデーションを組み合わせて、簡単に質感のある背景をPhotoshopで作るチュートリアルをご紹介。
とっても簡単なので、是非お試しください。
1. 新規作成
適当な大きさでファイルを新規作成してください。まず最初にカラーパレットにお好きな２色を選択します。今回は、適当に#a2bb3eと#328a26と設定してみました。
2. グラデーション
グラデーションツールの円形を選択して、斜めにグラデーションをかけてみました。
3. テクスチャ
お好きなテクスチャ画像を用意します。
4. テクスチャをドラッグ
用意したテクスチャ画像を先ほど描いたグラデーションの上にドラッグ。２つのレイヤーになります。
5. 描画モードの変更
テクスチャのレイヤーの描画モードをオーバーレイに変更します。
6. 不透明度の変更
テクスチャのレイヤーの不透明度を適当な数値に変更。
7. 完成！
簡単な作業でなかなか質感のある背景が出来そうです。
グラデーションの形状や、色見、用意するテクスチャ次第でいろいろ使えそうですね。
Create a Spectacular Grass Text Effect in Photoshop
極めれば、以下のようなとってもきれいな背景まで作れちゃいます。上に乗っかっている芝生のテキストも、とってもいい感じですね！
今回は、このチュートリアルで使えそうな、テクスチャを配布されているサイトもまとめてみました。
以下のサイトから、いろいろなテクスチャ画像がダウンロード出来ます。
Free Textures from TextureKing
CG Textures
Texture Warehouse
Grunge Textures
luGher Texture
Amazing Textures
TextureLove
texturez.com
Urban Dirty
2Textured
Image * After
StockTextures.com
textures.pedramk.com
textures.forrest.cz
. … t. Ex…t.U .ra. .. …
local.wasp.uwa.edu.au
|
|
|
6月 4th, 2008 at 1:59 PM
[...] テクスチャとグラデーションで質感のある背景を作ろう – DesignWalker (tags: webdesign) [...]
6月 6th, 2008 at 2:10 AM
テクスチャとグラデーションで質感のある背景を作ろう – DesignWalker…
簡単かつ、味のある背景が作れます。…
6月 11th, 2008 at 9:57 PM
[Paint.NET]「テクスチャとグラデーションで質感のある背景を作ろう」をPaint.NETでやってみた…
テクスチャとグラデーションで質感のある背景を作ろう – DesignWalker ↑これをフリーソフトのPaint.NETでもやってみました。 （１）適当なサイズで新規作成（今回はテクスチャのサイズに合わせて2005px×3000pxにしました） （２）プライマリ色に#328a26、セカンダリ色に#a…