Webデザインにすぐ使えるPhotoshopグラデ339選

2008年10月07日 23時46分更新

文● 小橋川誠己／企画報道編集部

　ありきたりのテンプレートではなく、どうせWebサイトを作るならオリジナルのデザインにしたい――そんなときに悩むのが、“色”ではないだろうか。特にヘッダーやフッター、ナビゲーションバーなど、サイトのイメージを決める重要な要素の色使いは、サイト制作者の腕の見せ所だ。

　「でも、どうもセンスには自信がないし……」。それなら、Photoshopのグラデーションライブラリを使ってみよう。Photoshopには標準でもかなりの種類のグラデーションが用意されているが、ネット上ではさらに膨大な数のライブラリが配布されている。グラデーションライブラリを使えばあっという間にイメージどおりの色の組み合わせが手に入るし、うまく活用できればサイト全体の完成度もぐっと上がる。

　今回は、単純に「上から下に適用するだけ」でも十分カッコいい、シンプルで“使える”グラデーションライブラリをいくつかピックアップしてみた。なお、実際の利用にあたっては、各サイトの利用条件を確認してほしい。

「Ultimate Web 2.0 Gradients」

　まずは、いまどきのサイトをデザインするのに使える「Ultimate Web 2.0 Gradients」から。よく見かけるWeb2.0風のパステルカラーの配色パターンが揃っているこのライブラリは、先週紹介したロゴ画像作成の記事でも使用したものだ（関連記事）。

　さっそく使ってみよう。はじめに、作者Navdeepさんのブログ「Deziner Folio」からファイルをダウンロードして解凍しておく。使用するのは、中に含まれている「GRD」という拡張子のファイルだ。

　次に、Photoshopを起動し、グラデーションツールをクリックしよう。グラデーション「グラデーションエディタダイアログボックス」を表示させ、[読み込み]をクリックする。あとは、先ほど解凍しておいたGRDファイルを指定すれば準備は完了だ。


グラデーションツールから、グラデーションエディタダイアログを表示させる


続いて[読み込み]でGRDファイルを指定

　読み込んだグラデーションは、グラデーションツールで塗りつぶしてもいいし、「レイヤースタイルダイアログボックス」→「グラデーションオーバーレイ」でも使える。ごくシンプルに文字を載せてみたのが下の画像だ。Ultimate Web 2.0　Gradientsを使うだけで、一気にそれっぽい画像に仕上がった。