ありきたりのテンプレートではなく、どうせ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を使うだけで、一気にそれっぽい画像に仕上がった。
「Ultimate Web 2.0 Gradients」で作成したサンプル
