このページの本文へ

Web2.0風はもう飽きた!

Photoshopブラシで質感のあるWebサイトへ

2008年09月09日 23時34分更新

小橋川誠己/ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

 昨今のいかにもWeb2.0なWebデザインにはそろそろ食傷気味。他のサイトとは違ったデザインにリニューアルしたい!  そんなとき、簡単に使えるのがPhotoshopのブラシを使う方法だ。Photoshopのブラシを使うと、いくらでも好きなように画像を加工できる。 昔なら自分が作った画像をもとに自分用ブラシを作ってみたりしたものだが、今ではネット上で大量のブラシが配布されているのでその苦労もない。

 オススメは、布や紙といった質感をイメージさせるアナログ風のブラシ。パステルカラーのグラデーションを多用したWeb2.0的なデザインの対極にあるアナログ風ブラシを使えば、サイトのヘッダーやフッター、サイドメニューのデザインを変更するだけでもサイト全体の雰囲気は一変する。ネット上に公開されている膨大なブラシの中から、オススメのアナログ風ブラシをいくつか紹介しよう。


Fabric Texture Brushes

Fabric Texture Brushes

 トップバッターは、著名なPhotoshop素材配布サイト「Brusheezy」から。「Fabric Texture Brushes」は、その名のとおり、布地をモチーフにした11種類のブラシをまとめたもので、Photoshop CS3に対応している。

 サイトからブラシファイル(abr形式)をダウンロードしたら、さっそくPhotoshopにインストールして使ってみよう(以下、Windows版のPhotoshop CS3の画面で説明)。

 まず、Photoshopのツールボックスの中から、ブラシツールをクリック。右上の「ブラシパレットの切り替え」のアイコンか、もしくは[ウィンドウ][ブラシ]でパレットを表示する。

Photoshop CS3

 次に、パレット右上にある▼の部分をクリックして[ブラシファイルの読み込み]を表示させ、Webサイトからダウンロードしたブラシファイル「Fabric_Texture_Brush_Set_by_fudgegraphics.abr」を指定する。

Photoshop CS3

 これで準備は完了だ。パレットの中にFabric Texture Brushesが追加され、通常のブラシと同じように使えるようになった。

Photoshop CS3

 Fabric Texture Brushesは解像度がかなり高いので(2500ピクセルもある)、背景パターンやロゴ周り、バナーなどのデザインに使うのがいいだろう。試しにジーンズの布地のブラシに文字を載せてみたのが下の画像。ブラシなのでテクスチャの色を変えたり、背景色を変えるのも簡単だ。写真画像や他のテクスチャ画像と重ねてみてもおもしろいだろう。

Photoshop CS3
Fabric Texture Brushesに収録されているブラシの1つに文字を載せてみた。わずか5分でそれっぽい画像ができた
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く